feat: Cleanup and empty pages for jobs, cronjobs and daemonsets

tiithansen · May 25, 2024 · 5d6e5a1 · 5d6e5a1
1 parent 5ccd520
commit 5d6e5a1
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 17 deletions.
diff --git a/src/pages/Workloads/Workloads.tsx b/src/pages/Workloads/Workloads.tsx
@@ -13,14 +13,17 @@ import { getPodsScene } from './tabs/Pods/Pods';
 import { getDeploymentsScene } from './tabs/Deployments/Deployments';
 import { getStatefulSetsScene } from './tabs/StatefulSets/StatefulSets';
 import { getDaemonSetsScene } from './tabs/DaemonSets/DaemonSets';
-import { getPodPage } from './pages/PodPage';
+import { PodPage } from './pages/PodPage';
 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 { DeploymentPage } from './pages/DeploymentPage';
+import { StatefulSetPage } from './pages/StatefulSetPage';
 import { createTimeRange, createTopLevelVariables } from './variableHelpers';
+import { DaemonSetPage } from './pages/DaemonSetPage';
+import { CronJobPage } from './pages/CronJobPage';
+import { JobPage } from './pages/JobPage';
 
 function getScene({ datasource }: { datasource: string }) {
 
@@ -84,21 +87,27 @@ function getScene({ datasource }: { datasource: string }) {
             drilldowns: [
                 {
                     routePath: prefixRoute(`${ROUTES.Workloads}/pods/:name`),
-                    getPage(routeMatch, parent) {
-                        return getPodPage(routeMatch, parent);
-                    }
+                    getPage: PodPage
                 },
                 {
                     routePath: prefixRoute(`${ROUTES.Workloads}/deployments/:name`),
-                    getPage(routeMatch, parent) {
-                        return getDeploymentPage(routeMatch, parent);
-                    }
+                    getPage: DeploymentPage
                 },
                 {
                     routePath: prefixRoute(`${ROUTES.Workloads}/statefulsets/:name`),
-                    getPage(routeMatch, parent) {
-                        return getStatefulSetPage(routeMatch, parent);
-                    }
+                    getPage: StatefulSetPage
+                },
+                {
+                    routePath: prefixRoute(`${ROUTES.Workloads}/daemonsets/:name`),
+                    getPage: DaemonSetPage
+                },
+                {
+                    routePath: prefixRoute(`${ROUTES.Workloads}/cronjobs/:name`),
+                    getPage: CronJobPage
+                },
+                {
+                    routePath: prefixRoute(`${ROUTES.Workloads}/jobs/:name`),
+                    getPage: JobPage
                 },
             ]
         }),

diff --git a/src/pages/Workloads/pages/CronJobPage.tsx b/src/pages/Workloads/pages/CronJobPage.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 { usePluginProps } from "utils/utils.plugin";
+import { createTopLevelVariables, createTimeRange } from "../variableHelpers";
+
+function getScene(cronJob: 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 CronJobPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+
+    const props = usePluginProps();
+
+    const variables = createTopLevelVariables({
+        datasource: props?.meta.jsonData?.datasource || 'prometheus'
+    })
+
+    const timeRange = createTimeRange()
+
+    return new SceneAppPage({
+        title: `CronJob - ${routeMatch.params.name}`,
+        titleIcon: 'dashboard',
+        $variables: variables,
+        $timeRange: timeRange,
+        url: prefixRoute(`${ROUTES.Workloads}/cronjobs/${routeMatch.params.name}`),
+        getScene: () => getScene(routeMatch.params.name),
+        getParentPage: () => parent,
+    })
+}
diff --git a/src/pages/Workloads/pages/DaemonSetPage.tsx b/src/pages/Workloads/pages/DaemonSetPage.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 { usePluginProps } from "utils/utils.plugin";
+import { createTopLevelVariables, createTimeRange } from "../variableHelpers";
+
+function getScene(daemonSet: 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 DaemonSetPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+
+    const props = usePluginProps();
+
+    const variables = createTopLevelVariables({
+        datasource: props?.meta.jsonData?.datasource || 'prometheus'
+    })
+
+    const timeRange = createTimeRange()
+
+    return new SceneAppPage({
+        title: `DaemonSet - ${routeMatch.params.name}`,
+        titleIcon: 'dashboard',
+        $variables: variables,
+        $timeRange: timeRange,
+        url: prefixRoute(`${ROUTES.Workloads}/daemonsets/${routeMatch.params.name}`),
+        getScene: () => getScene(routeMatch.params.name),
+        getParentPage: () => parent,
+    })
+}
diff --git a/src/pages/Workloads/pages/DeploymentPage.tsx b/src/pages/Workloads/pages/DeploymentPage.tsx
@@ -1,4 +1,4 @@
-import { EmbeddedScene, SceneAppPage, SceneAppPageLike, SceneControlsSpacer, SceneFlexLayout, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, VariableValueSelectors, sceneGraph } from "@grafana/scenes";
+import { EmbeddedScene, SceneAppPage, SceneAppPageLike, SceneControlsSpacer, SceneFlexLayout, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, VariableValueSelectors } from "@grafana/scenes";
 import { ROUTES } from "../../../constants";
 import { prefixRoute } from "utils/utils.routing";
 import { usePluginProps } from "utils/utils.plugin";
@@ -22,7 +22,7 @@ function getScene(deployment: string) {
     })
 }
 
-export function getDeploymentPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+export function DeploymentPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
 
     const props = usePluginProps();
 

diff --git a/src/pages/Workloads/pages/JobPage.tsx b/src/pages/Workloads/pages/JobPage.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 { usePluginProps } from "utils/utils.plugin";
+import { createTopLevelVariables, createTimeRange } from "../variableHelpers";
+
+function getScene(job: 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 JobPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+
+    const props = usePluginProps();
+
+    const variables = createTopLevelVariables({
+        datasource: props?.meta.jsonData?.datasource || 'prometheus'
+    })
+
+    const timeRange = createTimeRange()
+
+    return new SceneAppPage({
+        title: `Job - ${routeMatch.params.name}`,
+        titleIcon: 'dashboard',
+        $variables: variables,
+        $timeRange: timeRange,
+        url: prefixRoute(`${ROUTES.Workloads}/jobs/${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
@@ -1,4 +1,4 @@
-import { EmbeddedScene, PanelBuilders, SceneAppPage, SceneAppPageLike, SceneControlsSpacer, SceneFlexItem, SceneFlexLayout, SceneQueryRunner, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, SceneTimeRange, SceneVariableSet, VariableValueSelectors, sceneGraph } from "@grafana/scenes";
+import { EmbeddedScene, PanelBuilders, SceneAppPage, SceneAppPageLike, SceneControlsSpacer, SceneFlexItem, SceneFlexLayout, SceneQueryRunner, SceneRefreshPicker, SceneRouteMatch, SceneTimePicker, VariableValueSelectors } from "@grafana/scenes";
 import { ROUTES } from "../../../constants";
 import { prefixRoute } from "utils/utils.routing";
 import { GraphTransform } from "@grafana/schema";
@@ -275,7 +275,7 @@ function getScene(pod: string) {
     })
 }
 
-export function getPodPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+export function PodPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
 
     const props = usePluginProps();
 

diff --git a/src/pages/Workloads/pages/StatefulSetPage.tsx b/src/pages/Workloads/pages/StatefulSetPage.tsx
@@ -22,7 +22,7 @@ function getScene(statefulSet: string) {
     })
 }
 
-export function getStatefulSetPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
+export function StatefulSetPage(routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) {
 
     const props = usePluginProps();