refactor: rewrite plugin to add multiples queries support

src/DataSource.ts

@@ -1,15 +1,18 @@
+import { EditorQuery, scenarios } from './types';
 import {
+  DataQueryRequest,
   DataQueryResponse,
   DataSourceApi,
   DataSourceInstanceSettings,
   FieldType,
   MutableDataFrame,
 } from '@grafana/data';
-import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
-import { GenericOptions, CustomQuery, QueryRequest, defaultQuery } from './types';
+import { getBackendSrv } from '@grafana/runtime';
+import { alertsQueryBuilder, retrieveAlertsData } from './alerts/query';
+import { CustomAlertQuery, GenericOptions } from './alerts/types';
 import { firstValueFrom } from 'rxjs';
 
-export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOptions> {
+export class AlertmanagerDataSource extends DataSourceApi<EditorQuery, GenericOptions> {
   url: string;
   withCredentials: boolean;
   headers: any;
@@ -26,34 +29,27 @@ export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOp
     }
   }
 
-  async query(options: QueryRequest): Promise<DataQueryResponse> {
+  async query(options: DataQueryRequest<EditorQuery>): Promise<DataQueryResponse> {
+    let url: string;
+    let params: string[];
     const promises = options.targets.map((query) => {
-      query = { ...defaultQuery, ...query };
       if (query.hide) {
         return Promise.resolve(new MutableDataFrame());
       }
 
-      let params: string[] = [];
-      const queryActive = query.active ? 'true' : 'false';
-      const querySilenced = query.silenced ? 'true' : 'false';
-      const queryInhibited = query.inhibited ? 'true' : 'false';
-      params.push(`active=${queryActive}`);
-      params.push(`silenced=${querySilenced}`);
-      params.push(`inhibited=${queryInhibited}`);
-      if (query.receiver !== undefined && query.receiver.length > 0) {
-        params.push(`receiver=${query.receiver}`);
-      }
-      if (query.filters !== undefined && query.filters.length > 0) {
-        query.filters = getTemplateSrv().replace(query.filters, options.scopedVars, this.interpolateQueryExpr);
-        query.filters.split(',').forEach((value) => {
-          params.push(`filter=${encodeURIComponent(value)}`);
-        });
+      switch (query.scenario) {
+        case scenarios.alerts:
+          params = alertsQueryBuilder(this, query as CustomAlertQuery, options);
+          url = `${this.url}/api/v2/alerts?${params.join('&')}`;
+          break;
+        default:
+          return new Promise(() => null);
       }
 
       const request = this.doRequest({
-        url: `${this.url}/api/v2/alerts?${params.join('&')}`,
+        url: url,
         method: 'GET',
-      }).then((request) => firstValueFrom(request));
+      }).then((request: any) => firstValueFrom(request));
 
       return request.then((data: any) => this.retrieveData(query, data));
     });
@@ -122,36 +118,14 @@ export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOp
     return frame;
   }
 
