From 1b9b82a32becf3c5e7c7b6d5a3613b15d9a1785f Mon Sep 17 00:00:00 2001
From: Andrey <andreyklinger@gmail.com>
Date: Fri, 18 Aug 2017 17:04:25 +0300
Subject: [PATCH 1/2] Improvements for zwave group config

---
 panels/config/zwave/zwave-groups.html | 102 ++++++++++++++++----------
 1 file changed, 64 insertions(+), 38 deletions(-)

diff --git a/panels/config/zwave/zwave-groups.html b/panels/config/zwave/zwave-groups.html
index 02deb5fe7eea..4f0a0d3f97a1 100644
--- a/panels/config/zwave/zwave-groups.html
+++ b/panels/config/zwave/zwave-groups.html
@@ -32,61 +32,65 @@
         padding-right: 24px;
       }
     </style>
-      <div class='content'>
-        <paper-card heading='Node group associations'>
-          <div class='device-picker'>
-          <paper-dropdown-menu label="Node to control" class='flex'>
-            <paper-listbox
-              slot="dropdown-content"
-              selected='{{selectedTargetNode}}'>
-               <template is='dom-repeat' items='[[nodes]]' as='state'>
-                <paper-item>[[computeSelectCaption(state)]]</paper-item>
-              </template>
-            </paper-listbox>
-          </paper-dropdown-menu>
-          </div>
-        <template is='dom-if' if='[[!computeIsTargetNodeSelected(selectedTargetNode)]]'>
-          <!--TODO make api for getting groups and members-->
-          <div class='device-picker'>
+    <div class='content'>
+      <paper-card heading='Node group associations'>
+        <!--TODO make api for getting groups and members-->
+        <div class='device-picker'><div class='device-picker'>
           <paper-dropdown-menu label="Group" class='flex'>
             <paper-listbox
-              slot="dropdown-content"
-              selected='{{selectedGroup}}'>
+                slot="dropdown-content"
+                selected='{{selectedGroup}}'>
               <template is='dom-repeat' items='[[groups]]' as='state'>
                 <paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
+        </div>
+        <template is='dom-if' if='[[computeIsGroupSelected(selectedGroup)]]'>
+          <div class='device-picker'>
+            <paper-dropdown-menu label="Node to control" class='flex'>
+              <paper-listbox
+                  slot="dropdown-content"
+                  selected='{{selectedTargetNode}}'>
+                <template is='dom-repeat' items='[[nodes]]' as='state'>
+                  <paper-item>[[computeSelectCaption(state)]]</paper-item>
+                </template>
+              </paper-listbox>
+            </paper-dropdown-menu>
           </div>
-        </template>
-        <template is='dom-if' if='[[!computeIsGroupSelected(selectedGroup)]]'>
+
           <div class='help-text'>
             <span>Other Nodes in this group:</span>
             <template is='dom-repeat' items='[[otherGroupNodes]]' as='state'>
-            <span>[[state]]</span>
+              <div>[[state]]</div>
             </template>
           </div>
           <div class='help-text'>
             <span>Max Associations:</span>
             <span>[[maxAssociations]]</span>
           </div>
+        </template>
+
+        <template is='dom-if' if='[[computeIsTargetNodeSelected(selectedTargetNode)]]'>
           <div class='card-actions'>
             <template is='dom-if' if='[[!noAssociationsLeft]]'>
               <ha-call-service-button
-                hass='[[hass]]'
-                domain='zwave'
-                service='change_association'
-                service-data='[[computeAssocServiceData(selectedGroup, "add")]]'
+                  hass='[[hass]]'
+                  domain='zwave'
+                  service='change_association'
+                  service-data='[[computeAssocServiceData(selectedGroup, "add")]]'
               >Add To Group</ha-call-service-button>
             </template>
