Applying patchfile as per Issue 103 - Summarization by Alert State

src/DataSource.ts

@@ -6,7 +6,14 @@ import {
   MutableDataFrame,
 } from '@grafana/data';
 import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
-import { GenericOptions, CustomQuery, QueryRequest } from './types';
+import {
+  AlertStateLabel,
+  GenericOptions,
+  CustomQuery,
+  QueryRequest,
+  FullDisplayMode,
+  SummaryDisplayMode,
+} from './types';
 
 export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOptions> {
   url: string;
@@ -86,7 +93,7 @@ export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOp
     return getBackendSrv().fetch(options);
   }
 
-  buildDataFrame(refId: string, data: any): MutableDataFrame {
+  buildDataFrame(query: any, data: any): MutableDataFrame {
     const fields = [{ name: 'Time', type: FieldType.time }];
 
     if (data.length > 0) {
@@ -104,29 +111,108 @@ export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOp
           type: FieldType.string,
         });
       });
+      if (query.displayState) {
+        fields.push({
+          name: AlertStateLabel,
+          type: FieldType.string,
+        });
+      }
     }
 
     const frame = new MutableDataFrame({
-      refId: refId,
+      refId: query.refId,
+      fields: fields,
+    });
+    return frame;
+  }
+
+  buildSummaryDataFrame(query: any): MutableDataFrame {
+    var fields: Array<{ name: string; type: FieldType }> = [];
+    if (query.active) {
+      fields.push({
+        name: 'Active',
+        type: FieldType.number,
+      });
+    }
+    if (query.silenced) {
+      fields.push({
+        name: 'Silenced',
+        type: FieldType.number,
+      });
+    }
+    if (query.inhibited) {
+      fields.push({
+        name: 'Inhibited',
+        type: FieldType.number,
+      });
+    }
+    const frame = new MutableDataFrame({
+      refId: query.refId,
       fields: fields,
     });
     return frame;
   }
 
