@grafana/create-plugin 1.4.0 → 1.4.1-canary.250.42054cd.0

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

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+
+import { SceneApp, SceneAppPage } from '@grafana/scenes';
+import { getBasicScene } from './scenes';
+import { prefixRoute } from '../../utils/utils.routing';
+import { DATASOURCE_REF, ROUTES } from '../../constants';
+import { config } from '@grafana/runtime';
+import { Alert } from '@grafana/ui';
+
+const getScene = () => {
+  return new SceneApp({
+    pages: [
+      new SceneAppPage({
+        title: 'Home page',
+        subTitle:
+          'This scene showcases a basic scene functionality, including query runner, variable and a custom scene object.',
+        url: prefixRoute(ROUTES.Home),
+        getScene: () => {
+          return getBasicScene();
+        },
+      }),
+    ],
+  });
+};
+export const HomePage = () => {
+  const scene = useMemo(() => getScene(), []);
+
+  return (
+    <>
+      {!config.featureToggles.topnav && (
+        <Alert title="Missing topnav feature toggle">
+          Scenes are designed to work with the new navigation wrapper that will be standard in Grafana 10
+        </Alert>
+      )}
+
+      {!config.datasources[DATASOURCE_REF.uid] && (
+        <Alert title={`Missing ${DATASOURCE_REF.uid} datasource`}>
+          These demos depend on <b>testdata</b> datasource: <code>{JSON.stringify(DATASOURCE_REF)}</code>. See{' '}
+          <a href="https://github.com/grafana/grafana/tree/main/devenv#set-up-your-development-environment">
+            https://github.com/grafana/grafana/tree/main/devenv#set-up-your-development-environment
+          </a>{' '}
+          for more details.
+        </Alert>
+      )}
+
+      <scene.Component model={scene} />
+    </>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './Home';

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

@@ -0,0 +1,100 @@
+import {
+  CustomVariable,
+  EmbeddedScene,
+  SceneControlsSpacer,
+  SceneFlexItem,
+  SceneFlexLayout,
+  SceneQueryRunner,
+  SceneRefreshPicker,
+  SceneTimePicker,
+  SceneTimeRange,
+  SceneVariableSet,
+  VariableValueSelectors,
+  VizPanel,
+} from '@grafana/scenes';
+import { DATASOURCE_REF } from '../../constants';
+import { CustomSceneObject } from './CustomSceneObject';
+
+export function getBasicScene(templatised = true, seriesToShow = '__server_names') {
+  const timeRange = new SceneTimeRange({
+    from: 'now-6h',
+    to: 'now',
+  });
+
+  // Variable definition, using Grafana built-in TestData datasource
+  const customVariable = new CustomVariable({
+    name: 'seriesToShow',
+    label: 'Series to show',
+    value: '__server_names',
+    query: 'Server Names : __server_names, House locations : __house_locations',
+  });
+
+  // Query runner definition, using Grafana built-in TestData datasource
+  const queryRunner = new SceneQueryRunner({
+    datasource: DATASOURCE_REF,
+    queries: [
+      {
+        refId: 'A',
+        datasource: DATASOURCE_REF,
+        scenarioId: 'random_walk',
+        seriesCount: 5,
+        // Query is using variable value
+        alias: templatised ? '${seriesToShow}' : seriesToShow,
+        min: 30,
+        max: 60,
+      },
+    ],
+    maxDataPoints: 100,
+  });
+
+  // Custom object definition
+  const customObject = new CustomSceneObject({
+    counter: 5,
+  });
+
+  // Query runner activation handler that will update query runner state when custom object state changes
+  queryRunner.addActivationHandler(() => {
+    const sub = customObject.subscribeToState((newState) => {
+      queryRunner.setState({
+        queries: [
+          {
+            ...queryRunner.state.queries[0],
+            seriesCount: newState.counter,
+          },
+        ],
+      });
+      queryRunner.runQueries();
+    });
+
+    return () => {
+      sub.unsubscribe();
+    };
+  });
+
+  return new EmbeddedScene({
+    $timeRange: timeRange,
+    $variables: new SceneVariableSet({ variables: templatised ? [customVariable] : [] }),
+    $data: queryRunner,
+    body: new SceneFlexLayout({
+      children: [
+        new SceneFlexItem({
+          body: new VizPanel({
+            pluginId: 'timeseries',
+            // Title is using variable value
+            title: templatised ? '${seriesToShow}' : seriesToShow,
+          }),
+        }),
+      ],
+    }),
+    controls: [
+      new VariableValueSelectors({}),
+      new SceneControlsSpacer(),
+      customObject,
+      new SceneTimePicker({ isOnCanvas: true }),
+      new SceneRefreshPicker({
+        intervals: ['5s', '1m', '1h'],
+        isOnCanvas: true,
+      }),
+    ],
+  });
+}

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

@@ -0,0 +1,97 @@
+import React, { useMemo } from 'react';
+import { prefixRoute } from '../../utils/utils.routing';
+import { DATASOURCE_REF, ROUTES } from '../../constants';
+import {
+  EmbeddedScene,
+  SceneApp,
+  SceneAppPage,
+  SceneFlexItem,
+  SceneFlexLayout,
+  SceneQueryRunner,
+} from '@grafana/scenes';
+import { getHumidityOverviewScene, getTemperatureOverviewScene } from './scenes';
+import { getRoomsTemperatureStats, getRoomsTemperatureTable } from './panels';
+
+const roomsTemperatureQuery = {
+  refId: 'Rooms temperature',
+  datasource: DATASOURCE_REF,
+  scenarioId: 'random_walk',
+  seriesCount: 8,
+  alias: '__house_locations',
+  min: 10,
+  max: 27,
+};
+
+const getScene = () =>
+  new EmbeddedScene({
+    $data: new SceneQueryRunner({
+      datasource: DATASOURCE_REF,
+      queries: [roomsTemperatureQuery],
+      maxDataPoints: 100,
+    }),
+
+    body: new SceneFlexLayout({
+      direction: 'column',
+      children: [
+        new SceneFlexItem({
+          height: 300,
+          body: getRoomsTemperatureTable(),
+        }),
+        new SceneFlexItem({
+          ySizing: 'fill',
+          body: getRoomsTemperatureStats(),
+        }),
+      ],
+    }),
+  });
+
+const getDrilldownsAppScene = () => {
+  return new SceneApp({
+    pages: [
+      new SceneAppPage({
+        title: 'Page with drilldown',
+        subTitle: 'This scene showcases a basic drilldown functionality. Interact with room to see room details scene.',
+
+        url: prefixRoute(`${ROUTES.WithDrilldown}`),
+        hideFromBreadcrumbs: true,
+        getScene,
+        drilldowns: [
+          {
+            routePath: prefixRoute(`${ROUTES.WithDrilldown}`) + '/room/:roomName',
+            getPage(routeMatch, parent) {
+              const roomName = routeMatch.params.roomName;
+
+              return new SceneAppPage({
+                url: prefixRoute(`${ROUTES.WithDrilldown}`) + `/room/${roomName}/temperature`,
+                title: `${roomName} overview`,
+                subTitle: 'This scene is a particular room drilldown. It implements two tabs to organise the data.',
+                getParentPage: () => parent,
+                getScene: () => {
+                  return new EmbeddedScene({ body: new SceneFlexLayout({ children: [] }) });
+                },
+                tabs: [
+                  new SceneAppPage({
+                    title: 'Temperature',
+                    url: prefixRoute(`${ROUTES.WithDrilldown}`) + `/room/${roomName}/temperature`,
+                    getScene: () => getTemperatureOverviewScene(roomName),
+                  }),
+                  new SceneAppPage({
+                    title: 'Humidity',
+                    url: prefixRoute(`${ROUTES.WithDrilldown}`) + `/room/${roomName}/humidity`,
+                    getScene: () => getHumidityOverviewScene(roomName),
+                  }),
+                ],
+              });
+            },
+          },
+        ],
+      }),
+    ],
+  });
+};
+
+export const WithDrilldown = () => {
+  const scene = useMemo(() => getDrilldownsAppScene(), []);
+
+  return <scene.Component model={scene} />;
+};

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

@@ -0,0 +1 @@
+export * from './WithDrilldown';

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

@@ -0,0 +1,188 @@
+import { ReducerID, ThresholdsMode } from '@grafana/data';
+import {
+  SceneByFrameRepeater,
+  SceneDataNode,
+  SceneDataTransformer,
+  SceneFlexItem,
+  SceneFlexLayout,
+  VizPanel,
+} from '@grafana/scenes';
+import { ROUTES } from '../../constants';
+import { prefixRoute } from '../../utils/utils.routing';
+
+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',
+            },
+          },
+        },
+      ],
+    }),
+    displayMode: 'transparent',
+    title: 'Room temperature overview',
+    hoverHeader: true,
+    options: {
+      sortBy: ['Average temperature'],
+    },
+    fieldConfig: {
+      defaults: {
+        custom: {
+          align: 'auto',
+          cellOptions: {
+            type: 'auto',
+          },
+          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: [
+        {
+          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',
+            },
+          ],
+        },
+        {
+          matcher: {
+            id: 'byName',
+            options: 'Room',
+          },
+          properties: [
+            {
+              id: 'links',
+              value: [
+                {
+                  title: 'Go to room overview',
+                  url: prefixRoute(`${ROUTES.WithDrilldown}`) + '/room/${__value.text}/temperature',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  });
+}
+
+export function getRoomsTemperatureStats() {
+  return new SceneByFrameRepeater({
+    body: new SceneFlexLayout({
+      direction: 'row',
+      wrap: 'wrap',
+      children: [],
+    }),
+    getLayoutChild: (data, frame) => {
+      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: prefixRoute(`${ROUTES.WithDrilldown}`) + '/room/${__field.name}/temperature',
+                },
+                {
+                  title: 'Go to room humidity overview',
+                  url: prefixRoute(`${ROUTES.WithDrilldown}`) + '/room/${__field.name}/humidity',
+                },
+              ],
+            },
+            overrides: [],
+          },
+        }),
+      });
+    },
+  });
+}
+
+export function getRoomTemperatureStatPanel(reducers: ReducerID[]) {
+  return new VizPanel({
+    pluginId: 'stat',
+    title: '',
+    $data: new SceneDataTransformer({
+      transformations: [
+        {
+          id: 'reduce',
+          options: {
+            reducers,
+          },
+        },
+      ],
+    }),
+    fieldConfig: {
+      defaults: {
+        unit: 'celsius',
+      },
+      overrides: [],
+    },
+  });
+}

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

