fix: charts may have different y axis labels

we need to use a common time range (min, max) across the charts

Author: starpit

plugins/plugin-codeflare/src/components/Chart.tsx

@@ -59,7 +59,14 @@ export type BaseChartProps = Pick<ChartProps, "domain" | "padding"> & {
   )[]
 }
 
-interface Props {
+export type TimeRange = {
+  timeRange: {
+    min: number
+    max: number
+  }
+}
+
+type Props = TimeRange & {
   charts: BaseChartProps[]
 }
 
@@ -172,27 +179,16 @@ export default class BaseChart extends React.PureComponent<Props> {
   }
 
   private xAxis() {
-    // TODO, factor this out into a State variable?
-    const { min, max } = this.props.charts.reduce(
-      (M, chart) =>
-        chart.series.reduce(
-          (M, series) =>
-            series.data.reduce((M, point) => {
-              M.min = Math.min(M.min, point.x)
-              M.max = Math.max(M.max, point.x)
-              return M
-            }, M),
-          M
-        ),
-      { min: Number.MAX_VALUE, max: Number.MIN_VALUE }
-    )
+    // timestamps in the Series (i.e. datum.x values) are assumed to
+    // be relativized to the given minTimestamp
+    const range = this.props.timeRange.max - this.props.timeRange.min
 
     return (
       <ChartAxis
         scale="time"
         style={BaseChart.axisStyle}
         tickFormat={BaseChart.formatters.timestamp}
-        tickValues={[(max - min) / 4, max]}
+        tickValues={[range / 4, range]}
       />
     )
   }

plugins/plugin-codeflare/src/components/GPUChart.tsx

@@ -17,10 +17,10 @@
 import React from "react"
 
 import { Log } from "../controller/charts/gpu"
-import BaseChart, { BaseChartProps } from "./Chart"
 import { HostMap } from "../controller/charts/LogRecord"
+import BaseChart, { BaseChartProps, TimeRange } from "./Chart"
 
-type Props = {
+type Props = TimeRange & {
   logs: HostMap<Log>
 }
 
@@ -41,27 +41,22 @@ export default class GPUChart extends React.PureComponent<Props, State> {
   }
 
   private static charts(props: Props): BaseChartProps[] {
-    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,
+        x: line.timestamp - props.timeRange.min,
         y: line.utilizationGPU,
       }))
 
       const d2 = lines.map((line) => ({
         name: BaseChart.nodeNameLabel(node) + " GPU Memory Utilization",
-        x: line.timestamp - earliestTimestamp,
+        x: line.timestamp - props.timeRange.min,
         y: line.utilizationMemory,
       }))
 
       const d3 = lines.map((line) => ({
         name: BaseChart.nodeNameLabel(node) + " GPU Temperature",
-        x: line.timestamp - earliestTimestamp,
+        x: line.timestamp - props.timeRange.min,
         y: line.temperatureGPU,
       }))
 
@@ -113,6 +108,6 @@ export default class GPUChart extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    return <BaseChart charts={this.state.charts} />
+    return <BaseChart charts={this.state.charts} timeRange={this.props.timeRange} />
   }
 }

plugins/plugin-codeflare/src/components/VmstatChart.tsx

@@ -17,10 +17,10 @@
 import React from "react"
 
 import { Log } from "../controller/charts/vmstat"
-import BaseChart, { BaseChartProps } from "./Chart"
 import { HostMap } from "../controller/charts/LogRecord"
+import BaseChart, { BaseChartProps, TimeRange } from "./Chart"
 
-type Props = {
+type Props = TimeRange & {
   logs: HostMap<Log>
 }
 
@@ -29,10 +29,6 @@ type State = {
 }
 
 export default class VmstatChart extends React.PureComponent<Props, State> {
-  private static readonly padding = Object.assign({}, BaseChart.padding, {
-    right: BaseChart.padding.left,
-  })
-
   public constructor(props: Props) {
     super(props)
     this.state = {
@@ -41,21 +37,16 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
   }
 
   private static charts(props: Props): BaseChartProps[] {
-    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) + " CPU Utilization",
-        x: line.timestamp - earliestTimestamp,
+        x: line.timestamp - props.timeRange.min,
         y: 100 - line.idle,
       }))
 
       const d2 = lines.map((line) => ({
         name: BaseChart.nodeNameLabel(node) + " Free Memory",
-        x: line.timestamp - earliestTimestamp,
+        x: line.timestamp - props.timeRange.min,
         y: line.freeMemory,
       }))
 
@@ -70,7 +61,6 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
         title: BaseChart.nodeNameLabel(node),
         desc: "Chart showing CPU utilization over time for " + node,
         series,
-        padding: VmstatChart.padding,
         yAxes: [
           {
             label: "CPU",
@@ -95,6 +85,6 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    return <BaseChart charts={this.state.charts} />
+    return <BaseChart charts={this.state.charts} timeRange={this.props.timeRange} />
   }
 }

plugins/plugin-codeflare/src/controller/charts/all.tsx

@@ -18,6 +18,9 @@ import React from "react"
 import { join } from "path"
 import { Arguments } from "@kui-shell/core"
 