-          <ha-call-service-button
-            hass='[[hass]]'
-            domain='zwave'
-            service='change_association'
-            service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
-          >Remove From Group</ha-call-service-button>
-        </div>
-      </template>
+            <template is='dom-if' if='[[computeTargetInGroup(selectedGroup, selectedTargetNode)]]'>
+              <ha-call-service-button
+                  hass='[[hass]]'
+                  domain='zwave'
+                  service='change_association'
+                  service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
+              >Remove From Group</ha-call-service-button>
+            </template>
+          </div>
+        </template>
       </paper-card>
     </div>
   </template>
@@ -164,15 +168,37 @@
   computeMaxAssociations: function (selectedGroup) {
     if (selectedGroup === -1) return -1;
     var maxAssociations = this.groups[selectedGroup].value.max_associations;
-    if (!maxAssociations) return ['None'];
+    if (!maxAssociations) return 'None';
     return maxAssociations;
   },
 
   computeOtherGroupNodes: function (selectedGroup) {
     if (selectedGroup === -1) return -1;
-    var associations = Object.values(this.groups[selectedGroup].value.associations);
+    var associations = Object.values(this.groups[selectedGroup].value.association_instances);
     if (!associations.length) return ['None'];
-    return associations;
+    return associations.map((assoc) => {
+      if (!assoc.length || assoc.length !== 2) {
+        return 'Unknown Node: ' + assoc;
+      }
+      const id = assoc[0];
+      const instance = assoc[1];
+      const node = this.nodes.find(n => n.attributes.node_id === id);
+      if (!node) {
+        return 'Unknown Node (id: ' + (instance ? id + '.' + instance : id) + ')';
+      }
+      let caption = this.computeSelectCaption(node);
+      if (instance) {
+        caption += '/ Instance: ' + instance;
+      }
+      return caption;
+    });
+  },
+
+  computeTargetInGroup: function (selectedGroup, selectedTargetNode) {
+    if (selectedGroup === -1 || selectedTargetNode === -1) return false;
+    const associations = Object.values(this.groups[selectedGroup].value.associations);
+    if (!associations.length) return false;
+    return associations.indexOf(this.nodes[selectedTargetNode].attributes.node_id) !== -1;
   },
 
   computeSelectCaption: function (stateObj) {
@@ -186,11 +212,11 @@
   },
 
   computeIsTargetNodeSelected: function (selectedTargetNode) {
-    return (!this.nodes || selectedTargetNode === -1);
+    return this.nodes && selectedTargetNode !== -1;
   },
 
   computeIsGroupSelected: function (selectedGroup) {
-    return (!this.nodes || this.selectedNode === -1 || selectedGroup === -1);
+    return this.nodes && this.selectedNode !== -1 && selectedGroup !== -1;
   },
 
   computeAssocServiceData: function (selectedGroup, type) {

From 57b6b412e68de83e982dc41bf61b5775fbefea92 Mon Sep 17 00:00:00 2001
From: Andrey <andreyklinger@gmail.com>
Date: Sat, 19 Aug 2017 16:58:21 +0300
Subject: [PATCH 2/2] Apply ha-config-section

---
 panels/config/zwave/ha-config-zwave.html    | 100 ++++----
 panels/config/zwave/zwave-groups.html       | 110 +++++----
 panels/config/zwave/zwave-log.html          |  32 ++-
 panels/config/zwave/zwave-network.html      | 246 +++++++++++---------
 panels/config/zwave/zwave-node-options.html |   4 +-
 5 files changed, 263 insertions(+), 229 deletions(-)

diff --git a/panels/config/zwave/ha-config-zwave.html b/panels/config/zwave/ha-config-zwave.html
index 2e943ae78b21..022857935d07 100644
--- a/panels/config/zwave/ha-config-zwave.html
+++ b/panels/config/zwave/ha-config-zwave.html
@@ -13,6 +13,9 @@
 <link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 <link rel="import" href="../../../src/components/ha-service-description.html">
 <link rel="import" href="../../../src/resources/ha-style.html">
+
+<link rel="import" href="../ha-config-section.html">
+
 <link rel="import" href="./zwave-log.html">
 <link rel="import" href="./zwave-network.html">
 <link rel="import" href="./zwave-node-information.html">
@@ -84,21 +87,28 @@
         hass='[[hass]]'
       ></zwave-node-options>
 
-      <div class='content'>
-        <zwave-network
-          id='zwave-network'
-          hass='[[hass]]'
-        ></zwave-network>
-      </div>
-<!--Node card-->
-      <div class='content'>
-        <paper-card heading='Z-Wave Node Management'>
+      <zwave-network
+        id='zwave-network'
+        is-wide='[[isWide]]'
+        hass='[[hass]]'
+      ></zwave-network>
+
+      <!--Node card-->
+      <ha-config-section is-wide='[[isWide]]'>
+        <div style="position: relative" slot='header'>
+          <span>Z-Wave Node Management</span>
           <paper-icon-button
-            class='toggle-help-icon'
+            class="toggle-help-icon"
             on-tap='toggleHelp'
             icon='mdi:help-circle'
           ></paper-icon-button>
 
+        </div>
+        <span slot='introduction'>
+          Run Z-Wave commands that affect a single node. Pick a node to see a list of available commands.
+        </span>
+
+        <paper-card class="content">
           <div class='device-picker'>
             <paper-dropdown-menu label="Nodes" class="flex">
               <paper-listbox
@@ -234,35 +244,32 @@
            </template>
           </template>
         </paper-card>
-        </div>
-<!--Node info card-->
+
         <template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
+          <!--Node info card-->
           <zwave-node-information
             id='zwave-node-information'
             nodes='[[nodes]]'
             selected-node='[[selectedNode]]'
           ></zwave-node-information>
-        </template>
-<!--Value card-->
-        <template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
+
+          <!--Value card-->
           <zwave-values
             hass='[[hass]]'
             nodes='[[nodes]]'
             selected-node='[[selectedNode]]'
             values='[[values]]'
           ></zwave-values>
-        </template>
-<!--Group card-->
-        <template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
+
+          <!--Group card-->
           <zwave-groups
             hass='[[hass]]'
             nodes='[[nodes]]'
             selected-node='[[selectedNode]]'
             groups='[[groups]]'
           ></zwave-groups>
-        </template>
-<!--Config card-->
-        <template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
+
+          <!--Config card-->
           <zwave-node-config
             hass='[[hass]]'
             nodes='[[nodes]]'
@@ -270,23 +277,24 @@
             config='[[config]]'
           ></zwave-node-config>
         </template>
-<!--User Codes-->
-        <template is='dom-if' if='{{hasNodeUserCodes}}'>
-          <zwave-usercodes
-            id='zwave-usercodes'
-            hass='[[hass]]'
-            nodes='[[nodes]]'
-            user-codes='[[userCodes]]'
-            selected-node='[[selectedNode]]'
-          ></zwave-usercodes>
-        </template>
-<!--Ozw log-->
-        <div class='content'>
-          <ozw-log
-            id='ozw-log'
-            hass='[[hass]]'
-          ></ozw-log>
-        </div>
+      </ha-config-section>
+
+      <!--User Codes-->
+      <template is='dom-if' if='{{hasNodeUserCodes}}'>
+        <zwave-usercodes
+          id='zwave-usercodes'
+          hass='[[hass]]'
+          nodes='[[nodes]]'
+          user-codes='[[userCodes]]'
+          selected-node='[[selectedNode]]'
+        ></zwave-usercodes>
+      </template>
+
+      <!--Ozw log-->
+      <ozw-log
+        is-wide='[[isWide]]'
+        hass='[[hass]]'
+      ></ozw-log>
 
      </app-header-layout>
   </template>
@@ -406,28 +414,28 @@
     this.selectedGroup = -1;
 
     this.hass.callApi('GET', 'zwave/config/' + this.nodes[selectedNode].attributes.node_id).then(
-      function (configs) {
+      (configs) => {
         this.config = this._objToArray(configs);
-      }.bind(this));
+      });
 
     this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(
-      function (values) {
+      (values) => {
         this.values = this._objToArray(values);
-      }.bind(this));
+      });
 
     this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then(
-      function (groups) {
+      (groups) => {
         this.groups = this._objToArray(groups);
-      }.bind(this));
+      });
 
     this.hasNodeUserCodes = false;
     this.notifyPath('hasNodeUserCodes');
     this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then(
-      function (usercodes) {
+      (usercodes) => {
         this.userCodes = this._objToArray(usercodes);
         this.hasNodeUserCodes = this.userCodes.length > 0;
         this.notifyPath('hasNodeUserCodes');
-      }.bind(this));
+      });
   },
 
   computeSelectedEntityAttrs: function (selectedEntity) {
diff --git a/panels/config/zwave/zwave-groups.html b/panels/config/zwave/zwave-groups.html
index 4f0a0d3f97a1..38345f787bc5 100644
--- a/panels/config/zwave/zwave-groups.html
+++ b/panels/config/zwave/zwave-groups.html
@@ -30,69 +30,68 @@
       .help-text {
         padding-left: 24px;
         padding-right: 24px;
+        padding-bottom: 12px;
       }
     </style>
-    <div class='content'>
-      <paper-card heading='Node group associations'>
-        <!--TODO make api for getting groups and members-->
-        <div class='device-picker'><div class='device-picker'>
-          <paper-dropdown-menu label="Group" class='flex'>
+    <paper-card class="content" heading='Node group associations'>
+      <!--TODO make api for getting groups and members-->
+      <div class='device-picker'>
+        <paper-dropdown-menu label="Group" class='flex'>
+          <paper-listbox
+              slot="dropdown-content"
+              selected='{{selectedGroup}}'>
+            <template is='dom-repeat' items='[[groups]]' as='state'>
+              <paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </div>
+      <template is='dom-if' if='[[computeIsGroupSelected(selectedGroup)]]'>
+        <div class='device-picker'>
+          <paper-dropdown-menu label="Node to control" class='flex'>
             <paper-listbox
                 slot="dropdown-content"
-                selected='{{selectedGroup}}'>
-              <template is='dom-repeat' items='[[groups]]' as='state'>
-                <paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
+                selected='{{selectedTargetNode}}'>
+              <template is='dom-repeat' items='[[nodes]]' as='state'>
+                <paper-item>[[computeSelectCaption(state)]]</paper-item>
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
-        <template is='dom-if' if='[[computeIsGroupSelected(selectedGroup)]]'>
-          <div class='device-picker'>
-            <paper-dropdown-menu label="Node to control" class='flex'>
-              <paper-listbox
-                  slot="dropdown-content"
-                  selected='{{selectedTargetNode}}'>
-                <template is='dom-repeat' items='[[nodes]]' as='state'>
-                  <paper-item>[[computeSelectCaption(state)]]</paper-item>
-                </template>
-              </paper-listbox>
-            </paper-dropdown-menu>
-          </div>
-
-          <div class='help-text'>
-            <span>Other Nodes in this group:</span>
-            <template is='dom-repeat' items='[[otherGroupNodes]]' as='state'>
-              <div>[[state]]</div>
-            </template>
-          </div>
-          <div class='help-text'>
-            <span>Max Associations:</span>
-            <span>[[maxAssociations]]</span>
-          </div>
-        </template>
-
-        <template is='dom-if' if='[[computeIsTargetNodeSelected(selectedTargetNode)]]'>
-          <div class='card-actions'>
-            <template is='dom-if' if='[[!noAssociationsLeft]]'>
-              <ha-call-service-button
-                  hass='[[hass]]'
-                  domain='zwave'
-                  service='change_association'
-                  service-data='[[computeAssocServiceData(selectedGroup, "add")]]'
-              >Add To Group</ha-call-service-button>
-            </template>
-            <template is='dom-if' if='[[computeTargetInGroup(selectedGroup, selectedTargetNode)]]'>
-              <ha-call-service-button
-                  hass='[[hass]]'
-                  domain='zwave'
-                  service='change_association'
-                  service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
-              >Remove From Group</ha-call-service-button>
-            </template>
-          </div>
-        </template>
-      </paper-card>
-    </div>
+
+        <div class='help-text'>
+          <span>Other Nodes in this group:</span>
+          <template is='dom-repeat' items='[[otherGroupNodes]]' as='state'>
+            <div>[[state]]</div>
+          </template>
+        </div>
+        <div class='help-text'>
+          <span>Max Associations:</span>
+          <span>[[maxAssociations]]</span>
+        </div>
+      </template>
+
+      <template is='dom-if' if='[[computeIsTargetNodeSelected(selectedTargetNode)]]'>
+        <div class='card-actions'>
+          <template is='dom-if' if='[[!noAssociationsLeft]]'>
+            <ha-call-service-button
+                hass='[[hass]]'
+                domain='zwave'
+                service='change_association'
+                service-data='[[computeAssocServiceData(selectedGroup, "add")]]'
+            >Add To Group</ha-call-service-button>
+          </template>
+          <template is='dom-if' if='[[computeTargetInGroup(selectedGroup, selectedTargetNode)]]'>
+            <ha-call-service-button
+                hass='[[hass]]'
+                domain='zwave'
+                service='change_association'
+                service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
+            >Remove From Group</ha-call-service-button>
+          </template>
+        </div>
+      </template>
+    </paper-card>
   </template>
 </dom-module>
 
@@ -249,4 +248,3 @@
   },
 });
 </script>
