102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import React from 'react';
|
|
|
|
import {
|
|
DataSourceJsonData,
|
|
DataSourcePluginOptionsEditorProps,
|
|
GrafanaTheme2,
|
|
updateDatasourcePluginJsonDataOption,
|
|
} from '@grafana/data';
|
|
import { ConfigSection } from '@grafana/plugin-ui';
|
|
import { InlineFieldRow, InlineField, InlineSwitch, Alert, Stack, useStyles2 } from '@grafana/ui';
|
|
|
|
import { FeatureName, featuresToTempoVersion } from '../datasource';
|
|
|
|
interface StreamingOptions extends DataSourceJsonData {
|
|
streamingEnabled?: {
|
|
search?: boolean;
|
|
metrics?: boolean;
|
|
};
|
|
}
|
|
interface Props extends DataSourcePluginOptionsEditorProps<StreamingOptions> {}
|
|
|
|
export const StreamingSection = ({ options, onOptionsChange }: Props) => {
|
|
const styles = useStyles2(getStyles);
|
|
return (
|
|
<ConfigSection
|
|
title="Streaming"
|
|
isCollapsible={false}
|
|
description={
|
|
<Stack gap={0.5}>
|
|
<div>Enable streaming for different Tempo features.</div>
|
|
<a
|
|
href={'https://grafana.com/docs/tempo/latest/traceql/#stream-query-results'}
|
|
target={'_blank'}
|
|
rel="noreferrer"
|
|
className={styles.a}
|
|
>
|
|
Learn more
|
|
</a>
|
|
</Stack>
|
|
}
|
|
>
|
|
<Alert severity="info" title="Streaming and self-managed Tempo instances">
|
|
If your Tempo instance is behind a load balancer or proxy that does not supporting gRPC or HTTP2, streaming will
|
|
probably not work and should be disabled.
|
|
</Alert>
|
|
<InlineFieldRow>
|
|
<InlineField
|
|
tooltip={`Enable streaming for search queries. Minimum required version for Tempo: ${featuresToTempoVersion[FeatureName.searchStreaming]}.`}
|
|
label="Search queries"
|
|
labelWidth={26}
|
|
>
|
|
<InlineSwitch
|
|
id={'streamingEnabled.search'}
|
|
// TECHDEBT: We should check whether the feature is supported by the Tempo version,
|
|
// but here we don't have easily access to such information
|
|
value={options.jsonData.streamingEnabled?.search || false}
|
|
onChange={(event: React.SyntheticEvent<HTMLInputElement>) => {
|
|
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'streamingEnabled', {
|
|
...options.jsonData.streamingEnabled,
|
|
search: event.currentTarget.checked,
|
|
});
|
|
}}
|
|
/>
|
|
</InlineField>
|
|
</InlineFieldRow>
|
|
<InlineFieldRow>
|
|
<InlineField
|
|
tooltip={`Enable streaming for metrics queries. Minimum required version for Tempo: ${featuresToTempoVersion[FeatureName.metricsStreaming]}.`}
|
|
label="Metrics queries"
|
|
labelWidth={26}
|
|
>
|
|
<InlineSwitch
|
|
id={'streamingEnabled.metrics'}
|
|
// TECHDEBT: We should check whether the feature is supported by the Tempo version,
|
|
// but here we don't have easily access to such information
|
|
value={options.jsonData.streamingEnabled?.metrics || false}
|
|
onChange={(event: React.SyntheticEvent<HTMLInputElement>) => {
|
|
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'streamingEnabled', {
|
|
...options.jsonData.streamingEnabled,
|
|
metrics: event.currentTarget.checked,
|
|
});
|
|
}}
|
|
/>
|
|
</InlineField>
|
|
</InlineFieldRow>
|
|
</ConfigSection>
|
|
);
|
|
};
|
|
const getStyles = (theme: GrafanaTheme2) => {
|
|
return {
|
|
a: css({
|
|
color: theme.colors.text.link,
|
|
textDecoration: 'underline',
|
|
marginLeft: '5px',
|
|
'&:hover': {
|
|
textDecoration: 'none',
|
|
},
|
|
}),
|
|
};
|
|
};
|