From 51388b20141f9c73e6d9addd63f50d8184b88975 Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Wed, 20 Dec 2023 16:33:00 -0500 Subject: [PATCH] feat(frontend): add otel tracing backend improvements (#3468) --- .../Settings/DataStoreForm/DataStoreForm.tsx | 12 +++- .../OpenTelemetryCollector/Configuration.tsx | 45 ++++++++------- .../forms/OpenTelemetryCollector/Ingestor.tsx | 55 ++++++++----------- .../OpenTelemetryCollector.styled.ts | 17 ++++++ .../OpenTelemetryCollector.tsx | 33 ++++++----- web/src/models/DataStore.model.ts | 2 +- .../DataStores/AzureAppInsights.service.ts | 7 +-- .../DataStores/OtelCollector.service.ts | 20 ++----- 8 files changed, 100 insertions(+), 91 deletions(-) diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx b/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx index fe623cbec6..c78b55a21a 100644 --- a/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx +++ b/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx @@ -1,10 +1,12 @@ -import {Button, Form} from 'antd'; +import {Button, Form, Space, Typography} from 'antd'; import {useCallback, useEffect, useMemo} from 'react'; import AllowButton, {Operation} from 'components/AllowButton'; +import DataStoreIcon from 'components/DataStoreIcon/DataStoreIcon'; import DataStoreService from 'services/DataStore.service'; import {TDraftDataStore, TDataStoreForm, SupportedDataStores} from 'types/DataStore.types'; import DataStoreConfig from 'models/DataStoreConfig.model'; import {DataStoreSelection} from 'components/Inputs'; +import {SupportedDataStoresToName} from 'constants/DataStore.constants'; import DataStoreComponentFactory from '../DataStorePlugin/DataStoreComponentFactory'; import * as S from './DataStoreForm.styled'; @@ -72,6 +74,14 @@ const DataStoreForm = ({ + + + + + {SupportedDataStoresToName[dataStoreType ?? SupportedDataStores.JAEGER]} + + + Tracetest needs configuration information to be able to retrieve your trace from your distributed tracing solution. Select your Tracing Backend and enter the configuration info. diff --git a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx index 58b6ac54ea..a9305ef349 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx @@ -1,8 +1,7 @@ -import {Col, Form, Row} from 'antd'; +import {Col, Collapse, Form, Row, Typography} from 'antd'; import {CollectorConfigMap} from 'constants/CollectorConfig.constants'; import {TCollectorDataStores, TDraftDataStore} from 'types/DataStore.types'; import {FramedCodeBlock} from 'components/CodeBlock'; -import {withCustomization} from 'providers/Customization'; import * as S from './OpenTelemetryCollector.styled'; import DataStoreDocsBanner from '../../../DataStoreDocsBanner/DataStoreDocsBanner'; @@ -12,27 +11,33 @@ const Configuration = () => { 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. - - + + + OpenTelemetry Collector Configuration} + key="1" + > + + + 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. + + - - - - - - - + + + + + + + + + - + ); }; -export default withCustomization(Configuration, 'collectorConfiguration'); +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 index ba40f9c412..d09f61d1e4 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx @@ -1,43 +1,36 @@ -import {Form, Switch} from 'antd'; +import {Col} from 'antd'; +import UrlCodeBlock from 'components/CodeBlock/UrlCodeBlock'; import DocsBanner from 'components/DocsBanner/DocsBanner'; import {INGESTOR_ENDPOINT_URL} from 'constants/Common.constants'; -import {withCustomization} from 'providers/Customization'; -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]; +const Ingestor = () => ( + + Ingestor Endpoint + + Tracetest exposes trace ingestion endpoints on ports 4317 for gRPC and 4318 for HTTP. Use the Tracetest Server’s + hostname and port to connect. For example, with Docker use tracetest:4317 for gRPC. + - 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. - - - - - - - + + + gRPC + + + + + HTTP + + + Need more information about setting up ingestion endpoint?{' '} Go to our docs - - ); -}; + + +); -export default withCustomization(Ingestor, 'ingestorConfiguration'); +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 fe74ad5849..ed85f5ff14 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.styled.ts +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.styled.ts @@ -2,6 +2,16 @@ import {CopyOutlined} from '@ant-design/icons'; import {Modal, Typography} from 'antd'; import styled from 'styled-components'; +export const CollapseContainer = styled.div` + .ant-collapse > .ant-collapse-item > .ant-collapse-header { + padding: 12px 16px 12px 0; + } + + .ant-collapse-content > .ant-collapse-content-box { + padding: 12px 16px 12px 0; + } +`; + export const CodeContainer = styled.div` margin-bottom: 18px; `; @@ -52,3 +62,10 @@ export const SwitchContainer = styled.div` gap: 8px; margin-bottom: 18px; `; + +export const UrlEntry = styled.div` + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + gap: 16px; +`; diff --git a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx index bd55f9bd25..3fb4492919 100644 --- a/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx +++ b/web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/OpenTelemetryCollector.tsx @@ -1,22 +1,21 @@ import {Col, Row} from 'antd'; +import {withCustomization} from 'providers/Customization'; import Ingestor from './Ingestor'; import Configuration from './Configuration'; -const OpenTelemetryCollector = () => { - return ( - <> - - - - - - - - - - - - ); -}; +const OpenTelemetryCollector = () => ( + <> + + + + + + + + + + + +); -export default OpenTelemetryCollector; +export default withCustomization(OpenTelemetryCollector, 'openTelemetryCollector'); diff --git a/web/src/models/DataStore.model.ts b/web/src/models/DataStore.model.ts index 46976756f6..cbe6316eb4 100644 --- a/web/src/models/DataStore.model.ts +++ b/web/src/models/DataStore.model.ts @@ -4,7 +4,7 @@ import {Model, TDataStoreSchemas} from 'types/Common.types'; export type TRawDataStore = TDataStoreSchemas['DataStoreResource']; export type TRawAzureAppInsightsDataStore = TDataStoreSchemas['AzureAppInsights']; -export type TRawOtlpDataStore = {isIngestorEnabled?: boolean}; +export type TRawOtlpDataStore = {}; type DataStore = Model['spec'] & { otlp?: TRawOtlpDataStore; newrelic?: TRawOtlpDataStore; diff --git a/web/src/services/DataStores/AzureAppInsights.service.ts b/web/src/services/DataStores/AzureAppInsights.service.ts index 3a77294469..cd934f7544 100644 --- a/web/src/services/DataStores/AzureAppInsights.service.ts +++ b/web/src/services/DataStores/AzureAppInsights.service.ts @@ -29,18 +29,16 @@ 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 = {}} = {}}, dataStoreType, configuredDataStore) { + getInitialValues({defaultDataStore: {azureappinsights = {}} = {}}) { const { resourceArmId = '', connectionType = ConnectionTypes.Direct, @@ -57,9 +55,6 @@ const AzureAppInsightsService = (): TDataStoreService => ({ 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 030dcd938d..9d7afc2f86 100644 --- a/web/src/services/DataStores/OtelCollector.service.ts +++ b/web/src/services/DataStores/OtelCollector.service.ts @@ -1,5 +1,4 @@ -import {IDataStore, SupportedDataStores, TDataStoreService} from 'types/DataStore.types'; -import {TRawOtlpDataStore} from 'models/DataStore.model'; +import {SupportedDataStores, TDataStoreService} from 'types/DataStore.types'; const OtelCollectorService = (): TDataStoreService => ({ getRequest(draft, dataStoreType = SupportedDataStores.OtelCollector) { @@ -8,24 +7,15 @@ const OtelCollectorService = (): TDataStoreService => ({ name: dataStoreType, }); }, - validateDraft({dataStore = {} as IDataStore, dataStoreType = SupportedDataStores.OtelCollector}) { - const {isIngestorEnabled = false} = - (dataStore[dataStoreType || SupportedDataStores.OtelCollector] as TRawOtlpDataStore) ?? {}; - - return Promise.resolve(isIngestorEnabled); + validateDraft() { + return Promise.resolve(true); }, - getInitialValues( - draft, - dataStoreType = SupportedDataStores.OtelCollector, - configuredDataStore = SupportedDataStores.OtelCollector - ) { + getInitialValues(draft, dataStoreType = SupportedDataStores.OtelCollector) { return { dataStore: { name: dataStoreType, type: dataStoreType, - [dataStoreType]: { - isIngestorEnabled: configuredDataStore === dataStoreType, - }, + [dataStoreType]: {}, }, dataStoreType, };