-
diff --git a/panels/config/zwave/zwave-log.html b/panels/config/zwave/zwave-log.html
index 0487765cd295..27d8c1b6a0ac 100644
--- a/panels/config/zwave/zwave-log.html
+++ b/panels/config/zwave/zwave-log.html
@@ -2,6 +2,8 @@
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 
+<link rel="import" href="../ha-config-section.html">
+
 <dom-module id='ozw-log'>
   <template>
     <style include="iron-flex ha-style">
@@ -15,14 +17,17 @@
         max-width: 600px;
       }
     </style>
-    <paper-card heading='OZW Log'>
-      <div class='help-text'>
-        <pre>[[ozwLogs]]</pre>
-      </div>
-      <div class="card-actions">
-        <paper-button raised on-tap='refreshLog'>Refresh</paper-button>
-      </div>
-    </paper-card>
+    <ha-config-section is-wide='[[isWide]]'>
+      <span slot='header'>OZW Log</span>
+      <paper-card>
+        <div class='help-text'>
+          <pre>[[ozwLogs]]</pre>
+        </div>
+        <div class="card-actions">
+          <paper-button raised on-tap='refreshLog'>Refresh</paper-button>
+        </div>
+      </paper-card>
+    </ha-config-section>
   </template>
 </dom-module>
 <script>
