feat: update dashboard charts to show 4 charts per row

and some small adjustments around it (x axis labels, padding) to make this fit

Author: starpit

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

@@ -69,7 +69,7 @@ export default class BaseChart extends React.PureComponent<Props> {
   private static tickLabelFontSize = BaseChart.fontSize - 1
 
   private static readonly dimensions = {
-    width: 150,
+    width: 120,
     height: 200,
   }
 
@@ -155,7 +155,8 @@ export default class BaseChart extends React.PureComponent<Props> {
     celsius: (value: number) => ~~value + "C",
     percentage: (value: number) => value + "%",
     memory: (value: number) => ~~(value / 1024 / 1024) + " GiB",
-    timestamp: (timestamp: number) => (timestamp / 1000 / 60).toFixed(1) + "m",
+    timestamp: (timestamp: number) =>
+      timestamp < 60000 ? (timestamp / 1000).toFixed(0) + "s" : (timestamp / 1000 / 60).toFixed(1) + "m",
   }
 
   private readonly minDomain = {
@@ -172,8 +173,28 @@ export default class BaseChart extends React.PureComponent<Props> {
   }
 
   private xAxis() {
+    // TODO, factor this out into a State variable?
+    const { min, max } = this.props.charts.reduce(
+      (M, chart) =>
+        chart.series.reduce(
+          (M, series) =>
+            series.data.reduce((M, point) => {
+              M.min = Math.min(M.min, point.x)
+              M.max = Math.max(M.max, point.x)
+              return M
+            }, M),
+          M
+        ),
+      { min: Number.MAX_VALUE, max: Number.MIN_VALUE }
+    )
+
     return (
-      <ChartAxis scale="time" style={BaseChart.axisStyle} tickFormat={BaseChart.formatters.timestamp} tickCount={3} />
+      <ChartAxis
+        scale="time"
+        style={BaseChart.axisStyle}
+        tickFormat={BaseChart.formatters.timestamp}
+        tickValues={[(max - min) / 4, max]}
+      />
     )
   }
 

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

@@ -90,7 +90,7 @@ export default class GPUChart extends React.PureComponent<Props, State> {
         padding: GPUChart.padding,
         yAxes: [
           {
-            label: "GPU Utilization",
+            label: "Utilization",
             format: "percentage",
             y: data[0].y,
             tickFormat: data[0].tickFormat,

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

@@ -76,7 +76,7 @@ export default class VmstatChart extends React.PureComponent<Props, State> {
         padding: VmstatChart.padding,
         yAxes: [
           {
-            label: "CPU Utilization",
+            label: "Utilization",
             format: "percentage",
             y: data[0].y,
             tickFormat: data[0].tickFormat,

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

@@ -18,16 +18,18 @@
 
 @include ChartGrid {
   display: grid;
-  grid-gap: 1em;
-  padding: 2em;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 0.6875em;
+  padding: 2em 1em;
+  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: minmax(300px, max-content);
 }
 
 @include ChartContainer {
   background-color: var(--color-base01);
 
   &.pf-c-tile {
+    padding-left: 1em;
+    padding-right: 1em;
     --pf-c-tile__title--Color: var(--color-text-01);
     --pf-c-tile--before--BorderColor: var(--color-table-border3);
   }