some fixes

.gitignore

@@ -31,5 +31,5 @@ vendor/
 
 # Editor
 .idea
-
+.devcontainer/
 .eslintcache

docker-compose.yaml

@@ -7,8 +7,8 @@ services:
       context: ./.config
       args:
         grafana_version: ${GRAFANA_VERSION:-9.2.5}
-    ports:
-      - 3000:3000/tcp
+    # ports:
+    #   - 3000:3000/tcp
     network_mode: "host"
     environment:
       - GF_SECURITY_ADMIN_USER=admin

pkg/plugin/datasource.go

@@ -80,11 +80,13 @@ func (d *monitoringDatasource) QueryData(ctx context.Context, req *backend.Query
 
 		for _, metric := range metrics.Metrics {
 			var valuesField *data.Field
-			switch metric.Type {
-			case "IGAUGE":
+			switch {
+			case len(metric.Timeseries.DoubleValues) > 0:
+				valuesField = valueField(mr.Alias, metric.Name, metric.Labels, metric.Timeseries.DoubleValues)
+			case len(metric.Timeseries.Int64Values) > 0:
 				valuesField = valueField(mr.Alias, metric.Name, metric.Labels, metric.Timeseries.Int64Values)
 			default:
-				valuesField = valueField(mr.Alias, metric.Name, metric.Labels, metric.Timeseries.DoubleValues)
+				continue
 			}
 
 			timestamps := make([]time.Time, len(metric.Timeseries.Timestamps))

src/components/QueryEditor.tsx

@@ -1,7 +1,7 @@
 import defaults from 'lodash/defaults';
 
 import React, { ChangeEvent, PureComponent } from 'react';
-import { Field, InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
+import { Field, InlineField, InlineFieldRow, Input, QueryField, Select } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from '../datasource';
 import { defaultQuery, MonitoringDataSourceOptions, MonitoringQuery } from '../types';
@@ -29,13 +29,13 @@ export class QueryEditor extends PureComponent<Props> {
     onRunQuery();
   };
 
-  onQueryTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const { onChange, onRunQuery, query } = this.props;
-    onChange({ ...query, queryText: event.target.value });
-    onRunQuery();
+  onQueryTextChange = (value: string) => {
+    const { onChange, query } = this.props;
+    onChange({ ...query, queryText: value });
   };
 
   render() {
+    const { onRunQuery } = this.props;
     const query = defaults(this.props.query, defaultQuery);
     const { folderId, aggregation, alias, queryText } = query;
     const aggOptions: Array<SelectableValue<string>> = [
@@ -75,13 +75,15 @@ export class QueryEditor extends PureComponent<Props> {
           invalid={queryText.includes("folderId")}
           error="do not use folderId in query"
         >
-          <TextArea
-            name='query-text'
-            value={queryText}
+          <QueryField
+            query={queryText}
+            placeholder="Type query (Shift+Enter to run)"
+            portalOrigin="ycmonitoring"
             onChange={this.onQueryTextChange}
+            onRunQuery={onRunQuery}
           />
         </Field>
-      </div>
+      </div >
     );
   }
 }

src/datasource.ts

@@ -1,10 +1,22 @@
-import { DataSourceInstanceSettings } from '@grafana/data';
+import { DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
 
-import { MonitoringQuery, MonitoringDataSourceOptions } from './types';
-import { DataSourceWithBackend } from '@grafana/runtime';
+import { MonitoringQuery, MonitoringDataSourceOptions, defaultQuery } from './types';
+import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
+import { defaults } from 'lodash';
 
 export class DataSource extends DataSourceWithBackend<MonitoringQuery, MonitoringDataSourceOptions> {
   constructor(instanceSettings: DataSourceInstanceSettings<MonitoringDataSourceOptions>) {
     super(instanceSettings);
   }
+
+  applyTemplateVariables(inQuery: MonitoringQuery, scopedVars: ScopedVars): Record<string, any> {
+    const tsrv = getTemplateSrv();
+    const query = defaults(inQuery, defaultQuery);
+
+    query.aggregation = tsrv.replace(query.aggregation, scopedVars);
+    query.alias = tsrv.replace(query.alias, scopedVars);
+    query.folderId = tsrv.replace(query.folderId, scopedVars);
+    query.queryText = tsrv.replace(query.queryText, scopedVars);
+    return query;
+  };
 }

src/plugin.json

@@ -3,6 +3,7 @@
   "type": "datasource",
   "name": "Monitoring",
   "id": "positiveviking-ycmonitoring-datasource",
+  "state": "alpha",
   "metrics": true,
   "backend": true,
   "executable": "gpx_ycmonitoring",
@@ -34,7 +35,7 @@
     "updated": "%TODAY%"
   },
   "dependencies": {
-    "grafanaDependency": "^9.2.5",
+    "grafanaDependency": ">=8.0.0",
     "plugins": []
   }
 }

src/types.ts

@@ -9,7 +9,6 @@ export interface MonitoringQuery extends DataQuery {
 
 export const defaultQuery: Partial<MonitoringQuery> = {
   aggregation: "AVG",
-  queryText: "{}",
 };
 
 /**