grafana/public/app/plugins/datasource/tempo/CheatSheet.tsx
Ashley Harrison 47f8717149
React: Use new JSX transform (#88802)
* update eslint, tsconfig + esbuild to handle new jsx transform

* remove thing that breaks the new jsx transform

* remove react imports

* adjust grafana-icons build

* is this the correct syntax?

* try this

* well this was much easier than expected...

* change grafana-plugin-configs webpack config

* fixes

* fix lockfile

* fix 2 more violations

* use path.resolve instead of require.resolve

* remove react import

* fix react imports

* more fixes

* remove React import

* remove import React from docs

* remove another react import
2024-06-25 12:43:47 +01:00

38 lines
1.4 KiB
XML

import { config, reportInteraction } from '@grafana/runtime';
import { TextLink } from '@grafana/ui';
export default function CheatSheet() {
reportInteraction('grafana_traces_cheatsheet_clicked', {
datasourceType: 'tempo',
grafana_version: config.buildInfo.version,
});
return (
<>
<h2>Tempo Cheat Sheet</h2>
<p>
<TextLink href={'https://grafana.com/docs/tempo/latest/'} external={true}>
Grafana Tempo
</TextLink>{' '}
is an open source, easy-to-use, and high-volume distributed tracing backend.
</p>
<p>
Tempo implements{' '}
<TextLink href={'https://grafana.com/docs/tempo/latest/traceql'} external={true}>
TraceQL
</TextLink>
, a traces-first query language inspired by LogQL and PromQL. This query language allows users to precisely and
easily select spans and jump directly to the spans fulfilling the specified conditions.
</p>
<p>
You can compose TraceQL queries using either the Search tab (the TraceQL query builder) or the TraceQL tab (the
TraceQL query editor). Both of these methods let you build queries and drill-down into result sets. (
<TextLink href={'https://grafana.com/docs/grafana/latest/datasources/tempo/query-editor/'} external={true}>
Learn more
</TextLink>
)
</p>
</>
);
}