refactor templated JS

expand UI if query param is present golint fix Revert "expand UI if query param is present" This reverts commit b3ab5df.
FairwindsOps · Apr 4, 2019 · 6c46ddd · 6c46ddd
1 parent beb7791
commit 6c46ddd
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 84 deletions.
diff --git 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
@@ -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.AUDIT = {{ .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
@@ -0,0 +1,74 @@
+$(function () {
+  var namespaceChart = new Chart("namespaceScoreChart", {
+    type: 'bar',
+    data: {
+      labels: Object.keys(AUDIT.NamespacedResults),
+      datasets: [{
+        label: 'Passing',
+        data: Object.values(AUDIT.NamespacedResults).map(r => r.Summary.Successes),
+        backgroundColor: '#8BD2DC',
+      },{
+        label: 'Warning',
+        data: Object.values(AUDIT.NamespacedResults).map(r => r.Summary.Warnings),
+        backgroundColor: '#f26c21',
+      },{
+        label: 'Failing',
+        data: Object.values(AUDIT.NamespacedResults).map(r => r.Summary.Errors),
+        backgroundColor: '#a11f4c',
+      }]
+    },
+    options: {
+      legend: {
+        display: false,
+      },
+      scales: {
+        xAxes: [{
+          stacked: true,
+        }],
+        yAxes: [{
+          stacked: true,
+          ticks: {
+            beginAtZero: true
+          }
+        }]
+      }
+    }
+  });
+
+  var score = AUDIT.ClusterSummary.Successes / (
+      AUDIT.ClusterSummary.Successes +
+      AUDIT.ClusterSummary.Warnings +
+      AUDIT.ClusterSummary.Errors);
+  score = Math.round(score * 100);
+
+  var clusterChart = new Chart("clusterScoreChart", {
+    type: 'doughnut',
+    data: {
+      labels: ["Passing", "Warning", "Error"],
+      datasets: [{
+        data: [
+          AUDIT.ClusterSummary.Successes,
+          AUDIT.ClusterSummary.Warnings,
+          AUDIT.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)
+        }
+      }
+    }
+  });
+});
+