feat: more dashboard tweaks, including using Patternfly4 Dark as default theme

- changes aspect ratio of charts
- improve patternfly chart colors

Author: starpit

plugins/plugin-client-default/config.d/style.json

@@ -1,3 +1,3 @@
 {
-  "defaultTheme": "PatternFly4 Light"
+  "defaultTheme": "PatternFly4 Dark"
 }

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

@@ -9,12 +9,9 @@ layout:
     3:
         position: default
         maximized: true
-        inverseColors: true
 ---
 
 --8<-- "./dashboard-summary.md"
---8<-- "./dashboard-envvars.md"
---8<-- "./dashboard-dependencies.md"
 
 ---
 
@@ -25,6 +22,8 @@ layout:
     ```
 
 --8<-- "./dashboard-source.md"
+--8<-- "./dashboard-envvars.md"
+--8<-- "./dashboard-dependencies.md"
 
 === "Advanced"
     === "Node Utilization"

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

@@ -55,15 +55,15 @@ interface Props {
 }
 
 export default class BaseChart extends React.PureComponent<Props> {
-  private readonly dimensions = {
-    width: 400,
-    height: 90,
+  private static readonly dimensions = {
+    width: 320,
+    height: 160,
   }
 
   public static readonly padding = {
     bottom: 25,
-    left: 60,
-    right: 25,
+    left: 55,
+    right: 45,
     top: 10,
   }
 
@@ -84,14 +84,9 @@ export default class BaseChart extends React.PureComponent<Props> {
 
   public static readonly twoAxisStyle: ChartAxisProps["style"][] = [
     Object.assign({}, BaseChart.axisStyle || {}, {
-      axisLabel: Object.assign({}, (BaseChart.axisStyle || {}).axisLabel, {
-        fill: BaseChart.colors[1],
-        fontWeight: "bold",
-      }),
       tickLabels: Object.assign({}, (BaseChart.axisStyle || {}).tickLabels, { fill: BaseChart.colors[1] }),
     }),
     Object.assign({}, BaseChart.axisStyle, {
-      axisLabel: Object.assign({}, (BaseChart.axisStyle || {}).axisLabel, { fill: BaseChart.colors[2] }),
       tickLabels: Object.assign({}, (BaseChart.axisStyle || {}).tickLabels, { fill: BaseChart.colors[2] }),
     }),
   ]
@@ -122,7 +117,7 @@ export default class BaseChart extends React.PureComponent<Props> {
 
   private xAxis() {
     return (
-      <ChartAxis scale="time" style={BaseChart.axisStyle} tickFormat={BaseChart.formatters.timestamp} tickCount={5} />
+      <ChartAxis scale="time" style={BaseChart.axisStyle} tickFormat={BaseChart.formatters.timestamp} tickCount={2} />
     )
   }
 
@@ -163,8 +158,8 @@ export default class BaseChart extends React.PureComponent<Props> {
         ariaTitle={chart.title}
         ariaDesc={chart.desc}
         padding={chart.padding || BaseChart.padding}
-        width={this.dimensions.width}
-        height={this.dimensions.height}
+        width={BaseChart.dimensions.width}
+        height={BaseChart.dimensions.height}
         domain={chart.domain}
       >
         {this.xAxis()}

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

@@ -24,7 +24,7 @@
   @include Split(3) {
     @include Rows(9);
     @include Columns(13);
-    grid-template-areas: "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2";
+    grid-template-areas: "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T1 T1 T1 T1 T1 T1 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2" "T3 T3 T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2";
   }
 }
 
@@ -34,11 +34,25 @@
   flex: 1;
 }
 
-@include SplitContainer {
-  grid-gap: 3px;
+body.kui--patternfly4[kui-theme="PatternFly4 Light"][kui-theme-style] {
+  @include Scrollback {
+    --color-latency-1: #009596;
+    --color-latency-3: #c58c00;
+  }
+}
+
+body.kui--patternfly4[kui-theme="PatternFly4 Dark"][kui-theme-style] {
+  @include Scrollback {
+    --color-latency-1: #73c5c5;
+    --color-latency-3: #f9e0a2;
+  }
 }
 
 @include Scrollback {
+  .pf-c-tabs__link::after {
+    border-color: var(--color-base06);
+  }
+
   &:not(.kui--inverted-color-context) {
     /* TODO MISSING SASS MIXIN in KUI CORE */
     @include Block {