From 5d6e5a1c95b701dbc437ced18c6c1cdd8151935b Mon Sep 17 00:00:00 2001 From: Tiit Hansen Date: Sat, 25 May 2024 15:31:05 +0300 Subject: [PATCH] feat: Cleanup and empty pages for jobs, cronjobs and daemonsets --- src/pages/Workloads/Workloads.tsx | 33 +++++++++----- src/pages/Workloads/pages/CronJobPage.tsx | 44 +++++++++++++++++++ src/pages/Workloads/pages/DaemonSetPage.tsx | 44 +++++++++++++++++++ src/pages/Workloads/pages/DeploymentPage.tsx | 4 +- src/pages/Workloads/pages/JobPage.tsx | 44 +++++++++++++++++++ src/pages/Workloads/pages/PodPage.tsx | 4 +- src/pages/Workloads/pages/StatefulSetPage.tsx | 2 +- 7 files changed, 158 insertions(+), 17 deletions(-) create mode 100644 src/pages/Workloads/pages/CronJobPage.tsx create mode 100644 src/pages/Workloads/pages/DaemonSetPage.tsx create mode 100644 src/pages/Workloads/pages/JobPage.tsx diff --git a/src/pages/Workloads/Workloads.tsx b/src/pages/Workloads/Workloads.tsx index e6642cb..b992157 100644 --- 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 new file mode 100644 index 0000000..d40a9b4 --- /dev/null +++ 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, 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 new file mode 100644 index 0000000..2364054 --- /dev/null +++ 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, 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 index 13a36bc..58add8d 100644 --- 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, parent: SceneAppPageLike) { +export function DeploymentPage(routeMatch: SceneRouteMatch, parent: SceneAppPageLike) { const props = usePluginProps(); diff --git a/src/pages/Workloads/pages/JobPage.tsx b/src/pages/Workloads/pages/JobPage.tsx new file mode 100644 index 0000000..d446c6f --- /dev/null +++ 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, 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 index da1a818..e191acb 100644 --- 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, parent: SceneAppPageLike) { +export function PodPage(routeMatch: SceneRouteMatch, parent: SceneAppPageLike) { const props = usePluginProps(); diff --git a/src/pages/Workloads/pages/StatefulSetPage.tsx b/src/pages/Workloads/pages/StatefulSetPage.tsx index bd7bdf9..149773d 100644 --- 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, parent: SceneAppPageLike) { +export function StatefulSetPage(routeMatch: SceneRouteMatch, parent: SceneAppPageLike) { const props = usePluginProps();