@@ -35,18 +40,23 @@
       type: Object,
     },
 
+    isWide: {
+      type: Boolean,
+      value: false,
+    },
+
     ozwLogs: {
       type: String,
-      value: ''
+      value: 'Refresh to pull log'
     },
   },
 
   refreshLog: function () {
     this.ozwLogs = 'Loading ozw log...';
     this.hass.callApi('GET', 'zwave/ozwlog')
-      .then(function (info) {
+      .then((info) => {
         this.ozwLogs = info;
-      }.bind(this));
+      });
   },
 });
 </script>
diff --git a/panels/config/zwave/zwave-network.html b/panels/config/zwave/zwave-network.html
index 73be3d928b30..a5f585a53c3c 100644
--- a/panels/config/zwave/zwave-network.html
+++ b/panels/config/zwave/zwave-network.html
@@ -4,6 +4,8 @@
 <link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 <link rel="import" href="../../../src/components/ha-service-description.html">
 
+<link rel="import" href="../ha-config-section.html">
+
 <dom-module id='zwave-network'>
   <template>
     <style include="iron-flex ha-style">
@@ -23,7 +25,7 @@
 
       .toggle-help-icon {
         position: absolute;
-        top: 6px;
+        top: -6px;
         right: 0;
         color: var(--primary-color);
       }
