feat: display system status counts

src/datasources/system/SystemDataSource.ts

@@ -9,7 +9,7 @@ import {
 
 import { TestingStatus, getBackendSrv } from '@grafana/runtime';
 
-import { SystemQuery } from './types';
+import { QueryType, SystemQuery, SystemSummary } from './types';
 
 export class SystemDataSource extends DataSourceApi<SystemQuery> {
   baseUrl: string;
@@ -24,15 +24,26 @@ export class SystemDataSource extends DataSourceApi<SystemQuery> {
     const to = range!.to.valueOf();
 
     // Return a constant for each query.
-    const data = options.targets.map((target) => {
-      return new MutableDataFrame({
-        refId: target.refId,
-        fields: [
-          { name: 'Time', values: [from, to], type: FieldType.time },
-          { name: 'Value', values: [target.constant, target.constant], type: FieldType.number },
-        ],
-      });
-    });
+    const data = await Promise.all(options.targets.map(async (target) => {
+      if (target.queryClass === QueryType.Summary) {
+        var summaryResponse = await getBackendSrv().get<SystemSummary>(this.baseUrl + '/get-systems-summary');
+        return new MutableDataFrame({
+          refId: target.refId,
+          fields: [
+            { name: 'Connected Count', values: [summaryResponse.connectedCount], type: FieldType.number },
+            { name: 'Disconnected Count', values: [summaryResponse.disconnectedCount], type: FieldType.number },
+          ],
+        });
+      } else {
+        return new MutableDataFrame({
+          refId: target.refId,
+          fields: [
+            { name: 'Time', values: [from, to], type: FieldType.time },
+            { name: 'Value', values: [1, 2], type: FieldType.number },
+          ],
+        });
+      }
+    }));
 
     return { data };
   }

src/datasources/system/components/SystemQueryEditor.tsx

@@ -1,32 +1,30 @@
-import React, { ChangeEvent } from 'react';
-import { InlineField, Input } from '@grafana/ui';
+import React from 'react';
+import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { SystemDataSource } from '../SystemDataSource';
-import { SystemQuery } from '../types';
+import { QueryType, SystemQuery } from '../types';
 
 type Props = QueryEditorProps<SystemDataSource, SystemQuery>;
 
+const QUERY_TYPES = [
+  {label: "Metadata", value: QueryType.Metadata},
+  {label: "Summary", value: QueryType.Summary}
+]
+
 export function SystemQueryEditor({ query, onChange, onRunQuery }: Props) {
-  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, queryText: event.target.value });
-  };
 
-  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, constant: parseFloat(event.target.value) });
-    // executes the query
+  const onQueryTypeChange = (value: QueryType) => {
+    onChange({ ...query, queryClass: value })
     onRunQuery();
-  };
-
-  const { queryText, constant } = query;
+  }
 
   return (
-    <div className="gf-form">
-      <InlineField label="Constant">
-        <Input onChange={onConstantChange} value={constant} width={8} type="number" step="0.1" />
-      </InlineField>
-      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
-        <Input onChange={onQueryTextChange} value={queryText || ''} />
-      </InlineField>
+    <div>
+      <InlineFieldRow >
+        <InlineField label="Query Type">
+          <RadioButtonGroup options={QUERY_TYPES} onChange={onQueryTypeChange} value={query.queryClass} />
+        </InlineField>
+      </InlineFieldRow>
     </div>
   );
 }

src/datasources/system/types.ts

@@ -1,6 +1,15 @@
 import { DataQuery } from '@grafana/schema'
 
+export enum QueryType {
+  Metadata = "Metadata",
+  Summary = "Summary"
+}
+
 export interface SystemQuery extends DataQuery {
-  queryText?: string;
-  constant: number;
+  queryClass: QueryType
+}
+
+export interface SystemSummary {
+  connectedCount: number,
+	disconnectedCount: number
 }