+import { toHostMap } from "./LogRecord"
+import { timeRange } from "./timestamps"
+
 /** Oops, sometimes we have no data for a give node */
 function noData(node: string, kind: "CPU Utilization" | "GPU Utilization") {
   return (
@@ -52,32 +55,42 @@ export default async function all(args: Arguments) {
   ])
 
   // get a canonical list of nodes
-  const nodes = Array.from(new Set(Object.keys(gpuData).concat(Object.keys(cpuData)))).sort((a, b) => {
+  const gpuMap = toHostMap(gpuData)
+  const cpuMap = toHostMap(cpuData)
+  const nodes = Array.from(new Set(Object.keys(gpuMap).concat(Object.keys(cpuMap)))).sort((a, b) => {
     // sort them so that nodes for which we have both gpu and cpu
     // data float to the top; in second place will be the group of
     // nodes for which we have only gpu data; in last place will be
     // the nodes for which we only have cpu data
-    const aHasG = gpuData[a]
-    const aHasC = cpuData[a]
-    const bHasG = gpuData[b]
-    const bHasC = cpuData[b]
+    const aHasG = gpuMap[a]
+    const aHasC = cpuMap[a]
+    const bHasG = gpuMap[b]
+    const bHasC = cpuMap[b]
 
     // 2 vs 1 to get the gpu-first priority described above
     const vA = (aHasG ? 2 : 0) + (aHasC ? 1 : 0)
     const vB = (bHasG ? 2 : 0) + (bHasC ? 1 : 0)
     return vB - vA
   })
 
-  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] }} />,
-    ]
-  })
+  const range = timeRange(gpuData, cpuData)
+
+  const linearized = nodes
+    .map((node) => {
+      const gpuForNode = gpuMap[node]
+      const cpuForNode = cpuMap[node]
+      return [
+        !gpuForNode ? noData(node, "GPU Utilization") : <GPUChart timeRange={range} logs={{ [node]: gpuForNode }} />,
+        !cpuForNode ? (
+          noData(node, "CPU Utilization")
+        ) : (
+          <VmstatChart timeRange={range} logs={{ [node]: cpuMap[node] }} />
+        ),
+      ]
+    })
+    .flatMap((_) => _)
 
   return {
-    react: <div className="codeflare-chart-grid flex-fill">{linearized.flatMap((_) => _)}</div>,
+    react: <div className="codeflare-chart-grid flex-fill">{linearized}</div>,
   }
 }

plugins/plugin-codeflare/src/controller/charts/gpu.tsx

@@ -19,6 +19,7 @@ import stripAnsi from "strip-ansi"
 import { Arguments } from "@kui-shell/core"
 
 import { expand } from "../../lib/util"
+import { timeRange } from "./timestamps"
 import LogRecord, { toHostMap } from "./LogRecord"
 
 import GPUChart from "../../components/GPUChart"
@@ -63,14 +64,14 @@ function formatLogObject(logLine: string[]) {
 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)
-  return toHostMap(formattedLogs.map((logLine) => formatLogObject(logLine)))
+  return formattedLogs.map((logLine) => formatLogObject(logLine))
 }
 
 export function chart(logs: Awaited<ReturnType<typeof parse>>) {
   return {
     react: (
       <ChartGrid>
-        <GPUChart logs={logs} />
+        <GPUChart logs={toHostMap(logs)} timeRange={timeRange(logs)} />
       </ChartGrid>
     ),
   }

plugins/plugin-codeflare/src/controller/charts/timestamps.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 LogRecord from "./LogRecord"
+
+export function timeRange(...records: LogRecord<unknown>[][]) {
+  const min = records.reduce(
+    (min, logs) => logs.reduce((min, line) => Math.min(min, line.timestamp), Number.MAX_VALUE),
+    Number.MAX_VALUE
+  )
+
+  const max = records.reduce(
+    (max, logs) => logs.reduce((max, line) => Math.max(max, line.timestamp), Number.MIN_VALUE),
+    Number.MIN_VALUE
+  )
+
+  return { min, max }
+}

plugins/plugin-codeflare/src/controller/charts/vmstat.tsx

@@ -18,6 +18,7 @@ import React from "react"
 import { Arguments } from "@kui-shell/core"
 
 import { expand } from "../../lib/util"
+import { timeRange } from "./timestamps"
 import LogRecord, { toHostMap } from "./LogRecord"
 
 import ChartGrid from "../../components/ChartGrid"
@@ -53,21 +54,19 @@ function parseLine(cells: string[]): Log {
 }
 
 export async function parse(filepath: string, REPL: Arguments["REPL"]) {
-  return toHostMap(
-    (await REPL.qexec<string>(`vfs fslice ${expand(filepath)} 0`))
-      .split(/\n/)
-      .filter((logLine) => logLine && !/----|swpd/.test(logLine))
-      .map((_) => _.split(/\s+/))
-      .map(parseLine)
-      .sort((a, b) => a.hostname.localeCompare(b.hostname))
-  )
+  return (await REPL.qexec<string>(`vfs fslice ${expand(filepath)} 0`))
+    .split(/\n/)
+    .filter((logLine) => logLine && !/----|swpd/.test(logLine))
+    .map((_) => _.split(/\s+/))
+    .map(parseLine)
+    .sort((a, b) => a.hostname.localeCompare(b.hostname))
 }
 
 export function chart(logs: Awaited<ReturnType<typeof parse>>) {
   return {
     react: (
       <ChartGrid>
-        <VmstatChart logs={logs} />
+        <VmstatChart logs={toHostMap(logs)} timeRange={timeRange(logs)} />
       </ChartGrid>
     ),
   }