some dashboard cleanup

2026-05-09 10:47:05 +00:00 · 2019-04-15 11:15:55 -04:00
parent c1d1566ad6
commit d363eed95f
7 changed files with 44 additions and 244 deletions
--- a/pkg/dashboard/templates/dashboard.gohtml
+++ b/pkg/dashboard/templates/dashboard.gohtml
@@ -8,7 +8,7 @@
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

-  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Muli:300,400,700" rel="stylesheet">
  <link rel="stylesheet" href="/static/css/normalize.css">
  <link rel="stylesheet" href="/static/css/main.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
@@ -27,8 +27,8 @@
    <div class="header-content">
      <img class="logo" src="/static/images/logo.png" alt="Fairwinds" />
      <div class="header-right">
-        <a href="https://reactiveops.com?source=fairwinds">
-          <span class="by-text">by</span>
+        <a href="https://reactiveops.com?source=fairwinds" target="_blank">
+          <span class="oss-text">Open Source Project By</span>
          <img class="ro-logo" src="/static/images/ro-logo.png" alt="ReactiveOps" />
        </a>
      </div>
@@ -38,13 +38,13 @@
  <div class="dashboard-content">
    <div class="charts">
      <div class="cluster-score chart-section">
-        <h3>Overall Score:</h3>
+        <h3>Overall Score</h3>
        <div style="width:510px; height: 400px; left: -100px; position: relative;">
          <canvas id="clusterScoreChart"></canvas>
        </div>
      </div>
      <div class="namespace-score chart-section">
-        <h3>Scores By Namespace:</h3>
+        <h3>Scores By Namespace</h3>
        <canvas id="namespaceScoreChart"></canvas>
      </div>
    </div>
@@ -96,7 +96,7 @@
  </div>

  <div class="footer">
