fix: some cleanups to the dashboard layout

- moves gpu utilization to the top level
- adjust default window size to 1400x1050

Author: starpit

bin/codeflare

@@ -7,8 +7,8 @@ export NODE_NO_WARNINGS=1
 # export KUI_POPUP_WINDOW_RESIZE=true
 
 # use a fixed popup window sizing of our choosing
-export WINDOW_WIDTH=1024
-export WIDTH_HEIGHT=768
+# export WINDOW_WIDTH=1024
+# export WIDTH_HEIGHT=768
 
 # This tells the core Kui plugin resolver that we are using webpack to
 # build our headless bundles, not the old headless hacks

plugins/plugin-client-default/notebooks/dashboard-dependencies.md

@@ -0,0 +1,9 @@
+=== "Pip Dependencies"
+
+    ```json
+    ---
+    language: yaml
+    include: .runtimeEnv.pip
+    ---
+    --8<-- "$LOGDIR/job.json"
+    ```

plugins/plugin-client-default/notebooks/dashboard-envvars.md

@@ -0,0 +1,9 @@
+=== "Environment"
+
+    ```json
+    ---
+    language: yaml
+    include: .runtimeEnv.env_vars
+    ---
+    --8<-- "$LOGDIR/job.json"
+    ```

plugins/plugin-client-default/notebooks/dashboard-summary.md

@@ -10,23 +10,3 @@
     ---
     --8<-- "$LOGDIR/job.json"
     ```
-
-=== "Environment"
-
-    ```json
-    ---
-    language: yaml
-    include: .runtimeEnv.env_vars
-    ---
-    --8<-- "$LOGDIR/job.json"
-    ```
-
-=== "Pip Dependencies"
-
-    ```json
-    ---
-    language: yaml
-    include: .runtimeEnv.pip
-    ---
-    --8<-- "$LOGDIR/job.json"
-    ```

plugins/plugin-client-default/notebooks/dashboard.md

@@ -1,17 +1,21 @@
 ---
 layout:
     1:
-        position: default
+        position: left
         maximized: true
     2:
         position: default
         maximized: true
+    3:
+        position: default
+        maximized: true
         inverseColors: true
 ---
 
 --8<-- "./dashboard-summary.md"
---8<-- "./dashboard-choices.md"
 --8<-- "./dashboard-source.md"
+--8<-- "./dashboard-envvars.md"
+--8<-- "./dashboard-dependencies.md"
 
 ---
 
@@ -21,16 +25,6 @@ layout:
     --8<-- "$LOGDIR/logs/job.txt"
     ```
 
-=== "GPU Utilization"
-
-    ```shell
-    ---
-    execute: now
-    outputOnly: true
-    ---
-    chart "$LOGDIR/resources/gpu.txt"
-    ```
-
 === "Advanced"
     === "Node Utilization"
 
