diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/FeedbackLink.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/FeedbackLink.tsx new file mode 100644 index 00000000000..ae3916a0f51 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/FeedbackLink.tsx @@ -0,0 +1,40 @@ +import { css } from '@emotion/css'; +import React from 'react'; + +import { GrafanaTheme2 } from '@grafana/data'; +import { Stack } from '@grafana/experimental'; +import { Icon, useStyles2 } from '@grafana/ui'; + +export interface Props { + feedbackUrl?: string; +} + +export function FeedbackLink({ feedbackUrl }: Props) { + const styles = useStyles2(getStyles); + + return ( + + + Give feedback + + + ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + link: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + ':hover': { + color: theme.colors.text.link, + }, + }), + }; +} diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricEncyclopediaModal.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricEncyclopediaModal.tsx index fdbaf7e980d..a56244aaeb6 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricEncyclopediaModal.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricEncyclopediaModal.tsx @@ -27,6 +27,8 @@ import { promQueryModeller } from '../PromQueryModeller'; import { regexifyLabelValuesQueryString } from '../shared/parsingUtils'; import { PromVisualQuery } from '../types'; +import { FeedbackLink } from './FeedbackLink'; + type Props = { datasource: PrometheusDatasource; isOpen: boolean; @@ -347,6 +349,7 @@ export const MetricEncyclopediaModal = (props: Props) => { onDismiss={onClose} aria-label="Metric Encyclopedia" > +
Browse {totalMetricCount} metric{totalMetricCount > 1 ? 's' : ''} by text, by type, alphabetically or select a variable.