Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Dec 20, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion web/src/components/Settings/DataStoreForm/DataStoreForm.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
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 {SupportedDataStoresToName} from 'constants/DataStore.constants';
Expand Down Expand Up @@ -77,6 +78,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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;
Original file line number Diff line number Diff line change
@@ -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="tracetest:4318/v1/traces" 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;
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand Down Expand Up @@ -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;
`;
Original file line number Diff line number Diff line change
@@ -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');
2 changes: 1 addition & 1 deletion web/src/models/DataStore.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 0 additions & 5 deletions web/src/services/DataStores/AzureAppInsights.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,16 @@
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) {

Check warning on line 41 in web/src/services/DataStores/AzureAppInsights.service.ts

View workflow job for this annotation

GitHub Actions / WebUI unit tests

'dataStoreType' is defined but never used

Check warning on line 41 in web/src/services/DataStores/AzureAppInsights.service.ts

View workflow job for this annotation

GitHub Actions / WebUI unit tests

'configuredDataStore' is defined but never used
const {
resourceArmId = '',
connectionType = ConnectionTypes.Direct,
Expand All @@ -57,9 +55,6 @@
connectionType,
accessToken,
useAzureActiveDirectoryAuth,
isIngestorEnabled:
configuredDataStore === SupportedDataStores.AzureAppInsights &&
connectionType === ConnectionTypes.Collector,
},
},
dataStoreType: SupportedDataStores.AzureAppInsights,
Expand Down
20 changes: 5 additions & 15 deletions web/src/services/DataStores/OtelCollector.service.ts
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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,
};
Expand Down
Loading