fix: adjust status themes to use diverging style

and arrange it from Failed -> Queued -> Provisioning -> Initializing -> Running -> Success as the spectrum

Author: starpit

Diff for: plugins/plugin-codeflare-dashboard/src/components/Dashboard.tsx

@@ -62,9 +62,9 @@ export default class Grid extends React.PureComponent<GridProps> {
 
   // private readonly sizes = ["▁▁", "▃▃", "▅▅", "▆▆", "██", "■■"]
 
-  private readonly cell = "█▉"
+  private readonly defaultCell = "█▉"
   private cellFor(props: TextProps): TextProps {
-    return Object.assign({ children: this.cell }, props)
+    return Object.assign({ children: this.defaultCell }, props)
   }
 
   private get emptyCell(): TextProps {
@@ -89,7 +89,7 @@ export default class Grid extends React.PureComponent<GridProps> {
    * just the length of a side in the grid/heat map).
    */
   private get minMatrixSize() {
-    return 6
+    return 4
   }
 
   private matrixModel(): Worker[][] {

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

@@ -93,7 +93,7 @@ async function gridFor(
 ): Promise<GridSpec> {
   const tails = await tailf(kind, profile, jobId)
   return kind === "status"
-    ? status(tails, historyConfig, { demo: opts.demo, theme: opts.theme, themeDefault: "colorbrewer" })
+    ? status(tails, historyConfig, { demo: opts.demo, theme: opts.theme })
     : utilization(kind, tails, historyConfig, opts)
 }
 

Diff for: plugins/plugin-codeflare-dashboard/src/controller/dashboard/index.ts

@@ -109,7 +109,7 @@ export default class Live {
 
                 // inform the UI that we have updates
                 cb({
-                  // lines: this.pushLine(data, metric, timestamp),
+                  lines: this.pushLine(data, metric, timestamp),
                   workers: Object.values(this.workers),
                 })
               }
@@ -166,7 +166,7 @@ export default class Live {
 
   /** `pushLine` and then pass the updated model to `cb` */
   private pushLineAndPublish(line: string, metric: WorkerState, timestamp: number, cb: OnData) {
-    cb({ /* lines: this.pushLine(line, metric, timestamp), */ workers: Object.values(this.workers) })
+    cb({ lines: this.pushLine(line, metric, timestamp), workers: Object.values(this.workers) })
   }
 
   private asMillisSinceEpoch(timestamp: string) {

Diff for: plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/Live.ts

@@ -30,9 +30,9 @@ import { isValidStatusTheme, statusThemes } from "./theme.js"
 export default function statusDashboard(
   tails: Promise<Tail>[],
   historyConfig: HistoryConfig,
-  opts: Pick<Options, "demo" | "theme" | "themeDefault">
+  opts: Pick<Options, "demo" | "theme"> & Partial<Pick<Options, "themeDefault">>
 ): GridSpec {
-  const { theme: themeS = opts.themeDefault } = opts
+  const { theme: themeS = opts.themeDefault || "colorbrewer6" } = opts
   if (!isValidStatusTheme(themeS)) {
     throw new Error("Invalid theme: " + themeS)
   }

Diff for: plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export const states = ["Queued", "Provisioning", "Initializing", "Running", "Success", "Failed"]
+export const states = ["Failed", "Queued", "Provisioning", "Initializing", "Running", "Success"]
 
 /** Type declaration for quantized utilization states */
 export type WorkerState = (typeof states)[number]

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

@@ -47,25 +47,123 @@ export const patternfly: StatusTheme = [
 ]
 
 /** https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=8 */
-export const colorbrewer: StatusTheme = [
-  { color: "#fddbc7" },
-  { color: "#ef8a62" },
-  { color: "#d1e5f0" },
-  { color: "#67a9cf" },
-  { color: "#2166ac" },
-  { color: "#b2182b" },
+export const colorbrewer1: StatusTheme = [
+  /*{ color: "#ffff99" },
+  { color: "#fdbf6f" },
+  { color: "#ff7f00" },
+  { color: "#33a02c" },
+  { color: "#a6cee3" },
+  { color: "#b2182b" },*/
+
+  /* pastel */
+  /* { color: "#ffffb3" },
+  { color: "#fdb462" },
+  { color: "#bebada" },
+  { color: "#8dd3c7" },
+  { color: "#80b1d3" },
+  { color: "#fb8072" }, */
+
+  /* only works in dark terminals */
+  /* { color: "#ffff33" },
+  { color: "#ff7f00" },
+  { color: "#984ea3" },
+  { color: "#4daf4a" },
+  { color: "#377eb8" },
+  { color: "#e41a1c" }, */
+
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+
   /*  { color: "#5e4fa2" },
   { color: "#3288bd" },
   { color: "#e6f598" },
   { color: "#66c2a5" },
   { color: "#d53e4f" },*/
 ]
 
+/* pastel */
+export const colorbrewer2: StatusTheme = [
+  { color: "#ffffb3" },
+  { color: "#fdb462" },
+  { color: "#bebada" },
+  { color: "#8dd3c7" },
+  { color: "#80b1d3" },
+  { color: "#fb8072" },
+]
+
+/* only works in dark terminals */
+export const colorbrewer3: StatusTheme = [
+  { color: "#ffff33" },
+  { color: "#ff7f00" },
+  { color: "#984ea3" },
+  { color: "#4daf4a" },
+  { color: "#377eb8" },
+  { color: "#e41a1c" },
+]
+
+export const colorbrewer4: StatusTheme = [
+  { color: "#ffff99" },
+  { color: "#fdc086" },
+  { color: "#beaed4" },
+  { color: "#7fc97f" },
+  { color: "#386cb0" },
+  { color: "#f0027f" },
+]
+
+/* diverging scheme=Spectral */
+export const colorbrewer5: StatusTheme = [
+  { color: "#fc8d59" },
+  { color: "#fee08b" },
+  { color: "#e6f598" },
+  { color: "#99d594" },
+  { color: "#3288bd" },
+  { color: "#d53e4f" },
+]
+
+/* diverging scheme=RdYlBu */
+export const colorbrewer6: StatusTheme = [
+  { color: "#fc8d59" },
+  { color: "#fee090" },
+  { color: "#e0f3f8" },
+  { color: "#91bfdb" },
+  { color: "#4575b4" },
+  { color: "#d73027" },
+]
+
+/* diverging scheme=RdBu */
+export const colorbrewer7: StatusTheme = [
+  { color: "#ef8a62" },
+  { color: "#fddbc7" },
+  { color: "#d1e5f0" },
+  { color: "#67a9cf" },
+  { color: "#2166ac" },
+  { color: "#b2182b" },
+]
+
+/*export const colorbrewer4: StatusTheme = [
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+  { color: "#" },
+]*/
+
 export const statusThemes = {
   user,
   carbon,
   patternfly,
-  colorbrewer,
+  colorbrewer1,
+  colorbrewer2,
+  colorbrewer3,
+  colorbrewer4,
+  colorbrewer5,
+  colorbrewer6,
+  colorbrewer7,
 }
 
 export type ValidTheme = keyof typeof statusThemes

Diff for: plugins/plugin-codeflare-dashboard/src/controller/dashboard/status/theme.ts

@@ -46,7 +46,7 @@ export default function utilizationDashboard(
   historyConfig: HistoryConfig,
   opts: Pick<Options, "demo" | "theme"> & Partial<Pick<Options, "themeDefault">>
 ): GridSpec {
-  const { theme: themeS = opts.themeDefault || defaultUtilizationThemes[kind] } = opts
+  const themeS = opts.themeDefault || defaultUtilizationThemes[kind]
   if (!isValidTheme(themeS)) {
     throw new Error("Invalid theme: " + themeS)
   }