From 72bceff0fcfe7ba440cc1676ec0fe77ac0f6e200 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus.schoutsen@mycase.com>
Date: Sat, 26 Sep 2015 09:34:22 -0700
Subject: [PATCH] Add service description in dev tools

---
 src/components/services-list.html         |  6 +++---
 src/components/services-list.js           | 15 ++++++++-------
 src/layouts/partial-dev-call-service.html | 19 +++++++++++++------
 src/layouts/partial-dev-call-service.js   | 20 +++++++++++++++++++-
 4 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/components/services-list.html b/src/components/services-list.html
index 832ef4851e..08f2759e6a 100644
--- a/src/components/services-list.html
+++ b/src/components/services-list.html
@@ -23,10 +23,10 @@
 
   <template>
     <ul>
-      <template is='dom-repeat' items="[[serviceDomains]]" as="domain">
-          <template is='dom-repeat' items="[[domain.services]]" as="service">
+      <template is='dom-repeat' items="[[computeDomains(serviceDomains)]]" as="domain">
+          <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>
diff --git a/src/components/services-list.js b/src/components/services-list.js
index 6a06225383..080026889e 100644
--- a/src/components/services-list.js
+++ b/src/components/services-list.js
@@ -13,21 +13,22 @@ export default new Polymer({
   properties: {
     serviceDomains: {
       type: Array,
-      bindNuclear: [
-        serviceGetters.entityMap,
-        (map) => map.valueSeq().sortBy((domain) => domain.domain).toJS(),
-      ],
+      bindNuclear: serviceGetters.entityMap,
     },
   },
 
-  computeServices(domain) {
-    return this.services.get(domain).toArray();
+  computeDomains(serviceDomains) {
+    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});
   },
 });
diff --git a/src/layouts/partial-dev-call-service.html b/src/layouts/partial-dev-call-service.html
index fcfd790cf4..761c1c4beb 100644
--- a/src/layouts/partial-dev-call-service.html
+++ b/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'>
-            <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
-            <paper-input label="Service" value='{{service}}'></paper-input>
-            <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
-            <paper-button on-click='callService' raised>Call Service</paper-button>
+          <div class='layout vertical flex'>
+            <div class='ha-form'>
+              <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
+              <paper-input label="Service" value='{{service}}'></paper-input>
+              <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>
diff --git a/src/layouts/partial-dev-call-service.js b/src/layouts/partial-dev-call-service.js
index 14dcae8459..8fdf084969 100644
--- a/src/layouts/partial-dev-call-service.js
+++ b/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) {