Display when the test are 'yellow'

They aren't quite red..  So give a slightly different header and message
for ignorable flakes and manual overrides

Author: eparis

mungegithub/Makefile

@@ -91,6 +91,7 @@ help:
 	@echo " deploy:       launches/updates the app on a kubernetes cluster"
 	@echo " local_dryrun: tries to launch the container locally with docker"
 	@echo " deployment:   updates $(APP)/deployment.yaml and places results in $(APP)/local.deployment.yaml"
+	@echo " ui-stub:      grab upstream submit-queue data and launch the web ui on port 8000"
 	@echo " secret:       updates $(APP)/secret.yaml with TOKEN an creates $(APP)/local.secret.yaml"
 	@echo " clean:        deletes the binary and local files (does not delete old containers)"
 

mungegithub/submit-queue/www/.gitignore

@@ -0,0 +1,9 @@
+/github-e2e-queue
+/google-internal-ci
+/health
+/history
+/merge-info
+/priority-info
+/prs
+/sq-stats
+/stats

mungegithub/submit-queue/www/index.html

@@ -21,7 +21,10 @@
         <h1 class="md-display-2">Submit Queue Status</h1>
         <a ng-href="https://k8s.io"><img src="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo.png" alt="kubernetes logo" class="titleLogo"></a>
       </md-toolbar>
-      <md-toolbar class="md-warn" ng-show="cntl.failedBuild">
+      <md-toolbar class="md-warn md-hue-1" ng-show="cntl.testResults.yellowBuilds">
+        <h2 class="md-toolbar-tools">E2E Tests Are Troubled But Not Failing</h2>
+      </md-toolbar>
+      <md-toolbar class="md-warn" ng-show="cntl.testResults.redBuilds">
         <h2 class="md-toolbar-tools">E2E Tests Failing. Entire submit queue blocked. Last merge&nbsp;<span am-time-ago="cntl.lastMergeTime"></span>.</h2>
       </md-toolbar>
       <md-content class="md-padding">
@@ -142,21 +145,21 @@ <h4 class="md-body-2">{{pr.Reason}}</h4>
 
           <md-tab md-on-select="cntl.selectTab('e2e')">
             <md-tab-label>
-              <span ng-class="{'redTab':cntl.failedBuild}">E2E Tests</span>
+              <span ng-class="{'redTab':cntl.testResults.redBuilds , 'yellowTab':cntl.testResults.yellowBuilds}">E2E Tests</span>
             </md-tab-label>
             <md-tab-body>
               <md-toolbar class="md-whiteframe-z2">
                 <h2 class="md-toolbar-tools">End-to-End Results</h2>
               </md-toolbar>
-              <h2 class="md-title" ng-show="cntl.builds.length > 0">Queue-Blocking Builds</h2>
-              <md-chips ng-model="cntl.builds" readonly="true">
+              <h2 class="md-title" ng-show="cntl.testResults.blockingBuilds.length > 0">Queue-Blocking Builds</h2>
+              <md-chips ng-model="cntl.testResults.blockingBuilds" readonly="true">
                 <md-chip-template title="{{$chip.msg}}">
                   <span style="color: {{$chip.color}}">{{$chip.state}}</span> <a ng-href="http://ci-test.k8s.io/{{$chip.name}}/{{$chip.id}}/">{{$chip.name}}</a>
                   <span style="color: {{$chip.color}}">{{$chip.msg}}</span> <span title="Job stability">{{$chip.stability}}</span>
                 </md-chip-template>
               </md-chips>
-              <h2 class="md-title" ng-show="cntl.nonBlockingBuilds.length > 0">Non-Queue-Blocking Builds</h2>
-              <md-chips ng-model="cntl.nonBlockingBuilds" readonly="true">
+              <h2 class="md-title" ng-show="cntl.testResults.nonBlockingBuilds.length > 0">Non-Queue-Blocking Builds</h2>
+              <md-chips ng-model="cntl.testResults.nonBlockingBuilds" readonly="true">
                 <md-chip-template title="{{$chip.msg}}">
                   <span style="color: {{$chip.color}}">{{$chip.state}}</span> <a ng-href="http://ci-test.k8s.io/{{$chip.name}}/{{$chip.id}}/">{{$chip.name}}</a>
                   <span style="color: {{$chip.color}}">{{$chip.msg}}</span> <span title="Job stability">{{$chip.stability}}</span>

mungegithub/submit-queue/www/script.js

@@ -10,9 +10,8 @@ app.controller('SQCntl', ['DataService', '$interval', '$location', SQCntl]);
 function SQCntl(dataService, $interval, $location) {
   var self = this;
   self.prs = {};
-  self.builds = {};
-  self.nonBlockingBuilds = {};
   self.health = {};
+  self.testResults = {};
   self.lastMergeTime = Date();
   self.prQuerySearch = prQuerySearch;
   self.historyQuerySearch = historyQuerySearch;
@@ -102,8 +101,8 @@ function SQCntl(dataService, $interval, $location) {
 
   // This data is shown in a top banner (when the Queue is blocked),
   // so it's always loaded.
-  refreshGoogleInternalCI();
-  $interval(refreshGoogleInternalCI, 60000);  // Refresh every minute
+  refreshContinuousTests();
+  $interval(refreshContinuousTests, 60000);  // Refresh every minute
 
   // Request Avatars that are only as large necessary (CSS limits them to 40px)
   function fixPRAvatars(prs) {
@@ -166,24 +165,22 @@ function SQCntl(dataService, $interval, $location) {
         var percentStable = self.health.NumStable * 100.0 / self.health.TotalLoops;
         self.OverallHealth = Math.round(percentStable) + "%";
       }
-      updateBuildStability(self.builds, self.nonBlockingBuilds, self.health);
+      updateBuildStability(self.testResults.blockingBuilds, self.testResults.nonBlockingBuilds, self.health);
     });
   }
 