-    &copy; 2019, <a href="https://reactiveops.com?source=fairwinds">ReactiveOps Inc.</a>
+    <a href="https://reactiveops.com?source=fairwinds"  target="_blank">&copy;2019 ReactiveOps Inc.</a>
  </div>

  <script src="/static/js/charts.js">
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,13 +1,13 @@
 body {
  margin: 0;
-  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  background: #eee;
+  font-family: 'Muli', 'Helvetica', 'Arial', sans-serif;
+  background: #f5f5f5;
 }

 .header {
  background-color: #fff;
-  padding: 10px 20px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  padding: 20px 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }

 .header .header-content {
@@ -23,12 +23,11 @@ body {
  width: 280px;
 }

-.header span.by-text {
-  font-family: 'Lobster', sans-serif;
+.header span.oss-text {
  color: #23103A;
-  vertical-align: top;
-  display: inline-block;
-  margin-top: 4px;
+  display: block;
+  font-size: 11px;
+  margin-bottom: 3px;
 }

 .header a {
@@ -36,7 +35,7 @@ body {
 }

 .header .ro-logo {
-  height: 64px;
+  height: 44px;
 }

 .dashboard-content {
@@ -45,18 +44,18 @@ body {
 }

 .charts {
-  height: 400px;
+  height: 405px;
 }

 .chart-section {
  float: left;
-  margin: 20px;
+  margin: 25px 20px;
  padding: 30px;
  width: 300px;
  height: 320px;
  color: #333;
  background-color: #fff;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
 }

@@ -69,8 +68,8 @@ body {
  margin: 0 0 15px;
  padding: 0 0 15px;
  font-weight: 300;
-  font-size: 30px;
-  border-bottom: 1px solid #eee;
+  font-size: 28px;
+  text-align: center;
 }

 #clusterScoreChart {
@@ -84,19 +83,19 @@ body {
 }

 .namespace {
-  margin: 20px;
+  margin: 25px 20px;
  padding: 10px 20px;
  color: #333;
  background-color: #fff;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
 }

 .namespace h3 {
  margin: 0;
  font-weight: 300;
-  font-size: 30px;
-  padding: 20px;
+  font-size: 28px;
+  padding: 15px 20px 20px;
 }

 .namespace h3 strong {
@@ -241,6 +240,11 @@ body {
  padding-bottom: 30px;
 }

-.footer, .footer a {
+.footer a {
  color: #999;
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
 }
--- a/public/images/circle-check.svg
+++ b/public/images/circle-check.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
-  <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm2 1.78l.72.72-3.22 3.22-1.72-1.72.72-.72 1 1 2.5-2.5z" />
-</svg>
--- a/public/images/circle-x.svg
+++ b/public/images/circle-x.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
-  <path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z" />
-</svg>
--- a/public/images/warning.svg
+++ b/public/images/warning.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
-  <path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" />
-</svg>
--- a/public/index.html
+++ b/public/index.html
@@ -1,195 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <title>Fairwinds</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
-  <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/main.css">
-
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
-</head>
-
-<body>
-  <div class="header">
-    <h1>
-      <img class="logo" src="images/logo.png" alt="Fairwinds" />
-      <span class="alt-logo">Fairwinds</span>
-    </h1>
-  </div>
-
-  <div class="dashboard-content">
-    <div class="charts">
-      <div class="cluster-score chart-section">
-        <h3>Overall Score:</h3>
-        <div style="width:510px; height: 400px; left: -100px; position: relative;">
-          <canvas id="clusterScoreChart"></canvas>
-        </div>
-      </div>
-      <div class="namespace-score chart-section">
-        <h3>Scores By Namespace:</h3>
-        <canvas id="namespaceScoreChart"></canvas>
-      </div>
-    </div>
-
-    <div class="namespace">
-      <h3>Namespace: <strong>kube-system</strong></h3>
-
-      <table class="namespace-content" cellspacing="0">
-        <tr>
-          <td>
-            <div class="name"><span class="caret-expander"></span>DaemonSet: <strong>datadog-agent</strong></div>
-          </td>
-          <td class="status-bar">
-            <div class="status">
-              <div class="failing">
-                <div class="warning" style="width: 124px;">
-                  <div class="passing" style="width: 82px;"></div>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="name"><span class="caret-expander expanded"></span>Deployment: <strong>tiller-deployment</strong></div>
-            <ul class="extra">
-              <li class="success"><span>&#9745;</span> Image Tag Specified</li>
-              <li class="success"><span>&#9745;</span> Resource Limits</li>
-              <li class="success"><span>&#9745;</span> Resource Requests</li>
-              <li class="warning"><span>&#9888;</span> Run As Non Root User</li>
-              <li class="failure"><span>&#9746;</span> Liveness Probe</li>
-              <li class="failure"><span>&#9746;</span> Readiness Probe</li>
-            </ul>
-          </td>
-          <td class="status-bar">
-            <div class="status">
-              <div class="failing">
-                <div class="warning" style="width: 150px;">
-                  <div class="passing" style="width: 106px;"></div>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
-
-  <script>
-    window.onload = function renderCharts() {
-      Chart.pluginService.register({
-        beforeDraw: function (chart) {
-          if (chart.config.options.elements.center) {
-            //Get ctx from string
-            var ctx = chart.chart.ctx;
-
-            //Get options from the center object in options
-            var centerConfig = chart.config.options.elements.center;
-            var fontStyle = centerConfig.fontStyle || 'Arial';
-            var txt = centerConfig.text;
-            var color = centerConfig.color || '#000';
-            var sidePadding = centerConfig.sidePadding || 20;
-            var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
-            //Start with a base font of 30px
-            ctx.font = "30px " + fontStyle;
-
-            //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
-            var stringWidth = ctx.measureText(txt).width;
-            var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
-
-            // Find out how much the font can grow in width.
-            var widthRatio = elementWidth / stringWidth;
-            var newFontSize = Math.floor(30 * widthRatio);
-            var elementHeight = (chart.innerRadius * 2);
-
-            // Pick a new font size so it will not be larger than the height of label.
-            var fontSizeToUse = Math.min(newFontSize, elementHeight);
-
-            //Set font settings to draw it correctly.
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
-            var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
-            ctx.font = "bold " + fontSizeToUse + "px " + fontStyle;
-            ctx.fillStyle = color;
-
-            //Draw text in center
-            ctx.fillText(txt, centerX, centerY);
-          }
-        }
-      });
-
-
-
-      var namespaceChart = new Chart("namespaceScoreChart", {
-        type: 'bar',
-        data: {
-          labels: ["kube-system", "development", "staging", "infra", "default"],
-          datasets: [{
-            label: 'Passing',
-            data: [118, 78, 65, 56, 43],
-            backgroundColor: '#230f39',
-          }, {
-            label: 'Warning',
-            data: [85, 54, 28, 23, 21],
-            backgroundColor: '#f26c21',
-          }, {
-            label: 'Failing',
-            data: [38, 24, 18, 15, 12],
-            backgroundColor: '#a11f4c',
-          }]
-        },
-        options: {
-          legend: {
-            display: false,
-          },
-          scales: {
-            xAxes: [{
-              stacked: true,
-            }],
-            yAxes: [{
-              stacked: true,
-              ticks: {
-                beginAtZero: true
-              }
-            }]
-          }
-        }
-      });
-    }
-
-    var clusterChart = new Chart("clusterScoreChart", {
-      type: 'doughnut',
-      data: {
-        labels: ["Passing", "Warning", "Failing"],
-        datasets: [{
-          data: [118, 34, 28],
-          backgroundColor: ['#230f39', '#f26c21', '#a11f4c'],
-        }]
-      },
-      options: {
-        // responsive: false,
-        cutoutPercentage: 75,
-        legend: {
-          display: false,
-        },
-        elements: {
-          center: {
-            text: '64%',
-            color: '#333', //Default black
-            fontStyle: 'Helvetica', //Default Arial
-            sidePadding: 30 //Default 20 (as a percentage)
-          }
-        }
-      }
-    });
-  </script>
-</body>
-
-</html>
--- a/public/js/charts.js
+++ b/public/js/charts.js
@@ -1,6 +1,6 @@
 if (!Object.values) {
-  Object.values = function(obj) {
-    return Object.keys(obj).map(function(key) {
+  Object.values = function (obj) {
+    return Object.keys(obj).map(function (key) {
      return obj[key];
    })
  }
@@ -14,17 +14,17 @@ $(function () {
      datasets: [{
        label: 'Passing',
        data: Object.values(fairwindsAuditData.NamespacedResults)
-            .map(function(r) { return r.Summary.Successes}),
+          .map(function (r) { return r.Summary.Successes }),
        backgroundColor: '#8BD2DC',
-      },{
+      }, {
        label: 'Warning',
        data: Object.values(fairwindsAuditData.NamespacedResults)
-            .map(function(r) { return r.Summary.Warnings}),
+          .map(function (r) { return r.Summary.Warnings }),
        backgroundColor: '#f26c21',
-      },{
+      }, {
        label: 'Failing',
        data: Object.values(fairwindsAuditData.NamespacedResults)
-            .map(function(r) { return r.Summary.Errors}),
+          .map(function (r) { return r.Summary.Errors }),
        backgroundColor: '#a11f4c',
      }]
    },
@@ -47,9 +47,9 @@ $(function () {
  });

  var score = fairwindsAuditData.ClusterSummary.Successes / (
-      fairwindsAuditData.ClusterSummary.Successes +
-      fairwindsAuditData.ClusterSummary.Warnings +
-      fairwindsAuditData.ClusterSummary.Errors);
+    fairwindsAuditData.ClusterSummary.Successes +
+    fairwindsAuditData.ClusterSummary.Warnings +
+    fairwindsAuditData.ClusterSummary.Errors);
  score = Math.round(score * 100);

  var clusterChart = new Chart("clusterScoreChart", {
@@ -62,7 +62,7 @@ $(function () {
          fairwindsAuditData.ClusterSummary.Warnings,
          fairwindsAuditData.ClusterSummary.Errors,
        ],
-        backgroundColor: ['#8BD2DC','#f26c21','#a11f4c'],
+        backgroundColor: ['#8BD2DC', '#f26c21', '#a11f4c'],
      }]
    },
    options: {
@@ -73,10 +73,10 @@ $(function () {
      },
      elements: {
        center: {
-          text: score + '%',
+          text: score,
          color: '#333', //Default black
-          fontStyle: 'Helvetica', //Default Arial
-          sidePadding: 30 //Default 20 (as a percentage)
+          fontStyle: 'Muli', //Default Arial
+          sidePadding: 40, //Default 20 (as a percentage)
        }
      }
    }