From dab34b90338766eb74188e1507f4afe226557d02 Mon Sep 17 00:00:00 2001
From: Bobby Brennan <bobby.brennan@gmail.com>
Date: Thu, 4 Apr 2019 13:04:43 +0000
Subject: [PATCH] refactor templated JS

---
 pkg/dashboard/dashboard.go               | 19 ++++-
 pkg/dashboard/templates/dashboard.gohtml | 88 ++----------------------
 public/js/charts.js                      | 85 +++++++++++++++++++++++
 3 files changed, 108 insertions(+), 84 deletions(-)
 create mode 100644 public/js/charts.js

diff --git a/pkg/dashboard/dashboard.go b/pkg/dashboard/dashboard.go
index 0bcf82299..cf7561ed0 100644
--- a/pkg/dashboard/dashboard.go
+++ b/pkg/dashboard/dashboard.go
@@ -18,13 +18,28 @@ const (
 	TemplateFile = "pkg/dashboard/templates/" + TemplateName
 )
 
+// TemplateData is passed to the dashboard HTML template
+type TemplateData struct {
+	AuditData validator.AuditData
+	JSON template.JS
+}
+
 // MainHandler gets template data and renders the dashboard with it.
 func MainHandler(w http.ResponseWriter, r *http.Request, c conf.Configuration, kubeAPI *kube.API) {
-	templateData, err := validator.RunAudit(c, kubeAPI)
+	auditData, err := validator.RunAudit(c, kubeAPI)
 	if err != nil {
-		http.Error(w, "Error Fetching Deployments", 500)
+		http.Error(w, "Error running audit", 500)
 		return
 	}
+	jsonData, err := json.Marshal(auditData)
+	if err != nil {
+		http.Error(w, "Error serializing audit data", 500)
+		return
+	}
+	templateData := TemplateData{
+		AuditData: auditData,
+		JSON: template.JS(jsonData),
+	}
 	tmpl, err := template.New(TemplateName).Funcs(template.FuncMap{
 		"getWarningWidth": func(rs validator.ResultSummary, fullWidth int) uint {
 			return uint(float64(rs.Successes+rs.Warnings) / float64(rs.Successes+rs.Warnings+rs.Errors) * float64(fullWidth))
diff --git a/pkg/dashboard/templates/dashboard.gohtml b/pkg/dashboard/templates/dashboard.gohtml
index 9f88c80ee..2d2635b3d 100644
--- a/pkg/dashboard/templates/dashboard.gohtml
+++ b/pkg/dashboard/templates/dashboard.gohtml
@@ -15,6 +15,9 @@
 
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cash/3.0.0-beta.3/cash.min.js"></script>
+  <script>
+    window.fairwindsAuditData = {{ .JSON }};
+  </script>
   <script type="text/javascript" src="/static/js/main.js"></script>
 
 </head>
@@ -46,7 +49,7 @@
       </div>
     </div>
 
-    {{ range $namespace, $results := .NamespacedResults }}
+    {{ range $namespace, $results := .AuditData.NamespacedResults }}
       <div class="namespace">
         <h3>Namespace: <strong>{{ $namespace }}</strong></h3>
         <table class="namespace-content" cellspacing="0">
@@ -89,93 +92,14 @@
           {{ end }} {{/* end range .Results */}}
         </table>
       </div>
-    {{ end }} {{/* end range .NamespacedResults */}}
+    {{ end }} {{/* end range .AuditData.NamespacedResults */}}
   </div>
 
   <div class="footer">
     &copy; 2019, <a href="https://reactiveops.com?source=fairwinds">ReactiveOps Inc.</a>
   </div>
 
-  <script>
-    $(function () {
-      var namespaceChart = new Chart("namespaceScoreChart", {
-        type: 'bar',
-        data: {
-          labels: [
-            {{ range $namespace, $results := .NamespacedResults }}
-              "{{ $namespace }}",
-            {{ end }}
-          ],
-          datasets: [{
-            label: 'Passing',
-            data: [
-              {{ range $namespace, $results := .NamespacedResults }}
-                "{{ $results.Summary.Successes }}",
-              {{ end }}
-            ],
-            backgroundColor: '#8BD2DC',
-          },{
-            label: 'Warning',
-            data: [
-              {{ range $namespace, $results := .NamespacedResults }}
-                "{{ $results.Summary.Warnings }}",
-              {{ end }}
-            ],
-            backgroundColor: '#f26c21',
-          },{
-            label: 'Failing',
-            data: [
-              {{ range $namespace, $results := .NamespacedResults }}
-                "{{ $results.Summary.Errors }}",
-              {{ end }}
-            ],
-            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: [{{ .ClusterSummary.Successes }}, {{ .ClusterSummary.Warnings }}, {{ .ClusterSummary.Errors }}],
-            backgroundColor: ['#8BD2DC','#f26c21','#a11f4c'],
-          }]
-        },
-        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 src="/static/js/charts.js">
   </script>
 </body>
 
diff --git a/public/js/charts.js b/public/js/charts.js
new file mode 100644
index 000000000..b616174b6
--- /dev/null
+++ b/public/js/charts.js
@@ -0,0 +1,85 @@
+if (!Object.values) {
+  Object.values = function(obj) {
+    return Object.keys(obj).map(function(key) {
+      return obj[key];
+    })
+  }
+}
+
+$(function () {
+  var namespaceChart = new Chart("namespaceScoreChart", {
+    type: 'bar',
+    data: {
+      labels: Object.keys(fairwindsAuditData.NamespacedResults),
+      datasets: [{
+        label: 'Passing',
+        data: Object.values(fairwindsAuditData.NamespacedResults)
+            .map(function(r) { return r.Summary.Successes}),
+        backgroundColor: '#8BD2DC',
+      },{
+        label: 'Warning',
+        data: Object.values(fairwindsAuditData.NamespacedResults)
+            .map(function(r) { return r.Summary.Warnings}),
+        backgroundColor: '#f26c21',
+      },{
+        label: 'Failing',
+        data: Object.values(fairwindsAuditData.NamespacedResults)
+            .map(function(r) { return r.Summary.Errors}),
+        backgroundColor: '#a11f4c',
+      }]
+    },
+    options: {
+      legend: {
+        display: false,
+      },
+      scales: {
+        xAxes: [{
+          stacked: true,
+        }],
+        yAxes: [{
+          stacked: true,
+          ticks: {
+            beginAtZero: true
+          }
+        }]
+      }
+    }
+  });
+
+  var score = fairwindsAuditData.ClusterSummary.Successes / (
+      fairwindsAuditData.ClusterSummary.Successes +
+      fairwindsAuditData.ClusterSummary.Warnings +
+      fairwindsAuditData.ClusterSummary.Errors);
+  score = Math.round(score * 100);
+
+  var clusterChart = new Chart("clusterScoreChart", {
+    type: 'doughnut',
+    data: {
+      labels: ["Passing", "Warning", "Error"],
+      datasets: [{
+        data: [
+          fairwindsAuditData.ClusterSummary.Successes,
+          fairwindsAuditData.ClusterSummary.Warnings,
+          fairwindsAuditData.ClusterSummary.Errors,
+        ],
+        backgroundColor: ['#8BD2DC','#f26c21','#a11f4c'],
+      }]
+    },
+    options: {
+      // responsive: false,
+      cutoutPercentage: 75,
+      legend: {
+        display: false,
+      },
+      elements: {
+        center: {
+          text: score + '%',
+          color: '#333', //Default black
+          fontStyle: 'Helvetica', //Default Arial
+          sidePadding: 30 //Default 20 (as a percentage)
+        }
+      }
+    }
+  });
+});
+