@@ -37,121 +39,132 @@
         display: none;
       }
     </style>
-    <paper-card heading='Z-Wave Network Management'>
-      <paper-icon-button
-        class="toggle-help-icon"
-        on-tap='helpTap'
-        icon='mdi:help-circle'
-      ></paper-icon-button>
-      <div class='card-actions'>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='add_node_secure'
-        >Add Node Secure</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='add_node_secure'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='add_node'
-        >Add Node</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='add_node'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='remove_node'
-        >Remove Node</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='remove_node'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-      </div>
-      <div class='card-actions warning'>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='cancel_command'
-        >Cancel Command</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='cancel_command'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-      </div>
-      <div class='card-actions'>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='heal_network'
-        >Heal Network</ha-call-service-button>
-
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='start_network'
-        >Start Network</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='start_network'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='stop_network'
-        >Stop Network</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='stop_network'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='soft_reset'
-        >Soft Reset</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='soft_reset'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
-
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='test_network'
-        >Test Network</ha-call-service-button>
-        <ha-service-description
-          hass='[[hass]]'
-          domain='zwave'
-          service='test_network'
-          hidden$='[[!showDescription]]'
-        ></ha-service-description>
+    <ha-config-section is-wide='[[isWide]]'>
+      <div style="position: relative" slot='header'>
+        <span>Z-Wave Network Management</span>
+        <paper-icon-button
+          class="toggle-help-icon"
+          on-tap='helpTap'
+          icon='mdi:help-circle'
+        ></paper-icon-button>
 
       </div>