-  parseAlertAttributes(alert: any, fields: any[]): string[] {
+  parseAlertAttributes(alert: any, fields: any[], displayState: boolean): string[] {
     const row: string[] = [alert.startsAt];
     fields.slice(1).forEach((element: any) => {
-      row.push(alert.annotations[element.name] || alert.labels[element.name] || '');
+      if (displayState && element.name === AlertStateLabel) {
+        row.push(alert.status.state);
+      } else {
+        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);
+  parseAlertCounts(query: any, data: any): string[] {
+    let active = 0;
+    let silenced = 0;
+    let inhibited = 0;
     data.data.forEach((alert: any) => {
-      const row: string[] = this.parseAlertAttributes(alert, frame.fields);
-      frame.appendRow(row);
+      let state: string = alert.status.state;
+      switch (state) {
+        case 'active': {
+          active++;
+          break;
+        }
+        case 'suppressed': {
+          silenced++;
+          break;
+        }
+        case 'inhibited': {
+          inhibited++;
+          break;
+        }
+      }
     });
-    return Promise.resolve(frame);
+    const row: string[] = [];
+    if (query.active) {
+      row.push(active.toString());
+    }
+    if (query.silenced) {
+      row.push(silenced.toString());
+    }
+    if (query.inhibited) {
+      row.push(inhibited.toString());
+    }
+    return row;
+  }
+
+  retrieveData(query: any, data: any): Promise<MutableDataFrame> {
+    if (query.displayMode === SummaryDisplayMode) {
+      const frame = this.buildSummaryDataFrame(query);
+      frame.appendRow(this.parseAlertCounts(query, data));
+      return Promise.resolve(frame);
+    } else if (query.displayMode === FullDisplayMode) {
+      const frame = this.buildDataFrame(query, data.data);
+      data.data.forEach((alert: any) => {
+        const row: string[] = this.parseAlertAttributes(alert, frame.fields, query.displayState);
+        frame.appendRow(row);
+      });
+      return Promise.resolve(frame);
+    } else {
+      return Promise.resolve(new MutableDataFrame());
+    }
   }
 }

src/QueryEditor.tsx

@@ -1,17 +1,23 @@
 import { QueryEditorProps } from '@grafana/data';
-import { LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { RadioButtonGroup } from '@grafana/ui';
 
 import React, { ChangeEvent, PureComponent } from 'react';
 import { AlertmanagerDataSource } from './DataSource';
 
-import { GenericOptions, CustomQuery } from './types';
+import { GenericOptions, CustomQuery, FullDisplayMode, SummaryDisplayMode } from './types';
 
 import './css/json-editor.css';
 
 type Props = QueryEditorProps<AlertmanagerDataSource, CustomQuery, GenericOptions>;
 
 const { FormField, Switch } = LegacyForms;
 
+const DisplayModeOptions = [
+  { label: 'Summary', description: 'Return a summary of alert counts per selected state.', value: SummaryDisplayMode },
+  { label: 'Full', description: 'Return full results as a table.', value: FullDisplayMode },
+];
+
 export class QueryEditor extends PureComponent<Props> {
   onReceiverChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { onChange, query, onRunQuery } = this.props;
@@ -46,30 +52,55 @@ export class QueryEditor extends PureComponent<Props> {
     onRunQuery();
   };
 
+  onDisplayModeChange = (option: string | undefined) => {
+    const { onChange, query, onRunQuery } = this.props;
+    if (option === undefined) {
+      query.displayMode = FullDisplayMode;
+    } else {
+      query.displayMode = option;
+    }
+    onChange({ ...query });
+    onRunQuery();
+  };
+
+  onDisplayStateChange = () => {
+    const { onChange, query, onRunQuery } = this.props;
+    query.displayState = !query.displayState;
+    onChange({ ...query });
+    onRunQuery();
+  };
+
   render() {
-    const { receiver, filters, active, silenced, inhibited } = this.props.query;
+    const { receiver, filters, active, silenced, inhibited, displayMode, displayState } = 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 className="row">
+          <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>
+        </div>
+        <div className="row">
+          <InlineFormLabel width={8} tooltip="Controls which alerts, based on state, are returned by the query.">
+            Selected States
+          </InlineFormLabel>
           <div className="gf-form">
             <Switch label="Active" checked={active} onChange={this.onActiveChange} />
           </div>
@@ -80,6 +111,26 @@ export class QueryEditor extends PureComponent<Props> {
             <Switch label="Inhibited" checked={inhibited} onChange={this.onInhibitedChange} />
           </div>
         </div>
+        <div className="row">
+          <InlineFormLabel
+            width={8}
+            tooltip="Controls whether all information is returned (full) or whether alerts are aggregated by state (count).
+             Full information can be extended with each alert's state."
+          >
+            Display Mode
+          </InlineFormLabel>
+          <RadioButtonGroup<string>
+            options={DisplayModeOptions}
+            value={displayMode}
+            onChange={this.onDisplayModeChange}
+          />
+          <Switch
+            tooltip="Controls whether alert state information is included in the full result set."
+            label="Show State"
+            checked={displayState}
+            onChange={this.onDisplayStateChange}
+          />
+        </div>
       </>
     );
   }

src/css/json-editor.css

@@ -4,4 +4,8 @@
 
 .grafana-json-datasource-editor div {
     width: 100%;
+}
+
+row {
+    display: block;
 }

src/types.ts

@@ -6,15 +6,22 @@ export interface QueryRequest extends DataQueryRequest<CustomQuery> {
   adhocFilters?: any[];
 }
 
+export const FullDisplayMode = 'full';
+export const SummaryDisplayMode = 'summary';
+export const DefaultDisplayMode = FullDisplayMode;
+export const AlertStateLabel = 'Alert State';
+
 export interface CustomQuery extends DataQuery {
   target?: string;
   receiver: string;
   filters: string;
   active: boolean;
   silenced: boolean;
   inhibited: boolean;
+  displayMode: string;
+  displayState: boolean;
 }
 
-export const defaultQuery: Partial<CustomQuery> = {};
+export const defaultQuery: Partial<CustomQuery> = { displayMode: DefaultDisplayMode };
 
 export interface GenericOptions extends DataSourceJsonData {}