new dashboard layout with charts

FairwindsOps · Jan 28, 2019 · cc37116 · cc37116
1 parent 700b645
commit cc37116
Show file tree

Hide file tree

Showing 6 changed files with 569 additions and 7 deletions.
diff --git a/main.go b/main.go
@@ -40,7 +40,7 @@ var FairwindsName = "fairwinds"
 var log = logf.Log.WithName(FairwindsName)
 
 func main() {
-	// dashboard := flag.Bool("dashboard", false, "Runs the webserver for Fairwinds dashboard.")
+	dashboard := flag.Bool("dashboard", false, "Runs the webserver for Fairwinds dashboard.")
 	webhook := flag.Bool("webhook", false, "Runs the webhook webserver.")
 
 	var disableWebhookConfigInstaller bool
@@ -59,9 +59,9 @@ func main() {
 		startWebhookServer(c, disableWebhookConfigInstaller)
 	}
 
-	// if *dashboard {
-	startDashboardServer(c)
-	// }
+	if *dashboard {
+		startDashboardServer(c)
+	}
 }
 
 func startDashboardServer(c conf.Configuration) {

diff --git a/pkg/dashboard/dashboard.go b/pkg/dashboard/dashboard.go
@@ -17,7 +17,7 @@ type DashboardData struct {
 	NamespacedResults []validator.NamespacedResult
 }
 
-var tmpl = template.Must(template.ParseFiles("pkg/dashboard/templates/dashboard.gohtml"))
+var tmpl = template.Must(template.ParseFiles("pkg/dashboard/templates/charts.gohtml"))
 
 func Render(w http.ResponseWriter, r *http.Request, c conf.Configuration) {
 	dashboardData := getDashboardData()

diff --git a/pkg/dashboard/templates/charts.gohtml b/pkg/dashboard/templates/charts.gohtml
@@ -0,0 +1,177 @@
+<!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="/static/css/normalize.css">
+  <link rel="stylesheet" href="/static/css/charts.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>Fairwinds</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>
+
+    {{ range .NamespacedResults }}
+      <div class="namespace">
+        <h3>Namespace: <strong>{{ .Namespace }}</strong></h3>
+
+        <table class="namespace-content" cellspacing="0">
+          {{ range .Results }}
+            <tr>
+              <td>
+                <div class="name"><span class="caret-expander expanded"></span>{{ .Type }}: <strong>{{ .Name }}</strong></div>
+                <ul class="extra">
+                  {{ range .Messages}}
+                    <li class="{{ .Type }}"><span>&#{{ .HTMLSpecialCharCode }};</span> {{ .Message }}</li>
+                  {{ end }}
+                </ul>
+              </td>
+              <td class="status-bar">
+                <div class="status">
+                  <div class="failing">
+                    <div class="warning" style="width: {{ .Summary.WarningWidth 200 }}px;">
+                      <div class="passing" style="width: {{ .Summary.SuccessWidth 200 }}px;"></div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          {{ end }}
+        </table>
+      </div>
+    {{ end }}
+  </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: '#006469',
+          },{
+            label: 'Warning',
+            data: [85, 54, 28, 23, 21],
+            backgroundColor: '#AE7500',
+          },{
+            label: 'Failing',
+            data: [38, 24, 18, 15, 12],
+            backgroundColor: '#AE0400',
+          }]
+        },
+        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: [{{ .ClusterSummary.Successes }}, {{ .ClusterSummary.Warnings }}, {{ .ClusterSummary.Failures }}],
+          backgroundColor: ['#006469','#AE7500','#AE0400'],
+        }]
+      },
+      options: {
+        // responsive: false,
+        cutoutPercentage: 75,
+        legend: {
+          display: false,
+        },
+        elements: {
+          center: {
+            text: '{{ .ClusterSummary.Score }}%',
+            color: '#333', //Default black
+            fontStyle: 'Helvetica', //Default Arial
+            sidePadding: 30 //Default 20 (as a percentage)
+          }
+        }
+      }
+    });
+  </script>
+</body>
+
+</html>