@@ -0,0 +1,122 @@
+import { ReducerID } from '@grafana/data';
+import {
+  EmbeddedScene,
+  SceneFlexLayout,
+  SceneQueryRunner,
+  VizPanel,
+  SceneTimeRange,
+  SceneTimePicker,
+  SceneControlsSpacer,
+  SceneRefreshPicker,
+  SceneFlexItem,
+} from '@grafana/scenes';
+import { DATASOURCE_REF } from '../../constants';
+import { getRoomTemperatureStatPanel } from './panels';
+
+export function getTemperatureOverviewScene(roomName: string) {
+  return new EmbeddedScene({
+    $timeRange: new SceneTimeRange({
+      from: 'now-12h',
+      to: 'now',
+    }),
+    $data: new SceneQueryRunner({
+      datasource: DATASOURCE_REF,
+      queries: [getRoomTemperatureQuery(roomName)],
+      maxDataPoints: 100,
+    }),
+    body: new SceneFlexLayout({
+      direction: 'column',
+      children: [
+        new SceneFlexItem({
+          height: 500,
+          body: new VizPanel({
+            title: 'Temperature over time',
+            pluginId: 'timeseries',
+
+            fieldConfig: {
+              defaults: {
+                unit: 'celsius',
+              },
+              overrides: [],
+            },
+          }),
+        }),
+        new SceneFlexItem({
+          body: new SceneFlexLayout({
+            direction: 'row',
+            children: [
+              new SceneFlexItem({
+                body: getRoomTemperatureStatPanel([ReducerID.min]),
+              }),
+              new SceneFlexItem({
+                body: getRoomTemperatureStatPanel([ReducerID.max]),
+              }),
+              new SceneFlexItem({
+                body: getRoomTemperatureStatPanel([ReducerID.mean]),
+              }),
+            ],
+          }),
+        }),
+      ],
+    }),
+    controls: [new SceneControlsSpacer(), new SceneTimePicker({ isOnCanvas: true }), new SceneRefreshPicker({})],
+  });
+}
+
+export function getHumidityOverviewScene(roomName: string) {
+  return new EmbeddedScene({
+    $timeRange: new SceneTimeRange({
+      from: 'now-12h',
+      to: 'now',
+    }),
+    $data: new SceneQueryRunner({
+      datasource: DATASOURCE_REF,
+      queries: [getRoomHumidityQuery(roomName)],
+      maxDataPoints: 100,
+    }),
+    body: new SceneFlexLayout({
+      direction: 'column',
+      children: [
+        new SceneFlexItem({
+          height: 500,
+          body: new VizPanel({
+            title: 'Humidity readings over time',
+            pluginId: 'timeseries',
+
+            fieldConfig: {
+              defaults: {
+                unit: 'humidity',
+              },
+              overrides: [],
+            },
+          }),
+        }),
+      ],
+    }),
+    controls: [new SceneControlsSpacer(), new SceneTimePicker({ isOnCanvas: true }), new SceneRefreshPicker({})],
+  });
+}
+
+function getRoomTemperatureQuery(roomName: string) {
+  return {
+    refId: 'Temp',
+    datasource: DATASOURCE_REF,
+    scenarioId: 'random_walk',
+    seriesCount: 1,
+    alias: roomName,
+    min: 10,
+    max: 30,
+  };
+}
+
+function getRoomHumidityQuery(roomName: string) {
+  return {
+    refId: 'Humidity',
+    datasource: DATASOURCE_REF,
+    scenarioId: 'random_walk',
+    seriesCount: 1,
+    alias: roomName,
+    min: 30,
+    max: 60,
+  };
+}

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

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { SceneApp, SceneAppPage } from '@grafana/scenes';
+import { ROUTES } from '../../constants';
+import { prefixRoute } from '../../utils/utils.routing';
+import { getBasicScene } from '../Home/scenes';
+
+const getTab1Scene = () => {
+  return getBasicScene(false, '__server_names');
+};
+
+const getTab2Scene = () => {
+  return getBasicScene(false, '__house_locations');
+};
+
+const getScene = () =>
+  new SceneApp({
+    pages: [
+      new SceneAppPage({
+        title: 'Page with tabs',
+        subTitle: 'This scene showcases a basic tabs functionality.',
+        // Important: Mind the page route is ambiguous for the tabs to work properly
+        url: prefixRoute(`${ROUTES.WithTabs}`),
+        hideFromBreadcrumbs: true,
+        getScene: getTab1Scene,
+        tabs: [
+          new SceneAppPage({
+            title: 'Server names',
+            url: prefixRoute(`${ROUTES.WithTabs}`),
+            getScene: getTab1Scene,
+          }),
+          new SceneAppPage({
+            title: 'House locations',
+            url: prefixRoute(`${ROUTES.WithTabs}/tab-two`),
+            getScene: getTab2Scene,
+          }),
+        ],
+      }),
+    ],
+  });
+
+export const PageWithTabs = () => {
+  const scene = useMemo(() => getScene(), []);
+
+  return <scene.Component model={scene} />;
+};

