Merge lp:~canonical-platform-qa/qakit/initial-dashboard into lp:qakit

[Sergio Cazzolato]

Initial Dashboard including appstartup section.

[Sergio Cazzolato (sergio-j-cazzolato)]

To test this branch it is required to create a the dir qakit/dashboard/data and copy some source json files inside.

To validate the appstartup part, it is required to copy all the appstartup graphs to the data dir. Appstartup json file can be generated with the branch lp:~canonical-platform-qa/qakit/app_startup_poc

[lp:~canonical-platform-qa/qakit/initial-dashboard]

52. By Sergio Cazzolato on 2016-02-11

Adding missing files

53. By Sergio Cazzolato on 2016-02-12

Adding new info to the appstartup graph

54. By Sergio Cazzolato on 2016-02-12

Merge from trunk

Unmerged revisions

=== modified file 'qakit/dashboard/css/kpi.css'
--- qakit/dashboard/css/kpi.css	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/css/kpi.css	2016-02-12 17:25:40 +0000
@@ -26,3 +26,7 @@
     margin-right: 5px;
     list-style-type: none !important;
 }
+
+.app-startup-elem {
+    text-align: center;
+}

=== modified file 'qakit/dashboard/css/sidebar-collapse.css'
--- qakit/dashboard/css/sidebar-collapse.css	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/css/sidebar-collapse.css	2016-02-12 17:25:40 +0000
@@ -89,7 +89,7 @@
 }
 
 .sidebar-links div.selected ul.sub-links {
-    max-height: 150px;
+    max-height: 500px;
     padding: 12px 0 12px 30px;
 }
 

