systemd: Change graph layout & colors (cockpit-project#10282)

Closes cockpit-project#10282

Author: garrett

pkg/lib/plot.es6

@@ -689,7 +689,7 @@ export class Plot {
 
 export function plot_simple_template() {
     var plot_colors = [
-        '#006bb4',
+        '#39a5dc',
         '#008ff0',
         '#2daaff',
         '#69c2ff',
@@ -706,7 +706,7 @@ export function plot_simple_template() {
             shadowSize: 0,
             lines: {
                 lineWidth: 2.0,
-                fill: 0.4
+                fill: 1
             }
         },
         xaxis: {

pkg/systemd/host.css

@@ -111,47 +111,69 @@ a.disabled {
     height: 120px;
 }
 
+.server-graph-container {
+    display: grid;
+    grid-template: "title title" "graph legend";
+    grid-template-columns: 1fr max-content;
+}
+
+.server-graph-title {
+    grid-area: title;
+}
+
+.server-graph-graph {
+    grid-area: graph;
+}
+
 .server-graph-legend {
-    list-style-type: none;
-    padding: 30px 40px;
+    grid-area: legend;
     float: right;
+    line-height: 24px;
+    list-style-type: none;
+    padding: 30px 40px 0 0;
+}
+
+.server-graph-legend li {
+    align-items: center;
+    display: flex;
 }
 
 .server-graph-legend i {
-    padding-right: 3px;
-    font-size: 14px;
+    font-size: 16px;
+    margin-right: 0.5rem;
+    padding: 0;
 }
 
 .server-graph-legend .cpu-io-wait i {
-    color: #e41a1c;
+    color: #cc0000; /* pf-red-100 */
 }
 
 .server-graph-legend .cpu-kernel i {
-    color: #ff7f00;
+    color: #f5c12e; /* pf-orange-300 */
 }
 
 .server-graph-legend .cpu-user i {
-    color: #377eb8;
+    color: #8461f2; /* pf-purple-300 */
 }
 
 .server-graph-legend .cpu-nice i {
-    color: #4daf4a;
+    color: #6eb664; /* pf-green-300 */
 }
 
 .server-graph-legend .memory-swap i {
-    color: #e41a1c;
+    color: #cc0000; /* pf-red-100 */
 }
 
 .server-graph-legend .memory-cached i {
-    color: #ff7f00;
+    color: #c8eb79; /* pf-light-green-200 */
 }
 
 .server-graph-legend .memory-used i {
-    color: #377eb8;
+    color: #0088ce; /* pf-blue-400 */
 }
 
 .server-graph-legend .memory-free i {
-    color: #4daf4a;
+    color: #3f9c35; /* pf-green-400 */
 }
 
 #cpu_status_title {

pkg/systemd/host.js

@@ -1448,7 +1448,7 @@ PageCpuStatus.prototype = {
 
         var options = {
             series: {shadowSize: 0,
-                     lines: {lineWidth: 0, fill: true}
+                     lines: {lineWidth: 0, fill: 1}
                     },
             yaxis: {min: 0,
                     max: n_cpus * 1000,
@@ -1472,10 +1472,10 @@ PageCpuStatus.prototype = {
         ];
 
         var series = [
-            { color: "#e41a1c", label: _("I/O Wait") },
-            { color: "#ff7f00", label: _("Kernel") },
-            { color: "#377eb8", label: _("User") },
-            { color: "#4daf4a", label: _("Nice") },
+            { color: "#cc0000", label: _("I/O Wait") },
+            { color: "#f5c12e", label: _("Kernel") },
+            { color: "#8461f7", label: _("User") },
+            { color: "#6eb664", label: _("Nice") },
         ];
 
         self.channel = cockpit.metrics(1000, {
@@ -1543,7 +1543,7 @@ PageMemoryStatus.prototype = {
             var options = {
                 series: {
                     shadowSize: 0, // drawing is faster without shadows
-                    lines: {lineWidth: 0.0, fill: true}
+                    lines: {lineWidth: 0.0, fill: 1}
                 },
                 yaxis: {
                     min: 0,
@@ -1569,7 +1569,7 @@ PageMemoryStatus.prototype = {
             ];
             var series = [
                 { color: "#0088ce", label: _("Used") },
-                { color: "#ff7f00", label: _("Cached") },
+                { color: "#e4f5bc", label: _("Cached") },
             ];
 
             if (info.swap) {

pkg/systemd/index.html

@@ -245,30 +245,30 @@
         </div>
     </div>
 
-    <div id="cpu_status" hidden>
-        <div id="cpu_status_title">Yo!</div>
+    <div class="server-graph-container" id="cpu_status" hidden>
+        <div class="server-graph-title" id="cpu_status_title">&nbsp;</div>
         <ul class="server-graph-legend">
-            <li class="cpu-io-wait">
-                <i class="fa fa-square"></i>
-                <span translatable="yes">I/O Wait</span>
-            </li>
-            <li class="cpu-kernel">
+            <li class="cpu-nice">
                 <i class="fa fa-square"></i>
-                <span translatable="yes">Kernel</span>
+                <span translatable="yes">Nice</span>
             </li>
             <li class="cpu-user">
                 <i class="fa fa-square"></i>
                 <span translatable="yes">User</span>
             </li>
-            <li class="cpu-nice">
+            <li class="cpu-kernel">
                 <i class="fa fa-square"></i>
-                <span translatable="yes">Nice</span>
+                <span translatable="yes">Kernel</span>
+            </li>
+            <li class="cpu-io-wait">
+                <i class="fa fa-square"></i>
+                <span translatable="yes">I/O Wait</span>
             </li>
         </ul>
-        <div id="cpu_status_graph"></div>
+        <div class="server-graph-graph" id="cpu_status_graph"></div>
     </div>
 
-    <div id="memory_status" hidden>
+    <div class="server-graph-container" id="memory_status" hidden>
         <ul class="server-graph-legend">
             <li class="memory-swap">
                 <i class="fa fa-square"></i>
@@ -283,7 +283,7 @@
                 <span translatable="yes">Used</span>
             </li>
         </ul>
-        <div id="memory_status_graph"></div>
+        <div class="server-graph-graph" id="memory_status_graph"></div>
     </div>
 
     <div class="modal" id="system_information_ssh_keys" tabindex="-1"