From 5296dcfe854da9f16ca140d97bafda5caa1282cf Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 27 Feb 2018 19:04:58 -0800
Subject: [PATCH] Entity Registry UI (#921)

* Entity Registry UI

* Tweak style in fullscreen

* Fix UI comments

* Fix imports

* Change title margin

* Fix graph rendering

* More style fixes

* Remove unused parameter
---
 src/cards/ha-history_graph-card.html          |   3 +-
 src/components/entity/ha-chart-base.html      |   2 +-
 src/dialogs/more-info-dialog.html             | 202 +++++++-----------
 .../more-info-alarm_control_panel.html        |  11 +-
 .../controls}/more-info-automation.html       |   8 +-
 .../more-info/controls}/more-info-camera.html |   4 +-
 .../controls}/more-info-climate.html          |  20 +-
 .../controls}/more-info-configurator.html     |  14 +-
 .../controls}/more-info-content.html          |   2 +-
 .../more-info/controls}/more-info-cover.html  |  10 +-
 .../controls}/more-info-default.html          |   4 +-
 .../more-info/controls}/more-info-fan.html    |  18 +-
 .../more-info/controls}/more-info-group.html  |   4 +-
 .../controls}/more-info-history_graph.html    |   6 +-
 .../controls}/more-info-input_datetime.html   |  10 +-
 .../more-info/controls}/more-info-light.html  |  18 +-
 .../more-info/controls}/more-info-lock.html   |   8 +-
 .../controls}/more-info-media_player.html     |  18 +-
 .../more-info/controls}/more-info-script.html |   4 +-
 .../more-info/controls}/more-info-sun.html    |   6 +-
 .../controls}/more-info-updater.html          |   4 +-
 .../more-info/controls}/more-info-vacuum.html |  16 +-
 src/dialogs/more-info/more-info-controls.html | 165 ++++++++++++++
 src/dialogs/more-info/more-info-settings.html | 109 ++++++++++
 24 files changed, 449 insertions(+), 217 deletions(-)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-alarm_control_panel.html (89%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-automation.html (72%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-camera.html (91%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-climate.html (94%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-configurator.html (83%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-content.html (95%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-cover.html (86%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-default.html (73%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-fan.html (84%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-group.html (94%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-history_graph.html (74%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-input_datetime.html (90%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-light.html (90%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-lock.html (82%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-media_player.html (93%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-script.html (77%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-sun.html (87%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-updater.html (74%)
 rename src/{more-infos => dialogs/more-info/controls}/more-info-vacuum.html (88%)
 create mode 100644 src/dialogs/more-info/more-info-controls.html
 create mode 100644 src/dialogs/more-info/more-info-settings.html

diff --git a/src/cards/ha-history_graph-card.html b/src/cards/ha-history_graph-card.html
index 8a3cd11e28..98f364293b 100644
--- a/src/cards/ha-history_graph-card.html
+++ b/src/cards/ha-history_graph-card.html
@@ -22,8 +22,7 @@
         @apply --paper-font-common-nowrap;
       }
       paper-card[dialog] .header {
-        padding-top: 0;
-        padding-left: 0;
+        display: none;
       }
     </style>
     <ha-state-history-data
diff --git a/src/components/entity/ha-chart-base.html b/src/components/entity/ha-chart-base.html
index 054a1d0447..6770a75edf 100644
--- a/src/components/entity/ha-chart-base.html
+++ b/src/components/entity/ha-chart-base.html
@@ -144,7 +144,7 @@
         yPadding: '0'
       });
       if (!this._chart) {
-        this.onPropsChange();
+        requestAnimationFrame(() => requestAnimationFrame(() => this.onPropsChange()));
       }
       this._resizeListener = () => {
         this._debouncer = Polymer.Debouncer.debounce(
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index 8faaaa8559..d61fc39c52 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -4,11 +4,12 @@
 <link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="../components/state-history-charts.html">
 <link rel="import" href="../data/ha-state-history-data.html">
-<link rel="import" href="../more-infos/more-info-content.html">
-<link rel="import" href="../state-summary/state-card-content.html">
 <link rel='import' href='../util/hass-mixins.html'>
 <link rel='import' href='../resources/ha-style.html'>
 
+<link rel='import' href='./more-info/more-info-controls.html'>
+<link rel='import' href='./more-info/more-info-settings.html'>
+
 <dom-module id="more-info-dialog">
   <template>
     <style include="ha-style-dialog">
@@ -21,6 +22,23 @@
         }
       }
 
+      more-info-controls, more-info-settings {
+        --more-info-header-background: var(--secondary-background-color);
+        --more-info-header-color: var(--primary-text-color);
+      }
+
+      /* overrule the ha-style-dialog max-height on small screens */
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        more-info-controls, more-info-settings {
+          --more-info-header-background: var(--primary-color);
+          --more-info-header-color: var(--text-primary-color);
+        }
+        paper-dialog {
+          max-height: 100%;
+          height: 100%;
+        }
+      }
+
       paper-dialog[data-domain=camera] {
         width: auto;
       }
@@ -28,51 +46,32 @@
       paper-dialog[data-domain=history_graph] {
         width: 90%;
       }
-
-      paper-dialog[data-domain=history_graph] h2 {
-        display: none;
-      }
-
-      state-history-charts {
-        position: relative;
-        z-index: 1;
-        max-width: 365px;
-      }
-
-      state-card-content {
-        margin-bottom: 24px;
-        font-size: 14px;
-      }
     </style>
 
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
-    <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}' data-domain$='[[computeDomain(stateObj)]]'>
-      <h2>
-        <state-card-content
-          state-obj="[[stateObj]]"
-          hass='[[hass]]' in-dialog></state-card-content>
-      </h2>
-      <template is='dom-if' if="[[showHistoryComponent]]" restamp>
-        <div>
-          <ha-state-history-data
-            hass='[[hass]]'
-            filter-type='recent-entity'
-            entity-id='[[stateObj.entity_id]]'
-            data='{{stateHistory}}'
-            is-loading='{{stateHistoryLoading}}'
-            cache-config='[[cacheConfig]]'
-          ></ha-state-history-data>
-          <state-history-charts
-            history-data="[[stateHistory]]"
-            is-loading-data="[[isLoadingHistoryData]]"
-            up-to-now>
-          </state-history-charts>
-        </div>
+    <paper-dialog
+      id="dialog"
+      with-backdrop
+      opened='{{_dialogOpen}}'
+      data-domain$='[[_computeDomain(stateObj)]]'
+    >
+      <template is='dom-if' if='[[!_page]]'>
+        <more-info-controls
+          class='no-padding'
+          hass='[[hass]]'
+          state-obj='[[stateObj]]'
+          dialog-element='[[_dialogElement]]'
+          can-configure='[[_registryInfo]]'
+        ></more-info-controls>
+      </template>
+      <template is='dom-if' if='[[_equals(_page, "settings")]]'>
+        <more-info-settings
+          class='no-padding'
+          hass='[[hass]]'
+          state-obj='[[stateObj]]'
+          registry-info='{{_registryInfo}}'
+        ></more-info-settings>
       </template>
-      <paper-dialog-scrollable id='scrollable'>
-        <more-info-content
-          state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
-      </paper-dialog-scrollable>
     </paper-dialog>
   </template>
 </dom-module>
@@ -86,111 +85,72 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
 
       stateObj: {
         type: Object,
-        computed: 'computeStateObj(hass)',
-        observer: 'stateObjChanged',
+        computed: '_computeStateObj(hass)',
+        observer: '_stateObjChanged',
       },
 
-      stateHistory: Object,
-
-      stateHistoryLoading: Boolean,
-
-      isLoadingHistoryData: {
-        type: Boolean,
-        computed: 'computeIsLoadingHistoryData(delayedDialogOpen, stateHistoryLoading)',
-      },
-
-      hasHistoryComponent: {
-        type: Boolean,
-        computed: 'computeHasHistoryComponent(hass)',
-      },
-
-      showHistoryComponent: {
+      _dialogOpen: {
         type: Boolean,
         value: false,
-        computed: 'computeShowHistoryComponent(hasHistoryComponent, stateObj)',
+        observer: '_dialogOpenChanged',
       },
 
-      dialogOpen: {
-        type: Boolean,
-        value: false,
-        observer: 'dialogOpenChanged',
-      },
+      _dialogElement: Object,
+      _registryInfo: Object,
 
-      delayedDialogOpen: {
-        type: Boolean,
-        value: false,
-      },
-
-      cacheConfig: {
-        type: Object,
-        value: {
-          refresh: 60,
-          cacheKey: null,
-          hoursToShow: 24,
-        },
+      _page: {
+        type: String,
+        value: null,
       },
     };
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.$.scrollable.dialogElement = this.$.dialog;
+  ready() {
+    super.ready();
+    this._dialogElement = this.$.dialog;
+    this.addEventListener('more-info-page', (ev) => { this._page = ev.detail.page; });
   }
 
-  computeDomain(stateObj) {
+  _computeDomain(stateObj) {
     return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
   }
 
-  computeStateObj(hass) {
+  _computeStateObj(hass) {
     return hass.states[hass.moreInfoEntityId] || null;
   }
 
-  /**
-   * We depend on a delayed dialogOpen value to tell the chart component
-   * that the data is there. Otherwise the chart component will render
-   * before the dialog is attached to the screen and is unable to determine
-   * graph size resulting in scroll bars.
-   */
-  computeIsLoadingHistoryData(delayedDialogOpen, stateHistoryLoading) {
-    return !delayedDialogOpen || stateHistoryLoading;
-  }
-
-  computeHasHistoryComponent(hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'history');
-  }
-
-  computeShowHistoryComponent(hasHistoryComponent, stateObj) {
-    return this.hasHistoryComponent && stateObj &&
-      window.hassUtil.DOMAINS_WITH_NO_HISTORY
-        .indexOf(window.hassUtil.computeDomain(stateObj)) === -1;
-  }
-
-  stateObjChanged(newVal) {
+  _stateObjChanged(newVal, oldVal) {
     if (!newVal) {
-      this.dialogOpen = false;
+      this._dialogOpen = false;
+      this._page = null;
+      this._registryInfo = null;
       return;
     }
 
-    window.setTimeout(() => {
-      // allow dialog to render content before showing it so it is
+    if (window.hassUtil.isComponentLoaded(this.hass, 'config.entity_registry') &&
+        (!oldVal || oldVal.entity_id !== newVal.entity_id)) {
+      this.hass.callApi('get', `config/entity_registry/${newVal.entity_id}`)
+        .then(
+          (info) => { this._registryInfo = info; },
+          () => { this._registryInfo = false; }
+        );
+    }
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      // allow dialog to render content before showing it so it will be
       // positioned correctly.
-      this.dialogOpen = true;
-    }, 10);
-    if (this.cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) {
-      this.cacheConfig = Object.assign(
-        {}, this.cacheConfig,
-        { cacheKey: `more_info.${newVal.entity_id}` }
-      );
+      this._dialogOpen = true;
+    }));
+  }
+
+  _dialogOpenChanged(newVal) {
+    if (!newVal && this.stateObj) {
+      this.fire('hass-more-info', { entityId: null });
     }
   }
 
-  dialogOpenChanged(newVal) {
-    if (newVal) {
-      window.setTimeout(() => { this.delayedDialogOpen = true; }, 100);
-    } else if (!newVal && this.stateObj) {
-      this.fire('hass-more-info', { entityId: null });
-      this.delayedDialogOpen = false;
-    }
+  _equals(a, b) {
+    return a === b;
   }
 }
 customElements.define(MoreInfoDialog.is, MoreInfoDialog);
diff --git a/src/more-infos/more-info-alarm_control_panel.html b/src/dialogs/more-info/controls/more-info-alarm_control_panel.html
similarity index 89%
rename from src/more-infos/more-info-alarm_control_panel.html
rename to src/dialogs/more-info/controls/more-info-alarm_control_panel.html
index f299f474c5..38bf0443ee 100644
--- a/src/more-infos/more-info-alarm_control_panel.html
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.html
@@ -1,11 +1,10 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel='import' href='../../../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../../../bower_components/paper-input/paper-input.html'>
 
-<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
-<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
-
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../../src/util/hass-mixins.html'>
 
 <dom-module id='more-info-alarm_control_panel'>
   <template>
diff --git a/src/more-infos/more-info-automation.html b/src/dialogs/more-info/controls/more-info-automation.html
similarity index 72%
rename from src/more-infos/more-info-automation.html
rename to src/dialogs/more-info/controls/more-info-automation.html
index 79878831ee..4018cd0939 100644
--- a/src/more-infos/more-info-automation.html
+++ b/src/dialogs/more-info/controls/more-info-automation.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../../../bower_components/paper-button/paper-button.html">
 
-<link rel="import" href="../components/ha-relative-time.html">
+<link rel="import" href="../../../components/ha-relative-time.html">
 
 <dom-module id="more-info-automation">
   <template>
diff --git a/src/more-infos/more-info-camera.html b/src/dialogs/more-info/controls/more-info-camera.html
similarity index 91%
rename from src/more-infos/more-info-camera.html
rename to src/dialogs/more-info/controls/more-info-camera.html
index aa6a2862d7..bb6dc95e63 100644
--- a/src/more-infos/more-info-camera.html
+++ b/src/dialogs/more-info/controls/more-info-camera.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../../src/util/hass-mixins.html'>
 
 <dom-module id='more-info-camera'>
   <template>
diff --git a/src/more-infos/more-info-climate.html b/src/dialogs/more-info/controls/more-info-climate.html
similarity index 94%
rename from src/more-infos/more-info-climate.html
rename to src/dialogs/more-info/controls/more-info-climate.html
index 8563421bc7..db611e8fe6 100644
--- a/src/more-infos/more-info-climate.html
+++ b/src/dialogs/more-info/controls/more-info-climate.html
@@ -1,17 +1,17 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
-<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
+<link rel="import" href="../../../../bower_components/polymer/lib/utils/debounce.html">
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
-<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
-<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
+<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
+<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+<link rel='import' href='../../../../bower_components/paper-toggle-button/paper-toggle-button.html'>
 
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../../src/util/hass-mixins.html'>
 
-<link rel="import" href='../components/ha-climate-control.html'>
+<link rel="import" href='../../../components/ha-climate-control.html'>
 
 <dom-module id='more-info-climate'>
   <template>
diff --git a/src/more-infos/more-info-configurator.html b/src/dialogs/more-info/controls/more-info-configurator.html
similarity index 83%
rename from src/more-infos/more-info-configurator.html
rename to src/dialogs/more-info/controls/more-info-configurator.html
index b4549d3800..b14fef2aa0 100644
--- a/src/more-infos/more-info-configurator.html
+++ b/src/dialogs/more-info/controls/more-info-configurator.html
@@ -1,11 +1,11 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel='import' href='../../bower_components/iron-input/iron-input.html'>
-<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
-<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
-<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel='import' href='../../../../bower_components/iron-input/iron-input.html'>
+<link rel='import' href='../../../../bower_components/paper-spinner/paper-spinner.html'>
+<link rel='import' href='../../../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../../../bower_components/paper-input/paper-input.html'>
 
-<link rel='import' href='../components/ha-markdown.html'>
+<link rel='import' href='../../../components/ha-markdown.html'>
 
 <dom-module id='more-info-configurator'>
   <template>
diff --git a/src/more-infos/more-info-content.html b/src/dialogs/more-info/controls/more-info-content.html
similarity index 95%
rename from src/more-infos/more-info-content.html
rename to src/dialogs/more-info/controls/more-info-content.html
index 90a78ed80b..f2e3b03c59 100644
--- a/src/more-infos/more-info-content.html
+++ b/src/dialogs/more-info/controls/more-info-content.html
@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
 <link rel='import' href='more-info-alarm_control_panel.html'>
 <link rel='import' href='more-info-automation.html'>
diff --git a/src/more-infos/more-info-cover.html b/src/dialogs/more-info/controls/more-info-cover.html
similarity index 86%
rename from src/more-infos/more-info-cover.html
rename to src/dialogs/more-info/controls/more-info-cover.html
index 0539f7b25e..27353dfd98 100644
--- a/src/more-infos/more-info-cover.html
+++ b/src/dialogs/more-info/controls/more-info-cover.html
@@ -1,10 +1,10 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
 
-<link rel='import' href='../util/cover-model.html'>
+<link rel='import' href='../../../util/cover-model.html'>
 
 <dom-module id='more-info-cover'>
   <template>
diff --git a/src/more-infos/more-info-default.html b/src/dialogs/more-info/controls/more-info-default.html
similarity index 73%
rename from src/more-infos/more-info-default.html
rename to src/dialogs/more-info/controls/more-info-default.html
index 25abfd5cc2..f469b7db29 100644
--- a/src/more-infos/more-info-default.html
+++ b/src/dialogs/more-info/controls/more-info-default.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
-<link rel="import" href="../components/ha-attributes.html">
+<link rel="import" href="../../../components/ha-attributes.html">
 
 <dom-module id="more-info-default">
   <template>
diff --git a/src/more-infos/more-info-fan.html b/src/dialogs/more-info/controls/more-info-fan.html
similarity index 84%
rename from src/more-infos/more-info-fan.html
rename to src/dialogs/more-info/controls/more-info-fan.html
index c8a0500d6e..7b67c78fff 100644
--- a/src/more-infos/more-info-fan.html
+++ b/src/dialogs/more-info/controls/more-info-fan.html
@@ -1,15 +1,15 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
-<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
-<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
-<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
+<link rel='import' href='../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
+<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../../../bower_components/paper-toggle-button/paper-toggle-button.html'>
+<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
 
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../../src/util/hass-mixins.html'>
 
-<link rel="import" href="../components/ha-attributes.html">
+<link rel="import" href="../../../components/ha-attributes.html">
 
 <dom-module id='more-info-fan'>
   <template>
diff --git a/src/more-infos/more-info-group.html b/src/dialogs/more-info/controls/more-info-group.html
similarity index 94%
rename from src/more-infos/more-info-group.html
rename to src/dialogs/more-info/controls/more-info-group.html
index 43dc9682cd..a03feb780b 100644
--- a/src/more-infos/more-info-group.html
+++ b/src/dialogs/more-info/controls/more-info-group.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
-<link rel="import" href="../state-summary/state-card-content.html">
+<link rel="import" href="../../../state-summary/state-card-content.html">
 
 <dom-module id="more-info-group">
   <template>
diff --git a/src/more-infos/more-info-history_graph.html b/src/dialogs/more-info/controls/more-info-history_graph.html
similarity index 74%
rename from src/more-infos/more-info-history_graph.html
rename to src/dialogs/more-info/controls/more-info-history_graph.html
index caed29b392..3b9abf0868 100644
--- a/src/more-infos/more-info-history_graph.html
+++ b/src/dialogs/more-info/controls/more-info-history_graph.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
-<link rel="import" href="../cards/ha-history_graph-card.html">
+<link rel="import" href="../../../cards/ha-history_graph-card.html">
 
-<link rel="import" href="../components/ha-attributes.html">
+<link rel="import" href="../../../components/ha-attributes.html">
 
 <dom-module id="more-info-history_graph">
   <template>
diff --git a/src/more-infos/more-info-input_datetime.html b/src/dialogs/more-info/controls/more-info-input_datetime.html
similarity index 90%
rename from src/more-infos/more-info-input_datetime.html
rename to src/dialogs/more-info/controls/more-info-input_datetime.html
index 4399c02407..fad93ad0b0 100644
--- a/src/more-infos/more-info-input_datetime.html
+++ b/src/dialogs/more-info/controls/more-info-input_datetime.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../components/ha-relative-time.html">
-<link rel="import" href="../../bower_components/vaadin-date-picker/vaadin-date-picker.html">
-<link rel="import" href="../../bower_components/paper-time-input/paper-time-input.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../components/ha-relative-time.html">
+<link rel="import" href="../../../../bower_components/vaadin-date-picker/vaadin-date-picker.html">
+<link rel="import" href="../../../../bower_components/paper-time-input/paper-time-input.html">
 
 <dom-module id="more-info-input_datetime">
   <template>
diff --git a/src/more-infos/more-info-light.html b/src/dialogs/more-info/controls/more-info-light.html
similarity index 90%
rename from src/more-infos/more-info-light.html
rename to src/dialogs/more-info/controls/more-info-light.html
index 9cbfb6dd12..2632d864aa 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/dialogs/more-info/controls/more-info-light.html
@@ -1,15 +1,15 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
 
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../../src/util/hass-mixins.html'>
 
-<link rel='import' href='../components/ha-labeled-slider.html'>
-<link rel='import' href='../components/ha-color-picker.html'>
-<link rel='import' href='../components/ha-attributes.html'>
+<link rel='import' href='../../../components/ha-labeled-slider.html'>
+<link rel='import' href='../../../components/ha-color-picker.html'>
+<link rel='import' href='../../../components/ha-attributes.html'>
 
 <dom-module id='more-info-light'>
   <template>
diff --git a/src/more-infos/more-info-lock.html b/src/dialogs/more-info/controls/more-info-lock.html
similarity index 82%
rename from src/more-infos/more-info-lock.html
rename to src/dialogs/more-info/controls/more-info-lock.html
index bf2d24bc8d..7395dfab8b 100644
--- a/src/more-infos/more-info-lock.html
+++ b/src/dialogs/more-info/controls/more-info-lock.html
@@ -1,8 +1,8 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
-<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
-<link rel='import' href='../components/ha-attributes.html'>
+<link rel='import' href='../../../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../../../bower_components/paper-input/paper-input.html'>
+<link rel='import' href='../../../components/ha-attributes.html'>
 
 <dom-module id='more-info-lock'>
   <template>
diff --git a/src/more-infos/more-info-media_player.html b/src/dialogs/more-info/controls/more-info-media_player.html
similarity index 93%
rename from src/more-infos/more-info-media_player.html
rename to src/dialogs/more-info/controls/more-info-media_player.html
index 01a67d66a3..ba93143f00 100644
--- a/src/more-infos/more-info-media_player.html
+++ b/src/dialogs/more-info/controls/more-info-media_player.html
@@ -1,16 +1,16 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
+<link rel='import' href='../../../../bower_components/iron-icon/iron-icon.html'>
 
-<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
-<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
-<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
-<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
+<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
+<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
 
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../../src/util/hass-mixins.html'>
 
 <dom-module id='more-info-media_player'>
   <template>
diff --git a/src/more-infos/more-info-script.html b/src/dialogs/more-info/controls/more-info-script.html
similarity index 77%
rename from src/more-infos/more-info-script.html
rename to src/dialogs/more-info/controls/more-info-script.html
index c6fe688c8a..c09d76e045 100644
--- a/src/more-infos/more-info-script.html
+++ b/src/dialogs/more-info/controls/more-info-script.html
@@ -1,6 +1,6 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
 <dom-module id='more-info-script'>
   <template>
diff --git a/src/more-infos/more-info-sun.html b/src/dialogs/more-info/controls/more-info-sun.html
similarity index 87%
rename from src/more-infos/more-info-sun.html
rename to src/dialogs/more-info/controls/more-info-sun.html
index 4a17e8604c..dfe47b747d 100644
--- a/src/more-infos/more-info-sun.html
+++ b/src/dialogs/more-info/controls/more-info-sun.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel="import" href="../components/ha-relative-time.html">
+<link rel="import" href="../../../components/ha-relative-time.html">
 
 <dom-module id="more-info-sun">
   <template>
diff --git a/src/more-infos/more-info-updater.html b/src/dialogs/more-info/controls/more-info-updater.html
similarity index 74%
rename from src/more-infos/more-info-updater.html
rename to src/dialogs/more-info/controls/more-info-updater.html
index a60130fa75..b69fd758d0 100644
--- a/src/more-infos/more-info-updater.html
+++ b/src/dialogs/more-info/controls/more-info-updater.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
 
 <dom-module id="more-info-updater">
   <template>
@@ -9,7 +9,7 @@
     </style>
 
     <div>
-      <a class='link' href='https://home-assistant.io/getting-started/updating/' target='_blank'>Update Instructions</a>
+      <a class='link' href='../../https://home-assistant.io/getting-started/updating/' target='_blank'>Update Instructions</a>
     </div>
   </template>
 </dom-module>
diff --git a/src/more-infos/more-info-vacuum.html b/src/dialogs/more-info/controls/more-info-vacuum.html
similarity index 88%
rename from src/more-infos/more-info-vacuum.html
rename to src/dialogs/more-info/controls/more-info-vacuum.html
index 58e8e52557..0f0c5e8d93 100644
--- a/src/more-infos/more-info-vacuum.html
+++ b/src/dialogs/more-info/controls/more-info-vacuum.html
@@ -1,15 +1,15 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../../bower_components/polymer/polymer-element.html'>
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
-<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
+<link rel='import' href='../../../../bower_components/iron-icon/iron-icon.html'>
 
-<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
-<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
+<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 
-<link rel="import" href="../components/ha-attributes.html">
+<link rel="import" href="../../../components/ha-attributes.html">
 
 <dom-module id='more-info-vacuum'>
   <template>
diff --git a/src/dialogs/more-info/more-info-controls.html b/src/dialogs/more-info/more-info-controls.html
new file mode 100644
index 0000000000..516ef89f70
--- /dev/null
+++ b/src/dialogs/more-info/more-info-controls.html
@@ -0,0 +1,165 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+<link rel="import" href="../../state-summary/state-card-content.html">
+<link rel='import' href='../../util/hass-mixins.html'>
+<link rel='import' href='../../resources/ha-style.html'>
+<link rel="import" href="./controls/more-info-content.html">
+
+<dom-module id="more-info-controls">
+  <template>
+    <style>
+      app-toolbar {
+        color: var(--more-info-header-color);
+        background-color: var(--more-info-header-background);
+      }
+
+      app-toolbar [main-title] {
+        /* Design guideline states 24px, changed to 16 to align with state info */
+        margin-left: 16px;
+      }
+
+      state-card-content {
+        display: block;
+        padding: 16px;
+      }
+
+      state-history-charts {
+        position: relative;
+        z-index: 1;
+        max-width: 365px;
+        margin-bottom: 16px;
+      }
+
+      paper-dialog-scrollable {
+        margin-bottom: 16px;
+      }
+
+      :host([domain=camera]) paper-dialog-scrollable {
+        margin: 0 -24px -5px;
+      }
+    </style>
+
+    <app-toolbar>
+      <paper-icon-button
+        icon='mdi:close'
+        dialog-dismiss
+      ></paper-icon-button>
+      <div main-title>[[_computeStateName(stateObj)]]</div>
+      <template is='dom-if' if='[[canConfigure]]'>
+        <paper-icon-button
+          icon='mdi:settings'
+          on-click='_gotoSettings'
+        ></paper-icon-button>
+      </template>
+    </app-toolbar>
+
+    <template is='dom-if' if="[[_computeShowStateInfo(stateObj)]]" restamp>
+      <state-card-content
+        state-obj="[[stateObj]]"
+        hass='[[hass]]' in-dialog></state-card-content>
+    </template>
+
+    <template is='dom-if' if="[[_computeShowHistoryComponent(hass, stateObj)]]" restamp>
+      <div>
+        <ha-state-history-data
+          hass='[[hass]]'
+          filter-type='recent-entity'
+          entity-id='[[stateObj.entity_id]]'
+          data='{{_stateHistory}}'
+          is-loading='{{_stateHistoryLoading}}'
+          cache-config='[[_cacheConfig]]'
+        ></ha-state-history-data>
+        <state-history-charts
+          history-data="[[_stateHistory]]"
+          is-loading-data="[[_stateHistoryLoading]]"
+          up-to-now
+        ></state-history-charts>
+      </div>
+    </template>
+    <paper-dialog-scrollable dialog-element='[[dialogElement]]'>
+      <more-info-content
+          state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
+    </paper-dialog-scrollable>
+  </template>
+</dom-module>
+
+<script>
+{
+  const DOMAINS_NO_INFO = [
+    'camera',
+    'configurator',
+    'history_graph',
+  ];
+  class MoreInfoControls extends window.hassMixins.EventsMixin(Polymer.Element) {
+    static get is() { return 'more-info-controls'; }
+    static get properties() {
+      return {
+        hass: Object,
+
+        stateObj: {
+          type: Object,
+          observer: '_stateObjChanged',
+        },
+
+        dialogElement: Object,
+        canConfigure: Boolean,
+
+        domain: {
+          type: String,
+          reflectToAttribute: true,
+          computed: '_computeDomain(stateObj)',
+        },
+
+        _stateHistory: Object,
+        _stateHistoryLoading: Boolean,
+        _cacheConfig: {
+          type: Object,
+          value: {
+            refresh: 60,
+            cacheKey: null,
+            hoursToShow: 24,
+          },
+        },
+      };
+    }
+
+    _computeShowStateInfo(stateObj) {
+      return !stateObj || !DOMAINS_NO_INFO.includes(window.hassUtil.computeDomain(stateObj));
+    }
+
+    _computeShowHistoryComponent(hass, stateObj) {
+      return hass && stateObj &&
+        window.hassUtil.isComponentLoaded(hass, 'history') &&
+        !window.hassUtil.DOMAINS_WITH_NO_HISTORY.includes(window.hassUtil.computeDomain(stateObj));
+    }
+
+    _computeDomain(stateObj) {
+      return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
+    }
+
+    _computeStateName(stateObj) {
+      return stateObj ? window.hassUtil.computeStateName(stateObj) : '';
+    }
+
+    _stateObjChanged(newVal) {
+      if (!newVal) {
+        return;
+      }
+
+      if (this._cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) {
+        this._cacheConfig = Object.assign(
+          {}, this._cacheConfig,
+          { cacheKey: `more_info.${newVal.entity_id}` }
+        );
+      }
+    }
+
+    _gotoSettings() {
+      this.fire('more-info-page', { page: 'settings' });
+    }
+  }
+  customElements.define(MoreInfoControls.is, MoreInfoControls);
+}
+</script>
diff --git a/src/dialogs/more-info/more-info-settings.html b/src/dialogs/more-info/more-info-settings.html
new file mode 100644
index 0000000000..d5b1e3589e
--- /dev/null
+++ b/src/dialogs/more-info/more-info-settings.html
@@ -0,0 +1,109 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.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='../../util/hass-mixins.html'>
+
+<dom-module id="more-info-settings">
+  <template>
+    <style>
+      app-toolbar {
+        color: var(--more-info-header-color);
+        background-color: var(--more-info-header-background);
+
+        /* to fit save button */
+        padding-right: 0;
+      }
+
+      app-toolbar [main-title] {
+        /* Design guideline states 24px, changed to 16 to align with more-info-controls */
+        margin-left: 16px;
+      }
+
+      app-toolbar paper-button {
+        font-size: .8em;
+        margin: 0;
+      }
+
+      .form {
+        padding: 0 24px 24px;
+      }
+    </style>
+
+    <app-toolbar>
+      <paper-icon-button
+        icon='mdi:arrow-left'
+        on-click='_backTapped'
+      ></paper-icon-button>
+      <div main-title>[[_computeStateName(stateObj)]]</div>
+      <paper-button on-click='_save'>Save</paper-button>
+    </app-toolbar>
+
+    <div class='form'>
+      <paper-input
+        value='{{_name}}'
+        label='Name'
+      ></paper-input>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+class MoreInfoSettings extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'more-info-settings'; }
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+
+      _componentLoaded: {
+        type: Boolean,
+        computed: '_computeComponentLoaded(hass)'
+      },
+
+      registryInfo: {
+        type: Object,
+        observer: '_registryInfoChanged',
+        notify: true,
+      },
+
+      _name: String,
+    };
+  }
+
+  _computeStateName(stateObj) {
+    if (!stateObj) return '';
+    return window.hassUtil.computeStateName(stateObj);
+  }
+
+  _computeComponentLoaded(hass) {
+    return window.hassUtil.isComponentLoaded(hass, 'config.entity_registry');
+  }
+
+  _registryInfoChanged(newVal) {
+    if (newVal) {
+      this._name = newVal.name;
+    } else {
+      this._name = '';
+    }
+  }
+
+  _backTapped() {
+    this.fire('more-info-page', { page: null });
+  }
+
+  _save() {
+    const data = {
+      name: this._name,
+    };
+
+    this.hass.callApi('post', `config/entity_registry/${this.stateObj.entity_id}`, data)
+      .then(
+        (info) => { this.registryInfo = info; },
+        () => { alert('save failed!'); }
+      );
+  }
+}
+customElements.define(MoreInfoSettings.is, MoreInfoSettings);
+</script>