feat: update charts to lay out gpu and cpu side-by-side for a node

starpit · starpit · commit 90b573e2f5c7 · 2022-06-28T18:25:33.000-04:00
diff --git a/plugins/plugin-client-default/notebooks/dashboard.md b/plugins/plugin-client-default/notebooks/dashboard.md
@@ -53,22 +53,12 @@ layout:
 
 ---
 
-=== "GPU Charts"
+=== "Utilization Charts"
     ```shell
     ---
     execute: now
     maximize: true
     outputOnly: true
     ---
-    chart gpu "${LOGDIR}/resources/gpu.txt"
-    ```
-
-=== "CPU Charts"
-    ```shell
-    ---
-    execute: now
-    maximize: true
-    outputOnly: true
-    ---
-    chart vmstat "${LOGDIR}/resources/pod-vmstat.txt"
+    chart all "${LOGDIR}"
     ```
diff --git a/plugins/plugin-codeflare/src/components/Chart.tsx b/plugins/plugin-codeflare/src/components/Chart.tsx
@@ -144,7 +144,7 @@ export default class BaseChart extends React.PureComponent<Props> {
 
   private static readonly titlePosition = {
     x: {
-      left: BaseChart.padding.left - BaseChart.tickLabelFontSize * 4,
+      left: BaseChart.padding.left - BaseChart.tickLabelFontSize * 3.5,
       right: BaseChart.dimensions.width - BaseChart.tickLabelFontSize * 2,
     },
     y: BaseChart.padding.top - BaseChart.fontSize * 1.5,
diff --git a/plugins/plugin-codeflare/src/components/ChartGrid.tsx b/plugins/plugin-codeflare/src/components/ChartGrid.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2022 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 React from "react"
+
+export default function ChartGrid(props: React.PropsWithChildren<unknown>) {
+  return <div className="codeflare-chart-grid flex-fill">{props.children}</div>
+}
diff --git a/plugins/plugin-codeflare/src/components/GPUChart.tsx b/plugins/plugin-codeflare/src/components/GPUChart.tsx
@@ -17,10 +17,11 @@
 import React from "react"
 
 import { Log } from "../controller/charts/gpu"
-import BaseChart, { BaseChartProps, Series } from "./Chart"
+import BaseChart, { BaseChartProps } from "./Chart"
+import { HostMap } from "../controller/charts/LogRecord"
 
 type Props = {
-  logs: Log[]
+  logs: HostMap<Log>
 }
 
 type State = {
@@ -39,49 +40,37 @@ export default class GPUChart extends React.PureComponent<Props, State> {
     }
   }
 
-  private static data(field: "utilizationGPU" | "utilizationMemory" | "temperatureGPU", props: Props) {
-    return props.logs.map((log) => ({
-      name: log.gpuType,
-      x: log.timestamp,
-      y: log[field],
-    }))
-  }
-
   private static charts(props: Props): BaseChartProps[] {
-    const earliestTimestamp = props.logs.reduce((min, line) => Math.min(min, line.timestamp), Number.MAX_VALUE)
-
-    const perNodeData = props.logs.reduce((M, line) => {
-      if (!M[line.cluster]) {
-        M[line.cluster] = [
-          { impl: "ChartArea", stroke: BaseChart.colors[1], data: [] },
-          { impl: "ChartLine", stroke: BaseChart.colors[2], data: [] },
-          { impl: "ChartDashedLine", stroke: BaseChart.colors[3], data: [] },
-        ]
-      }
-
-      M[line.cluster][0].data.push({
-        name: BaseChart.nodeNameLabel(line.cluster) + " GPU Utilization",
+    const earliestTimestamp: number = Object.values(props.logs).reduce(
+      (min, logs) => logs.reduce((min, line) => Math.min(min, line.timestamp), Number.MAX_VALUE),
+      Number.MAX_VALUE
+    )
+
+    return Object.entries(props.logs).map(([node, lines]) => {
+      const d1 = lines.map((line) => ({
+        name: BaseChart.nodeNameLabel(node) + " GPU Utilization",
         x: line.timestamp - earliestTimestamp,
         y: line.utilizationGPU,
-      })
+      }))
 
-      M[line.cluster][1].data.push({
-        name: BaseChart.nodeNameLabel(line.cluster) + " GPU Memory Utilization",
+      const d2 = lines.map((line) => ({
+        name: BaseChart.nodeNameLabel(node) + " GPU Memory Utilization",
         x: line.timestamp - earliestTimestamp,
         y: line.utilizationMemory,
-      })
+      }))
 
-      M[line.cluster][2].data.push({
-        name: BaseChart.nodeNameLabel(line.cluster) + " GPU Temperature",
+      const d3 = lines.map((line) => ({
+        name: BaseChart.nodeNameLabel(node) + " GPU Temperature",
         x: line.timestamp - earliestTimestamp,
         y: line.temperatureGPU,
-      })
+      }))
 
-      return M
-    }, {} as Record<string, Series[]>)
+      const series = [
+        { impl: "ChartArea" as const, stroke: BaseChart.colors[1], data: d1 },
+        { impl: "ChartLine" as const, stroke: BaseChart.colors[2], data: d2 },
+        { impl: "ChartDashedLine" as const, stroke: BaseChart.colors[3], data: d3 },
+      ]
 
-    return Object.keys(perNodeData).map((node) => {
-      const series = perNodeData[node]
       const data = series.map((_, idx) => BaseChart.normalize(_, idx !== 2 ? "percentage" : "celsius"))
 
       return {
@@ -90,7 +79,7 @@ export default class GPUChart extends React.PureComponent<Props, State> {
         padding: GPUChart.padding,
         yAxes: [
           {
-            label: "Utilization",
+            label: "GPU",
             format: "percentage",
             y: data[0].y,
             tickFormat: data[0].tickFormat,
diff --git a/plugins/plugin-codeflare/src/components/VmstatChart.tsx b/plugins/plugin-codeflare/src/components/VmstatChart.tsx
@@ -16,11 +16,12 @@
 
 import React from "react"
 
-import BaseChart, { BaseChartProps, Series } from "./Chart"
 import { Log } from "../controller/charts/vmstat"
+import BaseChart, { BaseChartProps } from "./Chart"
+import { HostMap } from "../controller/charts/LogRecord"
 
 type Props = {
-  logs: Log[]
+  logs: HostMap<Log>
 }
 
 type State = {
@@ -40,33 +41,29 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
   }
 
   private static charts(props: Props): BaseChartProps[] {
-    const earliestTimestamp = props.logs.reduce((min, line) => Math.min(min, line.timestamp), Number.MAX_VALUE)
+    const earliestTimestamp: number = Object.values(props.logs).reduce(
+      (min, logs) => logs.reduce((min, line) => Math.min(min, line.timestamp), Number.MAX_VALUE),
+      Number.MAX_VALUE
+    )
 
-    const perNodeData = props.logs.reduce((M, line) => {
-      if (!M[line.hostname]) {
-        M[line.hostname] = [
-          { impl: "ChartArea", stroke: BaseChart.colors[1], data: [] },
-          { impl: "ChartLine", stroke: BaseChart.colors[2], data: [] },
-        ]
-      }
-
-      M[line.hostname][0].data.push({
-        name: BaseChart.nodeNameLabel(line.hostname) + " CPU Utilization",
+    return Object.entries(props.logs).map(([node, lines]) => {
+      const d1 = lines.map((line) => ({
+        name: BaseChart.nodeNameLabel(node) + " CPU Utilization",
         x: line.timestamp - earliestTimestamp,
         y: 100 - line.idle,
-      })
+      }))
 
-      M[line.hostname][1].data.push({
-        name: BaseChart.nodeNameLabel(line.hostname) + " Free Memory",
+      const d2 = lines.map((line) => ({
+        name: BaseChart.nodeNameLabel(node) + " Free Memory",
         x: line.timestamp - earliestTimestamp,
         y: line.freeMemory,
-      })
+      }))
 
-      return M
-    }, {} as Record<string, Series[]>)
+      const series = [
+        { impl: "ChartArea" as const, stroke: BaseChart.colors[1], data: d1 },
+        { impl: "ChartLine" as const, stroke: BaseChart.colors[2], data: d2 },
+      ]
 
-    return Object.keys(perNodeData).map((node) => {
-      const series = perNodeData[node]
       const data = series.map((_, idx) => BaseChart.normalize(_, idx === 0 ? "percentage" : "memory"))
 
       return {
@@ -76,7 +73,7 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
         padding: VmstatChart.padding,
         yAxes: [
           {
-            label: "Utilization",
+            label: "CPU",
             format: "percentage",
             y: data[0].y,
             tickFormat: data[0].tickFormat,
diff --git a/plugins/plugin-codeflare/src/controller/charts/LogRecord.ts b/plugins/plugin-codeflare/src/controller/charts/LogRecord.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2022 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.
+ */
+
+type LogRecord<T> = T & {
+  hostname: string
+  timestamp: number
+}
+
+export type HostMap<T, R extends LogRecord<T> = LogRecord<T>> = { [key: string]: R[] }
+
+export function toHostMap<T, R extends LogRecord<T>>(records: R[]): HostMap<T, R> {
+  return records.reduce((M, record) => {
+    if (!M[record.hostname]) {
+      M[record.hostname] = []
+    }
+    M[record.hostname].push(record)
+    return M
+  }, {} as HostMap<T, R>)
+}
+
+export default LogRecord
diff --git a/plugins/plugin-codeflare/src/controller/charts/all.tsx b/plugins/plugin-codeflare/src/controller/charts/all.tsx
@@ -15,20 +15,52 @@
  */
 
 import React from "react"
-import { Arguments, ReactResponse } from "@kui-shell/core"
+import { join } from "path"
+import { Arguments } from "@kui-shell/core"
 
+/** Oops, sometimes we have no data for a give node */
+function noData(node: string, kind: "CPU Utilization" | "GPU Utilization") {
+  return (
+    <div className="flex-layout" title={`No ${kind} for ${node}`}>
+      <span className="flex-fill flex-layout flex-align-center">no data</span>
+    </div>
+  )
+}
+
+/**
+ * Render a combo chart that interleaves GPU utilization and CPU
+ * utilization charts, so that the two (for a given node) are
+ * side-by-side.
+ *
+ */
 export default async function all(args: Arguments) {
   const filepath = args.argvNoOptions[2]
   if (!filepath) {
     return `Usage chart all ${filepath}`
   }
 
-  const charts = await Promise.all([
-    args.REPL.qexec<ReactResponse>(`chart gpu "${filepath}/resources/gpu.txt"`),
-    args.REPL.qexec<ReactResponse>(`chart vmstat "${filepath}/resources/pod-vmstat.txt"`),
+  const [gpuData, cpuData] = await Promise.all([
+    import("./gpu").then((_) => _.parse(join(filepath, "resources/gpu.txt"), args.REPL)),
+    import("./vmstat").then((_) => _.parse(join(filepath, "resources/pod-vmstat.txt"), args.REPL)),
   ])
 
+  const [GPUChart, VmstatChart] = await Promise.all([
+    import("../../components/GPUChart").then((_) => _.default),
+    import("../../components/VmstatChart").then((_) => _.default),
+  ])
+
+  const nodes = Array.from(new Set(Object.keys(gpuData).concat(Object.keys(cpuData))))
+
+  const linearized = nodes.map((node) => {
+    const gpuForNode = gpuData[node]
+    const cpuForNode = cpuData[node]
+    return [
+      !gpuForNode ? noData(node, "GPU Utilization") : <GPUChart logs={{ [node]: gpuForNode }} />,
+      !cpuForNode ? noData(node, "CPU Utilization") : <VmstatChart logs={{ [node]: cpuData[node] }} />,
+    ]
+  })
+
   return {
-    react: <div className="codeflare-chart-grid flex-fill">{charts.flatMap((_) => _.react)}</div>,
+    react: <div className="codeflare-chart-grid flex-fill">{linearized.flatMap((_) => _)}</div>,
   }
 }
diff --git a/plugins/plugin-codeflare/src/controller/charts/gpu.tsx b/plugins/plugin-codeflare/src/controller/charts/gpu.tsx
@@ -19,17 +19,18 @@ import stripAnsi from "strip-ansi"
 import { Arguments } from "@kui-shell/core"
 
 import { expand } from "../../lib/util"
+import LogRecord, { toHostMap } from "./LogRecord"
+
 import GPUChart from "../../components/GPUChart"
+import ChartGrid from "../../components/ChartGrid"
 
-export type Log = {
-  cluster: string
-  timestamp: number
+export type Log = LogRecord<{
   gpuType: string
   utilizationGPU: number
   utilizationMemory: number
   totalMemory: number
   temperatureGPU: number
-}
+}>
 
 function formatLogs(logs: string) {
   return logs
@@ -40,15 +41,15 @@ function formatLogs(logs: string) {
 
 function formatLogObject(logLine: string[]) {
   const splittedLine = logLine[0].split(/\s|\t\t/gi)
-  const cluster = splittedLine[splittedLine.length - 3]
+  const hostname = splittedLine[splittedLine.length - 3]
   const timestamp = new Date(splittedLine.slice(splittedLine.length - 2).join(" ")).getTime()
   const gpuType = splittedLine.slice(0, splittedLine.length - 5).join(" ")
 
   const utilizationData = logLine.map((line) => parseInt(line.trim().split(" ")[0]))
   const [, utilizationGPU, utilizationMemory, totalMemory, temperatureGPU] = utilizationData
 
   const newObj: Log = {
-    cluster,
+    hostname,
     timestamp,
     gpuType,
     utilizationGPU,
@@ -59,21 +60,27 @@ function formatLogObject(logLine: string[]) {
   return newObj
 }
 
-export default async function chart(args: Arguments) {
-  const filepath = args.argvNoOptions[2]
-  if (!filepath) {
-    return `Usage chart gpu ${filepath}`
-  }
-
-  const logs = stripAnsi(await args.REPL.qexec<string>(`vfs fslice ${expand(filepath)} 0`))
+export async function parse(filepath: string, REPL: Arguments["REPL"]) {
+  const logs = stripAnsi(await REPL.qexec<string>(`vfs fslice ${expand(filepath)} 0`))
   const formattedLogs = formatLogs(logs)
-  const objLogs = formattedLogs.map((logLine) => formatLogObject(logLine))
+  return toHostMap(formattedLogs.map((logLine) => formatLogObject(logLine)))
+}
 
+export function chart(logs: Awaited<ReturnType<typeof parse>>) {
   return {
     react: (
-      <div className="codeflare-chart-grid flex-fill">
-        <GPUChart logs={objLogs} />
-      </div>
+      <ChartGrid>
+        <GPUChart logs={logs} />
+      </ChartGrid>
     ),
   }
 }
+
+export default async function chartCmd(args: Arguments) {
+  const filepath = args.argvNoOptions[2]
+  if (!filepath) {
+    throw new Error(`Usage chart vmstat ${filepath}`)
+  }
+
+  return chart(await parse(filepath, args.REPL))
+}
diff --git a/plugins/plugin-codeflare/src/controller/charts/vmstat.tsx b/plugins/plugin-codeflare/src/controller/charts/vmstat.tsx
