feat: display system status counts (#6)

Co-authored-by: Carson Moore <carson.moore@ni.com>
Co-authored-by: Cameron Waterman <cameron.waterman@ni.com>

release.config.js

@@ -16,4 +16,4 @@ module.exports = {
         }],
         '@semantic-release/git'
     ]
-}
+}

src/core/utils.test.ts

@@ -0,0 +1,15 @@
+import { enumToOptions } from "./utils";
+
+test('enumToOptions', () => {
+    enum fakeStringEnum {
+        Label1 = 'Value1',
+        Label2 = 'Value2'
+    };
+
+    const result = enumToOptions(fakeStringEnum);
+
+    expect(result).toEqual([
+        { label: 'Label1', value: 'Value1' },
+        { label: 'Label2', value: 'Value2' }
+    ]);
+});

src/core/utils.ts

@@ -0,0 +1,11 @@
+import { SelectableValue } from "@grafana/data";
+
+export function enumToOptions<T>(stringEnum: { [name: string]: T }): Array<SelectableValue<T>> {
+    const RESULT = [];
+
+    for (const [key, value] of Object.entries(stringEnum)) {
+        RESULT.push({ label: key, value: value });
+    }
+
+    return RESULT;
+}

src/datasources/system/SystemDataSource.ts

@@ -5,11 +5,12 @@ import {
   DataSourceInstanceSettings,
   MutableDataFrame,
   FieldType,
+  CoreApp,
 } from '@grafana/data';
 
 import { TestingStatus, getBackendSrv } from '@grafana/runtime';
 
-import { SystemQuery } from './types';
+import { QueryType, SystemQuery, SystemSummary } from './types';
 
 export class SystemDataSource extends DataSourceApi<SystemQuery> {
   baseUrl: string;
@@ -19,24 +20,31 @@ export class SystemDataSource extends DataSourceApi<SystemQuery> {
   }
 
   async query(options: DataQueryRequest<SystemQuery>): Promise<DataQueryResponse> {
-    const { range } = options;
-    const from = range!.from.valueOf();
-    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.queryKind === QueryType.Summary) {
+        let summaryResponse = await getBackendSrv().get<SystemSummary>(this.baseUrl + '/get-systems-summary');
+        return new MutableDataFrame({
+          refId: target.refId,
+          fields: [
+            { name: 'Connected', values: [summaryResponse.connectedCount], type: FieldType.number },
+            { name: 'Disconnected', values: [summaryResponse.disconnectedCount], type: FieldType.number },
+          ],
+        });
+      } else {
+        throw Error("Not implemented");
+      }
+    }));
 
     return { data };
   }
 
+  getDefaultQuery(_core: CoreApp): Partial<SystemQuery> {
+    return {
+      queryKind: QueryType.Summary,
+    };
+  }
+
   async testDatasource(): Promise<TestingStatus> {
     await getBackendSrv().get(this.baseUrl + '/get-systems-summary');
     return { status: 'success', message: 'Data source connected and authentication successful!' };

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';
+import { enumToOptions } from 'core/utils';
 
 type Props = QueryEditorProps<SystemDataSource, SystemQuery>;
 
-export function SystemQueryEditor({ query, onChange, onRunQuery }: Props) {
-  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, queryText: event.target.value });
-  };
+// const QUERY_TYPES = [
+//   {label: "Metadata", value: QueryType.Metadata},
+//   {label: "Summary", value: QueryType.Summary}
+// ]
 
-  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, constant: parseFloat(event.target.value) });
-    // executes the query
+export function SystemQueryEditor({ query, onChange, onRunQuery }: Props) {
+  const onQueryTypeChange = (value: QueryType) => {
+    onChange({ ...query, queryKind: 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={enumToOptions(QueryType)} onChange={onQueryTypeChange} value={query.queryKind} />
+        </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;
+  queryKind: QueryType
+}
+
+export interface SystemSummary {
+  connectedCount: number,
+  disconnectedCount: number
 }