package/templates/scenes-app/src/pages/WithTabs/index.tsx

@@ -0,0 +1 @@
+export * from './WithTabs';

package/templates/scenes-app/src/plugin.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
+  "type": "app",
+  "name": "{{ titleCase pluginName }}",
+  "id": "{{ normalize_id pluginName orgName 'app' }}",{{#if hasBackend}}
+  "backend": true,
+  "executable": "gpx_{{ snakeCase pluginName }}",{{/if}}
+  "info": {
+    "keywords": [
+      "app"
+    ],
+    "description": "{{ sentenceCase pluginDescription }}",
+    "author": {
+      "name": "{{ sentenceCase orgName }}"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "screenshots": [],
+    "version": "%VERSION%",
+    "updated": "%TODAY%"
+  },
+  "includes": [
+    {
+      "type": "page",
+      "name": "Home",
+      "path": "/a/%PLUGIN_ID%/home",
+      "role": "Admin",
+      "addToNav": true,
+      "defaultNav": true
+    },
+    {
+      "type": "page",
+      "name": "Page with tabs",
+      "path": "/a/%PLUGIN_ID%/page-with-tabs",
+      "role": "Admin",
+      "addToNav": true,
+      "defaultNav": false
+    },
+    {
+      "type": "page",
+      "name": "Page with drilldown",
+      "path": "/a/%PLUGIN_ID%/page-with-drilldown",
+      "role": "Admin",
+      "addToNav": true,
+      "defaultNav": false
+    }
+  ],
+  "dependencies": {
+    "grafanaDependency": ">={{ grafanaVersion }}",
+    "plugins": []
+  }
+}

package/templates/scenes-app/src/utils/utils.plugin.ts

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import { AppRootProps } from '@grafana/data';
+
+// This is used to be able to retrieve the root plugin props anywhere inside the app.
+export const PluginPropsContext = React.createContext<AppRootProps | null>(null);
+
+export const usePluginProps = () => {
+  const pluginProps = useContext(PluginPropsContext);
+
+  return pluginProps;
+};
+
+export const usePluginMeta = () => {
+  const pluginProps = usePluginProps();
+
+  return pluginProps?.meta;
+};

package/templates/scenes-app/src/utils/utils.routing.ts

@@ -0,0 +1,6 @@
+import { PLUGIN_BASE_URL } from '../constants';
+
+// Prefixes the route with the base URL of the plugin
+export function prefixRoute(route: string): string {
+  return `${PLUGIN_BASE_URL}/${route}`;
+}