some cleanup, js updates to allow toggling detail visibility

FairwindsOps · Jan 29, 2019 · 5c5eefa · 5c5eefa
1 parent da1303d
commit 5c5eefa
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 74 deletions.
diff --git a/pkg/dashboard/templates/charts.gohtml b/pkg/dashboard/templates/charts.gohtml
@@ -13,6 +13,9 @@
   <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>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cash/3.0.0-beta.3/cash.min.js"></script>
+  <script type="text/javascript" src="/static/js/main.js"></script>
+
 </head>
 
 <body>
@@ -41,8 +44,8 @@
         <table class="namespace-content" cellspacing="0">
           {{ range $results.Results }}
             <tr>
-              <td>
-                <div class="name"><span class="caret-expander expanded"></span>{{ .Type }}: <strong>{{ .Name }}</strong></div>
+              <td class="resource-info">
+                <div class="name"><span class="caret-expander"></span>{{ .Type }}: <strong>{{ .Name }}</strong></div>
                 <ul class="extra">
                   {{ range .Messages}}
                     <li class="{{ .Type }}"><span>&#{{ .HTMLSpecialCharCode }};</span> {{ .Message }}</li>
@@ -52,8 +55,8 @@
               <td class="status-bar">
                 <div class="status">
                   <div class="failing">
-                    <div class="warning" style="width: {{ $results.Summary.WarningWidth 200 }}px;">
-                      <div class="passing" style="width: {{ $results.Summary.SuccessWidth 200 }}px;"></div>
+                    <div class="warning" style="width: {{ .Summary.WarningWidth 200 }}px;">
+                      <div class="passing" style="width: {{ .Summary.SuccessWidth 200 }}px;"></div>
                     </div>
                   </div>
                 </div>
@@ -66,49 +69,7 @@
   </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);
-          }
-        }
-      });
-
+    $(function () {
       var namespaceChart = new Chart("namespaceScoreChart", {
         type: 'bar',
         data: {
@@ -160,32 +121,32 @@
           }
         }
       });
-    }
 
-    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,
+      var clusterChart = new Chart("clusterScoreChart", {
+        type: 'doughnut',
+        data: {
+          labels: ["Passing", "Warning", "Failing"],
+          datasets: [{
+            data: [{{ .ClusterSummary.Successes }}, {{ .ClusterSummary.Warnings }}, {{ .ClusterSummary.Failures }}],
+            backgroundColor: ['#006469','#AE7500','#AE0400'],
+          }]
         },
-        elements: {
-          center: {
-            text: '{{ .ClusterSummary.Score }}%',
-            color: '#333', //Default black
-            fontStyle: 'Helvetica', //Default Arial
-            sidePadding: 30 //Default 20 (as a percentage)
+        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>

diff --git a/public/css/charts.css b/public/css/charts.css
@@ -108,28 +108,37 @@ body {
   border-top: 1px solid #eee;
 }
 
-.namespace-content .caret-expander {
+.namespace-content .resource-info .name {
+  cursor: pointer;
+}
+
+.namespace-content .resource-info .caret-expander {
   display: inline-block;
   width: 15px;
   height: 15px;
   margin-right: 10px;
   background-image: url('../images/caret-right.svg');
-  background-size: 15px auto;
+  background-size: 13px auto;
   background-repeat: no-repeat;
   background-position: 2px center;
 }
 
-.namespace-content .caret-expander.expanded {
+.namespace-content .resource-info.expanded .caret-expander {
   background-image: url('../images/caret-bottom.svg');
-  background-position: center center;
+  background-position: center 2px;
 }
 
-.namespace-content .extra {
+.namespace-content .resource-info .extra {
   list-style-type: none;
   font-size: 14px;
   line-height: 19px;
   margin: 10px 30px;
   padding: 0;
+  display: none;
+}
+
+.namespace-content .resource-info.expanded .extra {
+  display: block;
 }
 
 .namespace-content .extra span {

diff --git a/public/js/main.js b/public/js/main.js
@@ -0,0 +1,48 @@
+$(function () {
+  // Chart.js plugin for rendering text inside of donut chart
+  // Credit: https://stackoverflow.com/a/43026361/8870697
+  Chart.pluginService.register({
+    beforeDraw: function (chart) {
+      if (chart.config.options.elements.center) {
+        var ctx = chart.chart.ctx;
+        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);
+      }
+    }
+  });
+
+  $('.namespace .resource-info .name').on('click', function(e) {
+    console.log('clicked', arguments)
+    console.log('parent', $(e.srcElement).parent('.resource-info'));
+    $(e.srcElement).parents('.resource-info').toggleClass('expanded');
+  });
+});