Show entities under configured integrations (#1663)

src/panels/config/config-entries/ha-config-entries.js

@@ -1,4 +1,5 @@
 import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
+import '@polymer/paper-tooltip/paper-tooltip.js';
 import '@polymer/paper-button/paper-button.js';
 import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-item/paper-item-body.js';
@@ -7,12 +8,14 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '@polymer/polymer/lib/utils/async.js';
 
+import '../../../components/entity/ha-state-icon.js';
 import '../../../layouts/hass-subpage.js';
 import '../../../resources/ha-style.js';
 
 import '../ha-config-section.js';
 import EventsMixin from '../../../mixins/events-mixin.js';
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
 
 let registeredDialog = false;
 
@@ -69,9 +72,17 @@ class HaConfigManager extends
         </template>
         <template is="dom-repeat" items="[[_entries]]">
           <div class="config-entry-row">
-            <paper-item-body two-line>
+            <paper-item-body three-line>
               <div>[[_computeIntegrationTitle(localize, item.domain)]]: [[item.title]]</div>
               <div secondary>[[item.state]] – added by [[item.source]]</div>
+              <div secondary>
+                <template is='dom-repeat' items='[[_computeConfigEntryEntities(hass, item, _entities)]]'>
+                  <span>
+                    <ha-state-icon state-obj='[[item]]'></ha-state-icon>
+                    <paper-tooltip position="bottom">[[_computeStateName(item)]]</paper-tooltip>
+                  </span>
+                </template>
+              </div>
             </paper-item-body>
             <paper-button on-click="_removeEntry">Remove</paper-button>
           </div>
@@ -106,6 +117,11 @@ class HaConfigManager extends
        */
       _entries: Array,
 
+      /**
+       * Entity Registry entries.
+       */
+      _entities: Array,
+
       /**
        * Current flows that are in progress and have not been started by a user.
        * For example, can be discovered devices that require more config.
@@ -178,25 +194,39 @@ class HaConfigManager extends
   }
 
   _loadData() {
-    this._loadEntries();
-    this._loadDiscovery();
-    this.hass.callApi('get', 'config/config_entries/flow_handlers')
-      .then((handlers) => { this._handlers = handlers; });
-  }
-
-  _loadEntries() {
     this.hass.callApi('get', 'config/config_entries/entry')
       .then((entries) => { this._entries = entries; });
-  }
 
-  _loadDiscovery() {
     this.hass.callApi('get', 'config/config_entries/flow')
       .then((progress) => { this._progress = progress; });
+
+    this.hass.callApi('get', 'config/config_entries/flow_handlers')
+      .then((handlers) => { this._handlers = handlers; });
+
+    this.hass.callWS({ type: 'config/entity_registry/list' })
+      .then((entities) => { this._entities = entities; });
   }
 
   _computeIntegrationTitle(localize, integration) {
     return localize(`component.${integration}.config.title`);
   }
+
+  _computeConfigEntryEntities(hass, configEntry, entities) {
+    if (!entities) {
+      return [];
+    }
+    const states = [];
+    entities.forEach((entity) => {
+      if (entity.config_entry_id === configEntry.entry_id && entity.entity_id in hass.states) {
+        states.push(hass.states[entity.entity_id]);
+      }
+    });
+    return states;
+  }
+
+  _computeStateName(stateObj) {
+    return computeStateName(stateObj);
+  }
 }
 
 customElements.define('ha-config-entries', HaConfigManager);