Update variable support in Scenes dashboard (#79)

* Fix variable support in dashboard scene

* Fix lint errors

* Update version

* Update minimum version

---------

Co-authored-by: Mikhail Volkov <[email protected]>

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 4.2.0 (IN PROGRESS)
+
+### Breaking changes
+
+- Requires Grafana 10.2 and Grafana 11
+
+### Features / Enhancements
+
+- Update variable support in Scenes dashboard (#79)
+
 ## 4.1.0 (2024-06-25)
 
 ### Features / Enhancements

README.md

@@ -16,7 +16,7 @@ The Business Input Data Source is a plugin for Grafana that allows storing and e
 
 ## Requirements
 
-- Business Input Data Source version 4.X requires **Grafana 10** or **Grafana 11**.
+- Business Input Data Source version 4.X requires **Grafana 10.2** or **Grafana 11**.
 - Static Data Source version 3.X requires **Grafana 9.2** or **Grafana 10**.
 - Static Data Source version 2.X requires **Grafana 8.5** or **Grafana 9**.
 - Static Data Source version 1.X requires **Grafana 7.3**.

docker-compose.yml

@@ -24,6 +24,7 @@ services:
       - GF_DEFAULT_APP_MODE=development
       - GF_USERS_DEFAULT_THEME=light
       - GF_INSTALL_PLUGINS=volkovlabs-image-panel,marcusolsson-dynamictext-panel,grafana-llm-app
+      # - GF_FEATURE_TOGGLES_ENABLE=dashboardScene
     volumes:
       - ./dist:/var/lib/grafana/plugins/marcusolsson-static-datasource
       - ./provisioning:/etc/grafana/provisioning

package.json

@@ -79,5 +79,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "4.1.0"
+  "version": "4.2.0"
 }

provisioning/dashboards/panels.json

@@ -104,8 +104,7 @@
               "viz": false
             }
           },
-          "mappings": [],
-          "unitScale": true
+          "mappings": []
         },
         "overrides": []
       },
@@ -182,6 +181,7 @@
         "autoPlay": true,
         "buttons": [],
         "controls": true,
+        "formats": ["audio", "image", "pdf", "video"],
         "height": 0,
         "heightMode": "auto",
         "infinityPlay": false,
@@ -237,8 +237,7 @@
               "viz": false
             }
           },
-          "mappings": [],
-          "unitScale": true
+          "mappings": []
         },
         "overrides": []
       },
@@ -313,8 +312,12 @@
       {
         "current": {
           "selected": false,
-          "text": "Test",
-          "value": "Test"
+          "text": "1950",
+          "value": "1950"
+        },
+        "datasource": {
+          "type": "marcusolsson-static-datasource",
+          "uid": "P1D2C73DC01F2359B"
         },
         "definition": "",
         "hide": 0,
@@ -330,13 +333,13 @@
                 "config": {},
                 "name": "Test",
                 "type": "string",
-                "values": ["Test"]
+                "values": [null]
               }
             ],
             "meta": {
               "custom": {
-                "customCode": "const result = {\n  ...frame,\n  fields: frame.fields.map((field) => ({\n    ...field,\n    values: []\n  }))\n}\n\nreturn Promise.resolve(result);",
-                "valuesEditor": "manual"
+                "customCode": "const array = new Array(100).fill(null);\n\nconst result = {\n  ...frame,\n  fields: frame.fields.map((field) => ({\n    ...field,\n    values: array.map((_, index) => `${1950 + index}`)\n  }))\n}\n\nreturn Promise.resolve(result);",
+                "valuesEditor": "custom"
               }
             },
             "name": "Test"
@@ -358,6 +361,6 @@
   "timezone": "",
   "title": "Panels",
   "uid": "O4tc_E6Gz",
-  "version": 1,
+  "version": 2,
   "weekStart": ""
 }

src/datasource/datasource.ts

@@ -35,7 +35,7 @@ export class DataSource extends DataSourceApi<StaticQuery, StaticDataSourceOptio
     /**
      * Enable variable support
      */
-    this.variables = new VariableSupport();
+    this.variables = new VariableSupport(this);
   }
 
   /**

src/datasource/variable.test.ts

@@ -4,15 +4,15 @@ import { VariableSupport } from './variable';
  * Variable Support
  */
 describe('VariableSupport', () => {
-  const variableSupport = new VariableSupport();
+  const variableSupport = new VariableSupport({} as any);
 
   /**
    * Type
    */
   describe('GetType', () => {
     it('Should return correct type', async () => {
       const type = variableSupport.getType();
-      expect(type).toEqual('datasource');
+      expect(type).toEqual('custom');
     });
   });
 });

src/datasource/variable.ts

@@ -1,13 +1,21 @@
-import { DataSourceVariableSupport } from '@grafana/data';
+import { CustomVariableSupport, DataQueryRequest, DataQueryResponse } from '@grafana/data';
+import { from, Observable } from 'rxjs';
 import { StaticQuery } from 'types';
 
+import { QueryEditor } from '../components';
 import { DataSource } from './datasource';
 
 /**
  * Variable Support
  */
-export class VariableSupport extends DataSourceVariableSupport<DataSource, StaticQuery> {
-  constructor() {
+export class VariableSupport extends CustomVariableSupport<DataSource, StaticQuery> {
+  constructor(private readonly datasource: DataSource) {
     super();
   }
+
+  editor = QueryEditor;
+
+  query(options: DataQueryRequest<StaticQuery>): Observable<DataQueryResponse> {
+    return from(this.datasource.query(options));
+  }
 }

src/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://github.com/grafana/grafana/raw/main/docs/sources/developers/plugins/plugin.schema.json",
   "annotations": true,
   "dependencies": {
-    "grafanaDependency": ">=10.0.0",
+    "grafanaDependency": ">=10.2.0",
     "plugins": []
   },
   "id": "marcusolsson-static-datasource",