@@ -53,3 +47,14 @@ layout:
         --8<-- "$LOGDIR/events/kubernetes.txt"
         ```
 
+        --8<-- "./dashboard-choices.md"
+
+---
+
+```shell
+---
+execute: now
+outputOnly: true
+---
+chart "$LOGDIR/resources/gpu.txt"
+```

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

@@ -18,6 +18,8 @@ import React from "react"
 import { Chart, ChartAxis, ChartGroup, ChartArea } from "@patternfly/react-charts"
 import { Log } from "../types"
 
+import "../../web/scss/components/Dashboard/Charts.scss"
+
 type Props = {
   logs: Log[]
 }
@@ -36,6 +38,10 @@ const generateXValues = (logs: Log[]) => {
   return [...new Set(logs.filter((item) => item.utilizationGPU > 0).map((item) => item.timestamp))]
 }
 
+const axisStyle = { tickLabels: { fontSize: 9 } }
+const yTickValues = [0, 25, 50, 75, 100]
+const yTickLabels = yTickValues.map((_) => `${_}%`)
+
 const GPUChart = (props: Props) => {
   const { logs } = props
   console.log(generateXValues(logs))
@@ -44,19 +50,21 @@ const GPUChart = (props: Props) => {
       <Chart
         ariaTitle="GPU Utilization"
         ariaDesc="Chart showing GPU utilization over time"
-        height={400}
+        height={135}
         width={1000}
         maxDomain={{ y: 100 }}
         minDomain={{ y: 0 }}
         padding={{
-          bottom: 30,
-          left: 60,
-          right: 20,
-          top: 20,
+          bottom: 25,
+          left: 50,
+          right: 5,
+          top: 10,
         }}
       >
-        <ChartAxis dependentAxis showGrid tickValues={[0, 25, 50, 75, 100]} label="Percentage (%)" />
+        <ChartAxis dependentAxis showGrid style={axisStyle} tickValues={yTickValues} tickFormat={yTickLabels} />
         <ChartAxis
+          scale="time"
+          style={axisStyle}
           tickValues={generateXValues(logs)}
           tickFormat={generateXFormat(logs)}
           tickCount={generateXFormat(logs).length}

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

@@ -51,5 +51,11 @@ export default function registerDashboardCommands(registrar: Registrar) {
   }
 
   registrar.listen("/dashboard", dashboardcli, { flags })
-  registrar.listen("/codeflare/dashboardui", dashboardui, { needsUI: true, outputOnly: true, flags })
+  registrar.listen("/codeflare/dashboardui", dashboardui, {
+    needsUI: true,
+    outputOnly: true,
+    flags,
+    width: 1400,
+    height: 1050,
+  })
 }

plugins/plugin-codeflare/web/scss/components/Dashboard/Charts.scss

@@ -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.
+ */
+
+.pf-c-chart {
+  path {
+    fill: var(--color-latency-1) !important;
+    stroke: var(--color-latency-1) !important;
+  }
+
+  line {
+    stroke: var(--color-base01) !important;
+  }
+
+  tspan {
+    fill: var(--color-text-02) !important;
+    font-family: var(--font-sans-serif) !important;
+  }
+}

plugins/plugin-codeflare/web/scss/components/Dashboard/_index.scss

@@ -14,15 +14,20 @@
  * limitations under the License.
  */
 
-@import "@kui-shell/plugin-client-common/web/scss/components/Card/_mixins";
-@import "@kui-shell/plugin-client-common/web/scss/components/Editor/_mixins";
-@import "@kui-shell/plugin-client-common/web/scss/components/Terminal/_mixins";
+@import "@kui-shell/plugin-client-common/web/scss/components/Card/mixins";
+@import "@kui-shell/plugin-client-common/web/scss/components/Editor/mixins";
+@import "@kui-shell/plugin-client-common/web/scss/components/Terminal/mixins";
+@import "@kui-shell/plugin-client-common/web/scss/components/TopLevelTab/mixins";
 @import "@kui-shell/plugin-client-common/web/scss/components/Terminal/Maximized";
 
-@include Split(2) {
-  @include Rows(3);
-  @include Columns(1);
-  grid-template-areas: "T1" "T2" "T2";
+@include TopLevelTab {
+  @include HasOnlyLeftStrip {
+    @include Split(3) {
+      @include Rows(5);
+      @include Columns(5);
+      grid-template-areas: "L1 L1 T1 T1 T1" "L1 L1 T1 T1 T1" "L1 L1 T1 T1 T1" "L1 L1 T1 T1 T1" "T2 T2 T2 T2 T2";
+    }
+  }
 }
 
 @mixin Fill {
@@ -32,7 +37,7 @@
 }
 
 @include SplitContainer {
-  grid-gap: 0;
+  grid-gap: 3px;
 }
 
 @include Scrollback {
@@ -51,6 +56,9 @@
       overflow: hidden;
 
       @include CardBody {
+        & > pre {
+          background-color: var(--color-repl-background-02);
+        }
         & > pre > .paragraph {
           @include Fill;
         }
@@ -66,6 +74,10 @@
   }
 
   @include Markdown {
+    h4 {
+      margin: 0;
+    }
+
     @include EditorBackground {
       background-color: transparent;
     }