Prometheus: Create Prometheus library (#81641)

* Move to the library * copy from library * move them in src * have additional files * add unmigrated/dulicated code and files * migrate from brendan's pr module.ts, query_hints.ts, tracking.ts, and remove plugin.json * migrate from brendan's pr metric_find_query.test.ts * migrate from brendan's pr language_utils.test.ts * migrate from brendan's pr index.ts in root and in configuration * migrate from brendan's pr datasource.test.ts * migrate from brendan's pr typings folder * migrate from brendan's pr querycache folder * migrate from brendan's pr monaco-query-field folder * migrate from brendan's pr components folder without monaco-query-field folder * migrate from brendan's pr configuration/overhaul folder * migrate from brendan's pr AlertingSettingsOverhaul.tsx * Remove azure related code * migrate from brendan's pr ConfigEditor.tsx, DataSourceHttpSettingsOverhaul.tsx, ExemplarSetting.tsx, configuration/mocks.ts, PromSettings.test.tsx, PromSettings.tsx * migrate from brendan's pr useFlag.ts * migrate from brendan's pr metrics-modal folder * migrate from brendan's pr files inside components folder * migrate from brendan's pr LabelFilters* files because they are now under components folder * migrate from brendan's pr files under querybuilder/shared folder * migrate from brendan's pr aggregations.ts, QueryPattern.tsx, QueryPatternsModal.tsx, state.ts, testUtils.ts under querybuilder folder * Apply Ivana's PR https://github.com/grafana/grafana/pull/81656 * Apply jack's suggestions in this PR https://github.com/grafana/grafana/pull/77762 * Apply Ivana's PR https://github.com/grafana/grafana/pull/81656 * Fix type import * add monaco-promql to transformIgnorePatterns to run prometheus frontend library tests * remove Loki specific tests because we removed Loki code to decouple Loki * add prometheus specific references * We are moving these betterer issues from core Prometheus to the Library and we promise to remove all issues in the future, thank you * include prometheus library in package.json * add yarn lock with prometheus frontend library * decouple final core import from metric_find_query.test.ts * run prettier * fix core imports in promqail * fix lint errors * run prettier * add grafana-ui to devdeps to fix lint errors * update yarn.lock * grafana-ui fix * trying to fix grafana-ui type errors with lerna drone check * trying to fix grafana-ui type errors with lerna drone check * trying to fix grafana-ui type errors with lerna drone check * trying to fix grafana-ui type errors with lerna drone check * try to pass typecheck --------- Co-authored-by: Brendan O'Handley <brendan.ohandley@grafana.com>
2024-02-02 15:30:14 +01:00
parent 89271df647
commit 75c2d39f79
183 changed files with 33356 additions and 3 deletions
@@ -0,0 +1,139 @@
+import React from 'react';
+
+import { AnnotationQuery } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { EditorField, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
+import { AutoSizeInput, Input, Space } from '@grafana/ui';
+
+import { PromQueryCodeEditor } from '../querybuilder/components/PromQueryCodeEditor';
+import { PromQuery } from '../types';
+
+import { PromQueryEditorProps } from './types';
+
+type Props = PromQueryEditorProps & {
+  annotation?: AnnotationQuery<PromQuery>;
+  onAnnotationChange?: (annotation: AnnotationQuery<PromQuery>) => void;
+};
+
+export function AnnotationQueryEditor(props: Props) {
+  // This is because of problematic typing. See AnnotationQueryEditorProps in grafana-data/annotations.ts.
+  const annotation = props.annotation!;
+  const onAnnotationChange = props.onAnnotationChange!;
+  const query = { expr: annotation.expr, refId: annotation.name, interval: annotation.step };
+
+  return (
+    <>
+      <EditorRows>
+        <PromQueryCodeEditor
+          {...props}
+          query={query}
+          showExplain={false}
+          onChange={(query) => {
+            onAnnotationChange({
+              ...annotation,
+              expr: query.expr,
+            });
+          }}
+        />
+        <EditorRow>
+          <EditorField
+            label="Min step"
+            tooltip={
+              <>
+                An additional lower limit for the step parameter of the Prometheus query and for the{' '}
+                <code>$__interval</code> and <code>$__rate_interval</code> variables.
+              </>
+            }
+          >
+            <AutoSizeInput
+              type="text"
+              aria-label="Set lower limit for the step parameter"
+              placeholder={'auto'}
+              minWidth={10}
+              onCommitChange={(ev) => {
+                onAnnotationChange({
+                  ...annotation,
+                  step: ev.currentTarget.value,
+                });
+              }}
+              defaultValue={query.interval}
+              id={selectors.components.DataSource.Prometheus.annotations.minStep}
+            />
+          </EditorField>
+        </EditorRow>
+      </EditorRows>
+      <Space v={0.5} />
+      <EditorRow>
+        <EditorField
+          label="Title"
+          tooltip={
+            'Use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.'
+          }
+        >
+          <Input
+            type="text"
+            placeholder="{{alertname}}"
+            value={annotation.titleFormat}
+            onChange={(event) => {
+              onAnnotationChange({
+                ...annotation,
+                titleFormat: event.currentTarget.value,
+              });
+            }}
+            data-testid={selectors.components.DataSource.Prometheus.annotations.title}
+          />
+        </EditorField>
+        <EditorField label="Tags">
+          <Input
+            type="text"
+            placeholder="label1,label2"
+            value={annotation.tagKeys}
+            onChange={(event) => {
+              onAnnotationChange({
+                ...annotation,
+                tagKeys: event.currentTarget.value,
+              });
+            }}
+            data-testid={selectors.components.DataSource.Prometheus.annotations.tags}
+          />
+        </EditorField>
+        <EditorField
+          label="Text"
+          tooltip={
+            'Use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.'
+          }
+        >
+          <Input
+            type="text"
+            placeholder="{{instance}}"
+            value={annotation.textFormat}
+            onChange={(event) => {
+              onAnnotationChange({
+                ...annotation,
+                textFormat: event.currentTarget.value,
+              });
+            }}
+            data-testid={selectors.components.DataSource.Prometheus.annotations.text}
+          />
+        </EditorField>
+        <EditorField
+          label="Series value as timestamp"
+          tooltip={
+            'The unit of timestamp is milliseconds. If the unit of the series value is seconds, multiply its range vector by 1000.'
+          }
+        >
+          <EditorSwitch
+            value={annotation.useValueForTime}
+            onChange={(event) => {
+              onAnnotationChange({
+                ...annotation,
+                useValueForTime: event.currentTarget.value,
+              });
+            }}
+            data-testid={selectors.components.DataSource.Prometheus.annotations.seriesValueAsTimestamp}
+          />
+        </EditorField>
+      </EditorRow>
+    </>
+  );
+}