-  parseAlertAttributes(alert: any, fields: any[]): string[] {
-    let severityValue = 4;
-    switch (alert.labels['severity']) {
-      case 'critical':
-        severityValue = 1;
-        break;
-      case 'warning':
-        severityValue = 2;
-        break;
-      case 'info':
-        severityValue = 3;
-        break;
+  retrieveData(query: any, data: any): Promise<MutableDataFrame> {
+    switch (query.scenario) {
+      case scenarios.alerts:
+        return retrieveAlertsData(query, data);
+
       default:
-        break;
+        return new Promise(() => null);
     }
-
-    const row: string[] = [alert.startsAt, severityValue];
-    fields.slice(2).forEach((element: any) => {
-      row.push(alert.annotations[element.name] || alert.labels[element.name] || '');
-    });
-    return row;
-  }
-
-  retrieveData(query: any, data: any): Promise<MutableDataFrame> {
-    const frame = this.buildDataFrame(query.refId, data.data);
-    data.data.forEach((alert: any) => {
-      const row: string[] = this.parseAlertAttributes(alert, frame.fields);
-      frame.appendRow(row);
-    });
-    return Promise.resolve(frame);
   }
 
   interpolateQueryExpr(value: string | string[] = [], variable: any) {

src/QueryEditor.tsx

@@ -1,86 +1,67 @@
-import { QueryEditorProps } from '@grafana/data';
-import { LegacyForms } from '@grafana/ui';
+import defaults from 'lodash/defaults';
+import React, { useCallback } from 'react';
+import { EditorQuery, QEditorProps, scenarios } from './types';
+import AlertsQueryEditor from './alerts/QueryEditor';
+import FormSelect from './components/FormSelect';
 
-import React, { ChangeEvent, PureComponent } from 'react';
-import { AlertmanagerDataSource } from './DataSource';
+const scenarioOptions = {
+  [scenarios.alerts]: { label: 'Alerts', value: scenarios.alerts },
+};
 
-import { GenericOptions, CustomQuery, defaultQuery } from './types';
+const defaultQuery: Partial<EditorQuery> = {
+  scenario: scenarios.alerts,
+};
 
-import './css/json-editor.css';
+export const QueryEditor = (props: QEditorProps) => {
+  const query = defaults(props.query, defaultQuery);
 
-type Props = QueryEditorProps<AlertmanagerDataSource, CustomQuery, GenericOptions>;
+  const onFormChange = useCallback(
+    (key: any, value: { value: any }, forceRunQuery = false) => {
+      let newQuery;
+      if (typeof key === 'object') {
+        newQuery = { ...query, ...key };
+      }
+      if (typeof key === 'string') {
+        newQuery = { ...query, [key]: value?.value ?? value ?? '' };
+      }
+      props.onChange(newQuery);
+      forceRunQuery && props.onRunQuery();
+    },
+    [query]
+  );
 
-const { FormField, Switch } = LegacyForms;
+  const onScenarioChange = useCallback((scenario: any) => {
+    props.onChange({ scenario: scenario.value } as EditorQuery);
+  }, []);
 
-export class QueryEditor extends PureComponent<Props> {
-  onReceiverChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query, onRunQuery } = this.props;
-    onChange({ ...query, receiver: event.target.value });
-    onRunQuery();
+  const editorsProps = {
+    ...props,
+    onFormChange,
   };
 
-  onFiltersChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onChange, query, onRunQuery } = this.props;
-    onChange({ ...query, filters: event.target.value });
-    onRunQuery();
-  };
-
-  onActiveChange = () => {
-    const { onChange, query, onRunQuery } = this.props;
-    query.active = !query.active;
-    onChange({ ...query });
-    onRunQuery();
-  };
-
-  onSilencedChange = () => {
-    const { onChange, query, onRunQuery } = this.props;
-    query.silenced = !query.silenced;
-    onChange({ ...query });
-    onRunQuery();
-  };
-
-  onInhibitedChange = () => {
-    const { onChange, query, onRunQuery } = this.props;
-    query.inhibited = !query.inhibited;
-    onChange({ ...query });
-    onRunQuery();
-  };
-
-  render() {
-    const { receiver, filters, active, silenced, inhibited } = { ...defaultQuery, ...this.props.query };
-
-    return (
-      <>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <FormField
-              value={receiver}
-              inputWidth={10}
-              onChange={this.onReceiverChange}
-              labelWidth={5}
-              label="Receiver"
-            />
-          </div>
-          <div className="gf-form">
-            <FormField
-              value={filters}
-              inputWidth={30}
-              onChange={this.onFiltersChange}
-              labelWidth={15}
-              label="Filters (comma separated key=value)"
-            />
-          </div>
-          <div className="gf-form">
-            <Switch label="Active" checked={active} onChange={this.onActiveChange} />
-          </div>
-          <div className="gf-form">
-            <Switch label="Silenced" checked={silenced} onChange={this.onSilencedChange} />
-          </div>
-          <div className="gf-form">
-            <Switch label="Inhibited" checked={inhibited} onChange={this.onInhibitedChange} />
-          </div>
-        </div>
-      </>
-    );
+  let editor: any;
+  switch (query.scenario) {
+    case scenarios.alerts:
+      editor = <AlertsQueryEditor {...editorsProps} />;
+      break;
+    default:
+      editor = null;
   }
-}
+
+  return (
+    <div className={'gf-form-group'}>
+      <div className={'gf-form'}>
+        <FormSelect
+          queryKeyword
+          inputWidth={0}
+          label={'Scenario'}
+          tooltip={'Select scenario'}
+          value={query.scenario}
+          options={Object.values(scenarioOptions)}
+          onChange={onScenarioChange}
+        />
+      </div>
+      {editor}
+    </div>
+  );
+};

src/alerts/QueryEditor.tsx

@@ -0,0 +1,76 @@
+import { LegacyForms } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+import { CustomAlertQuery, defaultAlertQuery } from './types';
+import { ScenarioProps } from 'types';
+import { defaults } from 'lodash';
+
+const { FormField, Switch } = LegacyForms;
+
+const AlertsQueryEditor = (props: ScenarioProps<CustomAlertQuery>) => {
+  const { onChange, onRunQuery } = props;
+  const query = defaults(props.query, defaultAlertQuery);
+
+  const onReceiverChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, receiver: event.target.value } as CustomAlertQuery);
+    onRunQuery();
+  };
+
+  const onFiltersChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, filters: event.target.value } as CustomAlertQuery);
+    onRunQuery();
+  };
+
+  const onActiveChange = () => {
+    query.active = !query.active;
+    onChange({ ...query });
+    onRunQuery();
+  };
+
+  const onSilencedChange = () => {
+    query.silenced = !query.silenced;
+    onChange({ ...query });
+    onRunQuery();
+  };
+
+  const onInhibitedChange = () => {
+    query.inhibited = !query.inhibited;
+    onChange({ ...query });
+    onRunQuery();
+  };
+
+  return (
+    <>
+      <div className="gf-form-inline">
+        <div className="gf-form">
+          <FormField
+            value={query.receiver}
+            inputWidth={10}
+            onChange={onReceiverChange}
+            labelWidth={5}
+            label="Receiver"
+          />
+        </div>
+        <div className="gf-form">
+          <FormField
+            value={query.filters}
+            inputWidth={30}
+            onChange={onFiltersChange}
+            labelWidth={15}
+            label="Filters (comma separated key=value)"
+          />
+        </div>
+        <div className="gf-form">
+          <Switch label="Active" checked={query.active!} onChange={onActiveChange} />
+        </div>
+        <div className="gf-form">
+          <Switch label="Silenced" checked={query.silenced!} onChange={onSilencedChange} />
+        </div>
+        <div className="gf-form">
+          <Switch label="Inhibited" checked={query.inhibited!} onChange={onInhibitedChange} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AlertsQueryEditor;