SoM: Navbar links++

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">
 <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">
+<link rel="import" href="/elements/pages/som-help.html">
+<link rel="import" href="/elements/pages/som-rotation-calendar.html">
 
 <dom-module id="som-app">
   <template>
     <style>
       paper-toolbar {
         --paper-toolbar-background: black;
       }
       paper-toolbar a {
         color: #fff;
       }
       paper-header-panel /deep/ #mainContainer {
         @apply(--layout-vertical);
       }
-      .last-updated, .user-name {
-        text-align: right;
-        padding-right: 1em;
-      }
       paper-header-panel[main] {
         --paper-header-panel-body: {
           background: #eee;
         }
       }
-      .title {
-        font-size: big;
+      #alertsList {
+        padding: 0;
       }
-      .som-title {
-        font-weight: bold;
+      #noAlerts {
+        margin: 1em;
+        text-align: center;
+        font-size: 2.5em;
+        line-height: 150%;
+      }
+      #refresh {
+        width: 25px;
+        height: 25px;
+        padding: 0;
+      }
+      .last-updated, .user-name {
+        text-align: right;
+        padding-right: 1em;
       }
       .list-item {
         @apply(--layout-flex);
         @apply(--layout-vertical);
         margin: 1em;
         border-bottom: 1px solid #ddd;
       }
-      #refresh {
-        width: 25px;
-        height: 25px;
-        padding: 0;
-      }
-      #alertsList {
-        background: white;
-        border-left: 1px solid #ddd;
-      }
-      #noAlerts {
-        margin: 1em;
-        text-align: center;
-        font-size: 2.5em;
-        line-height: 150%;
-      }
       .notification {
         box-sizing: border-box;
         width: 100%;
         padding: 8px 10px;
         margin: 10px auto 20px;
         border: 1px solid #666;
         border-radius: 5px;
       }
-
+      .page-body {
+        background: white;
+        border-left: 1px solid #ddd;
+        padding: 1em;
+      }
+      .som-title {
+        font-weight: bold;
+      }
+      .title {
+        font-size: big;
+      }
       @media (max-width: 1024px) {
         .last-updated, .user-name {
           padding-right: 0.5em;
           font-size: 0.9em;
         }
       }
     </style>
     <iron-location id="url" path="{{_path}}"></iron-location>
     <iron-ajax
         auto
         id="annotations"
         url="/api/v1/annotations"
         handle-as="json"
         last-error="{{_annotationsJsonError}}"
         last-response="{{annotationsJson}}"
         debounce-duration="300"></iron-ajax>
     <iron-ajax
         id="annotationPost"
         method="post"
         handle-as="json"
         last-error="{{_annotationPostError}}"
         on-response="_postResponse"></iron-ajax>
     <paper-drawer-panel responsive-width="1024px">
       <paper-header-panel drawer>
         <paper-toolbar>
           <span class="som-title">Sheriff-o-Matic</span>
         </paper-toolbar>
-        <som-drawer id="drawer" tree="[[_tree]]" path="{{_path}}" show-infra-failures="{{showInfraFailures}}" trees="{{_trees}}"></som-drawer>
+        <som-drawer id="drawer" tree="[[_tree]]" path="{{_path}}" static-pages="[[_staticPages]]" show-infra-failures="{{showInfraFailures}}" trees="{{_trees}}"></som-drawer>
       </paper-header-panel>
       <paper-header-panel main id="mainHeaderPanel" class="flex layout vertical">
         <paper-toolbar>
           <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
           <div class="layout horizontal flex">
             <div class="flex title">[[_tree]]</div>
             <div hidden$="[[_lastUpdate]]" class="flex last-updated">
               Last updated: [[_lastUpdated]]
             </div>
             <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="[[_fetchingAlerts]]"></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 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>
-              <div id="noAlerts" hidden$="[[_haveAlerts]]">
-                No alerts!
-                <br>
-                <img src="/images/jparent-jump.gif" alt="Julie Jumping" title="Julie Jumping">
-              </div>
-              <div id="alertsListInner">
-                <template is="dom-repeat" items="[[_alerts]]" as="alert">
-                  <div class="list-item" tabindex$="[[tabIndex]]">
-                    <som-alert-item
-                        alert="{{alert}}"
-                        tree="[[_tree]]"
-                        selected="[[selected]]"
-                        annotation="[[_computeAnnotation(annotations, alert)]]"
-                        on-annotation-change="_handleAnnotation"
-                        on-link-bug="_handleLinkBug"
-                        on-snooze="_handleSnooze"
-                    ></som-alert-item>
-                  </div>
-                </template>
+        <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>
-            <div id="examineAlert" class="flex layout vertical">
-              <som-examine alert="[[_examinedAlert]]" class="flex layout vertical"></som-examine>
+            <div id="noAlerts" hidden$="[[_haveAlerts]]">
+              No alerts!
+              <br>
+              <img src="/images/jparent-jump.gif" alt="Julie Jumping" title="Julie Jumping">
             </div>