-    </paper-card>
+      <span slot='introduction'>
+        Run commands that affect the Z-Wave network. You won't get feedback on whether the command succeeded, but you can look in the OZW Log to try to figure out.
+      </span>
+
+
+      <paper-card class="content">
+        <div class='card-actions'>
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='add_node_secure'
+          >Add Node Secure</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='add_node_secure'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='add_node'
+          >Add Node</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='add_node'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='remove_node'
+          >Remove Node</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='remove_node'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+        </div>
+        <div class='card-actions warning'>
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='cancel_command'
+          >Cancel Command</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='cancel_command'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+        </div>
+        <div class='card-actions'>
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='heal_network'
+          >Heal Network</ha-call-service-button>
+
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='start_network'
+          >Start Network</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='start_network'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='stop_network'
+          >Stop Network</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='stop_network'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='soft_reset'
+          >Soft Reset</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='soft_reset'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+          <ha-call-service-button
+            hass='[[hass]]'
+            domain='zwave'
+            service='test_network'
+          >Test Network</ha-call-service-button>
+          <ha-service-description
+            hass='[[hass]]'
+            domain='zwave'
+            service='test_network'
+            hidden$='[[!showDescription]]'
+          ></ha-service-description>
+
+        </div>
+      </paper-card>
+    </ha-config-section>
   </template>
 </dom-module>
 <script>
@@ -164,6 +177,11 @@
       type: Object,
     },
 
+    isWide: {
+      type: Boolean,
+      value: false,
+    },
+
     showDescription: {
       type: Boolean,
       value: false,
diff --git a/panels/config/zwave/zwave-node-options.html b/panels/config/zwave/zwave-node-options.html
index 103a1a25a3bc..dfeb0950099b 100644
--- a/panels/config/zwave/zwave-node-options.html
+++ b/panels/config/zwave/zwave-node-options.html
@@ -17,9 +17,9 @@
 <dom-module id="zwave-node-options">
   <template>
     <ha-config-section is-wide='[[isWide]]'>
-      <span slot='header'>Z-Wave</span>
+      <span slot='header'>Z-Wave entities</span>
       <span slot='introduction'>
-        Z-Wave devices contain a lot of options. These controls will allow you to get into the nitty gritty details.
+        Z-Wave entities contain a lot of options. These controls will allow you to get into the nitty gritty details.
       </span>
 
       <ha-entity-config