diff --git a/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx b/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx index f19cbe3b98..33278cea56 100644 --- a/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx +++ b/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx @@ -5,7 +5,11 @@ interface IProps { children: React.ReactNode; } -const flagValues = {[Flag.IsAnalyticsPageEnabled]: true, [Flag.IsAgentDataStoreEnabled]: false}; +const flagValues = { + [Flag.IsAnalyticsPageEnabled]: true, + [Flag.IsAgentDataStoreEnabled]: false, + [Flag.IsLocalModeEnabled]: false, +}; const getComponent = (id: string, fallback: React.ComponentType) => fallback; const getFlag = (flag: Flag) => flagValues[flag]; diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts index 194d3e8fe7..afd73427f3 100644 --- a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts +++ b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, {css} from 'styled-components'; import {Typography} from 'antd'; import {CheckCircleOutlined} from '@ant-design/icons'; @@ -34,13 +34,20 @@ export const DataStoreListContainer = styled.div` flex-direction: column; `; -export const DataStoreItemContainer = styled.div<{$isSelected: boolean}>` +export const DataStoreItemContainer = styled.div<{$isDisabled: boolean; $isSelected: boolean}>` display: flex; align-items: center; gap: 10px; padding: 12px 22px; cursor: pointer; border-left: ${({theme, $isSelected}) => $isSelected && `2px solid ${theme.color.primary}`}; + + ${({$isDisabled}) => + $isDisabled && + css` + cursor: not-allowed; + opacity: 0.5; + `} `; export const Circle = styled.div` diff --git a/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx b/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx index 8954feea66..63e357f8ca 100644 --- a/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx +++ b/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx @@ -18,6 +18,7 @@ const supportedDataStoreList = Object.values(SupportedDataStores); const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.JAEGER}: IProps) => { const {getFlag} = useCustomization(); + const isLocalModeEnabled = getFlag(Flag.IsLocalModeEnabled); const { color: {text, primary}, } = useTheme(); @@ -33,10 +34,32 @@ const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.J const isSelected = value === dataStore; const isConfigured = configuredDataStoreType === dataStore && dataStoreConfig.mode === ConfigMode.READY; + const isDisabled = isLocalModeEnabled && dataStore !== SupportedDataStores.Agent; return ( - onChange(dataStore)}> + (isDisabled ? noop() : onChange(dataStore))} + > - {SupportedDataStoresToName[dataStore]} + + {isDisabled ? ( + + In localMode only the Agent data store can be used.
If you want to connect to a different + data store
please create a new environment + + } + placement="right" + > + {SupportedDataStoresToName[dataStore]} +
+ ) : ( + {SupportedDataStoresToName[dataStore]} + )} + {isConfigured && ( diff --git a/web/src/providers/Customization/Customization.provider.tsx b/web/src/providers/Customization/Customization.provider.tsx index 2aa5d5437a..4da2c61539 100644 --- a/web/src/providers/Customization/Customization.provider.tsx +++ b/web/src/providers/Customization/Customization.provider.tsx @@ -9,6 +9,7 @@ export enum Operation { export enum Flag { IsAnalyticsPageEnabled = 'isAnalyticsPageEnabled', IsAgentDataStoreEnabled = 'isAgentDataStoreEnabled', + IsLocalModeEnabled = 'isLocalModeEnabled', } interface IContext {