19744: Apply styling to roughly match workbench
authorPeter Amstutz <peter.amstutz@curii.com>
Tue, 13 Feb 2024 23:58:43 +0000 (18:58 -0500)
committerPeter Amstutz <peter.amstutz@curii.com>
Tue, 13 Feb 2024 23:58:43 +0000 (18:58 -0500)
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

tools/crunchstat-summary/crunchstat_summary/summarizer.py
tools/crunchstat-summary/crunchstat_summary/webchart.py

index 2bf334b1f6a860fef688faf5b41a1f17b972aeb7..75d49095d99963cf90753fe7391895e648941b85 100644 (file)
@@ -317,7 +317,7 @@ class Summarizer(object):
              self.elapsed_time(),
              None,
              ''),
-                ('Max CPU time spent{}'.format(by_single_task),
+                ('CPU time spent{}'.format(by_single_task),
                  self.stats_max['cpu']['user+sys'],
                  None,
                  's'),
index 4c596902ba22da4faf13317c46e591cb5f1acdd6..9aedaa044539ba27c332f7acd1b14307c1355351 100644 (file)
@@ -20,6 +20,40 @@ class WebChart(object):
     JSLIB = None
     JSASSET = None
 
+    STYLE = '''
+        body {
+          background: #fafafa;
+          font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+          font-size: 0.875rem;
+          color: rgba(0, 0, 0, 0.87);
+          font-weight: 400;
+        }
+        .card {
+          background: #ffffff;
+          box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12);
+          border-radius: 4px;
+          margin: 20px;
+        }
+        .content {
+          padding: 2px 16px 8px 16px;
+        }
+        table {
+          border-spacing: 0px;
+        }
+        tr {
+          height: 36px;
+          text-align: left;
+        }
+        th {
+          padding-right: 4em;
+          border-top: 1px solid rgba(224, 224, 224, 1);
+        }
+        td {
+          padding-right: 2em;
+          border-top: 1px solid rgba(224, 224, 224, 1);
+        }
+    '''
+
     def __init__(self, label, summarizers):
         self.label = label
         self.summarizers = summarizers
@@ -30,35 +64,40 @@ class WebChart(object):
         <script type="text/javascript" src="{}"></script>
         <script type="text/javascript">{}</script>
         <style>
-        table {{
-          width: 90%
-        }}
-        td {{
-          width: 20%
-        }}
-        #chart {{
-          margin-top: 2em;
-        }}
-        #bottomhtml {{
-          margin-top: 4em;
-        }}
+        {}
         </style>
         {}
         </head>
         <body>
-        <h1>{}</h1>
-        <div id="tophtml">
-        {}
+        <div class="card">
+          <div class="content">
+            <h1>{}</h1>
+          </div>
         </div>
-        <div id="chart"></div>
-        <div id="bottomhtml">
-        {}
+        <div class="card">
+          <div class="content" id="tophtml">
+          <h2>Summary</h2>
+          {}
+          </div>
+        </div>
+        <div class="card">
+          <div class="content">
+            <h2>Graph</h2>
+            <div id="chart"></div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="content" id="bottomhtml">
+          <h2>Metrics</h2>
+          {}
+          </div>
         </div>
         </body>
         </html>
         '''.format(escape(self.label),
                    self.JSLIB,
                    self.js(),
+                   self.STYLE,
                    self.headHTML(),
                    escape(self.label),
                    beforechart,