chore: refactor dashboard controllers

Author: starpit

plugins/plugin-codeflare-dashboard/src/controller/dashboard/grids.ts

@@ -15,7 +15,7 @@
  */
 
 import type Kind from "./kinds.js"
-import type { ValidTheme as ValidUtilizationTheme } from "./themes/utilization.js"
+import type { ValidTheme as ValidUtilizationTheme } from "./utilization/theme.js"
 
 export type SupportedUtilizationGrid = "cpu%" | "mem%" | "gpu%" | "gpumem%"
 

plugins/plugin-codeflare-dashboard/src/controller/dashboard/index.ts

@@ -18,8 +18,8 @@ import type { Arguments } from "@kui-shell/core"
 
 import tailf from "./tailf.js"
 import dashboardUI from "./db.js"
-import status from "./status.js"
-import utilization from "./utilization.js"
+import status from "./status/index.js"
+import utilization from "./utilization/index.js"
 import { SupportedGrid, isSupportedGrid } from "./grids.js"
 import { KindA, isValidKindA, validKinds } from "./kinds.js"
 import type { GridSpec } from "../../components/Dashboard/types.js"

plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/Demo.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2023 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { TextProps } from "ink"
+
+import type { OnData } from "../../../components/Dashboard/types.js"
+
+import { WorkerState, states } from "./states.js"
+
+/** A blinking lights demo that pumps random data into the UI */
+export default class Demo {
+  private readonly interval: ReturnType<typeof setInterval>
+
+  public constructor(cb: OnData, styleOf: Record<WorkerState, TextProps>) {
+    const randoState = () => states[Math.round(Math.random() * states.length) % states.length]
+
+    // the model, filled initially with random data
+    let workers = Array(50)
+      .fill(1)
+      .map((_, idx) => {
+        const metric = randoState()
+        return { name: String(idx), metric, firstUpdate: Date.now(), lastUpdate: Date.now(), style: styleOf[metric] }
+      })
+
+    // initial callback to the UI
+    cb({ workers })
+
+    // periodically, change a random number of worker states, randomly
+    this.interval = setInterval(() => {
+      const nChanged = Math.max(1, Math.min(Math.floor(Math.random() * 8), workers.length))
+      for (let idx = 0; idx < nChanged; idx++) {
+        const metric = randoState()
+        const idx = Math.round(Math.random() * workers.length) % workers.length
+
+        workers = [
+          ...workers.slice(0, idx),
+          Object.assign(workers[idx], { metric, lastUpdate: Date.now(), style: styleOf[metric] }),
+          ...workers.slice(idx + 1),
+        ]
+      }
+
+      // periodic callback to the UI
+      cb({ workers })
+    }, 1000)
+  }
+
+  public quit() {
+    clearInterval(this.interval)
+  }
+}

plugins/plugin-codeflare-dashboard/src/controller/dashboard/status.tsx renamed to plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/Live.ts

@@ -17,56 +17,17 @@
 import stripAnsi from "strip-ansi"
 import type { TextProps } from "ink"
 
-import type { Tail } from "./tailf.js"
-import type Options from "./options.js"
-import type { OnData, Worker, GridSpec } from "../../components/Dashboard/types.js"
-import { isValidStatusTheme, statusThemes } from "./themes/status.js"
+import type { Tail } from "../tailf.js"
+import type { OnData, Worker } from "../../../components/Dashboard/types.js"
 
-type WorkerState = "Queued" | "Provisioning" | "Initializing" | "Running" | "Success" | "Failed"
-
-const states: WorkerState[] = ["Queued", "Provisioning", "Initializing", "Running", "Success", "Failed"]
-
-const stateFor: Record<string, WorkerState> = {
-  Pending: "Queued",
-  Queued: "Queued",
-  Job_Pending: "Initializing", // this comes after the job is submitted, but probably preparing deps
-
-  ContainerCreating: "Provisioning",
-  SuccessfulCreate: "Provisioning",
-  AddedInterface: "Provisioning",
-  Created: "Provisioning",
-  Scheduled: "Provisioning",
-
-  Unhealthy: "Provisioning", // service not yet ready... Initializing?
-
-  Initializing: "Initializing",
-  Installing: "Initializing",
-  Pulling: "Initializing",
-  Pulled: "Initializing",
-
-  Started: "Initializing",
-  Workers_Running: "Initializing",
-
-  Job_Running: "Running",
-
-  Success: "Success",
-  Succeeded: "Success",
-
-  // ignore these
-  // Workers_Terminating: "Success",
-  // Workers_Killing: "Success",
-
-  Failed: "Failed",
-  FailedScheduling: "Failed",
-  Workers_Evicted: "Failed",
-}
+import { WorkerState, stateFor } from "./states.js"
 
 /**
  * Maintain a model of live data from a given set of file streams
  * (`tails`), and pump it into the given `cb` callback.
  *
  */
-class Live {
+export default class Live {
   /** Model of status per worker */
   private readonly workers: Record<string, Worker> = {}
 
@@ -210,77 +171,3 @@ class Live {
     )
   }
 }
