3
0
mirror of https://github.com/grafana/grafana.git synced 2025-01-27 16:57:14 -06:00
grafana/public/app/core/components/TraceToLogsSettings.tsx
Torkel Ödegaard 1d689888b0
Prettier: Upgrade to 2 ()
* Updated package json but not updated source files

* Update eslint plugin

* updated files
2021-01-20 07:59:48 +01:00

73 lines
2.2 KiB
TypeScript

import {
DataSourceJsonData,
DataSourcePluginOptionsEditorProps,
GrafanaTheme,
updateDatasourcePluginJsonDataOption,
} from '@grafana/data';
import { InlineFormLabel, TagsInput, useStyles } from '@grafana/ui';
import { css } from 'emotion';
import React from 'react';
import { DataSourcePicker } from './Select/DataSourcePicker';
export interface TraceToLogsOptions {
datasourceUid?: string;
tags?: string[];
}
export interface TraceToLogsData extends DataSourceJsonData {
tracesToLogs?: TraceToLogsOptions;
}
interface Props extends DataSourcePluginOptionsEditorProps<TraceToLogsData> {}
export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles);
return (
<>
<h3 className="page-heading">Trace to logs</h3>
<div className={styles.infoText}>
Trace to logs let&apos;s you navigate from a trace span to the selected data source&apos;s log.
</div>
<div className="gf-form">
<InlineFormLabel tooltip="The data source the trace is going to navigate to">Data source</InlineFormLabel>
<DataSourcePicker
pluginId="loki"
current={options.jsonData.tracesToLogs?.datasourceUid}
noDefault={true}
onChange={(ds) =>
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
datasourceUid: ds.uid,
tags: options.jsonData.tracesToLogs?.tags,
})
}
/>
</div>
<div className="gf-form">
<InlineFormLabel tooltip="Tags that will be used in the Loki query. Default tags: 'cluster', 'hostname', 'namespace', 'pod'">
Tags
</InlineFormLabel>
<TagsInput
tags={options.jsonData.tracesToLogs?.tags}
onChange={(tags) =>
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
datasourceUid: options.jsonData.tracesToLogs?.datasourceUid,
tags: tags,
})
}
/>
</div>
</>
);
}
const getStyles = (theme: GrafanaTheme) => ({
infoText: css`
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textSemiWeak};
`,
});