=== modified file 'qakit/dashboard/index.html'
--- qakit/dashboard/index.html	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/index.html	2016-02-12 17:25:40 +0000
@@ -19,12 +19,15 @@
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://cdn.datatables.net/s/bs/dt-1.10.10,b-1.1.0,fh-3.1.0,r-2.0.0/datatables.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
-    <script src="js/kpi.js"></script>
-    <script src="js/test-library.js"></script>
-    <script src="js/test-execution.js"></script>
-    <script src="js/landings.js"></script>
-    <script src="js/test-plans.js"></script>
-    <script src="js/landing-failures.js"></script>
+    <script src="js/main.js"></script>
+	<script src="js/kpi.js"></script>
+	<script src="js/landings.js"></script>
+	<script src="js/landing-failures.js"></script>
+	<script src="js/test-execution.js"></script>
+	<script src="js/test-library.js"></script>
+	<script src="js/test-plans.js"></script>
+	<script src="js/appstartup.js"></script>
+
 <style type="text/css">
     .bs-example{
         margin: 20px;
@@ -35,33 +38,44 @@
   <aside class="sidebar-left-collapse">
     <a href="#" class="company-logo">UES QA</a>
     <div class="sidebar-links">
-      <div class="link-orange selected">
+      <div id="dashboard-link" class="link-orange selected">
         <a href="#">
           <i class="fa fa-tachometer"></i>Dashboard
         </a>
         <ul class="sub-links">
-          <li><a href="#"></a></li>
+          <li><a></a></li>
         </ul>
       </div>
-      <div id="test-execution" class="link-blue">
-        <a href="#">
+      <div id="test-metrics-link" class="link-blue">
+        <a>
           <i class="fa fa-bar-chart"></i>Metrics
         </a>
         <ul class="sub-links">
-          <li id="test-library"><a href="#test-library">Test Library</a></li>
-          <li id="test-execution"><a href="#test-execution">Test Execution</a></li>
-          <li id="landings"><a href="#landings">Landings</a></li>
-          <li id="landing-failures"><a href="#landing-failures">Defects</a></li>
+          <li id="test-library-link"><a href="#test-library-section">Test Library</a></li>
+          <li id="test-execution-link"><a href="#test-execution-section">Test Execution</a></li>
+          <li id="landings-link"><a href="#landings-section">Landings</a></li>
+          <li id="landing-failures-link"><a href="#landing-failures-section">Defects</a></li>
         </ul>
       </div>
       <div class="link-red">
-        <a href="#test-plans">
+        <a id="test-plans-link" href="#test-plans-section">
           <i class="fa fa-list-ol"></i>Test Plans
         </a>
         <ul class="sub-links">
         </ul>
       </div>
-      <div class="link-yellow">
+      <div id="tests-link" class="link-yellow">
+        <a>
+          <i class="fa fa-keyboard-o"></i>Tests
+        </a>
+        <ul class="sub-links">
+          <li id="applications-manual-link"><a href="#applications-manual-section">Manual by application</a></li>
+          <li id="applications-automated-link"><a href="#applications-automated-section">Automated by application</a></li>
+          <li id="domains-manual-link"><a href="#domains-manual-section">Manual by domain</a></li>
+          <li id="domains-automated-link"><a href="#domains-automated-section">Automated by domain</a></li>
+        </ul>
+      </div>
+      <div id="projects-link" class="link-yellow">
         <a href="#">
           <i class="fa fa-keyboard-o"></i>Projects
         </a>
@@ -72,7 +86,7 @@
           <li><a href="#">Link 4</a></li>
         </ul>
       </div>
-      <div class="link-green">
+      <div id="links-link" class="link-green">
         <a href="#">
           <i class="fa fa-book"></i>Links
         </a>
@@ -83,9 +97,16 @@
           <li><a href="#">Link 4</a></li>
         </ul>
       </div>
+	  <div class="link-blue" id="app-startup-link">
+        <a href="#app-startup-section">
+          <i class="fa fa-tachometer"></i>App Startup
+        </a>
+        <ul id="app-startup-sublinks" class="sub-links">
+        </ul>
+      </div>
     </div>
   </aside>
-  <div class="main-content">
+  <div id="main-content" class="main-content">
 
     <div id="test-plan-modal" class="modal fade" role="dialog">
       <div class="modal-dialog modal-lg">
@@ -147,8 +168,7 @@
 	</div>
       </div>
     </script>
-
-    <div id="test-library" class="content-section">
+    <div id="test-library-section" class="content-section">
       <div class="panel panel-default">
 	<div class="panel-heading"><h1>Test Library</h1></div>
 	<div class="panel-body">
@@ -174,7 +194,7 @@
       </div>
     </div> <!-- test-library-section -->
 
-    <div id="test-execution" class="content-section">
+    <div id="test-execution-section" class="content-section">
       <div class="panel panel-default">
 	<div class="panel-heading"><h1>Test Execution</h1></div>
 	<div class="panel-body">
@@ -200,7 +220,7 @@
       </div>
     </div> <!-- test-execution-section -->
 
-    <div id="landings" class="content-section">
+    <div id="landings-section" class="content-section">
       <div class="panel panel-default">
 	<div class="panel-heading"><h1>Landings</h1></div>
 	<div class="panel-body">
@@ -215,14 +235,14 @@
 	    <div id="siloPassRatePerWeekChartCanvasLegend" class="line-legend"></div>
 	    <canvas id="siloPassRatePerWeekChartCanvas" height="600" width="800"></canvas>
 	  </div>
-	  <div class="col-md-12">
+	  <div class="col-md-12">a
 	    <table id="landingsTable" class="table table-striped table-bordered"></table>
 	  </div>
 	</div>
       </div>
     </div> <!-- landings-section -->
 
-    <div id="landing-failures" class="content-section">
+    <div id="landing-failures-section" class="content-section">
       <div class="panel panel-default">
 	<div class="panel-heading"><h1>Landing Failures</h1></div>
 	<div class="panel-body">
@@ -234,7 +254,7 @@
       </div>
     </div> <!-- landing-failures-section -->
 
-    <div id="test-plans" class="content-section">
+    <div id="test-plans-section" class="content-section">
       <div class="panel panel-default">
 	<div class="panel-heading"><h1>Test Plans</h1></div>
 	<div class="panel-body">
@@ -242,28 +262,60 @@
 	</div>
       </div>
     </div>
-      
-    <div id="applications" class="content-section">
-      <div class="panel panel-default">
-	<div class="panel-heading"><h1>Tests by Application</h1></div>
+
+	<div id="app-startup-section" class="content-section">
+      <div class="panel panel-default">
+	     <div class="panel-heading"><h1>App Startup Report</h1></div>
+	     <div class="panel-body">
+			 <div class="well well-sm">
+			    <h3 id="app-startup-device"></h3>
+			    <h3 id="app-startup-channel"></h3>
+			    <h3 id="app-startup-build-number"></h3>
+				<p><font color="blue">Cold</font> runs are test executions with no cache for the current app.</p>
+                <p><font color="red">Hot</font> runs are test executions with cache for the current app stored during previous runs.</p>
+			 </div>
+			 <table id="AppStartUpTable" class="table table-striped table-bordered"></table>
+	     </div>
+      </div>
+    </div> <!-- app-startup-section -->
+
+    <div id="applications-manual-section" class="content-section">
+      <div class="panel panel-default">
+	<div class="panel-heading"><h1>Tests by Application Manual</h1></div>
 	<div class="panel-body">
-	  <div class="col-md-6">
+	  <div id="tests-by-application-manual" class="col-md-6">
 	    <canvas id="applicationsManualChartCanvas" height="400" width="400"></canvas>
 	  </div>
-	  <div class="col-md-6">
+	</div>
+      </div>
+    </div> <!-- applications-manual-section -->
+
+    <div id="applications-automated-section" class="content-section">
+      <div class="panel panel-default">
+	<div class="panel-heading"><h1>Tests by Application Automated</h1></div>
+	<div class="panel-body">
+	  <div id="tests-by-application-automated" class="col-md-6">
 	    <canvas id="applicationsAutomatedChartCanvas" height="400" width="400"></canvas>
 	  </div>
 	</div>
       </div>
-    </div> <!-- applications-section -->
+    </div> <!-- applications-automated-section -->
 
-    <div id="domains" class="content-section">
+    <div id="domains-manual-section" class="content-section">
       <div class="panel panel-default">
-	<div class="panel-heading"><h1>Tests by Domain</h1></div>
+	<div class="panel-heading"><h1>Tests by Domain Manual</h1></div>
 	<div class="panel-body">
 	  <div class="col-md-6">
 	    <canvas id="domainsManualChartCanvas" height="400" width="400"></canvas>
 	  </div>
+	</div>
+      </div>
+    </div> <!-- domains-section -->
+
+    <div id="domains-automated-section" class="content-section">
+      <div class="panel panel-default">
+	<div class="panel-heading"><h1>Tests by Domain Automated</h1></div>
+	<div class="panel-body">
 	  <div class="col-md-6">
 	    <canvas id="domainsAutomatedChartCanvas" height="400" width="400"></canvas>
 	  </div>
@@ -283,35 +335,15 @@
         });
     </script>
     <script>
