[som] Add bug queue UI.

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-list/iron-list.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">
 <link rel="import" href="/bower_components/paper-badge/paper-badge.html">
 <link rel="import" href="/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="/bower_components/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html">
 <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="/bower_components/paper-input/paper-input.html">
 <link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="/elements/som-alert-item.html">
+<link rel="import" href="/elements/som-bug-queue.html">
 <link rel="import" href="/elements/som-drawer.html">
 <link rel="import" href="/elements/som-examine.html">
 
 <dom-module id="som-app">
   <template>
     <style>
       paper-toolbar {
         --paper-toolbar-background: black;
       }
       paper-header-panel /deep/ #mainContainer {
@@ skipping 86 matching lines @@
             <div class="user-name">
               [[user]] (<a href$="[[logoutUrl]]">Log Out </a>)
             </div>
             <paper-icon-button on-tap="_refresh" id="refresh" icon="refresh"></paper-icon-button>
           </div>
           <paper-spinner active="[[_networkActive]]"></paper-spinner>
         </paper-toolbar>
         <div class="flex layout vertical">
           <iron-pages attr-for-selected='id' selected="[[_selectedPage]]" class="flex layout vertical">
             <div id="alertsList">
-              <div hidden$="[[_haveAlerts]]">
+             <som-bug-queue id="bugQueue" alerts-group="[[_alertsGroup]]"></som-bug-queue>
+             <div hidden$="[[_haveAlerts]]">
                 No alerts!
               </div>
-              <iron-list id="alertsIronList" items="[[_alerts]]" as="alert" class="fit" selection-enabled multi-selection>
+              <iron-list id="alertsIronList" items="[[_alerts]]" as="alert" selection-enabled multi-selection>
                 <template>
                   <div class="list-item" tabindex$="[[tabIndex]]">
                     <som-alert-item
                         alert="{{alert}}"
                         alerts-group="[[_alertsGroup]]"
                         selected="[[selected]]"
                         annotation="[[_computeAnnotation(annotations, alert)]]"
                         on-annotation-change="_handleAnnotation"
                         on-link-bug="_handleLinkBug"
                     ></som-alert-item>
@@ skipping 74 matching lines @@
           type: Object,
           value: function() { return {}; },
         },
         _bugModel: Object,
         _filedBug: {
           type: Boolean,
           value: false,
         },
         _haveAlerts: {
           type: Boolean,
-          computed: '_computeHaveAlerts(alerts)',
+          computed: '_computeHaveAlerts(_alerts)',
         },
         logoutUrl: String,
         _networkActive: {
           type: Boolean,
           value: false,
         },
         _path: {
           type: String,
         },
         _selectedPage: {
@@ skipping 16 matching lines @@
       },
 
       created: function() {
         this.async(this._refreshAsync, refreshDelayMs);
       },
 
       ////////////////////// Refresh ///////////////////////////
 
       _refresh: function() {
         this.$.alertsAjax.generateRequest();
+        this.$.bugQueue.refresh();
       },
 
       _refreshAsync: function() {
         this._refresh();
         this.async(this._refreshAsync, refreshDelayMs);
       },
 
       ////////////////////// Alerts and path ///////////////////////////
 
       _computeAlertsGroup: function(path) {
@@ skipping 70 matching lines @@
           let aAnn = this._computeAnnotation(annotations, a);
           let bAnn = this._computeAnnotation(annotations, b);
 
           if (aAnn.snoozed == bAnn.snoozed) {
             return a.severity - b.severity;
           }
 
           return aAnn.snoozed ? 1 : -1;
         });
 
+        // Otherwise alertsIronList doesn't render all of the alert items.
+        setTimeout(() => {
+          this.$.alertsIronList.notifyResize();
+        }, 250);
+
         return alerts;
       },
 
+      _computeHaveAlerts: function(alerts) {
+        if (!alerts) {
+          return true;
+        }
+        return alerts.length > 0;
+      },
+
       ////////////////////// Annotations ///////////////////////////
 
       _computeAnnotations: function(annotationsJson) {
         let annotations = {};
         if (!annotationsJson) {
           return annotations;
         }
         annotationsJson.forEach(function(annotation) {
           annotations[annotation.key] = annotation;
         });
@@ skipping 71 matching lines @@
       _saveBug: function() {
         this._sendAnnotation(
           this._keyForAlert(this._bugModel), 'add', {
             bugs: [this.$.bug.value]
           });
       },
     });
   })();
   </script>
 </dom-module>