From e68eba65aca897cbd91f76b33aa4531186f4b3eb Mon Sep 17 00:00:00 2001
From: William Chargin <wchargin@google.com>
Date: Wed, 5 Jul 2017 10:53:55 -0700
Subject: [PATCH] Only display active dashboards

Summary:
This commit incorporates the backend's `is_active` plugin functions and
the related `plugins_listing` handler, and uses them on the client: we
will only display dashboards that correspond to backend plugins that are
active.

Test Plan:
  - Launch TensorBoard with a normal data set and note that the correct
    set of dashboards is displayed.
  - Launch TensorBoard with a nonexistent or empty logdir and observe
    the global "no data" message.
  - Launch TensorBoard and cause the `plugins_listing` network request
    to fail. (In Chrome: Network devtools tab, right-click the request,
    select "Block Request URL", refresh.) Note the resulting message.
    Then, unblock the request, and click TensorBoard's reload button:
    everything should work as usual.
  - Launch TensorBoard with a large data set, and open the frontend
    before it's read any text summaries. Then, click TensorBoard's
    reload button and note that the "Text" dashboard tab appears and
    functions.
  - Launch TensorBoard on a large data set. Select the "text" dashboard.
    Then, relaunch the TensorBoard backend on the same port, and click
    the frontend's reload button before any text summaries are loaded.
    Note that TensorBoard removes the text dashboard and shoves the user
    over to a different dashboard (the first dashboard loaded) with a
    notice.
  - Launch TensorBoard, let it load data, then kill the server and click
    TensorBoard's reload button. Note that the already-loaded features
    of TensorBoard are still operational.

wchargin-branch: active-dashboards
---
 tensorboard/components/tf_backend/router.ts   |   2 +
 tensorboard/components/tf_storage/storage.ts  |   4 +-
 .../tf_tensorboard/tf-tensorboard.html        | 461 ++++++++++++++++--
 3 files changed, 411 insertions(+), 56 deletions(-)

