fix: refinements to dashboard ui, including removal of Events pane

Author: starpit

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

@@ -11,9 +11,6 @@ layout:
     3:
         position: default
         maximized: true
-    4:
-        position: default
-        maximized: true
         inverseColors: true
 ---
 
@@ -83,14 +80,3 @@ layout:
     ---
     codeflare chart all "${LOGDIR}"
     ```
-
----
-
-=== "Events"
-    ```shell
-    ---
-    execute: now
-    outputOnly: true
-    ---
-    codeflare chart events "${LOGDIR}"
-    ```

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

@@ -366,7 +366,7 @@ export default class BaseChart extends React.PureComponent<Props> {
     })
   }
 
-  private areaStyle(stroke: string, fill: string, strokeWidth = 2.5, fillOpacity = 0.1): ChartAreaProps["style"] {
+  private areaStyle(stroke: string, fill: string, strokeWidth = 2.5, fillOpacity?: number): ChartAreaProps["style"] {
     return { data: { stroke, strokeWidth, fill, fillOpacity } }
   }
 
@@ -375,7 +375,7 @@ export default class BaseChart extends React.PureComponent<Props> {
   }
 
   private lineDashStyle(stroke: string): ChartLineProps["style"] {
-    return this.lineStyle(stroke, "3,0.5", 3)
+    return this.lineStyle(stroke, "3,0.5", 1.25)
   }
 
   private title(chart: BaseChartProps) {

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

@@ -149,7 +149,7 @@ export default class Combo extends React.PureComponent<Props, State> {
   private static noData(node: string, kind: "CPU Utilization" | "GPU Utilization", idx: number) {
     return (
       <div key={`nodata-${kind}-${idx}`} className="flex-layout" title={`No ${kind} for ${node}`}>
-        <span className="flex-fill flex-layout flex-align-center">no data</span>
+        <span className="flex-fill flex-layout flex-align-center">no {kind.replace(/ Utilization/, "")} data</span>
       </div>
     )
   }

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

@@ -57,7 +57,7 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
 
     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[2], data: d2 },
     ]
 
     const data = series.map((_, idx) => BaseChart.normalize(_, idx === 0 ? "percentage" : "memory"))

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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@use "sass:color";
+@import "@kui-shell/plugin-client-common/web/scss/Themes/mixins.scss";
 @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";
@@ -28,6 +30,16 @@
 }*/
 
 @include TopLevelTab {
+  @include Split(3) {
+    grid-template-rows: 100px 200px 1fr;
+    grid-template-columns: repeat(13, 1fr);
+
+    grid-template-areas:
+      "T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2"
+      "T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2"
+      "T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2 T2 T2";
+  }
+
   @include Split(4) {
     grid-template-rows: 100px 200px 1fr;
     grid-template-columns: repeat(13, 1fr);
@@ -82,19 +94,32 @@
   }
 }
 
-body.kui--patternfly4[kui-theme="PatternFly4 Light"][kui-theme-style] {
-  @include Scrollback {
-    --color-latency-0: #005f60;
-    --color-latency-1: #009596;
-    --color-latency-2: #c46100;
+@mixin LightColors {
+  --color-latency-0: #005f60;
+  --color-latency-1: #009596;
+  --color-latency-2: #c46100;
+}
+
+@mixin DarkColors {
+  --color-latency-0: #a2d9d9;
+  --color-latency-1: #{color.adjust(#f6d173, $alpha: -0.05, $lightness: +0.5)};
+  --color-latency-2: #ef9234;
+}
+
+body[kui-theme-style="light"] {
+  @include ChartContainer {
+    @include LightColors;
+  }
+  @include InvertedColors {
+    @include ChartContainer {
+      @include DarkColors;
+    }
   }
 }
 
-body.kui--patternfly4[kui-theme="PatternFly4 Dark"][kui-theme-style] {
-  @include Scrollback {
-    --color-latency-0: #73c5c5;
-    --color-latency-1: #a2d9d9;
-    --color-latency-2: #ef9234;
+body[kui-theme-style="dark"] {
+  @include ChartContainer {
+    @include DarkColors;
   }
 }