+
 // show only the content-section of id matching hash
 $(window).on("hashchange", function (e) {
-    $(".content-section").hide();
-    // TODO: experimenting with loading-on-command
-    // var divToShow = $("div" + window.location.hash);
-    // divToShow.trigger("custom");
-    $("div" + window.location.hash).show();
+	moveToSection();
 
-    // special treatment for test plans because of its modal
-    if (window.location.hash.match('#test-plan.*') != null) {
-        $("div#test-plans").show();
-        if (window.location.hash.match('#test-plan-modal.*') != null) {
-            var testPlanId = window.location.hash.split('-').reverse()[0];
-            drawTestPlanModal(testPlanData, testPlanId);
-            $("#test-plan-modal").modal('show');
-        }
-    }
-    // for whatever reason the modal isn't hiding properly
-    $("#test-plan-modal").hide();
 });
 
 window.onload = function() {
-    drawTestLibrarySection();
-    drawTestExecutionSection();
-    drawLandingsSection();
-    drawLandingFailuresSection();
-    drawTestPlansSection();
-    drawApplicationsSection();
-    drawDomainsSection();
+    drawSections(true);
 }
     </script>
 </body>

=== added file 'qakit/dashboard/js/appstartup.js'
--- qakit/dashboard/js/appstartup.js	1970-01-01 00:00:00 +0000
+++ qakit/dashboard/js/appstartup.js	2016-02-12 17:25:40 +0000
@@ -0,0 +1,31 @@
+
+
+function drawAppStartUpSection(firstDraw) {
+    $.getJSON("./data/app_startup_report.json", function(data) {
+        if (firstDraw){
+            process(data);
+        }
+    }).fail(function(data, status) {
+        console.log("Hiding Appstartup section");
+        $("#app-startup-section").hide();
+        $("#app-startup-link").hide();
+    });
+}
+
+function process(data) {
+    $('#app-startup-channel').text('Channel: ' + data.channel);
+    $('#app-startup-device').text('Device: ' + data.device);
+    $('#app-startup-build-number').text('Build Number: ' + data.build_number);
+
+    charts = data.charts
+    for (var chart in charts) {
+        title = charts[chart].title
+        path = "./data/" + basename(charts[chart].path)
+        id = title.toLowerCase() + "-app-startup-section"
+        section = '<div class="app-startup-elem" id="' + id + '" parent-section="app-startup-section"><h2>' + title + '</h2><img src="' + path + '"/></div>'
+        $( "#AppStartUpTable" ).append(section);
+
+        link = '<li><a href="#' + id + '">' + title + '</a></li>'
+        $( "#app-startup-sublinks" ).append(link);
+    }
+}