diff --git a/tensorboard/components/tf_backend/router.ts b/tensorboard/components/tf_backend/router.ts
index f4e74854078..81cfc33e9fa 100644
--- a/tensorboard/components/tf_backend/router.ts
+++ b/tensorboard/components/tf_backend/router.ts
@@ -20,6 +20,7 @@ export type RunTagUrlFn = (tag: string, run: string) => string;
 export interface Router {
   logdir: () => string;
   runs: () => string;
+  pluginsListing: () => string;
   isDemoMode: () => boolean;
   pluginRoute: (pluginName: string, route: string) => string;
   pluginRunTagRoute: (pluginName: string, route: string) => RunTagUrlFn;
@@ -60,6 +61,7 @@ export function createRouter(dataDir = 'data', demoMode = false): Router {
   return {
     logdir: () => dataDir + '/logdir',
     runs: () => dataDir + '/runs' + (demoMode ? '.json' : ''),
+    pluginsListing: () => dataDir + '/plugins_listing',
     isDemoMode: () => demoMode,
     pluginRoute,
     pluginRunTagRoute,
diff --git a/tensorboard/components/tf_storage/storage.ts b/tensorboard/components/tf_storage/storage.ts
index d2441f83459..58ef52c1a70 100644
--- a/tensorboard/components/tf_storage/storage.ts
+++ b/tensorboard/components/tf_storage/storage.ts
@@ -311,8 +311,8 @@ function _componentToDict(component: string): StringDict {
   const tokens = component.split('&');
   tokens.forEach((token) => {
     const kv = token.split('=');
-    // Special backwards compatibility for URI components like #events
-    if (kv.length === 1 && _.contains(TABS, kv[0])) {
+    // Special backwards compatibility for URI components like #scalars.
+    if (kv.length === 1) {
       items[TAB] = kv[0];
     } else if (kv.length === 2) {
       items[decodeURIComponent(kv[0])] = decodeURIComponent(kv[1]);
diff --git a/tensorboard/components/tf_tensorboard/tf-tensorboard.html b/tensorboard/components/tf_tensorboard/tf-tensorboard.html
index 03c6e4b44b9..4225da31aff 100644
--- a/tensorboard/components/tf_tensorboard/tf-tensorboard.html
+++ b/tensorboard/components/tf_tensorboard/tf-tensorboard.html
@@ -56,23 +56,59 @@ <h2>Settings</h2>
       <paper-toolbar id="toolbar">
         <div id="toolbar-content">
           <div class="toolbar-title">TensorBoard</div>
-          <paper-tabs
-            selected="{{_selectedDashboard}}"
-            attr-for-selected="data-dashboard"
-            noink
-            id="tabs"
-          >
-            <template is="dom-repeat" items="[[_dashboards]]" as="dashboard">
-              <template
-                is="dom-if"
-                if="[[_isDashboardEnabled(disabledDashboards, dashboard)]]"
-              >
-                <paper-tab data-dashboard="[[dashboard]]">[[dashboard]]</paper-tab>
+          <template is="dom-if" if="[[_activeDashboardsNotLoaded]]">
+            <span class="toolbar-message">
+              Loading active dashboards&hellip;
+            </span>
+          </template>
+          <template is="dom-if" if="[[_activeDashboardsLoaded]]">
+            <paper-tabs
+              selected="{{_selectedDashboard}}"
+              attr-for-selected="data-dashboard"
+              noink
+              id="tabs"
+            >
+              <template is="dom-repeat" items="[[_dashboards]]" as="dashboard">
+                <template
+                  is="dom-if"
+                  if="[[_isDashboardActive(disabledDashboards, _activeDashboards, dashboard)]]"
+                >
+                  <paper-tab data-dashboard="[[dashboard]]">[[dashboard]]</paper-tab>
+                </template>
               </template>
-            </template>
-          </paper-tabs>
+            </paper-tabs>
+          </template>
           <div class="global-actions">
-            <paper-icon-button
+            <template
+              is="dom-if"
+              if="[[_inactiveDashboardsExist(_dashboards, disabledDashboards, _activeDashboards)]]"
+            >
+              <paper-dropdown-menu
+                label="Inactive dashboards"
+                no-label-float
+                noink
+              >
+                <paper-menu
+                  id="inactive-dashboards-menu"
+                  class="dropdown-content"
+                  selected="{{_selectedDashboard}}"
+                  attr-for-selected="data-dashboard"
+                >
+                  <template is="dom-repeat" items="[[_dashboards]]" as="dashboard">
+                    <template
+                      is="dom-if"
+                      if="[[_isDashboardInactive(disabledDashboards, _activeDashboards, dashboard)]]"
+                    >
+                      <paper-item
+                        data-dashboard="[[dashboard]]"
+                      >[[dashboard]]</paper-item>
+                    </template>
+                  </template>
+                </paper-menu>
+              </paper-dropdown-menu><!--
+              --><span style="width: 20px"></span><!--
+            --></template><!--
+            --><paper-icon-button
               icon="refresh"
               on-tap="reload"
               disabled$="[[_isReloadDisabled]]"
@@ -92,6 +128,58 @@ <h2>Settings</h2>
 
       <div id="content" class="fit">
         <content id="injected-overview"></content>
+        <template is="dom-if" if="[[_activeDashboardsFailedToLoad]]">
+          <div class="warning-message">
+            <h3>Failed to load the set of active dashboards.</h3>
+            <p>
+            This can occur if the TensorBoard backend is no longer
+            running. Perhaps this page is cached?
+            <p>
+            If you think that you’ve fixed the problem, click the reload
+            button in the top-right.
+            <template is="dom-if" if="[[autoReloadEnabled]]">
+            We’ll try to reload every [[autoReloadIntervalSecs]]&nbsp;seconds as well.
+            </template>
+            <p><i>Last reload: [[_lastReloadTime]]</i>
+            <template is="dom-if" if="[[_logdir]]">
+              <p><i>Log directory: <span id="logdir">[[_logdir]]</span></i></p>
+            </template>
+          </div>
+        </template>
+        <template is="dom-if" if="[[_showNoDashboardsMessage]]">
+          <div class="warning-message">
+            <h3>No dashboards are active for the current data set.</h3>
+            <p>Probable causes:</p>
+            <ul>
+              <li>You haven’t written any data to your event files.
+              <li>TensorBoard can’t find your event files.
+            </ul>
+            If you’re new to using TensorBoard, and want to find out how
+            to add data and set up your event files, check out the
+            <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md">README</a>
+            and perhaps the <a href="https://www.tensorflow.org/get_started/summaries_and_tensorboard">TensorBoard tutorial</a>.
+            <p>
+            If you think TensorBoard is configured properly, please see
+            <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong">the section of the README devoted to missing data problems</a>
+            and consider filing an issue on GitHub.
+            <p><i>Last reload: [[_lastReloadTime]]</i>
+            <template is="dom-if" if="[[_logdir]]">
+              <p><i>Log directory: <span id="logdir">[[_logdir]]</span></i></p>
+            </template>
+          </div>
+        </template>
+        <template is="dom-if" if="[[_showNoSuchDashboardMessage]]">
+          <div class="warning-message">
+            <h3>There’s no dashboard by the name of “<tt>[[_selectedDashboard]]</tt>.”</h3>
+            <template is="dom-if" if="[[_activeDashboardsLoaded]]">
+              <p>You can select a dashboard from the list above.
+            </template>
+            <p><i>Last reload: [[_lastReloadTime]]</i>
+            <template is="dom-if" if="[[_logdir]]">
+              <p><i>Log directory: <span id="logdir">[[_logdir]]</span></i></p>
+            </template>
+          </div>
+        </template>
         <template
           is="dom-repeat"
           id="dashboards-template"
@@ -129,6 +217,12 @@ <h2>Settings</h2>
         display: var(--tb-toolbar-title-display, block);
       }
 
+      .toolbar-message {
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
       #tabs {
         flex-grow: 1;
         text-transform: uppercase;
@@ -139,6 +233,29 @@ <h2>Settings</h2>
         --paper-tabs-selection-bar-color: white;
       }
 
+      paper-dropdown-menu {
+        --paper-input-container-color: rgba(255, 255, 255, 0.8);
+        --paper-input-container-focus-color: white;
+        --paper-input-container-input-color: white;
+        --paper-dropdown-menu-icon: {
+          color: white;
+        }
+        --paper-input-container-input: {
+          -webkit-font-smoothing: antialiased;
+          font-size: 14px;
+          font-weight: 500;
+          text-transform: uppercase;
+        }
+      }
+
+      #inactive-dashboards-menu {
+        --paper-menu-background-color: var(--tb-toolbar-background-color, --tb-orange-strong);
+        --paper-menu-color: white;
+        --paper-menu: {
+          text-transform: uppercase;
+        }
+      }
+
       .global-actions {
         flex-grow: 2;
         display: inline-flex; /* Ensure that icons stay aligned */
@@ -168,6 +285,11 @@ <h2>Settings</h2>
         height: 100%;
       }
 
+      .warning-message {
+        max-width: 540px;
+        margin: 80px auto 0 auto;
+      }
+
       [disabled] {
         opacity: 0.2;
         color: white;
@@ -179,9 +301,31 @@ <h2>Settings</h2>
     import {AutoReloadBehavior} from "./autoReloadBehavior.js";
     import {TABS, setUseHash} from "../tf-globals/globals.js";
     import {getString, setString, TAB} from "../tf-storage/storage.js";
-    import {setRouter, createRouter} from "../tf-backend/router.js";
+    import {Canceller} from "../tf-backend/canceller.js";
+    import {RequestManager} from "../tf-backend/requestManager.js";
+    import {getRouter, setRouter, createRouter} from "../tf-backend/router.js";
     import {fetchRuns} from "../tf-backend/runsStore.js";
 
+    // A map from frontend dashboard names to backend plugin names.
+    // TODO(@wchargin): Require that these be the same; update the
+    // projector dashboard's backend name and remove this table.
+    const PLUGIN_NAMES_BY_DASHBOARD = {
+      'scalars': 'scalars',
+      'images': 'images',
+      'audio': 'audio',
+      'graphs': 'graphs',
+      'distributions': 'distributions',
+      'histograms': 'histograms',
+      'embeddings': 'projector',
+      'text': 'text',
+    };
+    if (!_.isEqual(Object.keys(PLUGIN_NAMES_BY_DASHBOARD), TABS)) {
+      throw new Error(
+        `Bad set of plugin names: ` +
+        `${Object.values(PLUGIN_NAMES_BY_DASHBOARD)} vs. ${TABS}`);
+    }
+
+    // A map from dashboard name to Polymer component name.
     const COMPONENTS = {
       'scalars': 'tf-scalar-dashboard',
       'images': 'tf-image-dashboard',
@@ -197,6 +341,12 @@ <h2>Settings</h2>
         `Bad set of components: ${Object.keys(COMPONENTS)} vs. ${TABS}`);
     }
 
+    /** @enum {string} */ const ActiveDashboardsLoadState = {
+      NOT_LOADED: 'NOT_LOADED',
+      LOADED: 'LOADED',
+      FAILED: 'FAILED',
+    };
+
     Polymer({
       is: "tf-tensorboard",
       behaviors: [AutoReloadBehavior],
@@ -247,23 +397,70 @@ <h2>Settings</h2>
           },
         },
 
-        /** @type {Array<string>} */
+        /**
+         * The set of all possible dashboard names.
+         *
+         * @type {Array<string>!}
+         */
         _dashboards: {
           type: Array,
           readOnly: true,
           value: TABS,
-          observer: '_dashboardsUpdated',
+        },
+
+        /**
+         * The set of currently active dashboards.
+         * `null` if not yet fetched.
+         *
+         * TODO(@wchargin): Consider templating in an initial value for
+         * this property.
+         *
+         * @type {Array<string>?}
+         */
+        _activeDashboards: {
+          type: Array,
+          value: null,
+        },
+
+        /** @type {ActiveDashboardsLoadState} */
+        _activeDashboardsLoadState: {
+          type: String,
+          value: ActiveDashboardsLoadState.NOT_LOADED,
+        },
+        _activeDashboardsNotLoaded: {
+          type: Boolean,
+          computed:
+            '_computeActiveDashboardsNotLoaded(_activeDashboardsLoadState)',
+        },
+        _activeDashboardsLoaded: {
+          type: Boolean,
+          computed:
+            '_computeActiveDashboardsLoaded(_activeDashboardsLoadState)',
+        },
+        _activeDashboardsFailedToLoad: {
+          type: Boolean,
+          computed:
+            '_computeActiveDashboardsFailedToLoad(_activeDashboardsLoadState)',
+        },
+        _showNoDashboardsMessage: {
+          type: Boolean,
+          computed:
+            '_computeShowNoDashboardsMessage(_activeDashboardsLoaded, _activeDashboards, _selectedDashboard)',
+        },
+        _showNoSuchDashboardMessage: {
+          type: Boolean,
+          computed:
+            '_computeShowNoSuchDashboardMessage(_dashboards, _selectedDashboard)',
         },
 
         /**
          * The name of the currently selected dashboard, or `null` if no
-         * dashboard is selected.
+         * dashboard is selected. A `null` value here is represented by
+         * an empty string in the hash, and vice versa.
          */
         _selectedDashboard: {
           type: String,
           value: null,
-          observer: '_updateCurrentDashboard',
-          notify: true,
         },
 
         /*
@@ -280,19 +477,90 @@ <h2>Settings</h2>
           type: Boolean,
           computed: '_computeIsReloadDisabled(_debuggerDataEnabled, _selectedDashboard)',
         },
+
+        _lastReloadTime: {
+          type: String,
+          value: "not yet loaded",
+        },
+
+        _logdir: {
+          type: String,
+          value: null,
+        },
+
+        _requestManager: {
+          type: Object,
+          value: () => new RequestManager(),
+        },
+        _canceller: {
+          type: Object,
+          value: () => new Canceller(),
+        },
       },
       observers: [
-        '_ensureSelectedDashboardStamped(_dashboardContainersStamped, _selectedDashboard)',
+        '_updateSelectedDashboard(_selectedDashboard, _activeDashboards)',
+        '_ensureSelectedDashboardStamped(' +
+          '_dashboardContainersStamped, _activeDashboards, _selectedDashboard)',
       ],
 
-      _dashboardsUpdated(dashboards) {
-        if (this._selectedDashboard == null) {
-          this._selectedDashboard = dashboards[0];
+      _activeDashboardsUpdated(activeDashboards, selectedDashboard) {
+      },
+
+      /**
+       * @param {string?} disabledDashboards comma-separated
+       * @param {Array<string>?} activeDashboards if null, nothing is active
+       * @param {string} dashboard
+       * @return {boolean}
+       */
+      _isDashboardActive(disabledDashboards, activeDashboards, dashboard) {
+        if ((disabledDashboards || '').split(',').indexOf(dashboard) >= 0) {
+          // Explicitly disabled.
+          return false;
         }
+        if (!(activeDashboards || []).includes(dashboard)) {
+          // Inactive.
+          return false;
+        }
+        return true;
       },
 
-      _isDashboardEnabled(disabledDashboards, dashboard) {
-        return (disabledDashboards || '').split(',').indexOf(dashboard) < 0;
+      /**
+       * Determine whether a dashboard is enabled but not active.
+       *
+       * @param {string?} disabledDashboards comma-separated
+       * @param {Array<string>?} activeDashboards if null, nothing is active
+       * @param {string} dashboard
+       * @return {boolean}
+       */
+      _isDashboardInactive(disabledDashboards, activeDashboards, dashboard) {
+        if ((disabledDashboards || '').split(',').indexOf(dashboard) >= 0) {
+          // Disabled dashboards don't appear at all; they're not just
+          // inactive.
+          return false;
+        }
+        if (!(activeDashboards || []).includes(dashboard)) {
+          // Inactive.
+          return true;
+        }
+        return false;
+      },
+
+      _inactiveDashboardsExist(dashboards, disabledDashboards, activeDashboards) {
+        if (!activeDashboards) {
+          // Not loaded yet. Show nothing.
+          return false;
+        }
+        const workingSet = new Set();
+        dashboards.forEach(d => {
+          workingSet.add(d);
+        });
+        (disabledDashboards || '').split(',').forEach(d => {
+          workingSet.delete(d);
+        });
+        activeDashboards.forEach(d => {
+          workingSet.delete(d);
+        });
+        return workingSet.size > 0;
       },
 
       _getDashboardFromIndex(dashboards, index) {
@@ -304,8 +572,25 @@ <h2>Settings</h2>
         return currentDashboard === candidateDashboard ? 'inherit' : 'none';
       },
 
-      _updateCurrentDashboard(currentDashboard) {
-        setString(TAB, currentDashboard, /*useLocalStorage=*/false);
+      /**
+       * If no dashboard is selected but dashboards are available,
+       * select the first active dashboard. In any case, synchronize the
+       * state to the hash.
+       */
+      _updateSelectedDashboard(selectedDashboard, activeDashboards) {
+        if (activeDashboards && selectedDashboard == null) {
+          selectedDashboard = activeDashboards[0] || null;
+          if (selectedDashboard != null) {
+            this._selectedDashboard = selectedDashboard;
+            return;  // we just triggered that handler; don't need another
+          }
+        }
+        setString(TAB, selectedDashboard || '', /*useLocalStorage=*/false);
+      },
+
+      _updateSelectedDashboardFromHash() {
+        const dashboardName = getString(TAB, /*useLocalStorage=*/false);
+        this.set('_selectedDashboard', dashboardName || null);
       },
 
       /**
@@ -317,13 +602,25 @@ <h2>Settings</h2>
        * dashboard until its _container_ is itself stamped. (Containers
        * are stamped declaratively by a `<dom-repeat>` in the HTML
        * template.)
+       *
+       * We also wait for the set of active dashboards to be loaded
+       * before we stamp anything. This prevents us from stamping a
+       * dashboard that's not actually enabled (e.g., if the user
+       * navigates to `/#text` when the text plugin is disabled).
+       *
+       * If the currently selected dashboard is not a real dashboard,
+       * this does nothing.
        */
-      _ensureSelectedDashboardStamped(containersStamped, dashboard) {
-        if (!containersStamped) {
+      _ensureSelectedDashboardStamped(containersStamped, activeDashboards, dashboard) {
+        if (!containersStamped || !activeDashboards || !dashboard) {
           return;
         }
         const container = this.$$(
           `.dashboard-container[data-dashboard=${dashboard}]`);
+        if (!container) {
+          // This dashboard doesn't exist. Nothing to do here.
+          return;
+        }
         if (container.childNodes.length === 0) {
           const component = document.createElement(COMPONENTS[dashboard]);
           component.id = 'dashboard';  // used in `_selectedDashboardComponent`
@@ -331,16 +628,26 @@ <h2>Settings</h2>
         };
       },
 
-      _computeIsReloadDisabled(debuggerDataEnabled, mode) {
+      _computeIsReloadDisabled(debuggerDataEnabled, selectedDashboard) {
+        if (selectedDashboard == null) {
+          // No dashboards available. Let the user refresh to try to
+          // load more data.
+          return false;
+        }
         // TODO(@wchargin): Refactor to remove these explicit plugin names.
         const disabledForModes = ['graphs', 'embeddings'];
-        return !debuggerDataEnabled && disabledForModes.includes(mode);
+        return !debuggerDataEnabled && disabledForModes.includes(selectedDashboard);
       },
 
       /**
        * Get the Polymer component corresponding to the currently
        * selected dashboard. For instance, the result might be an
        * instance of `<tf-scalar-dashboard>`.
+       *
+       * If the dashboard does not exist (e.g., the set of active
+       * dashboards has not loaded or has failed to load, or the user
+       * has selected a dashboard for which we have no implementation),
+       * `null` is returned.
        */
       _selectedDashboardComponent() {
         if (!this._dashboardContainersStamped) {
@@ -350,39 +657,80 @@ <h2>Settings</h2>
         const selectedDashboard = this._selectedDashboard;
         var dashboard = this.$$(
           `.dashboard-container[data-dashboard=${selectedDashboard}] #dashboard`);
-        if (dashboard == null) {
-          throw new Error(
-            `Unable to find dashboard for mode: ${selectedDashboard}`);
-        }
         return dashboard;
       },
 
       ready() {
         setUseHash(this.useHash);
+        this._updateSelectedDashboardFromHash();
+        window.addEventListener('hashchange', () => {
+          this._updateSelectedDashboardFromHash();
+        }, /*useCapture=*/false);
 
         // We have to wait for our dashboard-containers to be stamped
         // before we can do anything.
         const dashboardsTemplate = this.$$('#dashboards-template');
-        dashboardsTemplate.addEventListener('dom-change', () => {
+        const onDomChange = () => {
           // This will trigger an observer that kicks off everything.
           this._dashboardContainersStamped = true;
+        };
+        dashboardsTemplate.addEventListener(
+          'dom-change', onDomChange, /*useCapture=*/false);
 
-          this._updateSelectedDashboardFromHash();
-          window.addEventListener('hashchange', () => {
-            this._updateSelectedDashboardFromHash();
-          }, /*useCapture=*/false);
-          fetchRuns();
-        }, /*useCapture=*/false);
+        fetchRuns();
+        this._fetchLogdir();
+        this._fetchActiveDashboards();
+        this._lastReloadTime = new Date().toString();
       },
 
-      _updateSelectedDashboardFromHash() {
-        const dashboardName = getString(TAB, /*useLocalStorage=*/false);
-        if (this._dashboards.includes(dashboardName)) {
-          this.set('_selectedDashboard', dashboardName);
-        } else {
-          // Select the first dashboard as default.
-          this.set('_selectedDashboard', this._dashboards[0]);
-        }
+      _fetchLogdir() {
+        const url = getRouter().logdir();
+        return this._requestManager.request(url).then(result => {
+          this._logdir = result.logdir;
+        });
+      },
+
+      _fetchActiveDashboards() {
+        this._canceller.cancelAll();
+        const updateActiveDashboards = this._canceller.cancellable(result => {
+          if (result.cancelled) {
+            return;
+          }
+          const activePlugins = result.value;
+          this._activeDashboards = this._dashboards.filter(
+            dashboard => activePlugins[PLUGIN_NAMES_BY_DASHBOARD[dashboard]]);
+          this._activeDashboardsLoadState = ActiveDashboardsLoadState.LOADED;
+        });
+        const onFailure = () => {
+          if (this._activeDashboardsLoadState
+              === ActiveDashboardsLoadState.NOT_LOADED) {
+            this._activeDashboardsLoadState = ActiveDashboardsLoadState.FAILED;
+          } else {
+            console.warn(
+              "Failed to reload the set of active plugins; using old value.");
+          }
+        };
+        return this._requestManager
+          .request(getRouter().pluginsListing())
+          .then(updateActiveDashboards, onFailure);
+      },
+
+      _computeActiveDashboardsNotLoaded(state) {
+        return state === ActiveDashboardsLoadState.NOT_LOADED;
+      },
+      _computeActiveDashboardsLoaded(state) {
+        return state === ActiveDashboardsLoadState.LOADED;
+      },
+      _computeActiveDashboardsFailedToLoad(state) {
+        return state === ActiveDashboardsLoadState.FAILED;
+      },
+      _computeShowNoDashboardsMessage(loaded, activeDashboards, selectedDashboard) {
+        return (loaded
+          && activeDashboards.length === 0
+          && selectedDashboard == null);
+      },
+      _computeShowNoSuchDashboardMessage(dashboards, selectedDashboard) {
+        return !!selectedDashboard && !dashboards.includes(selectedDashboard);
       },
 
       _updateRouter(router) {
@@ -393,9 +741,14 @@ <h2>Settings</h2>
         if (this._isReloadDisabled) {
           return;
         }
-        fetchRuns().then(() => {
-          this._selectedDashboardComponent().reload();
+        this._fetchLogdir();
+        Promise.all([this._fetchActiveDashboards(), fetchRuns()]).then(() => {
+          const dashboard = this._selectedDashboardComponent();
+          if (dashboard) {
+            dashboard.reload();
+          }
         });
+        this._lastReloadTime = new Date().toString();
       },
 
       openSettings() {