feat(frontend): add agent datastore (#3153)

api/dataStores.yaml

@@ -182,6 +182,7 @@ components:
       type: string
       enum:
         [
+          agent,
           jaeger,
           opensearch,
           tempo,
@@ -195,7 +196,7 @@ components:
           honeycomb,
           azureappinsights,
           signoz,
-          dynatrace
+          dynatrace,
         ]
     SupportedClients:
       type: string

server/datastore/datastore_entities.go

@@ -141,6 +141,7 @@ const (
 	DatastoreTypeAzureAppInsights DataStoreType = "azureappinsights"
 	DatastoreTypeSignoz           DataStoreType = "signoz"
 	DatastoreTypeDynatrace        DataStoreType = "dynatrace"
+	DatastoreTypeAgent            DataStoreType = "agent"
 )
 
 var validTypes = []DataStoreType{
@@ -158,6 +159,7 @@ var validTypes = []DataStoreType{
 	DatastoreTypeAzureAppInsights,
 	DatastoreTypeSignoz,
 	DatastoreTypeDynatrace,
+	DatastoreTypeAgent,
 }
 
 var otlpBasedDataStores = []DataStoreType{
@@ -168,6 +170,7 @@ var otlpBasedDataStores = []DataStoreType{
 	DataStoreTypeHoneycomb,
 	DatastoreTypeSignoz,
 	DatastoreTypeDynatrace,
+	DatastoreTypeAgent,
 }
 
 func (ds DataStore) Validate() error {

server/openapi/model_supported_data_stores.go

@@ -13,6 +13,7 @@ type SupportedDataStores string
 
 // List of SupportedDataStores
 const (
+	AGENT            SupportedDataStores = "agent"
 	JAEGER           SupportedDataStores = "jaeger"
 	OPENSEARCH       SupportedDataStores = "opensearch"
 	TEMPO            SupportedDataStores = "tempo"

web/src/components/CustomizationWrapper/CustomizationWrapper.tsx

@@ -1,12 +1,14 @@
 import {useMemo} from 'react';
-import CustomizationProvider from 'providers/Customization';
+import CustomizationProvider, {Flag} from 'providers/Customization';
 
 interface IProps {
   children: React.ReactNode;
 }
 
+const flagValues = {[Flag.IsAnalyticsPageEnabled]: true, [Flag.IsAgentDataStoreEnabled]: false};
+
 const getComponent = <T,>(id: string, fallback: React.ComponentType<T>) => fallback;
-const getFlag = () => true;
+const getFlag = (flag: Flag) => flagValues[flag];
 const getIsAllowed = () => true;
 
 const CustomizationWrapper = ({children}: IProps) => {

web/src/components/DataStoreIcon/DataStoreIcon.tsx

@@ -1,5 +1,6 @@
 import {useTheme} from 'styled-components';
 import {SupportedDataStores} from 'types/DataStore.types';
+import Agent from './Icons/Agent';
 import Elastic from './Icons/Elastic';
 import Jaeger from './Icons/Jaeger';
 import Lightstep from './Icons/Lightstep';
@@ -16,6 +17,7 @@ import Signoz from './Icons/Signoz';
 import Dynatrace from './Icons/Dynatrace';
 
 const iconMap = {
+  [SupportedDataStores.Agent]: Agent,
   [SupportedDataStores.JAEGER]: Jaeger,
   [SupportedDataStores.SignalFX]: SignalFx,
   [SupportedDataStores.ElasticApm]: Elastic,

web/src/components/DataStoreIcon/Icons/Agent.tsx

@@ -0,0 +1,14 @@
+import {IIconProps} from '../DataStoreIcon';
+
+const Agent = ({color, width = '20', height = '20'}: IIconProps) => (
+  <svg width={width} height={height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.14286 0C0.968071 0 0 0.968071 0 2.14286V17.8571C0 19.0319 0.968071 20 2.14286 20H17.8571C19.0319 20 20 19.0319 20 17.8571V2.14286C20 0.968071 19.0319 0 17.8571 0H2.14286ZM3.54492 5C3.73418 4.99332 3.91834 5.06207 4.05692 5.19113L9.05692 9.83398C9.12883 9.90084 9.18618 9.98181 9.22539 10.0718C9.26461 10.1618 9.28485 10.259 9.28485 10.3571C9.28485 10.4553 9.26461 10.5525 9.22539 10.6425C9.18618 10.7325 9.12883 10.8134 9.05692 10.8803L4.05692 15.5232C3.9181 15.6518 3.73392 15.7201 3.54481 15.713C3.35569 15.7059 3.17711 15.6241 3.04827 15.4855C2.91965 15.3467 2.85137 15.1625 2.85843 14.9734C2.86549 14.7843 2.9473 14.6057 3.08592 14.4769L7.5223 10.3571L3.08592 6.23744C2.9473 6.1086 2.86549 5.93001 2.85843 5.7409C2.85137 5.55179 2.91965 5.36761 3.04827 5.22879C3.11197 5.15991 3.18862 5.10426 3.27383 5.065C3.35905 5.02575 3.45117 5.00365 3.54492 5ZM10.0098 12.8571L16.4383 12.9464C16.5321 12.9477 16.6248 12.9674 16.7109 13.0045C16.7971 13.0416 16.8751 13.0953 16.9406 13.1625C17.006 13.2298 17.0575 13.3092 17.0922 13.3964C17.127 13.4835 17.1441 13.5767 17.1429 13.6705C17.1416 13.7643 17.1218 13.8569 17.0848 13.9431C17.0477 14.0293 16.994 14.1073 16.9268 14.1727C16.8595 14.2381 16.7801 14.2897 16.6929 14.3244C16.6058 14.3591 16.5126 14.3763 16.4188 14.375L9.99023 14.2857C9.89643 14.2844 9.8038 14.2647 9.71763 14.2276C9.63145 14.1905 9.55342 14.1369 9.488 14.0696C9.42257 14.0024 9.37104 13.9229 9.33633 13.8358C9.30162 13.7486 9.28442 13.6555 9.28571 13.5617C9.28699 13.4679 9.30673 13.3752 9.34381 13.2891C9.38088 13.2029 9.43457 13.1249 9.50181 13.0594C9.56904 12.994 9.64851 12.9425 9.73566 12.9078C9.82282 12.8731 9.91596 12.8559 10.0098 12.8571Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default Agent;

web/src/components/Settings/DataStoreForm/DataStoreForm.tsx

@@ -51,8 +51,12 @@ const DataStoreForm = ({
 
   const onValidation = useCallback(
     async (_: any, draft: TDraftDataStore) => {
-      const isValid = await DataStoreService.validateDraft(draft);
-      onIsFormValid(isValid);
+      try {
+        const isValid = await DataStoreService.validateDraft(draft);
+        onIsFormValid(isValid);
+      } catch (e) {
+        onIsFormValid(false);
+      }
     },
     [onIsFormValid]
   );

web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx

@@ -3,6 +3,7 @@ import {noop} from 'lodash';
 import {useTheme} from 'styled-components';
 import {ConfigMode, SupportedDataStores} from 'types/DataStore.types';
 import {SupportedDataStoresToName} from 'constants/DataStore.constants';
+import {Flag, useCustomization} from 'providers/Customization';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 
 import DataStoreIcon from '../../DataStoreIcon/DataStoreIcon';
@@ -16,6 +17,7 @@ interface IProps {
 const supportedDataStoreList = Object.values(SupportedDataStores);
 
 const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.JAEGER}: IProps) => {
+  const {getFlag} = useCustomization();
   const {
     color: {text, primary},
   } = useTheme();
@@ -25,6 +27,10 @@ const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.J
   return (
     <S.DataStoreListContainer>
       {supportedDataStoreList.map(dataStore => {
+        if (dataStore === SupportedDataStores.Agent && !getFlag(Flag.IsAgentDataStoreEnabled)) {
+          return null;
+        }
+
         const isSelected = value === dataStore;
         const isConfigured = configuredDataStoreType === dataStore && dataStoreConfig.mode === ConfigMode.READY;
         return (

web/src/components/Settings/DataStorePlugin/DataStorePlugin.tsx

@@ -1,4 +1,5 @@
 import {IDataStorePluginMap, SupportedDataStores} from 'types/DataStore.types';
+import Agent from './forms/Agent';
 import GrpcClient from './forms/GrpcClient';
 import ElasticSearch from './forms/ElasticSearch';
 import OpenTelemetryCollector from './forms/OpenTelemetryCollector';
@@ -8,6 +9,7 @@ import AwsXRay from './forms/AwsXRay';
 import AzureAppInsights from './forms/AzureAppInsights/AzureAppInsights';
 
 export const DataStoreComponentMap: IDataStorePluginMap = {
+  [SupportedDataStores.Agent]: Agent,
   [SupportedDataStores.JAEGER]: GrpcClient,
   [SupportedDataStores.TEMPO]: BaseClient,
   [SupportedDataStores.SignalFX]: SignalFx,

web/src/components/Settings/DataStorePlugin/forms/Agent/Agent.styled.ts

@@ -0,0 +1,24 @@
+import {Typography} from 'antd';
+import styled from 'styled-components';
+
+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;
+`;

web/src/components/Settings/DataStorePlugin/forms/Agent/Agent.tsx

@@ -0,0 +1,12 @@
+import {Col, Row} from 'antd';
+import Ingestor from './Ingestor';
+
+const Agent = () => (
+  <Row gutter={[16, 16]}>
+    <Col span={24}>
+      <Ingestor />
+    </Col>
+  </Row>
+);
+
+export default Agent;

web/src/components/Settings/DataStorePlugin/forms/Agent/Ingestor.tsx

@@ -0,0 +1,40 @@
+import {Form, Switch} from 'antd';
+import DocsBanner from 'components/DocsBanner/DocsBanner';
+import {TCollectorDataStores, TDraftDataStore} from 'types/DataStore.types';
+import * as S from './Agent.styled';
+
+const Ingestor = () => {
+  const form = Form.useFormInstance<TDraftDataStore>();
+  const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores;
+  const baseName = ['dataStore', dataStoreType];
+
+  return (
+    <S.Container>
+      <S.Description>
+        The Tracetest Agent can be used to collect OpenTelemetry trace information from the host it is running on.
+      </S.Description>
+      <S.Title>Ingestor Endpoint</S.Title>
+      <S.Description>
+        The Tracetest Agent exposes trace ingestion endpoints on ports 4317 for gRPC and 4318 for HTTP. Turn on the
+        Tracetest ingestion endpoint to start sending traces. Use your local hostname and port to connect. For example,
+        localhost: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>
+      <DocsBanner>
+        Need more information about setting up the agent ingestion endpoint?{' '}
+        <a target="_blank" href="">
+          Go to our docs
+        </a>
+      </DocsBanner>
+    </S.Container>
+  );
+};
+
+export default Ingestor;

web/src/components/Settings/DataStorePlugin/forms/Agent/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Agent';

web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx

@@ -18,14 +18,16 @@ const Ingestor = () => {
       <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.
+        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>
-        Enable Tracetest ingestion endpoint
+        <label htmlFor={`data-store_dataStore_${dataStoreType}_isIngestorEnabled`}>
+          Enable Tracetest ingestion endpoint
+        </label>
       </S.SwitchContainer>
       <DocsBanner>
         Need more information about setting up ingestion endpoint?{' '}

web/src/constants/DataStore.constants.tsx

@@ -1,6 +1,7 @@
 import {SupportedDataStores} from '../types/DataStore.types';
 
 export const SupportedDataStoresToName = {
+  [SupportedDataStores.Agent]: 'Agent',
   [SupportedDataStores.JAEGER]: 'Jaeger',
   [SupportedDataStores.OpenSearch]: 'OpenSearch',
   [SupportedDataStores.SignalFX]: 'SignalFX',
@@ -18,6 +19,7 @@ export const SupportedDataStoresToName = {
 } as const;
 
 export const SupportedDataStoresToDocsLink = {
+  [SupportedDataStores.Agent]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/agent',
   [SupportedDataStores.JAEGER]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/jaeger',
   [SupportedDataStores.OpenSearch]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/opensearch',
   [SupportedDataStores.ElasticApm]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/elasticapm',
@@ -32,13 +34,12 @@ export const SupportedDataStoresToDocsLink = {
   [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.Signoz]:
-    'https://docs.tracetest.io/configuration/connecting-to-data-stores/signoz',
-  [SupportedDataStores.Dynatrace]:
-    'https://docs.tracetest.io/configuration/connecting-to-data-stores/dynatrace',
+  [SupportedDataStores.Signoz]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/signoz',
+  [SupportedDataStores.Dynatrace]: 'https://docs.tracetest.io/configuration/connecting-to-data-stores/dynatrace',
 } as const;
 
 export const SupportedDataStoresToDefaultEndpoint = {
+  [SupportedDataStores.Agent]: '',
   [SupportedDataStores.JAEGER]: 'jaeger:16685',
   [SupportedDataStores.OpenSearch]: 'http://opensearch:9200',
   [SupportedDataStores.SignalFX]: '',

web/src/models/DataStore.model.ts

@@ -14,6 +14,7 @@ type DataStore = Model<TRawDataStore, {}>['spec'] & {
   azureappinsights?: TRawAzureAppInsightsDataStore & TRawOtlpDataStore;
   signoz?: TRawOtlpDataStore;
   dynatrace?: TRawOtlpDataStore;
+  agent?: TRawOtlpDataStore;
 };
 
 const DataStore = ({

web/src/providers/Customization/Customization.provider.tsx

@@ -8,6 +8,7 @@ export enum Operation {
 
 export enum Flag {
   IsAnalyticsPageEnabled = 'isAnalyticsPageEnabled',
+  IsAgentDataStoreEnabled = 'isAgentDataStoreEnabled',
 }
 
 interface IContext {

web/src/services/DataStore.service.ts

@@ -10,6 +10,7 @@ import AwsXRayService from './DataStores/AwsXRay.service';
 import AzureAppInsightsService from './DataStores/AzureAppInsights.service';
 
 const dataStoreServiceMap = {
+  [SupportedDataStores.Agent]: OtelCollectorService,
   [SupportedDataStores.JAEGER]: JaegerService,
   [SupportedDataStores.TEMPO]: BaseClientService,
   [SupportedDataStores.OpenSearch]: ElasticSearchService,

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, { TRawOtlpDataStore } from 'models/DataStore.model';
+import DataStore, {TRawOtlpDataStore} from 'models/DataStore.model';
 import DataStoreConfig from 'models/DataStoreConfig.model';
 import {THeader} from './Test.types';
 
@@ -16,6 +16,7 @@ export enum ConnectionTypes {
 }
 
 export enum SupportedDataStores {
+  Agent = 'agent',
   JAEGER = 'jaeger',
   TEMPO = 'tempo',
   OtelCollector = 'otlp',
@@ -29,7 +30,7 @@ export enum SupportedDataStores {
   Honeycomb = 'honeycomb',
   AzureAppInsights = 'azureappinsights',
   Signoz = 'signoz',
-  Dynatrace = 'dynatrace'
+  Dynatrace = 'dynatrace',
 }
 
 export enum SupportedClientTypes {
@@ -88,6 +89,7 @@ export interface IElasticSearch extends TRawElasticSearch {
 }
 
 export type IDataStore = DataStore & {
+  agent?: TRawOtlpDataStore;
   jaeger?: IBaseClientSettings;
   tempo?: IBaseClientSettings;
   opensearch?: IElasticSearch;

web/src/types/Generated.types.ts

@@ -1382,6 +1382,7 @@ export interface external {
         };
         /** @enum {string} */
         SupportedDataStores:
+          | "agent"
           | "jaeger"
           | "opensearch"
           | "tempo"