@grafana/create-plugin 1.6.3 → 1.6.4-canary.287.cbc2025.0

package/dist/constants.js

@@ -32,7 +32,8 @@ var PLUGIN_TYPES;
     PLUGIN_TYPES["scenes"] = "scenesapp";
 })(PLUGIN_TYPES = exports.PLUGIN_TYPES || (exports.PLUGIN_TYPES = {}));
 exports.EXTRA_TEMPLATE_VARIABLES = {
-    grafanaVersion: '9.5.3'
+    grafanaVersion: '9.5.3',
+    grafanaImage: 'grafana-enterprise'
 };
 exports.GRAFANA_FE_PACKAGES = [
     '@grafana/data',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "1.6.3",
+  "version": "1.6.4-canary.287.cbc2025.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -66,5 +66,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "2233e1de749b6f8b7cc597c68493a4c0a0c9826e"
+  "gitHead": "cbc20259afd0cac3068f851c373eac9cd358dcd7"
 }

package/src/constants.ts

@@ -41,6 +41,7 @@ export enum PLUGIN_TYPES {
 // Example: "@grafana/ui": "{{ grafanaVersion }}"
 export const EXTRA_TEMPLATE_VARIABLES = {
   grafanaVersion: '9.5.3',
+  grafanaImage: 'grafana-enterprise',
 };
 
 export const GRAFANA_FE_PACKAGES = [

package/templates/common/docker-compose.yaml

@@ -6,6 +6,7 @@ services:
     build:
       context: ./.config
       args:
+        grafana_image: ${GRAFANA_IMAGE:-{{~grafanaImage~}} }
         grafana_version: ${GRAFANA_VERSION:-{{~grafanaVersion~}} }
     ports:
       - 3000:3000/tcp

package/templates/common/package.json

@@ -61,7 +61,8 @@
     "@grafana/data": "{{ grafanaVersion }}",
     "@grafana/runtime": "{{ grafanaVersion }}",
     "@grafana/ui": "{{ grafanaVersion }}",{{#if_eq pluginType "scenesapp"}}
-    "@grafana/scenes": "^0.11.0",{{/if_eq}}
+    "@grafana/schema": "10.0.1",
+    "@grafana/scenes": "^0.19.0",{{/if_eq}}
     "react": "17.0.2",
     "react-dom": "17.0.2",{{#if isAppType}}
     "react-router-dom": "^5.2.0",

package/templates/scenes-app/src/pages/HelloWorld/helloWorldScene.tsx

@@ -1,4 +1,4 @@
-import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, VizPanel } from '@grafana/scenes';
+import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, PanelBuilders } from '@grafana/scenes';
 
 export function getScene() {
   return new EmbeddedScene({
@@ -7,13 +7,7 @@ export function getScene() {
         new SceneFlexItem({
           width: '100%',
           height: 300,
-          body: new VizPanel({
-            title: 'Hello world panel',
-            pluginId: 'text',
-            options: {
-              content: 'Hello world! ',
-            },
-          }),
+          body: PanelBuilders.text().setTitle('Hello world panel').setOption('content', 'Hello world!').build(),
         }),
       ],
     }),

package/templates/scenes-app/src/pages/Home/scenes.tsx

@@ -1,6 +1,7 @@
 import {
   CustomVariable,
   EmbeddedScene,
+  PanelBuilders,
   SceneControlsSpacer,
   SceneFlexItem,
   SceneFlexLayout,
@@ -10,7 +11,6 @@ import {
   SceneTimeRange,
   SceneVariableSet,
   VariableValueSelectors,
-  VizPanel,
 } from '@grafana/scenes';
 import { DATASOURCE_REF } from '../../constants';
 import { CustomSceneObject } from './CustomSceneObject';
@@ -78,11 +78,11 @@ export function getBasicScene(templatised = true, seriesToShow = '__server_names
     body: new SceneFlexLayout({
       children: [
         new SceneFlexItem({
-          body: new VizPanel({
-            pluginId: 'timeseries',
+          minHeight: 300,
+          body: PanelBuilders.timeseries()
             // Title is using variable value
-            title: templatised ? '${seriesToShow}' : seriesToShow,
-          }),
+            .setTitle(templatised ? '${seriesToShow}' : seriesToShow)
+            .build(),
         }),
       ],
     }),

package/templates/scenes-app/src/pages/WithDrilldown/panels.tsx

@@ -1,125 +1,95 @@
-import { ReducerID, ThresholdsMode } from '@grafana/data';
+import { ReducerID } from '@grafana/data';
 import {
+  PanelBuilders,
   SceneByFrameRepeater,
   SceneDataNode,
   SceneDataTransformer,
   SceneFlexItem,
   SceneFlexLayout,
-  VizPanel,
 } from '@grafana/scenes';
+import { TableCellBackgroundDisplayMode, TableCellDisplayMode, ThresholdsMode } from '@grafana/schema';
 
 export function getRoomsTemperatureTable() {
-  return new VizPanel({
-    pluginId: 'table',
-    $data: new SceneDataTransformer({
-      transformations: [
-        {
-          id: 'reduce',
-          options: {
-            reducers: ['mean'],
-          },
-        },
-        {
-          id: 'organize',
-          options: {
-            excludeByName: {},
-            indexByName: {},
-            renameByName: {
-              Field: 'Room',
-              Mean: 'Average temperature',
-            },
-          },
+  const data = new SceneDataTransformer({
+    transformations: [
+      {
+        id: 'reduce',
+        options: {
+          reducers: ['mean'],
         },
-      ],
-    }),
-    displayMode: 'transparent',
-    title: 'Room temperature overview',
-    hoverHeader: true,
-    options: {
-      sortBy: ['Average temperature'],
-    },
-    fieldConfig: {
-      defaults: {
-        custom: {
-          align: 'auto',
-          cellOptions: {
-            type: 'auto',
+      },
+      {
+        id: 'organize',
+        options: {
+          excludeByName: {},
+          indexByName: {},
+          renameByName: {
+            Field: 'Room',
+            Mean: 'Average temperature',
           },
-          inspect: false,
-        },
-        mappings: [],
-        thresholds: {
-          mode: ThresholdsMode.Absolute,
-          steps: [
-            {
-              color: 'light-blue',
-              value: 0,
-            },
-            {
-              color: 'orange',
-              value: 19,
-            },
-            {
-              color: 'dark-red',
-              value: 26,
-            },
-          ],
-        },
-        color: {
-          mode: 'thresholds',
         },
       },
-      overrides: [
+    ],
+  });
+  return PanelBuilders.table()
+    .setTitle('Room temperature overview')
+    .setData(data)
+    .setHoverHeader(true)
+    .setDisplayMode('transparent')
+    .setOption('sortBy', [{ displayName: 'Average temperature' }])
+    .setThresholds({
+      mode: ThresholdsMode.Absolute,
+      steps: [
         {
-          matcher: {
-            id: 'byName',
-            options: 'Average temperature',
-          },
-          properties: [
-            {
-              id: 'unit',
-              value: 'celsius',
-            },
-            {
-              id: 'custom.cellOptions',
-              value: {
-                type: 'color-background',
-                mode: 'basic',
-              },
-            },
-            {
-              id: 'custom.width',
-              value: 200,
-            },
-            {
-              id: 'custom.align',
-              value: 'center',
-            },
-          ],
+          color: 'light-blue',
+          value: 0,
         },
         {
-          matcher: {
-            id: 'byName',
-            options: 'Room',
-          },
-          properties: [
-            {
-              id: 'links',
-              value: [
-                {
-                  title: 'Go to room overview',
-                  url: '${__url.path}/room/${__value.text}/temperature${__url.params}',
-                },
-              ],
-            },
-          ],
+          color: 'orange',
+          value: 19,
+        },
+        {
+          color: 'dark-red',
+          value: 26,
         },
       ],
-    },
-  });
+    })
+    .setColor({ mode: 'thresholds' })
+    .setCustomFieldConfig('align', 'auto')
+    .setCustomFieldConfig('cellOptions', { type: TableCellDisplayMode.Auto })
+    .setCustomFieldConfig('inspect', false)
+    .setOverrides((b) =>
+      b
+        .matchFieldsWithName('Average temperature')
+        .overrideUnit('celsius')
+        .overrideCustomFieldConfig('cellOptions', {
+          type: TableCellDisplayMode.ColorBackground,
+          mode: TableCellBackgroundDisplayMode.Basic,
+        })
+        .overrideCustomFieldConfig('width', 200)
+        .overrideCustomFieldConfig('align', 'center')
+        .matchFieldsWithName('Room')
+        .overrideLinks([
+          { title: 'Go to room overview', url: '${__url.path}/room/${__value.text}/temperature${__url.params}' },
+        ])
+    )
+    .build();
 }
 
 export function getRoomsTemperatureStats() {
+  const stat = PanelBuilders.stat()
+    .setUnit('celsius')
+    .setLinks([
+      {
+        title: 'Go to room temperature overview',
+        url: '${__url.path}/room/${__field.name}/temperature${__url.params}',
+      },
+      {
+        title: 'Go to room humidity overview',
+        url: '${__url.path}/room/${__field.name}/humidity${__url.params}',
+      },
+    ]);
+
   return new SceneByFrameRepeater({
     body: new SceneFlexLayout({
       direction: 'row',
@@ -130,57 +100,32 @@ export function getRoomsTemperatureStats() {
       return new SceneFlexItem({
         height: '50%',
         minWidth: '20%',
-        body: new VizPanel({
-          title: frame.name,
-          pluginId: 'stat',
-
-          $data: new SceneDataNode({
-            data: {
-              ...data,
-              series: [frame],
-            },
-          }),
-          fieldConfig: {
-            defaults: {
-              unit: 'celsius',
-              links: [
-                {
-                  title: 'Go to room temperature overview',
-                  url: '${__url.path}/room/${__field.name}/temperature${__url.params}',
-                },
-                {
-                  title: 'Go to room humidity overview',
-                  url: '${__url.path}/room/${__field.name}/humidity${__url.params}',
-                },
-              ],
-            },
-            overrides: [],
-          },
-        }),
+        body: stat
+          .setTitle(frame.name || '')
+          .setData(
+            new SceneDataNode({
+              data: {
+                ...data,
+                series: [frame],
+              },
+            })
+          )
+          .build(),
       });
     },
   });
 }
 
 export function getRoomTemperatureStatPanel(reducers: ReducerID[]) {
-  return new VizPanel({
-    pluginId: 'stat',
-    title: '',
-    $data: new SceneDataTransformer({
-      transformations: [
-        {
-          id: 'reduce',
-          options: {
-            reducers,
-          },
+  const data = new SceneDataTransformer({
+    transformations: [
+      {
+        id: 'reduce',
+        options: {
+          reducers,
         },
-      ],
-    }),
-    fieldConfig: {
-      defaults: {
-        unit: 'celsius',
       },
-      overrides: [],
-    },
+    ],
   });
+  return PanelBuilders.stat().setData(data).setUnit('celsius').build();
 }

package/templates/scenes-app/src/pages/WithDrilldown/scenes.tsx

@@ -3,12 +3,12 @@ import {
   EmbeddedScene,
   SceneFlexLayout,
   SceneQueryRunner,
-  VizPanel,
   SceneTimeRange,
   SceneTimePicker,
   SceneControlsSpacer,
   SceneRefreshPicker,
   SceneFlexItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 import { DATASOURCE_REF } from '../../constants';
 import { getRoomTemperatureStatPanel } from './panels';
@@ -29,17 +29,7 @@ export function getTemperatureOverviewScene(roomName: string) {
       children: [
         new SceneFlexItem({
           height: 500,
-          body: new VizPanel({
-            title: 'Temperature over time',
-            pluginId: 'timeseries',
-
-            fieldConfig: {
-              defaults: {
-                unit: 'celsius',
-              },
-              overrides: [],
-            },
-          }),
+          body: PanelBuilders.timeseries().setTitle('Temperature over time').setUnit('celsius').build(),
         }),
         new SceneFlexItem({
           body: new SceneFlexLayout({
@@ -79,17 +69,7 @@ export function getHumidityOverviewScene(roomName: string) {
       children: [
         new SceneFlexItem({
           height: 500,
-          body: new VizPanel({
-            title: 'Humidity readings over time',
-            pluginId: 'timeseries',
-
-            fieldConfig: {
-              defaults: {
-                unit: 'humidity',
-              },
-              overrides: [],
-            },
-          }),
+          body: PanelBuilders.timeseries().setTitle('Humidity over time').setUnit('humidity').build(),
         }),
       ],
     }),