-          </iron-pages>
-        </div>
+            <div id="alertsListInner">
+              <template is="dom-repeat" items="[[_alerts]]" as="alert">
+                <div class="list-item" tabindex$="[[tabIndex]]">
+                  <som-alert-item
+                      alert="{{alert}}"
+                      tree="[[_tree]]"
+                      selected="[[selected]]"
+                      annotation="[[_computeAnnotation(annotations, alert)]]"
+                      on-annotation-change="_handleAnnotation"
+                      on-link-bug="_handleLinkBug"
+                      on-snooze="_handleSnooze"
+                  ></som-alert-item>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div id="examineAlert" class="flex layout vertical page-body">
+            <som-examine alert="[[_examinedAlert]]" class="flex layout vertical"></som-examine>
+          </div>
+          <som-help id="helpSOM" class="page-body"></som-help>
+          <som-rotation-calendar id="rotationCalendar" class="flex layout vertical page-body"></som-rotation-calendar>
+        </iron-pages>
       </paper-header-panel>
     </paper-drawer-panel>
     <paper-dialog id="bugDialog" with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" on-iron-overlay-closed="_resetBugDialog">
       <h2>Enter bug number</h2>
       <paper-input autofocus id="bug" label="Bug # or URL"></paper-input>
       <a hidden$="[[_filedBug]]" id="fileBugLink" target="_blank" on-tap="_fileBugClicked">
         File bug
       </a>
       <div hidden$="[[!_filedBug]]" id="bugReminder">
         Remember to enter the new bug number above!
@@ skipping 111 matching lines @@
         showInfraFailures: {
           type: Boolean,
           value: true,
         },
         _snoozeModel: Object,
         _trees: Object,
         _tree: {
           type: String,
           computed: '_computeTree(_path)',
         },
+        _staticPages: {
+          type: Object,
+          value: {
+            "help-som" : {
+              pageId : "helpSOM",
+              displayText : "How to Use",
+            },
+            "calendar" : {
+              pageId : "rotationCalendar",
+              displayText : "Rotation Calendar",
+            },
+          },
+        },
         _examinedAlert: {
           type: Object,
           computed: '_computeExaminedAlert(_alerts, _examinedAlertKey)',
         },
         _examinedAlertKey: {
           type: String,
           computed: '_computeExaminedAlertKey(_path)',
         },
         user: String,
       },
@@ skipping 24 matching lines @@
         let pathParts = path.split('/');
         if (pathParts.length < 2 || pathParts[1] == "") {
           console.error('error: invalid pathParts', pathParts);
           return "";
         }
 
         return pathParts[1];
       },
 
       _computeAlertsGroups: function(tree, trees) {
-        if (tree === '') {
+        if (tree === '' || tree in this._staticPages) {
           return [];
         }
 
         if (trees && trees[tree] && trees[tree].alert_streams) {
           return trees[tree].alert_streams
         }
 
         return [tree];
       },
 
       _computeRefreshEnabled: function(selectedPage) {
         return selectedPage == "alertsList";
       },
 
       _computeSelectedPage: function(path) {
         let pathParts = path.split('/');
         if (pathParts.length < 2) {
           console.error('error: pathParts < 2', pathParts);
         }
-        if (pathParts.length < 3) {
-          return 'alertsList';
+        if (pathParts.length == 2) {
+          if (pathParts[1] in this._staticPages) {
+            return this._staticPages[pathParts[1]].pageId;
+          } else {
+            // On the page for a tree
+            return 'alertsList';
+          }
         }
         if (pathParts[2] == 'examine') {
           return 'examineAlert';
         }
       },
 
       _computeExaminedAlertKey: function(path) {
         let pathParts = path.split('/');
         if (pathParts.length < 2) {
           console.error('error: pathParts < 2', pathParts);
@@ skipping 207 matching lines @@
           }
         ).completes.then(() => {
           this.$.snoozeTime.value = '';
         });
       },
 
     });
   })();
   </script>
 </dom-module>