-
-/** A blinking lights demo that pumps random data into the UI */
-class Demo {
-  private readonly interval: ReturnType<typeof setInterval>
-
-  public constructor(cb: OnData, styleOf: Record<WorkerState, TextProps>) {
-    const randoState = () => states[Math.round(Math.random() * states.length) % states.length]
-
-    // the model, filled initially with random data
-    let workers = Array(50)
-      .fill(1)
-      .map((_, idx) => {
-        const metric = randoState()
-        return { name: String(idx), metric, firstUpdate: Date.now(), lastUpdate: Date.now(), style: styleOf[metric] }
-      })
-
-    // initial callback to the UI
-    cb({ workers })
-
-    // periodically, change a random number of worker states, randomly
-    this.interval = setInterval(() => {
-      const nChanged = Math.max(1, Math.min(Math.floor(Math.random() * 8), workers.length))
-      for (let idx = 0; idx < nChanged; idx++) {
-        const metric = randoState()
-        const idx = Math.round(Math.random() * workers.length) % workers.length
-
-        workers = [
-          ...workers.slice(0, idx),
-          Object.assign(workers[idx], { metric, lastUpdate: Date.now(), style: styleOf[metric] }),
-          ...workers.slice(idx + 1),
-        ]
-      }
-
-      // periodic callback to the UI
-      cb({ workers })
-    }, 1000)
-  }
-
-  public quit() {
-    clearInterval(this.interval)
-  }
-}
-
-export default function statusDashboard(
-  tails: Promise<Tail>[],
-  opts: Pick<Options, "demo" | "theme" | "themeDefault">
-): GridSpec {
-  const { theme: themeS = opts.themeDefault } = opts
-  if (!isValidStatusTheme(themeS)) {
-    throw new Error("Invalid theme: " + themeS)
-  }
-
-  const theme = statusThemes[themeS]
-
-  const styleOf: Record<WorkerState, TextProps> = {
-    Queued: theme[0],
-    Provisioning: theme[1],
-    Initializing: theme[2],
-    Running: theme[3],
-    Success: theme[4],
-    Failed: theme[5],
-  }
-
-  const initWatcher = (cb: OnData) => {
-    if (opts.demo) {
-      return new Demo(cb, styleOf)
-    } else {
-      return new Live(tails, cb, styleOf)
-    }
-  }
-
-  const styledStates = states.map((state) => ({ state, style: styleOf[state] }))
-  return { title: "Worker Status", initWatcher, states: styledStates }
-}

plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/index.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { TextProps } from "ink"
+
+import type { Tail } from "../tailf.js"
+import type Options from "../options.js"
+import type { OnData, GridSpec } from "../../../components/Dashboard/types.js"
+
+import Demo from "./Demo.js"
+import Live from "./Live.js"
+import { WorkerState, states } from "./states.js"
+import { isValidStatusTheme, statusThemes } from "./theme.js"
+
+export default function statusDashboard(
+  tails: Promise<Tail>[],
+  opts: Pick<Options, "demo" | "theme" | "themeDefault">
+): GridSpec {
+  const { theme: themeS = opts.themeDefault } = opts
+  if (!isValidStatusTheme(themeS)) {
+    throw new Error("Invalid theme: " + themeS)
+  }
+
+  const theme = statusThemes[themeS]
+
+  const styleOf: Record<WorkerState, TextProps> = {
+    Queued: theme[0],
+    Provisioning: theme[1],
+    Initializing: theme[2],
+    Running: theme[3],
+    Success: theme[4],
+    Failed: theme[5],
+  }
+
+  const initWatcher = (cb: OnData) => {
+    if (opts.demo) {
+      return new Demo(cb, styleOf)
+    } else {
+      return new Live(tails, cb, styleOf)
+    }
+  }
+
+  const styledStates = states.map((state) => ({ state, style: styleOf[state] }))
+  return { title: "Worker Status", initWatcher, states: styledStates }
+}

plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/states.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2023 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const states = ["Queued", "Provisioning", "Initializing", "Running", "Success", "Failed"]
+
+/** Type declaration for quantized utilization states */
+export type WorkerState = (typeof states)[number]
+
+export const stateFor: Record<string, WorkerState> = {
+  Pending: "Queued",
+  Queued: "Queued",
+  Job_Pending: "Initializing", // this comes after the job is submitted, but probably preparing deps
+
+  ContainerCreating: "Provisioning",
+  SuccessfulCreate: "Provisioning",
+  AddedInterface: "Provisioning",
+  Created: "Provisioning",
+  Scheduled: "Provisioning",
+
+  Unhealthy: "Provisioning", // service not yet ready... Initializing?
+
+  Initializing: "Initializing",
+  Installing: "Initializing",
+  Pulling: "Initializing",
+  Pulled: "Initializing",
+
+  Started: "Initializing",
+  Workers_Running: "Initializing",
+
+  Job_Running: "Running",
+
+  Success: "Success",
+  Succeeded: "Success",
+
+  // ignore these
+  // Workers_Terminating: "Success",
+  // Workers_Killing: "Success",
+
+  Failed: "Failed",
+  FailedScheduling: "Failed",
+  Workers_Evicted: "Failed",
+}