Prometheus: Add support for Exemplars (#28057)

* Fix typos

* Query exemplars API

* Add link to traceID

* Update exemplar to show more information

Reduce exemplars density

* Fix typos

* Query exemplars API

* Add link to traceID

* Update exemplar to show more information

Reduce exemplars density

* Update GraphNG legend type

* Show new graph component in Explore

* Add exemplar annotation a design update

* Graph panel not to show red line annotation

Exemplar plugin to use y value

* Address review comments

* Density filter for exemplars

* Update schema of exemplars

* Density filter with y-value sampling

* Enforce axis scales to include 0

* Changes after merge with master

* Show metrics when there is no result

* Decorators tests fix

* ExemplarMarker to receive component prop

* Remove context menu from explore graph

* Add color to graph

* Update explore graph panel

* Update graph config to use default values

* Fix data source tests

* Do not show exemplars outside of graph

* Add exemplars switch

* Fix typos

* Add exemplars query only when enabled

* Show graph in explore without filling it

* Update exemplars plugin y value scale selection

* Update tests

* Add data source picker for internal linking

* Increase pointSize for better visibility

* Fix explore e2e test

* Fix data link title variable interpolation

* Use new switch component in PromExemplarField

* Move FieldLink component to new file

* Convert exemplar to datalink

* Add legend toggling logic to Explore

* Add legend toggling to Explore

* Address Ivana's feedback

* Address Andrej's comments

* Address Gio's feedback

* Add tests for result_transformer

* Fix eslint issues

* Change sampler formula for better readability

Co-authored-by: David Kaltschmidt <david@leia.lan>
Co-authored-by: David Kaltschmidt <david@leia.fritz.box>
Co-authored-by: David Kaltschmidt <david.kaltschmidt@gmail.com>

public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx

@@ -0,0 +1,21 @@
+import { InlineField, InlineSwitch } from '@grafana/ui';
+import React from 'react';
+import { PromQuery } from '../types';
+
+interface Props {
+  query: PromQuery;
+  onChange: (value: PromQuery) => void;
+}
+
+const onExemplarsChange = ({ query, onChange }: Props) => (e: React.ChangeEvent<HTMLInputElement>) => {
+  const exemplar = e.target.checked;
+  onChange({ ...query, exemplar });
+};
+
+export function PromExemplarField(props: Props) {
+  return (
+    <InlineField label="Exemplars" labelWidth="auto">
+      <InlineSwitch label="Exemplars" value={props.query.exemplar} onChange={onExemplarsChange(props)} />
+    </InlineField>
+  );
+}

public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx

@@ -5,6 +5,7 @@ import { PromExploreExtraFieldProps, PromExploreExtraField } from './PromExplore
 const setup = (propOverrides?: PromExploreExtraFieldProps) => {
   const queryType = 'range';
   const stepValue = '1';
+  const query = { exemplar: false };
   const onStepChange = jest.fn();
   const onQueryTypeChange = jest.fn();
   const onKeyDownFunc = jest.fn();
@@ -12,6 +13,7 @@ const setup = (propOverrides?: PromExploreExtraFieldProps) => {
   const props: any = {
     queryType,
     stepValue,
+    query,
     onStepChange,
     onQueryTypeChange,
     onKeyDownFunc,

public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

@@ -4,17 +4,21 @@ import { css, cx } from 'emotion';
 
 // Types
 import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
+import { PromQuery } from '../types';
+import { PromExemplarField } from './PromExemplarField';
 
 export interface PromExploreExtraFieldProps {
   queryType: string;
   stepValue: string;
+  query: PromQuery;
   onStepChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
   onKeyDownFunc: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onQueryTypeChange: (value: string) => void;
+  onChange: (value: PromQuery) => void;
 }
 
 export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
-  ({ queryType, stepValue, onStepChange, onQueryTypeChange, onKeyDownFunc }) => {
+  ({ queryType, stepValue, query, onChange, onStepChange, onQueryTypeChange, onKeyDownFunc }) => {
     const rangeOptions = [
       { value: 'range', label: 'Range' },
       { value: 'instant', label: 'Instant' },
@@ -71,6 +75,8 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
             value={stepValue}
           />
         </div>
+
+        <PromExemplarField query={query} onChange={onChange} />
       </div>
     );
   }

public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx

@@ -63,6 +63,8 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
           onQueryTypeChange={onQueryTypeChange}
           onStepChange={onStepChange}
           onKeyDownFunc={onReturnKeyDown}
+          query={query}
+          onChange={onChange}
         />
       }
     />

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -9,6 +9,7 @@ import { PromOptions, PromQuery } from '../types';
 
 import PromQueryField from './PromQueryField';
 import PromLink from './PromLink';
+import { PromExemplarField } from './PromExemplarField';
 
 const { Switch } = LegacyForms;
 
@@ -96,7 +97,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
   };
 
   render() {
-    const { datasource, query, range, data } = this.props;
+    const { datasource, query, range, data, onChange } = this.props;
     const { formatOption, instant, interval, intervalFactorOption, legendFormat } = this.state;
 
     return (
@@ -182,6 +183,8 @@ export class PromQueryEditor extends PureComponent<Props, State> {
               />
             </InlineFormLabel>
           </div>
+
+          <PromExemplarField query={query} onChange={onChange} />
         </div>
       </div>
     );

public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap

@@ -4,9 +4,17 @@ exports[`PromExploreQueryEditor should render component 1`] = `
 <PromQueryField
   ExtraFieldElement={
     <Memo
+      onChange={[MockFunction]}
       onKeyDownFunc={[Function]}
       onQueryTypeChange={[Function]}
       onStepChange={[Function]}
+      query={
+        Object {
+          "expr": "",
+          "interval": "1s",
+          "refId": "A",
+        }
+      }
       queryType="both"
       stepValue="1s"
     />

public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap

@@ -181,6 +181,15 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
         />
       </FormLabel>
     </div>
+    <PromExemplarField
+      onChange={[MockFunction]}
+      query={
+        Object {
+          "expr": "",
+          "refId": "A",
+        }
+      }
+    />
   </div>
 </div>
 `;