SoM: Alerts error handling.

go/src/infra/appengine/sheriff-o-matic/elements/som-app.html

 <link rel="import" href="/bower_components/polymer/polymer.html">
 <link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="/bower_components/iron-icons/hardware-icons.html">
 <link rel="import" href="/bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="/bower_components/iron-location/iron-location.html">
 <link rel="import" href="/bower_components/iron-pages/iron-pages.html">
 <link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html">
 <link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html">
@@ skipping 39 matching lines @@
         margin: 1em 0.5em;
         background-color: #eee;
         border-bottom: 1px solid #ddd;
       }
       #alertsListInner h2 {
         font-size: 22px;
       }
       #bugDialog, #snoozeDialog {
         width: 300px;
       }
+      #fetchAlertsError {
+        color: #f00;
+        margin: 1em;
+      }
       #noAlerts {
         text-align: center;
         font-size: 2.5em;
         line-height: 150%;
       }
       #refresh {
         width: 25px;
         height: 25px;
         padding: 0;
       }
       .error {
-        color: #cc0000;
+        color: #c00;
         margin-top: 0;
       }
       .last-updated, .user-name {
         text-align: right;
         padding-right: 1em;
       }
       .list-item {
         @apply(--layout-flex);
         @apply(--layout-vertical);
         margin: 1em;
@@ skipping 68 matching lines @@
         <iron-pages attr-for-selected='id' selected="[[_selectedPage]]" class="flex layout vertical">
           <div id="alertsList" class="page-body">
             <div class="list-item" hidden$="[[_hideWebkitNotice]]">
               <div class="notification">
                 Chromium sheriffs: you now need to handle WebKit bot failures too. <a href="http://www.chromium.org/blink/sheriffing" target="_blank">More information</a>.
               </div>
             </div>
             <som-bug-queue id="bugQueue" bug-queue-label="[[_bugQueueLabel]]"></som-bug-queue>
             <div id="alertsListInner">
               <h2>Failure Alerts (<a href="/help-som">Help?</a>)</h2>
+              <div id="fetchAlertsError" hidden=[[!_fetchAlertsError]]>[[_fetchAlertsError]]</div>
               <template is="dom-if" if="[[!_hideJulie]]">
                 <div id="noAlerts">
                   No alerts!
                   <br>
                   <img src="/images/jparent-jump.gif" alt="Julie Jumping" title="Julie Jumping">
                 </div>
               </template>
               <template is="dom-repeat" items="[[_computeSeverities(_alerts)]]" as="sev">
                 <h3 class="severity-title">[[_getSeverityTitle(sev)]]:</h3>
                 <template is="dom-repeat" items="[[_alertsWithSeverity(_alerts, sev)]]" as="alert">
@@ skipping 114 matching lines @@
         _bugErrorMessage: String,
         _bugModel: Object,
         _bugQueueLabel: {
           type: Array,
           computed: '_computeBugQueueLabel(_tree, _trees)',
         },
         _filedBug: {
           type: Boolean,
           value: false,
         },
+        _fetchAlertsError: String,
         _fetchingAlerts: {
           type: Boolean,
           computed: '_computeFetchingAlerts(_activeRequests)',
         },
         _fetchedAlerts: {
           type: Boolean,
           value: function() { return false; },
         },
         _hideJulie: {
           type: Boolean,
-          computed: '_computeHideJulie(_alerts, _fetchedAlerts, _fetchingAlerts, _tree)',
+          computed: '_computeHideJulie(_alerts, _fetchedAlerts, _fetchingAlerts, _fetchAlertsError, _tree)',
           value: function() { return true; },
         },
         _hideWebkitNotice: {
           type: Boolean,
           computed: '_computeHideWebkitNotice(_tree)',
         },
         logoutUrl: String,
         _path: {
           type: String,
         },
@@ skipping 106 matching lines @@
       },
 
       _computeSelectedPage: function(path) {
         let pathParts = path.split('/');
         if (pathParts.length < 2) {
           console.error('error: pathParts < 2', pathParts);
         }
         if (pathParts.length == 2) {
           if (pathParts[1] in this._staticPages) {
             if (pathParts[1] === 'calendar') {
-              // Hide rotation calendar until visited because it's really big. 
+              // Hide rotation calendar until visited because it's really big.
               this._showRotationCalendar = true;
             }
             return this._staticPages[pathParts[1]].pageId;
           } else {
             // On the page for a tree
             return 'alertsList';
           }
         }
         if (pathParts[2] == 'examine') {
           return 'examineAlert';
@@ skipping 42 matching lines @@
         });
 
         // Assume it takes less than 1 millisecond to calculate that.
         if (Date.now() - oldestDate > 1) {
           return new Date(oldestDate * 1000).toLocaleString();
         }
         return 'Unknown';
       },
 
       _alertsGroupsChanged: function(alertsGroups) {
+        this._fetchAlertsError = '';
         if (alertsGroups.length > 0) {
           this._fetchedAlerts = false;
           this._activeRequests += alertsGroups.length;
 
-          // TODO: handle webpage offline throwing an exception
           alertsGroups.forEach((group) => {
             let foo = fetch('/api/v1/alerts/' + group, {credentials: 'include'}).then((response) => {
-              // TODO: handle alerts not found
               this._activeRequests -= 1;
+              if (response.status == 404) {
+                this._fetchAlertsError = 'Server responded with 404: ' + group + ' not found. ';

[seanmccullough1, 2016/08/04 16:11:50]

80 col here and below (silly requirement, I know)

+                return false;
+              }
               return response.json();
+            }, (error) => {
+              this._activeRequests -= 1;
+              this._fetchAlertsError = 'Could not connect to the server. ' + error;
             }).then((json) => {
-              this.set(['_alertsData', this._alertGroupVarName(group)], json.alerts);
-              this.set(['_alertsTimes', this._alertGroupVarName(group)], json.timestamp);
+              if (json) {
+                this.set(['_alertsData', this._alertGroupVarName(group)], json.alerts);
+                this.set(['_alertsTimes', this._alertGroupVarName(group)], json.timestamp);
+              }
             });
           });
         }
       },
 
       _alertGroupVarName(group) {
         return group.replace('.', '_');
       },
 
       _computeFetchingAlerts: function(activeRequests) {
@@ skipping 36 matching lines @@
         });
 
         // Wait for alerts to be loaded
         setTimeout(() => {
           this._fetchedAlerts = true;
         }, 200);
         return allAlerts;
       },
 
 
-      _computeHideJulie: function(alerts, fetchedAlerts, fetchingAlerts, tree) {
-        if (fetchingAlerts || !fetchedAlerts || !alerts || tree === '') {
+      _computeHideJulie: function(alerts, fetchedAlerts, fetchingAlerts, fetchAlertsError, tree) {
+        if (fetchingAlerts || !fetchedAlerts || !alerts || fetchAlertsError !== '' || tree === '') {
           return true;
         }
         return alerts.length > 0;
       },
 
       _computeHideWebkitNotice: function(tree) {
         return tree != 'chromium';
       },
 
       ////////////////////// Severity ///////////////////////////
@@ skipping 157 matching lines @@
           this.$.snoozeDialog.close();
         }, (error) => {
           this._snoozeErrorMessage = error;
         });
       },
 
     });
   })();
   </script>
 </dom-module>