=== modified file 'qakit/dashboard/js/kpi.js'
--- qakit/dashboard/js/kpi.js	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/js/kpi.js	2016-02-12 17:25:40 +0000
@@ -42,19 +42,35 @@
 }
 
 function drawApplicationsSection() {
-    $.getJSON("./applications-manual.json", function(data) {
+    $.getJSON("./data/applications-manual.json", function(data) {
         pieChart(data, "applicationsManualChartCanvas");
+    }).fail(function(data, status) {
+        console.log("Hiding Manual Tests by Application section");
+        $("#applications-manual-link").hide();
+        $("#applications-manual-section").hide();
     });
-    $.getJSON("./applications-automated.json", function(data) {
+    $.getJSON("./data/applications-automated.json", function(data) {
         pieChart(data, "applicationsAutomatedChartCanvas");
+    }).fail(function(data, status) {
+        console.log("Hiding Automated Tests by Application section");
+        $("#applications-automated-link").hide();
+        $("#applications-automated-section").hide();
     });
 }
 
 function drawDomainsSection() {
-    $.getJSON("./domains-manual.json", function(data) {
+    $.getJSON("./data/domains-manual.json", function(data) {
         pieChart(data, "domainsManualChartCanvas");
+    }).fail(function(data, status) {
+        console.log("Hiding Manual Tests by Domain section");
+        $("#domains-manual-link").hide();
+        $("#domains-manual-section").hide();
     });
-    $.getJSON("./domains-automated.json", function(data) {
+    $.getJSON("./data/domains-automated.json", function(data) {
         pieChart(data, "domainsAutomatedChartCanvas");
+    }).fail(function(data, status) {
+        console.log("Hiding Automated Tests by Domain section");
+        $("#domains-automated-link").hide();
+        $("#domains-automated-section").hide();
     });
 }

=== modified file 'qakit/dashboard/js/landing-failures.js'
--- qakit/dashboard/js/landing-failures.js	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/js/landing-failures.js	2016-02-12 17:25:40 +0000
@@ -15,11 +15,16 @@
         ],
 	searching: true,
 	order: [[0, 'dsc']],
+	bDestroy: true,
     });
 }
 
 function drawLandingFailuresSection() {
-    $.getJSON("./landing-failures.json", function(data) {
-        landingFailuresTable(data, "#landingFailuresTable");
+    $.getJSON("./data/landing-failures.json", function(data) {
+         landingFailuresTable(data, "#landingFailuresTable");
+    }).fail(function(data, status) {
+        console.log("Hiding Landing failures section");
+        $("#landing-failures-section").hide();
+        $("#landing-failures-link").hide();
     });
 }

=== modified file 'qakit/dashboard/js/landings.js'
--- qakit/dashboard/js/landings.js	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/js/landings.js	2016-02-12 17:25:40 +0000
@@ -95,14 +95,19 @@
         ],
     searching: false,
     order: [[0, 'dsc']],
+    bDestroy: true,
     });
 }
 
 function drawLandingsSection() {
-    $.getJSON("./landings.json", function(data) {
-	data = data.reverse()
+    $.getJSON("./data/landings.json", function(data) {
+	    data = data.reverse()
         siloLandingsPerWeekChart(data, "siloLandingsPerWeekChartCanvas");
         siloPassRatePerWeekChart(data, "siloPassRatePerWeekChartCanvas");
         landingsTable(data, "#landingsTable");
+    }).fail(function(data, status) {
+        console.log("Hiding Landings section");
+        $("#landings-section").hide();
+        $("#landings-link").hide();
     });
 }

=== added file 'qakit/dashboard/js/main.js'
--- qakit/dashboard/js/main.js	1970-01-01 00:00:00 +0000
+++ qakit/dashboard/js/main.js	2016-02-12 17:25:40 +0000
@@ -0,0 +1,52 @@
+
+
+function drawSections(firstDraw) {
+    drawTestLibrarySection();
+    drawTestExecutionSection();
+    drawLandingsSection();
+    drawLandingFailuresSection();
+    drawTestPlansSection();
+    drawApplicationsSection();
+    drawDomainsSection();
+    drawAppStartUpSection(firstDraw);
+
+    hideUnusedLinks();
+}
+
+function hideUnusedLinks() {
+     $("#links-link").hide();
+     $("#projects-link").hide();
+}
+
+function basename(path) {
+   return path.split('/').reverse()[0];
+}
+
+function moveToSection() {
+    $(".content-section").hide();
+    $("div" + window.location.hash).show();
+
+    // special treatment for test plans because of its modal
+    if (window.location.hash.match('#test-plan.*') != null) {
+        $("div#test-plans").show();
+        if (window.location.hash.match('#test-plan-modal.*') != null) {
+            var testPlanId = window.location.hash.split('-').reverse()[0];
+            drawTestPlanModal(testPlanData, testPlanId);
+            $("#test-plan-modal").modal('show');
+        }
+    }
+
+    // for whatever reason the modal isn't hiding properly
+    $("#test-plan-modal").hide();
+
+    // Show subsection parent when it is required
+    newdiv = $(window.location.hash);
+    if(newdiv.attr("parent-section")){
+    	parentId = newdiv.attr('parent-section');
+    	$("body").find('#' + parentId).show();
+    }
+
+    if (!window.location.hash){
+        drawSections(false);
+    }
+}
\ No newline at end of file

=== modified file 'qakit/dashboard/js/test-execution.js'
--- qakit/dashboard/js/test-execution.js	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/js/test-execution.js	2016-02-12 17:25:40 +0000
@@ -173,12 +173,13 @@
         ],
         searching: false,
         order: [[0, 'dsc']],
+        bDestroy: true,
     });
 }
 
 function drawTestExecutionSection() {
-    $.getJSON("./test-execution.json", function(data) {
-	data = data.reverse()
+    $.getJSON("./data/test-execution.json", function(data) {
+        data = data.reverse()
         manualTestsExecutedPerWeekChart(
             data, "manualTestsExecutedPerWeekChartCanvas");
         automatedTestsExecutedPerWeekChartCanvas(
@@ -186,5 +187,9 @@
         manualVsAutomatedChart(
             data, "manualVsAutomatedChartCanvas");
         testExecutionTable(data, '#testExecutionTable');
+    }).fail(function(data, status) {
+        console.log("Hiding Test Execution section");
+        $("#test-execution-section").hide();
+        $("#test-execution-link").hide();
     });
 }

=== modified file 'qakit/dashboard/js/test-library.js'
--- qakit/dashboard/js/test-library.js	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/js/test-library.js	2016-02-12 17:25:40 +0000
@@ -125,15 +125,20 @@
         ],
         searching: false,
         order: [[0, 'dsc']],
+        bDestroy: true,
     });
 }
 
 function drawTestLibrarySection() {
-    $.getJSON("./test-library.json", function(data) {
-	data = data.reverse()
+    $.getJSON("./data/test-library.json", function(data) {
+	    data = data.reverse()
         testsInLibraryChart(data, "testsInLibraryChartCanvas");
         automatedVsManualChart(data, "automatedVsManualChartCanvas");
         percentageAutomatedChart(data, "percentageAutomatedChartCanvas");
         testLibraryTable(data, "#testLibraryTable");
+    }).fail(function(data, status) {
+        console.log("Hiding Test Library section");
+        $("#test-library-section").hide();
+        $("#test-library-link").hide();
     });
 }

=== modified file 'qakit/dashboard/js/test-plans.js'
--- qakit/dashboard/js/test-plans.js	2016-02-12 17:25:40 +0000
+++ qakit/dashboard/js/test-plans.js	2016-02-12 17:25:40 +0000
@@ -19,6 +19,7 @@
         ],
 	searching: true,
 	order: [[0, 'dsc']],
+	bDestroy: true,
     });
 }
 
@@ -41,12 +42,13 @@
 var testPlanData = null;
 
 function drawTestPlansSection() {
-    $.getJSON("./test-plans.json", function(data) {
-	testPlanData = data;
+    $.getJSON("./data/test-plans.json", function(data) {
+	    testPlanData = data;
         testPlansTable(data, "#testPlansTable");
-	// $('#test-plan-modal').on('show.bs.modal', function(e) {
-	//     // which id to show pls
-	//     drawTestPlanModal(data, 561);
-	// });
-    });
+    }).fail(function(data, status) {
+        console.log("Hiding Test Plan section");
+        $("#test-plans-section").hide();
+        $("#test-plans-link").removeAttr("href");
+    })
+    ;
 }