Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(frontend): adding enable switch for ingestor for Otel DataSto…
…res (#2715) * feature(frontend): adding enable switch for ingestor for Otel DataStores * feature(frontend): adding missing url * feature(frontend): updating enabled ingestor check logic
- Loading branch information
Showing
25 changed files
with
270 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...eDocsBanner/DataStoreDocsBanner.styled.ts → ...omponents/DocsBanner/DocsBanner.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import {ReadOutlined} from '@ant-design/icons'; | ||
| import * as S from './DocsBanner.styled'; | ||
|
|
||
| const DocsBanner: React.FC = ({children}) => { | ||
| return ( | ||
| <S.DocsBannerContainer> | ||
| <ReadOutlined /> | ||
| <S.Text>{children}</S.Text> | ||
| </S.DocsBannerContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default DocsBanner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // eslint-disable-next-line no-restricted-exports | ||
| export {default} from './DocsBanner'; |
18 changes: 7 additions & 11 deletions
18
web/src/components/Settings/DataStoreDocsBanner/DataStoreDocsBanner.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 6 additions & 2 deletions
8
web/src/components/Settings/DataStorePlugin/forms/HttpClient/HttpClient.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Configuration.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<TDraftDataStore>(); | ||
| const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores; | ||
| const example = CollectorConfigMap[dataStoreType!]; | ||
|
|
||
| return ( | ||
| <> | ||
| <OtelCollectorStyles.SubtitleContainer> | ||
| <OtelCollectorStyles.Title>OpenTelemetry Collector Configuration</OtelCollectorStyles.Title> | ||
| <OtelCollectorStyles.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. | ||
| </OtelCollectorStyles.Description> | ||
| </OtelCollectorStyles.SubtitleContainer> | ||
| <S.FormContainer> | ||
| <S.FormColumn> | ||
| <OtelCollectorStyles.CodeContainer data-cy="file-viewer-code-container"> | ||
| <OtelCollectorStyles.CopyIconContainer onClick={() => copy(example)}> | ||
| <OtelCollectorStyles.CopyIcon /> | ||
| </OtelCollectorStyles.CopyIconContainer> | ||
| <SyntaxHighlighter language="yaml" style={arduinoLight}> | ||
| {example} | ||
| </SyntaxHighlighter> | ||
| </OtelCollectorStyles.CodeContainer> | ||
| </S.FormColumn> | ||
| </S.FormContainer> | ||
| <DataStoreDocsBanner dataStoreType={dataStoreType} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Configuration; |
40 changes: 40 additions & 0 deletions
40
web/src/components/Settings/DataStorePlugin/forms/OpenTelemetryCollector/Ingestor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<TDraftDataStore>(); | ||
| const dataStoreType = Form.useWatch('dataStoreType', form) as TCollectorDataStores; | ||
| const baseName = ['dataStore', dataStoreType]; | ||
|
|
||
| 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> | ||
| Enable Tracetest ingestion endpoint | ||
| </S.SwitchContainer> | ||
| <DocsBanner> | ||
| Need more information about setting up ingestion endpoint?{' '} | ||
| <a target="_blank" href={INGESTOR_ENDPOINT_URL}> | ||
| Go to our docs | ||
| </a> | ||
| </DocsBanner> | ||
| </S.Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default Ingestor; |
Oops, something went wrong.