fix: Fix variable propagation between main and drilldown pages

tiithansen · May 25, 2024 · 4a51d23 · 4a51d23
1 parent 48808c5
commit 4a51d23
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 66 deletions.
diff --git a/src/pages/Clusters/Clusters.tsx b/src/pages/Clusters/Clusters.tsx
@@ -24,43 +24,43 @@ const timeRange = new SceneTimeRange({
 function getScene({ datasource }: { datasource: string }) {
     return new SceneApp({
         pages: [
-          new SceneAppPage({
-            title: 'Clusters',
-            url: prefixRoute(`${ROUTES.Clusters}`),
-            $timeRange: timeRange,
-            $variables: new SceneVariableSet({
-                variables: [
-                    new DataSourceVariable({
-                        name: 'datasource',
-                        label: 'Datasource',
-                        pluginId: 'prometheus',
-                        regex: datasource,
+            new SceneAppPage({
+                title: 'Clusters',
+                url: prefixRoute(`${ROUTES.Clusters}`),
+                $timeRange: timeRange,
+                $variables: new SceneVariableSet({
+                    variables: [
+                        new DataSourceVariable({
+                            name: 'datasource',
+                            label: 'Datasource',
+                            pluginId: 'prometheus',
+                            regex: datasource,
+                        }),
+                    ],
+                }),
+                controls: [
+                    new VariableValueSelectors({}),
+                    new SceneControlsSpacer(),
+                    new SceneTimePicker({ isOnCanvas: true }),
+                    new SceneRefreshPicker({
+                        intervals: ['5s', '1m', '1h'],
+                        isOnCanvas: true,
+                    }),
+                ],
+                tabs: [
+                    new SceneAppPage({
+                        title: 'Overview',
+                        url: prefixRoute(`${ROUTES.Clusters}/overview`),
+                        getScene: getOverviewScene,
+                    }),
+                    new SceneAppPage({
+                        title: 'Nodes',
+                        url: prefixRoute(`${ROUTES.Clusters}/nodes`),
+                        getScene: () => getNodesScene(),
                     }),
                 ],
+                getScene: getOverviewScene,
             }),
-            controls: [
-                new VariableValueSelectors({}),
-                new SceneControlsSpacer(),
-                new SceneTimePicker({ isOnCanvas: true }),
-                new SceneRefreshPicker({
-                    intervals: ['5s', '1m', '1h'],
-                    isOnCanvas: true,
-                }),
-            ],
-            tabs: [
-                new SceneAppPage({
-                    title: 'Overview',
-                    url: prefixRoute(`${ROUTES.Clusters}/overview`),
-                    getScene: getOverviewScene,
-                }),
-                new SceneAppPage({
-                    title: 'Nodes',
-                    url: prefixRoute(`${ROUTES.Clusters}/nodes`),
-                    getScene: () => getNodesScene(),
-                }),
-            ],
-            getScene: getOverviewScene,
-        }),
         ]
     })
 }

diff --git a/src/pages/Workloads/Workloads.tsx b/src/pages/Workloads/Workloads.tsx
@@ -22,36 +22,14 @@ import { getCronJobsScene } from './tabs/CronJobs/CronJobs';
 import { getJobsScene } from './tabs/Jobs/Jobs';
 import { getOverviewScene } from './tabs/Overview/Overview';
 import { usePluginProps } from 'utils/utils.plugin';
+import { getDeploymentPage } from './pages/DeploymentPage';
+import { getStatefulSetPage } from './pages/StatefulSetPage';
+import { createTimeRange, createTopLevelVariables } from './variableHelpers';
 
 function getScene({ datasource }: { datasource: string }) {
 
-    const variables = new SceneVariableSet({
-        variables: [
-            new DataSourceVariable({
-                name: 'datasource',
-                label: 'Datasource',
-                pluginId: 'prometheus',
-                regex: datasource,
-            }),
-            new QueryVariable({
-                name: 'cluster',
-                label: 'Cluster',
-                datasource: {
-                    uid: '$datasource',
-                    type: 'prometheus',
-                },
-                query: {
-                  refId: 'cluster',
-                  query: 'label_values(kube_namespace_labels, cluster)',
-                },
-            }),
-        ],
-    })
-
-    const timeRange = new SceneTimeRange({
-        from: 'now-1h',
-        to: 'now',
-    });
+    const variables = createTopLevelVariables({ datasource })
+    const timeRange = createTimeRange()
 
     return new SceneApp({
         pages: [
@@ -114,7 +92,18 @@ function getScene({ datasource }: { datasource: string }) {
                         return getPodPage(routeMatch, parent);
                     }
                 },
-
+                {
+                    routePath: prefixRoute(`${ROUTES.Workloads}/deployments/:name`),
+                    getPage(routeMatch, parent) {
+                        return getDeploymentPage(routeMatch, parent);
+                    }
+                },
+                {
+                    routePath: prefixRoute(`${ROUTES.Workloads}/statefulsets/:name`),
+                    getPage(routeMatch, parent) {
+                        return getStatefulSetPage(routeMatch, parent);
+                    }
+                },
             ]
         }),
         ]

diff --git a/src/pages/Workloads/components/LinkCell.tsx b/src/pages/Workloads/components/LinkCell.tsx
@@ -2,5 +2,5 @@ import React from "react";
 import { TextLink } from "@grafana/ui";
 
 export function LinkCell(url: string, id: string) {
-    return (<TextLink color="primary" href={`${url}/${id}`}>{ id }</TextLink>);
+    return (<TextLink color="primary" href={`${url}/${id}${window.location.search}`}>{ id }</TextLink>);
 }
diff --git a/src/pages/Workloads/pages/DeploymentPage.tsx b/src/pages/Workloads/pages/DeploymentPage.tsx
@@ -0,0 +1,44 @@
+import { EmbeddedScene, SceneAppPage, SceneAppPageLike, SceneControlsSpacer, SceneFlexLayout, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, VariableValueSelectors, sceneGraph } from "@grafana/scenes";
+import { ROUTES } from "../../../constants";
+import { prefixRoute } from "utils/utils.routing";
+import { usePluginProps } from "utils/utils.plugin";
+import { createTopLevelVariables, createTimeRange } from "../variableHelpers";
+
+function getScene(deployment: string) {
+    return new EmbeddedScene({
+        controls: [
+            new VariableValueSelectors({}),
+            new SceneControlsSpacer(),
+            new SceneTimePicker({ isOnCanvas: true }),
+            new SceneRefreshPicker({
+                intervals: ['5s', '1m', '1h'],
+                isOnCanvas: true,
+            }),
+        ],
+        body: new SceneFlexLayout({
+            direction: 'column',
+            children: []
+        }),
+    })
+}
+
+export function getDeploymentPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+
+    const props = usePluginProps();
+
+    const variables = createTopLevelVariables({
+        datasource: props?.meta.jsonData?.datasource || 'prometheus'
+    })
+
+    const timeRange = createTimeRange()
+
+    return new SceneAppPage({
+        title: `Deployment - ${routeMatch.params.name}`,
+        titleIcon: 'dashboard',
+        $variables: variables,
+        $timeRange: timeRange,
+        url: prefixRoute(`${ROUTES.Workloads}/deployments/${routeMatch.params.name}`),
+        getScene: () => getScene(routeMatch.params.name),
+        getParentPage: () => parent,
+    })
+}
diff --git a/src/pages/Workloads/pages/PodPage.tsx b/src/pages/Workloads/pages/PodPage.tsx
@@ -4,6 +4,8 @@ import { prefixRoute } from "utils/utils.routing";
 import { GraphTransform } from "@grafana/schema";
 import { createResourceLabels } from "../components/ResourceLabels";
 import { getContainersScene } from "../components/ContainersTable/ContainersTable";
+import { usePluginProps } from "utils/utils.plugin";
+import { createTopLevelVariables, createTimeRange } from "../variableHelpers";
 
 function getMemoryPanel(pod: string) {
     return PanelBuilders
@@ -274,11 +276,20 @@ function getScene(pod: string) {
 }
 
 export function getPodPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+
+    const props = usePluginProps();
+
+    const variables = createTopLevelVariables({
+        datasource: props?.meta.jsonData?.datasource || 'prometheus'
+    })
+
+    const timeRange = createTimeRange()
+
     return new SceneAppPage({
         title: `Pod - ${routeMatch.params.name}`,
         titleIcon: 'dashboard',
-        $variables: sceneGraph.getVariables(parent).clone(),
-        $timeRange: sceneGraph.getTimeRange(parent).clone(),
+        $variables: variables,
+        $timeRange: timeRange,
         url: prefixRoute(`${ROUTES.Workloads}/pods/${routeMatch.params.name}`),
         getScene: () => getScene(routeMatch.params.name),
         getParentPage: () => parent,

diff --git a/src/pages/Workloads/pages/StatefulSetPage.tsx b/src/pages/Workloads/pages/StatefulSetPage.tsx
@@ -0,0 +1,44 @@
+import { EmbeddedScene, SceneAppPage, SceneAppPageLike, SceneControlsSpacer, SceneFlexLayout, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, VariableValueSelectors } from "@grafana/scenes";
+import { ROUTES } from "../../../constants";
+import { prefixRoute } from "utils/utils.routing";
+import { createTimeRange, createTopLevelVariables } from "../variableHelpers";
+import { usePluginProps } from "utils/utils.plugin";
+
+function getScene(statefulSet: string) {
+    return new EmbeddedScene({
+        controls: [
+            new VariableValueSelectors({}),
+            new SceneControlsSpacer(),
+            new SceneTimePicker({ isOnCanvas: true }),
+            new SceneRefreshPicker({
+                intervals: ['5s', '1m', '1h'],
+                isOnCanvas: true,
+            }),
+        ],
+        body: new SceneFlexLayout({
+            direction: 'column',
+            children: []
+        }),
+    })
+}
+
+export function getStatefulSetPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+
+    const props = usePluginProps();
+
+    const variables = createTopLevelVariables({
+        datasource: props?.meta.jsonData?.datasource || 'prometheus'
+    })
+
+    const timeRange = createTimeRange()
+
+    return new SceneAppPage({
+        title: `StatefulSet - ${routeMatch.params.name}`,
+        titleIcon: 'dashboard',
+        $variables: variables,
+        $timeRange: timeRange,
+        url: prefixRoute(`${ROUTES.Workloads}/statefulsets/${routeMatch.params.name}`),
+        getScene: () => getScene(routeMatch.params.name),
+        getParentPage: () => parent,
+    })
+}
diff --git a/src/pages/Workloads/variableHelpers.ts b/src/pages/Workloads/variableHelpers.ts
@@ -1,4 +1,4 @@
-import { SceneVariables, sceneGraph } from "@grafana/scenes";
+import { DataSourceVariable, QueryVariable, SceneTimeRange, SceneVariableSet, SceneVariables, sceneGraph } from "@grafana/scenes";
 
 export function resolveVariable(sceneVariables: SceneVariables, name: string) {
 
@@ -16,3 +16,35 @@ export function resolveVariable(sceneVariables: SceneVariables, name: string) {
 
     return variable.getValue();
 }
+
+export function createTopLevelVariables({ datasource }: { datasource: string }) {
+    return new SceneVariableSet({
+        variables: [
+            new DataSourceVariable({
+                name: 'datasource',
+                label: 'Datasource',
+                pluginId: 'prometheus',
+                regex: datasource,
+            }),
+            new QueryVariable({
+                name: 'cluster',
+                label: 'Cluster',
+                datasource: {
+                    uid: '$datasource',
+                    type: 'prometheus',
+                },
+                query: {
+                  refId: 'cluster',
+                  query: 'label_values(kube_namespace_labels, cluster)',
+                },
+            }),
+        ],
+    })
+}
+
+export function createTimeRange() {
+    return new SceneTimeRange({
+        from: 'now-1h',
+        to: 'now',
+    });
+}