feat(frontend): add otel tracing backend improvements (#3468)

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 = ({
         </Form.Item>
         <S.FactoryContainer>
           <S.TopContainer>
+            <Space>
+              <DataStoreIcon dataStoreType={dataStoreType ?? SupportedDataStores.JAEGER} width="22" height="22" />
+
+              <Typography.Title level={2}>
+                {SupportedDataStoresToName[dataStoreType ?? SupportedDataStores.JAEGER]}
+              </Typography.Title>
+            </Space>
+
             <S.Description>
               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.

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 (
-    <>
-      <S.SubtitleContainer>
-        <S.Title>OpenTelemetry Collector Configuration</S.Title>
-        <S.Description>
-          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.
-        </S.Description>
-      </S.SubtitleContainer>
+    <S.CollapseContainer>
+      <Collapse ghost>
+        <Collapse.Panel
+          header={<Typography.Title level={3}>OpenTelemetry Collector Configuration</Typography.Title>}
+          key="1"
+        >
+          <S.SubtitleContainer>
+            <S.Description>
+              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.
+            </S.Description>
+          </S.SubtitleContainer>
 
-      <Row>
-        <Col span={16}>
-          <S.CodeContainer data-cy="file-viewer-code-container">
-            <FramedCodeBlock value={example} language="yaml" title="Collector Configuration" />
-          </S.CodeContainer>
-        </Col>
-      </Row>
+          <Row>
+            <Col span={16}>
+              <S.CodeContainer data-cy="file-viewer-code-container">
+                <FramedCodeBlock value={example} language="yaml" title="Collector Configuration" />
+              </S.CodeContainer>
+            </Col>
+          </Row>
+        </Collapse.Panel>
+      </Collapse>
 
       <DataStoreDocsBanner dataStoreType={dataStoreType} />
-    </>
+    </S.CollapseContainer>
   );
 };
 
-export default withCustomization(Configuration, 'collectorConfiguration');
+export default Configuration;

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<TDraftDataStore>();
-  const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores;
-  const baseName = ['dataStore', dataStoreType];
+const Ingestor = () => (
+  <S.Container>
+    <S.Title>Ingestor Endpoint</S.Title>
+    <S.Description>
+      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.
+    </S.Description>
 
-  return (
-    <S.Container>
-      <S.Description>
-        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.
-      </S.Description>
-      <S.Title>Ingestor Endpoint</S.Title>
-      <S.Description>
-        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.
-      </S.Description>
-      <S.SwitchContainer>
-        <Form.Item name={[...baseName, 'isIngestorEnabled']} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <label htmlFor={`data-store_dataStore_${dataStoreType}_isIngestorEnabled`}>
-          Enable Tracetest ingestion endpoint
-        </label>
-      </S.SwitchContainer>
+    <Col span={16}>
+      <S.UrlEntry>
+        gRPC <UrlCodeBlock value="tracetest:4317" minHeight="35px" maxHeight="35px" language="bash" />
+      </S.UrlEntry>
+    </Col>
+    <Col span={16}>
+      <S.UrlEntry>
+        HTTP <UrlCodeBlock value="http://tracetest:4318" minHeight="35px" maxHeight="35px" language="bash" />
+      </S.UrlEntry>
+    </Col>
+    <Col span={16}>
       <DocsBanner>
         Need more information about setting up ingestion endpoint?{' '}
         <a target="_blank" href={INGESTOR_ENDPOINT_URL}>
           Go to our docs
         </a>
       </DocsBanner>
-    </S.Container>
-  );
-};
+    </Col>
+  </S.Container>
+);
 
-export default withCustomization(Ingestor, 'ingestorConfiguration');
+export default Ingestor;

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;
+`;

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 (
-    <>
-      <Row gutter={[16, 16]}>
-        <Col span={24}>
-          <Ingestor />
-        </Col>
-      </Row>
-      <Row gutter={[16, 16]}>
-        <Col span={24}>
-          <Configuration />
-        </Col>
-      </Row>
-    </>
-  );
-};
+const OpenTelemetryCollector = () => (
+  <>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <Ingestor />
+      </Col>
+    </Row>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <Configuration />
+      </Col>
+    </Row>
+  </>
+);
 
-export default OpenTelemetryCollector;
+export default withCustomization(OpenTelemetryCollector, 'openTelemetryCollector');

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<TRawDataStore, {}>['spec'] & {
   otlp?: TRawOtlpDataStore;
   newrelic?: TRawOtlpDataStore;

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,

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,
     };