Add service description in dev tools

src/components/services-list.html

@@ -23,10 +23,10 @@
 
   <template>
     <ul>
-      <template is='dom-repeat' items="[[serviceDomains]]" as="domain">
+      <template is='dom-repeat' items="[[computeDomains(serviceDomains)]]" as="domain">
-          <template is='dom-repeat' items="[[domain.services]]" as="service">
+          <template is='dom-repeat' items="[[computeServices(serviceDomains, domain)]]" as="service">
             <li><a href='#' on-click='serviceClicked'>
-              <span>[[domain.domain]]</span>/<span>[[service]]</span>
+              <span>[[domain]]</span>/<span>[[service]]</span>
             </a></li>
           </template>
       </template>

src/components/services-list.js

@@ -13,21 +13,22 @@ export default new Polymer({
   properties: {
     serviceDomains: {
       type: Array,
-      bindNuclear: [
+      bindNuclear: serviceGetters.entityMap,
-        serviceGetters.entityMap,
-        (map) => map.valueSeq().sortBy((domain) => domain.domain).toJS(),
-      ],
     },
   },
 
-  computeServices(domain) {
+  computeDomains(serviceDomains) {
-    return this.services.get(domain).toArray();
+    return serviceDomains.valueSeq().map((domain) => domain.domain).sort().toJS();
+  },
+
+  computeServices(serviceDomains, domain) {
+    return serviceDomains.get(domain).get('services').keySeq().toArray();
   },
 
   serviceClicked(ev) {
     ev.preventDefault();
     this.fire(
-      'service-selected', {domain: ev.model.domain.domain,
+      'service-selected', {domain: ev.model.domain,
                            service: ev.model.service});
   },
 });

src/layouts/partial-dev-call-service.html

@@ -18,6 +18,11 @@
     .ha-form {
       margin-right: 16px;
     }
+
+    .description {
+      margin-top: 24px;
+      white-space: pre-wrap;
+    }
   </style>
   <template>
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
@@ -29,13 +34,15 @@
         </p>
 
         <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='ha-form flex'>
+          <div class='layout vertical flex'>
-            <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
+            <div class='ha-form'>
-            <paper-input label="Service" value='{{service}}'></paper-input>
+              <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
-            <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
+              <paper-input label="Service" value='{{service}}'></paper-input>
-            <paper-button on-click='callService' raised>Call Service</paper-button>
+              <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
+              <paper-button on-click='callService' raised>Call Service</paper-button>
+            </div>
+            <div class='description'>[[description]]</div>
           </div>
-
           <div>
             <h4>Available services:</h4>
             <services-list on-service-selected='serviceSelected'></services-list>

src/layouts/partial-dev-call-service.js

@@ -1,4 +1,8 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
+import {
+  reactor,
+  serviceActions,
+  serviceGetters,
+} from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
@@ -33,6 +37,20 @@ export default new Polymer({
       type: String,
       value: '',
     },
+
+    description: {
+      type: String,
+      computed: 'computeDescription(domain, service)',
+    },
+  },
+
+  computeDescription(domain, service) {
+    return reactor.evaluate([
+      serviceGetters.entityMap,
+      map => map.has(domain) && map.get(domain).get('services').has(service) ?
+             JSON.stringify(map.get(domain).get('services').get(service).toJS(), null, 2) :
+             'No description available',
+    ]);
   },
 
   serviceSelected(ev) {