diff --git a/web/src/components/AnalyzerResult/AnalyzerResult.styled.ts b/web/src/components/AnalyzerResult/AnalyzerResult.styled.ts index 979d1f69c1..59f095103e 100644 --- a/web/src/components/AnalyzerResult/AnalyzerResult.styled.ts +++ b/web/src/components/AnalyzerResult/AnalyzerResult.styled.ts @@ -50,7 +50,7 @@ export const RuleContainer = styled.div` border-bottom: ${({theme}) => `1px dashed ${theme.color.borderLight}`}; padding-bottom: 16px; margin-bottom: 16px; - margin-left: 32px; + margin-left: 43px; `; export const RuleHeader = styled.div` diff --git a/web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.styled.ts b/web/src/components/DocsBanner/DocsBanner.styled.ts similarity index 86% rename from web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.styled.ts rename to web/src/components/DocsBanner/DocsBanner.styled.ts index 27f0a6c7ca..d1820112d7 100644 --- a/web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.styled.ts +++ b/web/src/components/DocsBanner/DocsBanner.styled.ts @@ -1,7 +1,7 @@ import { Typography } from 'antd'; import styled from 'styled-components'; -export const DataStoreDocsBannerContainer = styled.div` +export const DocsBannerContainer = styled.div` display: flex; gap: 8px; align-items: center; diff --git a/web/src/components/DocsBanner/DocsBanner.tsx b/web/src/components/DocsBanner/DocsBanner.tsx new file mode 100644 index 0000000000..5c7e786052 --- /dev/null +++ b/web/src/components/DocsBanner/DocsBanner.tsx @@ -0,0 +1,13 @@ +import {ReadOutlined} from '@ant-design/icons'; +import * as S from './DocsBanner.styled'; + +const DocsBanner: React.FC = ({children}) => { + return ( + + + {children} + + ); +}; + +export default DocsBanner; diff --git a/web/src/components/DocsBanner/index.ts b/web/src/components/DocsBanner/index.ts new file mode 100644 index 0000000000..bb0cd26b27 --- /dev/null +++ b/web/src/components/DocsBanner/index.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line no-restricted-exports +export {default} from './DocsBanner'; diff --git a/web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.tsx b/web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.tsx index 5e3993a376..6d6b34851a 100644 --- a/web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.tsx +++ b/web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.tsx @@ -1,7 +1,6 @@ -import {ReadOutlined} from '@ant-design/icons'; import {SupportedDataStoresToDocsLink, SupportedDataStoresToName} from 'constants/DataStore.constants'; import {SupportedDataStores} from 'types/DataStore.types'; -import * as S from './DataStoreDocsBanner.styled'; +import DocsBanner from 'components/DocsBanner/DocsBanner'; interface IProps { dataStoreType: SupportedDataStores; @@ -9,15 +8,12 @@ interface IProps { const DataStoreDocsBanner = ({dataStoreType}: IProps) => { return ( - - - - Need more information about setting up {SupportedDataStoresToName[dataStoreType]}?{' '} - - Go to our docs - - - + + Need more information about setting up {SupportedDataStoresToName[dataStoreType]}?{' '} + + Go to our docs + + ); }; diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts index 8cc7902b6c..dfc940b94e 100644 --- a/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts +++ b/web/src/components/Settings/DataStoreForm/DataStoreForm.styled.ts @@ -78,13 +78,6 @@ export const Title = styled(Typography.Title)` } `; -export const Explanation = styled(Typography.Text)` - && { - color: ${({theme}) => theme.color.textSecondary}; - font-size: ${({theme}) => theme.size.md}; - } -`; - export const Description = styled(Typography.Text)` && { color: ${({theme}) => theme.color.textSecondary}; diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx b/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx index 203be9b9eb..9783f74dfa 100644 --- a/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx +++ b/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx @@ -2,9 +2,8 @@ import {Button, Form} from 'antd'; import {useCallback, useEffect, useMemo} from 'react'; import DataStoreService from 'services/DataStore.service'; import {TDraftDataStore, TDataStoreForm, SupportedDataStores} from 'types/DataStore.types'; -import {SupportedDataStoresToExplanation, SupportedDataStoresToName} from 'constants/DataStore.constants'; +import {SupportedDataStoresToName} from 'constants/DataStore.constants'; import DataStoreConfig from 'models/DataStoreConfig.model'; -import DataStoreDocsBanner from '../DataStoreDocsBanner/DataStoreDocsBanner'; import DataStoreComponentFactory from '../DataStorePlugin/DataStoreComponentFactory'; import * as S from './DataStoreForm.styled'; import DataStoreSelectionInput from './DataStoreSelectionInput'; @@ -36,11 +35,17 @@ const DataStoreForm = ({ isLoading, isFormValid, }: IProps) => { - const initialValues = useMemo(() => DataStoreService.getInitialValues(dataStoreConfig), [dataStoreConfig]); + const configuredDataStoreType = dataStoreConfig.defaultDataStore.type as SupportedDataStores; + const initialValues = useMemo( + () => DataStoreService.getInitialValues(dataStoreConfig, configuredDataStoreType), + [configuredDataStoreType, dataStoreConfig] + ); const dataStoreType = Form.useWatch('dataStoreType', form); useEffect(() => { - form.setFieldsValue({dataStore: {name: '', type: SupportedDataStores.JAEGER, ...initialValues.dataStore}}); + form.setFieldsValue({ + dataStore: {name: '', type: SupportedDataStores.JAEGER, ...initialValues.dataStore}, + }); }, [dataStoreType, form, initialValues.dataStore]); const onValidation = useCallback( @@ -50,7 +55,6 @@ const DataStoreForm = ({ }, [onIsFormValid] ); - const explanation = SupportedDataStoresToExplanation[dataStoreType!]; return ( @@ -72,12 +76,6 @@ const DataStoreForm = ({ Tracetest needs configuration information to be able to retrieve your trace from your distributed tracing solution. Select your tracing data store and enter the configuration info. - {explanation ? ( - {explanation} - ) : ( - Provide the connection info for {SupportedDataStoresToName[dataStoreType!]} - )} - {dataStoreType && } @@ -93,7 +91,7 @@ const DataStoreForm = ({ Test Connection diff --git a/web/src/components/Settings/DataStorePlugin/forms/AwsXRay/AwsXRay.tsx b/web/src/components/Settings/DataStorePlugin/forms/AwsXRay/AwsXRay.tsx index 9941213729..72a085a0e3 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/AwsXRay/AwsXRay.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/AwsXRay/AwsXRay.tsx @@ -1,5 +1,8 @@ import {Checkbox, Col, Form, Input, Row} from 'antd'; import {SupportedDataStores, TDraftDataStore} from 'types/DataStore.types'; +import DataStoreDocsBanner from '../../../DataStoreDocsBanner/DataStoreDocsBanner'; +import * as S from '../../DataStorePluginForm.styled'; +import { SupportedDataStoresToName } from '../../../../../constants/DataStore.constants'; const AwsXRay = () => { const baseName = ['dataStore', SupportedDataStores.AWSXRay]; @@ -8,6 +11,8 @@ const AwsXRay = () => { return ( <> + Provide the connection info for {SupportedDataStoresToName[SupportedDataStores.AWSXRay]} + diff --git a/web/src/components/Settings/DataStorePlugin/forms/AzureAppInsights/AzureAppInsights.tsx b/web/src/components/Settings/DataStorePlugin/forms/AzureAppInsights/AzureAppInsights.tsx index a45d9e9b90..dabb670c8a 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/AzureAppInsights/AzureAppInsights.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/AzureAppInsights/AzureAppInsights.tsx @@ -1,8 +1,9 @@ import {Checkbox, Col, Form, Input, Radio, Row} from 'antd'; import {ConnectionTypes, SupportedDataStores, TDraftDataStore} from 'types/DataStore.types'; -import * as S from 'components/Settings/DataStoreForm/DataStoreForm.styled'; -import {collectorExplanation} from 'constants/DataStore.constants'; +import {SupportedDataStoresToName} from 'constants/DataStore.constants'; import OpenTelemetryCollector from '../OpenTelemetryCollector/OpenTelemetryCollector'; +import * as S from '../../DataStorePluginForm.styled'; +import DataStoreDocsBanner from '../../../DataStoreDocsBanner/DataStoreDocsBanner'; const AzureAppInsights = () => { const baseName = ['dataStore', SupportedDataStores.AzureAppInsights]; @@ -23,8 +24,12 @@ const AzureAppInsights = () => { - {(connectionType === ConnectionTypes.Direct && ( + {(connectionType === ConnectionTypes.Collector && ) || ( <> + + Provide the connection info for {SupportedDataStoresToName[SupportedDataStores.AzureAppInsights]} + + { - )) || ( - <> - - - {collectorExplanation} - - - - - - - - - )} ); diff --git a/web/src/components/Settings/DataStorePlugin/forms/BaseClient/BaseClient.tsx b/web/src/components/Settings/DataStorePlugin/forms/BaseClient/BaseClient.tsx index 08457da40d..1708ca3f12 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/BaseClient/BaseClient.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/BaseClient/BaseClient.tsx @@ -1,5 +1,5 @@ import {Col, Form, Radio, Row} from 'antd'; -import {SupportedClientTypes, TDraftDataStore} from 'types/DataStore.types'; +import {SupportedClientTypes, SupportedDataStores, TDraftDataStore} from 'types/DataStore.types'; import GrpcClient from '../GrpcClient'; import HttpClient from '../HttpClient'; @@ -10,7 +10,7 @@ const FieldsFormMap = { const BaseClient = () => { const form = Form.useFormInstance(); - const dataStoreType = form.getFieldValue('dataStoreType'); + const dataStoreType = form.getFieldValue('dataStoreType') as SupportedDataStores; const baseName = ['dataStore', dataStoreType]; const type = (Form.useWatch([...baseName, 'type'], form) || SupportedClientTypes.GRPC) as SupportedClientTypes; const Component = FieldsFormMap[type]; diff --git a/web/src/components/Settings/DataStorePlugin/forms/ElasticSearch/ElasticSearch.tsx b/web/src/components/Settings/DataStorePlugin/forms/ElasticSearch/ElasticSearch.tsx index c751c1310c..bd400193d4 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/ElasticSearch/ElasticSearch.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/ElasticSearch/ElasticSearch.tsx @@ -1,10 +1,11 @@ import {Checkbox, Col, Form, Input, Row} from 'antd'; import RequestDetailsFileInput from 'components/CreateTestPlugins/Grpc/steps/RequestDetails/RequestDetailsFileInput'; -import {SupportedDataStoresToDefaultEndpoint} from 'constants/DataStore.constants'; +import {SupportedDataStoresToDefaultEndpoint, SupportedDataStoresToName} from 'constants/DataStore.constants'; import {SupportedDataStores, TDraftDataStore} from 'types/DataStore.types'; import * as S from '../../DataStorePluginForm.styled'; import AddressesList from './AddressesList'; +import DataStoreDocsBanner from '../../../DataStoreDocsBanner/DataStoreDocsBanner'; const OpenSearch = () => { const form = Form.useFormInstance(); @@ -14,6 +15,8 @@ const OpenSearch = () => { return ( <> + Provide the connection info for {SupportedDataStoresToName[dataStoreType]} + { return ( <> + Provide the connection info for {SupportedDataStoresToName[dataStoreType]} + { const form = Form.useFormInstance(); - const dataStoreType = form.getFieldValue('dataStoreType'); + const dataStoreType = form.getFieldValue('dataStoreType') as SupportedDataStores; const baseName = ['dataStore', dataStoreType, 'http']; const insecureValue = Form.useWatch([...baseName, 'tls', 'insecure'], form) ?? true; return ( <> + Provide the connection info for {SupportedDataStoresToName[dataStoreType]} + diff --git a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx new file mode 100644 index 0000000000..315da6c375 --- /dev/null +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx @@ -0,0 +1,44 @@ +import {Form} from 'antd'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import {arduinoLight} from 'react-syntax-highlighter/dist/cjs/styles/hljs'; +import useCopy from 'hooks/useCopy'; +import {CollectorConfigMap} from 'constants/CollectorConfig.constants'; +import {TCollectorDataStores, TDraftDataStore} from 'types/DataStore.types'; +import * as S from '../../DataStorePluginForm.styled'; +import * as OtelCollectorStyles from './OpenTelemetryCollector.styled'; +import DataStoreDocsBanner from '../../../DataStoreDocsBanner/DataStoreDocsBanner'; + +const Configuration = () => { + const copy = useCopy(); + const form = Form.useFormInstance(); + const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores; + const example = CollectorConfigMap[dataStoreType!]; + + return ( + <> + + OpenTelemetry Collector Configuration + + The OpenTelemetry Collector configuration below is a sample. Your config file layout should look the same. + Make sure to use your own API keys or tokens as explained. Copy the config sample below, paste it into your + own OpenTelemetry Collector config and apply it. + + + + + + copy(example)}> + + + + {example} + + + + + + + ); +}; + +export default Configuration; diff --git a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx new file mode 100644 index 0000000000..dfaaede286 --- /dev/null +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx @@ -0,0 +1,40 @@ +import {Form, Switch} from 'antd'; +import DocsBanner from 'components/DocsBanner/DocsBanner'; +import {INGESTOR_ENDPOINT_URL} from 'constants/Common.constants'; +import {TCollectorDataStores, TDraftDataStore} from 'types/DataStore.types'; +import * as S from './OpenTelemetryCollector.styled'; + +const Ingestor = () => { + const form = Form.useFormInstance(); + const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores; + const baseName = ['dataStore', dataStoreType]; + + return ( + + + Tracetest easily integrates with any distributed tracing solution via the OpenTelemetry Collector. It allows + your current tracing system to send only Tracetest spans while the rest go to your chosen backend. + + Ingestor Endpoint + + Tracetest exposes trace ingestion endpoints on ports 4317 for gRPC and 4318 for HTTP. Turn on the Tracetest + ingestion endpoint to start sending traces. Use the Tracetest Server’s hostname and port to connect.For example, + with Docker use tracetest:4317 for gRPC. + + + + + + Enable Tracetest ingestion endpoint + + + Need more information about setting up ingestion endpoint?{' '} + + Go to our docs + + + + ); +}; + +export default Ingestor; diff --git a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.styled.ts b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.styled.ts index 6088e4bc3c..dc9ba13890 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.styled.ts +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.styled.ts @@ -1,13 +1,14 @@ import {CopyOutlined} from '@ant-design/icons'; -import {Modal} from 'antd'; +import {Modal, Typography} from 'antd'; import styled from 'styled-components'; export const CodeContainer = styled.div` position: relative; border: ${({theme}) => `1px solid ${theme.color.border}`}; - max-height: 370px; - width: 600px; + max-height: 215px; + width: 470px; overflow-y: scroll; + margin-bottom: 18px; pre { margin: 0; @@ -39,3 +40,25 @@ export const CopyIconContainer = styled.div` export const SubtitleContainer = styled.div` margin-bottom: 8px; `; + +export const Container = styled.div``; + +export const Title = styled(Typography.Title)` + && { + font-size: ${({theme}) => theme.size.md}; + } +`; + +export const Description = styled(Typography.Paragraph)` + && { + color: ${({theme}) => theme.color.textSecondary}; + font-size: ${({theme}) => theme.size.md}; + } +`; + +export const SwitchContainer = styled.div` + align-items: center; + display: flex; + gap: 8px; + margin-bottom: 18px; +`; diff --git a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx index 792f4303ae..3b3b6c1ca2 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx @@ -1,34 +1,21 @@ -import {Form} from 'antd'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import {arduinoLight} from 'react-syntax-highlighter/dist/cjs/styles/hljs'; -import {TCollectorDataStores, TDraftDataStore} from 'types/DataStore.types'; -import {CollectorConfigMap} from 'constants/CollectorConfig.constants'; -import useCopy from 'hooks/useCopy'; -import * as S from '../../DataStorePluginForm.styled'; -import * as OtelCollectorStyles from './OpenTelemetryCollector.styled'; +import {Col, Row} from 'antd'; +import Ingestor from './Ingestor'; +import Configuration from './Configuration'; const OpenTelemetryCollector = () => { - const form = Form.useFormInstance(); - const copy = useCopy(); - const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores; - const example = CollectorConfigMap[dataStoreType!]; - return ( - - - - Sample Configuration - - - copy(example)}> - - - - {example} - - - - + <> + + + + + + + + + + + ); }; diff --git a/web/src/components/Settings/DataStorePlugin/forms/SignalFx/SignalFx.tsx b/web/src/components/Settings/DataStorePlugin/forms/SignalFx/SignalFx.tsx index 69285cae48..2eb8a467b9 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/SignalFx/SignalFx.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/SignalFx/SignalFx.tsx @@ -1,22 +1,37 @@ import {Col, Form, Input, Row} from 'antd'; import {SupportedDataStores} from 'types/DataStore.types'; +import {SupportedDataStoresToName} from 'constants/DataStore.constants'; +import * as S from '../../DataStorePluginForm.styled'; +import DataStoreDocsBanner from '../../../DataStoreDocsBanner/DataStoreDocsBanner'; const SignalFx = () => { const baseName = ['dataStore', SupportedDataStores.SignalFX]; return ( - - - - - - - - - - - - + <> + Provide the connection info for {SupportedDataStoresToName[SupportedDataStores.SignalFX]} + + + + + + + + + + + + + + ); }; diff --git a/web/src/constants/Common.constants.ts b/web/src/constants/Common.constants.ts index fd5ffad254..4f710cae9d 100644 --- a/web/src/constants/Common.constants.ts +++ b/web/src/constants/Common.constants.ts @@ -9,6 +9,8 @@ export const GITHUB_ISSUES_URL = 'https://github.com/kubeshop/tracetest/issues/n export const DISCORD_URL = 'https://discord.gg/6zupCZFQbe'; export const OCTOLIINT_ISSUE_URL = 'https://github.com/kubeshop/tracetest/issues/2615'; +export const INGESTOR_ENDPOINT_URL = 'https://docs.tracetest.io/configuration/ingestor-endpoint'; + export const TRACE_SEMANTIC_CONVENTIONS_URL = 'https://github.com/open-telemetry/opentelemetry-specification/tree/main/specification/trace/semantic_conventions'; export const RESOURCE_SEMANTIC_CONVENTIONS_URL = diff --git a/web/src/constants/DataStore.constants.tsx b/web/src/constants/DataStore.constants.tsx index 40d6f3cc88..99088c2dd2 100644 --- a/web/src/constants/DataStore.constants.tsx +++ b/web/src/constants/DataStore.constants.tsx @@ -28,7 +28,8 @@ export const SupportedDataStoresToDocsLink = { [SupportedDataStores.OtelCollector]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/opentelemetry-collector', [SupportedDataStores.Honeycomb]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/honeycomb', - [SupportedDataStores.AzureAppInsights]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/azure-app-insights', + [SupportedDataStores.AzureAppInsights]: + 'https://docs.tracetest.io/configuration/connecting-to-data-stores/azure-app-insights', } as const; export const SupportedDataStoresToDefaultEndpoint = { @@ -45,21 +46,3 @@ export const SupportedDataStoresToDefaultEndpoint = { [SupportedDataStores.Honeycomb]: '', [SupportedDataStores.AzureAppInsights]: '', } as const; - -export const collectorExplanation = ( - <> - Tracetest can work with any distributed tracing solution that is utilizing the{' '} - - OpenTelemetry Collector - {' '} - via a second pipeline. The second pipeline enables your current tracing system to send only Tracetest spans to - Tracetest, while all other spans continue to go to the backend of your choice. - -); - -export const SupportedDataStoresToExplanation: Record = { - [SupportedDataStores.OtelCollector]: collectorExplanation, - [SupportedDataStores.NewRelic]: collectorExplanation, - [SupportedDataStores.Lightstep]: collectorExplanation, - [SupportedDataStores.Datadog]: collectorExplanation, -}; diff --git a/web/src/models/DataStore.model.ts b/web/src/models/DataStore.model.ts index f18e8fb37b..e3942e6316 100644 --- a/web/src/models/DataStore.model.ts +++ b/web/src/models/DataStore.model.ts @@ -2,12 +2,16 @@ import {SupportedDataStores} from 'types/DataStore.types'; import {Model, TDataStoreSchemas} from 'types/Common.types'; export type TRawDataStore = TDataStoreSchemas['DataStoreResource']; +export type TRawAzureAppInsightsDataStore = TDataStoreSchemas['AzureAppInsights']; + +export type TRawOtlpDataStore = {isIngestorEnabled?: boolean}; type DataStore = Model['spec'] & { - otlp?: {}; - newrelic?: {}; - lightstep?: {}; - datadog?: {}; - honeycomb?: {}; + otlp?: TRawOtlpDataStore; + newrelic?: TRawOtlpDataStore; + lightstep?: TRawOtlpDataStore; + datadog?: TRawOtlpDataStore; + honeycomb?: TRawOtlpDataStore; + azureappinsights?: TRawAzureAppInsightsDataStore & TRawOtlpDataStore; }; const DataStore = ({ diff --git a/web/src/services/DataStore.service.ts b/web/src/services/DataStore.service.ts index 9fd94dec6c..4810c0a493 100644 --- a/web/src/services/DataStore.service.ts +++ b/web/src/services/DataStore.service.ts @@ -26,7 +26,7 @@ const dataStoreServiceMap = { interface IDataStoreService { getRequest(draft: TDraftDataStore, defaultDataStore: DataStore): Promise; - getInitialValues(config: DataStoreConfig): TDraftDataStore; + getInitialValues(config: DataStoreConfig, configuredDataStore?: SupportedDataStores): TDraftDataStore; validateDraft(config: TDraftDataStore): Promise; shouldTestConnection(draft: TDraftDataStore): boolean; _getDataStore(type?: SupportedDataStores): TDataStoreService; @@ -57,12 +57,12 @@ const DataStoreService = (): IDataStoreService => ({ } as TRawDataStore; }, - getInitialValues(dataStoreConfig) { + getInitialValues(dataStoreConfig, configuredDataStore) { const {defaultDataStore} = dataStoreConfig; const type = (defaultDataStore.type || SupportedDataStores.JAEGER) as SupportedDataStores; const dataStore = this._getDataStore(type); - return {...dataStore.getInitialValues(dataStoreConfig, type), dataStoreType: type}; + return {...dataStore.getInitialValues(dataStoreConfig, type, configuredDataStore), dataStoreType: type}; }, validateDraft(draft) { diff --git a/web/src/services/DataStores/AzureAppInsights.service.ts b/web/src/services/DataStores/AzureAppInsights.service.ts index 42b5990c98..3a77294469 100644 --- a/web/src/services/DataStores/AzureAppInsights.service.ts +++ b/web/src/services/DataStores/AzureAppInsights.service.ts @@ -29,16 +29,18 @@ const AzureAppInsightsService = (): TDataStoreService => ({ connectionType = ConnectionTypes.Direct, accessToken = '', useAzureActiveDirectoryAuth = true, + isIngestorEnabled = false, } = {}, } = {}, }) { if (connectionType === ConnectionTypes.Direct && !resourceArmId) return Promise.resolve(false); if (connectionType === ConnectionTypes.Direct && !useAzureActiveDirectoryAuth && !accessToken) return Promise.resolve(false); + if (connectionType === ConnectionTypes.Collector && !isIngestorEnabled) return Promise.resolve(false); return Promise.resolve(true); }, - getInitialValues({defaultDataStore: {azureappinsights = {}} = {}}) { + getInitialValues({defaultDataStore: {azureappinsights = {}} = {}}, dataStoreType, configuredDataStore) { const { resourceArmId = '', connectionType = ConnectionTypes.Direct, @@ -50,7 +52,15 @@ const AzureAppInsightsService = (): TDataStoreService => ({ dataStore: { name: SupportedDataStores.AzureAppInsights, type: SupportedDataStores.AzureAppInsights, - azureappinsights: {resourceArmId, connectionType, accessToken, useAzureActiveDirectoryAuth}, + azureappinsights: { + resourceArmId, + connectionType, + accessToken, + useAzureActiveDirectoryAuth, + isIngestorEnabled: + configuredDataStore === SupportedDataStores.AzureAppInsights && + connectionType === ConnectionTypes.Collector, + }, }, dataStoreType: SupportedDataStores.AzureAppInsights, }; diff --git a/web/src/services/DataStores/OtelCollector.service.ts b/web/src/services/DataStores/OtelCollector.service.ts index 9181a93f57..030dcd938d 100644 --- a/web/src/services/DataStores/OtelCollector.service.ts +++ b/web/src/services/DataStores/OtelCollector.service.ts @@ -1,4 +1,5 @@ -import {SupportedDataStores, TDataStoreService} from 'types/DataStore.types'; +import {IDataStore, SupportedDataStores, TDataStoreService} from 'types/DataStore.types'; +import {TRawOtlpDataStore} from 'models/DataStore.model'; const OtelCollectorService = (): TDataStoreService => ({ getRequest(draft, dataStoreType = SupportedDataStores.OtelCollector) { @@ -7,14 +8,24 @@ const OtelCollectorService = (): TDataStoreService => ({ name: dataStoreType, }); }, - validateDraft() { - return Promise.resolve(true); + validateDraft({dataStore = {} as IDataStore, dataStoreType = SupportedDataStores.OtelCollector}) { + const {isIngestorEnabled = false} = + (dataStore[dataStoreType || SupportedDataStores.OtelCollector] as TRawOtlpDataStore) ?? {}; + + return Promise.resolve(isIngestorEnabled); }, - getInitialValues(draft, dataStoreType = SupportedDataStores.OtelCollector) { + getInitialValues( + draft, + dataStoreType = SupportedDataStores.OtelCollector, + configuredDataStore = SupportedDataStores.OtelCollector + ) { return { dataStore: { name: dataStoreType, type: dataStoreType, + [dataStoreType]: { + isIngestorEnabled: configuredDataStore === dataStoreType, + }, }, dataStoreType, }; diff --git a/web/src/types/DataStore.types.ts b/web/src/types/DataStore.types.ts index eab2452650..6bcc895bf6 100644 --- a/web/src/types/DataStore.types.ts +++ b/web/src/types/DataStore.types.ts @@ -1,7 +1,7 @@ import {FormInstance} from 'antd'; import {Model, TDataStoreSchemas, TConfigSchemas} from 'types/Common.types'; import ConnectionTestStep from 'models/ConnectionResultStep.model'; -import DataStore from 'models/DataStore.model'; +import DataStore, { TRawOtlpDataStore } from 'models/DataStore.model'; import DataStoreConfig from 'models/DataStoreConfig.model'; import {THeader} from './Test.types'; @@ -83,16 +83,16 @@ export interface IElasticSearch extends TRawElasticSearch { certificateFile?: File; } -type IDataStore = DataStore & { +export type IDataStore = DataStore & { jaeger?: IBaseClientSettings; tempo?: IBaseClientSettings; opensearch?: IElasticSearch; elasticapm?: IElasticSearch; - otlp?: {}; - lightstep?: {}; - newrelic?: {}; - datadog?: {}; - honeycomb?: {}; + otlp?: TRawOtlpDataStore; + lightstep?: TRawOtlpDataStore; + newrelic?: TRawOtlpDataStore; + datadog?: TRawOtlpDataStore; + honeycomb?: TRawOtlpDataStore; }; export type TDraftDataStore = { @@ -105,7 +105,11 @@ export type TDataStoreForm = FormInstance; export type TDataStoreService = { getRequest(values: TDraftDataStore, dataStoreType?: SupportedDataStores): Promise; validateDraft(draft: TDraftDataStore): Promise; - getInitialValues(draft: DataStoreConfig, dataStoreType?: SupportedDataStores): TDraftDataStore; + getInitialValues( + draft: DataStoreConfig, + dataStoreType?: SupportedDataStores, + configuredDataStore?: SupportedDataStores + ): TDraftDataStore; shouldTestConnection(draft: TDraftDataStore): boolean; };