fix: clean up stats code a bit, display average in grid

Author: starpit

plugins/plugin-codeflare-dashboard/src/components/Dashboard/Grid.tsx

@@ -15,15 +15,18 @@
  */
 
 import React from "react"
-import { Box, BoxProps, Text, TextProps } from "ink"
+import { Box, BoxProps, Spacer, Text, TextProps } from "ink"
 
 import type { Props, State } from "./index.js"
 import type { UpdatePayload, Worker } from "./types.js"
 
+import { avg } from "./stats.js"
+
 type GridProps = {
   /** Position of legend w.r.t. the grid UI [default: "below"] */
   legendPosition?: "right" | "below"
 
+  isQualitative: boolean
   scale: Props["scale"]
   title: NonNullable<Props["grids"][number]>["title"]
   states: NonNullable<Props["grids"][number]>["states"]
@@ -182,7 +185,19 @@ export default class Grid extends React.PureComponent<GridProps> {
   }
 
   private title() {
-    return <Text>{this.props.title}</Text>
+    return (
+      <React.Fragment>
+        <Text>{this.props.title}</Text>
+        {this.props.isQualitative ? (
+          <React.Fragment />
+        ) : (
+          <React.Fragment>
+            <Spacer />
+            <Text color="yellow">μ={avg(this.props.workers)}%</Text>
+          </React.Fragment>
+        )}
+      </React.Fragment>
+    )
   }
 
   private get legendPosition() {

plugins/plugin-codeflare-dashboard/src/components/Dashboard/Timeline.tsx

@@ -19,6 +19,8 @@ import { Box, Text } from "ink"
 
 import type { GridSpec, Worker } from "./types.js"
 
+import { avg } from "./stats.js"
+
 type Props = {
   gridModels: GridSpec[]
   workers: Worker[][]
@@ -51,63 +53,12 @@ export default class Timeline extends React.PureComponent<Props> {
     }, 0)
   }
 
-  /** @return the accumulated `total` and count `N` across a set of `workers` for the given `timeIdx` */
-  private accum(workers: Worker[], timeIdx: number, field: "valueTotal" | "metricIdxTotal") {
-    return workers.reduce(
-      (A, worker) => {
-        const history = worker.metricHistory
-        if (history[timeIdx]) {
-          A.total += history[timeIdx][field]
-          A.N += history[timeIdx].N
-        }
-        return A
-      },
-      { total: 0, N: 0 }
-    )
-  }
-
-  /** @return average metric value across a set of `workers` for the given `timeIdx` */
-  private avg(workers: Worker[], timeIdx: number, field: "valueTotal" | "metricIdxTotal"): number {
-    const { total, N } = this.accum(workers, timeIdx, field)
-    if (N === 0) {
-      if (timeIdx === 0) return 0
-      else {
-        for (let t = timeIdx - 1; t >= 0; t--) {
-          const { total, N } = this.accum(workers, t, field)
-          if (N !== 0) {
-            return Math.round(total / N)
-          }
-        }
-        return 0
-      }
-    }
-
-    return Math.round(total / N)
-  }
-
-  /** @return long-term average, averaged over time and across a set of `workers` */
-  private longTermAvg(workers: Worker[], nTimes: number) {
-    const { total, N } = Array(nTimes)
-      .fill(0)
-      .map((_, timeIdx) => this.accum(workers, timeIdx, "valueTotal"))
-      .reduce(
-        (A, { total, N }) => {
-          A.total += total
-          A.N += N
-          return A
-        },
-        { total: 0, N: 0 }
-      )
-
-    return Math.round(total / N)
-  }
-
   /**
    * Render one cell to represent the average over the given `workers`
    * for the given grid, for the given time.
    */
   private cell(workers: Worker[], spec: GridSpec, timeIdx: number, isLatest: boolean) {
-    const metricIdx = this.avg(workers, timeIdx, "metricIdxTotal")
+    const metricIdx = avg(workers, "metricIdxTotal", timeIdx)
     const style = spec.states[metricIdx] ? spec.states[metricIdx].style : { color: "gray", dimColor: true }
 
     return (
@@ -135,12 +86,6 @@ export default class Timeline extends React.PureComponent<Props> {
           <Text>{spec.title.padStart(this.maxLabelLength)}</Text>
         </Box>
         <Box marginLeft={1}>{this.cells(workers, spec, nTimes, timeStartIdx)}</Box>
-        <Text>
-          {Math.round(this.avg(workers, nTimes - 1, "valueTotal"))
-            .toFixed()
-            .padStart(3) + "%"}
-        </Text>
-        <Text color="yellow"> μ={Math.round(this.longTermAvg(workers, nTimes)) + "%"}</Text>
       </React.Fragment>
     )
   }
@@ -155,7 +100,7 @@ export default class Timeline extends React.PureComponent<Props> {
 
     // to help us compute whether we are about to overflow terminal width
     const maxLabelLength = this.props.gridModels.reduce((N, spec) => {
-      return Math.max(N, "100% μ=100%".length + spec.title.length)
+      return Math.max(N, spec.title.length)
     }, 0)
 
     // once we overflow, display the suffix of history information, starting at this index

plugins/plugin-codeflare-dashboard/src/components/Dashboard/index.tsx

@@ -235,6 +235,7 @@ export default class Dashboard extends React.PureComponent<Props, State> {
               title={grid.title}
               scale={this.props.scale}
               states={grid.states}
+              isQualitative={grid.isQualitative}
               workers={this.state?.workers[widx] || []}
               legendPosition={row.length === 1 ? "right" : "below"}
             />

plugins/plugin-codeflare-dashboard/src/components/Dashboard/stats.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 { Worker } from "./types.js"
+
+/** @return the accumulated `total` and count `N` across a set of `workers` for the given `timeIdx` */
+function accum(workers: Worker[], timeIdx: number, field: "valueTotal" | "metricIdxTotal") {
+  return workers.reduce(
+    (A, worker) => {
+      const history = worker.metricHistory
+      if (history[timeIdx]) {
+        A.total += history[timeIdx][field]
+        A.N += history[timeIdx].N
+      }
+      return A
+    },
+    { total: 0, N: 0 }
+  )
+}
+
+/** @return average metric value across a set of `workers` for the given `timeIdx` */
+export function avg(
+  workers: Worker[],
+  field: "valueTotal" | "metricIdxTotal" = "valueTotal",
+  timeIdx = workers.reduce((M, _) => Math.max(M, _.metricHistory.length), 0)
+): number {
+  const { total, N } = accum(workers, timeIdx, field)
+  if (N === 0) {
+    if (timeIdx === 0) return 0
+    else {
+      for (let t = timeIdx - 1; t >= 0; t--) {
+        const { total, N } = accum(workers, t, field)
+        if (N !== 0) {
+          return Math.round(total / N)
+        }
+      }
+      return 0
+    }
+  }
+
+  return Math.round(total / N)
+}
+
+/** @return long-term average, averaged over time and across a set of `workers` */
+export function longTermAvg(workers: Worker[], nTimes: number) {
+  const { total, N } = Array(nTimes)
+    .fill(0)
+    .map((_, timeIdx) => accum(workers, timeIdx, "valueTotal"))
+    .reduce(
+      (A, { total, N }) => {
+        A.total += total
+        A.N += N
+        return A
+      },
+      { total: 0, N: 0 }
+    )
+
+  return Math.round(total / N)
+}