-  function refreshGoogleInternalCI() {
+  function refreshContinuousTests() {
     dataService.getData('google-internal-ci').then(function successCallback(response) {
-      var result = getE2E(response.data);
-      self.builds = result.builds;
-      self.nonBlockingBuilds = result.nonBlockingBuilds;
-      updateBuildStability(self.builds, self.nonBlockingBuilds, self.health);
-      self.failedBuild = result.failedBuild;
+      self.testResults = processTests(response.data);
+      updateBuildStability(self.testResults.blockingBuilds, self.testResults.nonBlockingBuilds, self.health);
     });
   }
 
-  function getE2E(builds) {
-    var result = [];
+  function processTests(builds) {
+    var blockingResult = [];
     var nonBlockingResult = [];
-    var failedBuild = false;
+    var redBuilds = false;
+    var yellowBuilds = false;
     angular.forEach(builds, function(job, key) {
       var obj = {
         'name': key,
@@ -199,19 +196,21 @@ function SQCntl(dataService, $interval, $location) {
           // red X mark
           obj.state = '\u2716';
           obj.color = 'red';
-          failedBuild = true;
+          redBuilds = true;
           break;
         case 'Ignorable flake':
           // orange X mark
           obj.state = '\u2716';
-          obj.color = 'orange';
+          obj.color = '#FF8A65';
           obj.msg = 'Flake!';
+          yellowBuilds = true;
           break;
         case 'Problem Resolved':
           // orange X mark
           obj.state = '\u2716';
-          obj.color = 'orange';
+          obj.color = '#FF8A65';
           obj.msg = 'Manual override';
+          yellowBuilds = true;
           break;
         case '[nonblocking] Stable':
           // green check mark
@@ -222,41 +221,49 @@ function SQCntl(dataService, $interval, $location) {
         case '[nonblocking] Not Stable':
           // orange X mark
           obj.state = '\u2716';
-          obj.color = 'orange';
+          obj.color = '#FF8A65';
           obj.msg = '[nonblocking]';
           break;
         case '[nonblocking] Ignorable flake':
           // orange X mark
           obj.state = '\u2716';
-          obj.color = 'orange';
-          obj.msg = '[nonblocking]';
+          obj.color = '#FF8A65';
+          obj.msg = '[nonblocking] Flake!';
           break;
         default:
           obj.state = 'Error';
           obj.color = 'red';
           obj.msg = job.Status;
-          failedBuild = true;
+          redBuilds = true;
       }
       obj.stability = '';
       if (!obj.msg) {
-        result.push(obj);
+        blockingResult.push(obj);
       } else {
         if (obj.msg.includes('[nonblocking]')) {
           obj.msg = obj.msg.replace('[nonblocking]', '');
           nonBlockingResult.push(obj);
         } else {
-          result.push(obj);
+          blockingResult.push(obj);
         }
       }
     });
+    if (redBuilds) {
+      yellowBuilds = false;
+    }
     return {
-      builds: result,
+      blockingBuilds: blockingResult,
       nonBlockingBuilds: nonBlockingResult,
-      failedBuild: failedBuild,
+      yellowBuilds: yellowBuilds,
+      redBuilds: redBuilds,
     };
   }
 
   function updateBuildStabilityHelper(builds, health) {
+    if (builds === undefined || Object.keys(builds).length === 0 ||
+        health.TotalLoops === 0 || health.NumStablePerJob === undefined) {
+      return;
+    }
     angular.forEach(builds, function(build) {
       var key = build.name;
       if (key in self.health.NumStablePerJob) {
@@ -266,12 +273,8 @@ function SQCntl(dataService, $interval, $location) {
     });
   }
 
-  function updateBuildStability(builds, nonBlockingBuilds, health) {
-    if (Object.keys(builds).length === 0 ||
-        health.TotalLoops === 0 || health.NumStablePerJob === undefined) {
-      return;
-    }
-    updateBuildStabilityHelper(builds, health);
+  function updateBuildStability(blockingBuilds, nonBlockingBuilds, health) {
+    updateBuildStabilityHelper(blockingBuilds, health);
     updateBuildStabilityHelper(nonBlockingBuilds, health);
   }
 

mungegithub/submit-queue/www/style.css

@@ -13,8 +13,14 @@ md-list-item > .md-avatar img {
   width: 40px;
 }
 
+.yellowTab {
+  padding: 14px;
+  background-color: #FF8A65;
+  color: black;
+}
+
 .redTab {
   padding: 14px;
-  background-color: #F44336;
+  background-color: #F4511E;
   color: white;
 }