Hassio fixes

panels/hassio/addon-view/hassio-addon-options.html

@@ -13,21 +13,26 @@
       paper-card {
         display: block;
       }
+      .errors {
+        color: var(--google-red-500);
+        margin-bottom: 16px;
+      }
       iron-autogrow-textarea {
         width: 100%;
       }
     </style>
     <paper-card heading='Options'>
       <div class="card-content">
+        <template is='dom-if' if='[[errors]]'>
+          <div class='errors'>[[errors]]</div>
+        </template>
         <iron-autogrow-textarea value="{{options}}"></iron-autogrow-textarea>
       </div>
       <div class="card-actions">
-        <ha-call-api-button
-          hass='[[hass]]'
+        <paper-button
+          on-tap='saveTapped'
           disabled='[[!optionsParsed]]'
-          data='[[computeOptionsData(optionsParsed)]]'
-          path="[[pathOptions(addon)]]"
-        >Save</ha-call-api-button>
+        >Save</paper-button>
       </div>
     </paper-card>
   </template>
@@ -56,6 +61,11 @@
       computed: 'parseOptions(options)',
     },
 
+    errors: {
+      type: String,
+      value: null,
+    },
+
     addonState: {
       type: Object,
       value: null,
@@ -75,6 +85,16 @@
     }
   },
 
+  saveTapped: function () {
+    this.errors = null;
+
+    this.hass.callApi('post', 'hassio/addons/' + this.addon + '/options', {
+      options: this.optionsParsed
+    }).catch(function (resp) {
+      this.errors = resp.body.message;
+    }.bind(this));
+  },
+
   computeOptionsData: function (optionsParsed) {
     return {
       options: optionsParsed,

panels/hassio/addon-view/hassio-addon-state.html

@@ -51,6 +51,11 @@
             >Start</ha-call-api-button>
           </template>
           <template is='dom-if' if='[[isRunning]]'>
+            <ha-call-api-button
+              class='warning'
+              hass='[[hass]]'
+              path="[[pathRestart(addon)]]"
+            >Restart</ha-call-api-button>
             <ha-call-api-button
               class='warning'
               hass='[[hass]]'
@@ -119,6 +124,10 @@
     return 'hassio/addons/' + addon + '/stop';
   },
 
+  pathRestart: function (addon) {
+    return 'hassio/addons/' + addon + '/restart';
+  },
+
   pathInstall: function (addon) {
     return 'hassio/addons/' + addon + '/install';
   },

panels/hassio/dashboard/hassio-dashboard.html

@@ -107,7 +107,7 @@
   },
 
   storeTapped: function () {
-    this.fire('hassio-show-store');
+    this.fire('hassio-show-page', { page: 'addon-store' });
   },
 });
 </script>

panels/hassio/dashboard/hassio-hass-info.html

@@ -16,6 +16,10 @@
     .info td:nth-child(2) {
       text-align: right;
     }
+    .errors {
+      color: var(--google-red-500);
+      margin-top: 16px;
+    }
   </style>
   <template>
     <paper-card heading="Home Assistant">
@@ -30,6 +34,9 @@
             <td>[[data.last_version]]</td>
           </tr>
         </table>
+        <template is='dom-if' if='[[errors]]'>
+          <div class='errors'>Error: [[errors]]</div>
+        </template>
       </div>
       <div class="card-actions">
         <template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
@@ -38,12 +45,11 @@
             path="hassio/homeassistant/update"
           >Update</ha-call-api-button>
         </template>
-        <ha-call-service-button
+        <ha-call-api-button
           class="warning"
           hass="[[hass]]"
-          domain="homeassistant"
-          service="restart"
-        >Restart</ha-call-service-button>
+          path="hassio/homeassistant/restart"
+        >Restart</ha-call-api-button>
       </div>
     </paper-card>
   </template>
@@ -64,6 +70,25 @@
     },
   },
 
+  listeners: {
+    'hass-api-called': 'apiCalled',
+  },
+
+  apiCalled: function (ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    var response = ev.detail.response;
+
+    if (typeof response.body === 'object') {
+      this.errors = response.body.message || 'Unknown error';
+    } else {
+      this.errors = response.body;
+    }
+  },
+
   computeUpdateAvailable: function (data) {
     return data.version !== data.last_version;
   },

panels/hassio/dashboard/hassio-host-info.html

@@ -15,6 +15,10 @@
     .info td:nth-child(2) {
       text-align: right;
     }
+    .errors {
+      color: var(--google-red-500);
+      margin-top: 16px;
+    }
   </style>
   <template>
     <paper-card heading="Host OS">
@@ -24,10 +28,6 @@
             <td>Hostname</td>
             <td>[[data.hostname]]</td>
           </tr>
-          <tr>
-            <td>Control version</td>
-            <td>[[data.version]]</td>
-          </tr>
           <tr>
             <td>Type</td>
             <td>[[data.type]]</td>
@@ -36,18 +36,33 @@
             <td>OS</td>
             <td>[[data.os]]</td>
           </tr>
+          <tr>
+            <td>Host Control version</td>
+            <td>[[data.version]]</td>
+          </tr>
+          <tr>
+            <td>Latest available version</td>
+            <td>[[data.last_version]]</td>
+          </tr>
         </table>
+        <template is='dom-if' if='[[errors]]'>
+          <div class='errors'>Error: [[errors]]</div>
+        </template>
       </div>
       <div class="card-actions">
-        <ha-call-api-button
-          hass='[[hass]]'
-          path="hassio/host/update"
-        >Update</ha-call-api-button>
-        <ha-call-api-button
-          class='warning'
-          hass='[[hass]]'
-          path="hassio/host/reboot"
-        >Reboot</ha-call-api-button>
+        <template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
+          <ha-call-api-button
+            hass='[[hass]]'
+            path="hassio/host/update"
+          >Update</ha-call-api-button>
+        </template>
+        <template is='dom-if' if='[[computeRebootAvailable(data)]]'>
+          <ha-call-api-button
+            class='warning'
+            hass='[[hass]]'
+            path="hassio/host/reboot"
+          >Reboot</ha-call-api-button>
+        </template>
       </div>
     </paper-card>
   </template>
@@ -66,6 +81,35 @@
       type: Object,
       value: {},
     },
+
+    errors: String,
+  },
+
+  listeners: {
+    'hass-api-called': 'apiCalled',
+  },
+
+  apiCalled: function (ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    var response = ev.detail.response;
+
+    if (typeof response.body === 'object') {
+      this.errors = response.body.message || 'Unknown error';
+    } else {
+      this.errors = response.body;
+    }
+  },
+
+  computeUpdateAvailable: function (data) {
+    return data.version !== data.last_version;
+  },
+
+  computeRebootAvailable: function (data) {
+    return data.features && data.features.indexOf('reboot') !== -1;
   },
 });
 </script>

panels/hassio/dashboard/hassio-supervisor-info.html

@@ -15,6 +15,10 @@
     .info td:nth-child(2) {
       text-align: right;
     }
+    .errors {
+      color: var(--google-red-500);
+      margin-top: 16px;
+    }
   </style>
   <template>
     <paper-card heading="Supervisor">
@@ -33,8 +37,12 @@
             <td>[[data.last_version]]</td>
           </tr>
         </table>
+        <template is='dom-if' if='[[errors]]'>
+          <div class='errors'>Error: [[errors]]</div>
+        </template>
       </div>
       <div class="card-actions">
+        <paper-button on-tap='supervisorLogsTapped'>View logs</paper-button>
         <template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
           <ha-call-api-button
             hass='[[hass]]'
@@ -64,10 +72,35 @@
       type: Object,
       value: {},
     },
+
+    errors: String,
+  },
+
+  listeners: {
+    'hass-api-called': 'apiCalled',
+  },
+
+  apiCalled: function (ev) {
+    if (ev.detail.success) {
+      this.errors = null;
+      return;
+    }
+
+    var response = ev.detail.response;
+
+    if (typeof response.body === 'object') {
+      this.errors = response.body.message || 'Unknown error';
+    } else {
+      this.errors = response.body;
+    }
   },
 
   computeUpdateAvailable: function (data) {
     return data.version !== data.last_version;
   },
+
+  supervisorLogsTapped: function () {
+    this.fire('hassio-show-page', { page: 'supervisor' });
+  }
 });
 </script>

panels/hassio/ha-panel-hassio.html

@@ -3,6 +3,7 @@
 <link rel="import" href="./dashboard/hassio-dashboard.html">
 <link rel="import" href="./addon-view/hassio-addon-view.html">
 <link rel="import" href="./addon-store/hassio-addon-store.html">
+<link rel="import" href="./supervisor/hassio-supervisor.html">
 <link rel="import" href="./hassio-loading.html">
 <link rel="import" href="./hassio-data.html">
 
@@ -52,11 +53,17 @@
 
     <template is='dom-if' if='[[addonStoreSelected(currentPage)]]'>
       <hassio-addon-store
-        id='addon-store'
         hass='[[hass]]'
         supervisor-info='[[supervisorInfo]]'
       ></hassio-addon-store>
     </template>
+
+    <template is='dom-if' if='[[supervisorSelected(currentPage)]]'>
+      <hassio-supervisor
+        hass='[[hass]]'
+        supervisor-info='[[supervisorInfo]]'
+      ></hassio-supervisor>
+    </template>
   </template>
 </dom-module>
 
@@ -121,13 +128,22 @@
 
   listeners: {
     'hassio-select-addon': 'addonSelected',
-    'hassio-show-store': 'showStore',
+    'hassio-show-page': 'showPage',
     'hass-api-called': 'apiCalled',
   },
 
   apiCalled: function (ev) {
     if (ev.detail.success) {
-      this.$.data.refresh();
+      var tries = 1;
+
+      var tryUpdate = function () {
+        this.$.data.refresh().catch(function () {
+          tries += 1;
+          setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
+        });
+      }.bind(this);
+
+      tryUpdate();
     }
   },
 
@@ -158,8 +174,8 @@
     }
   },
 
-  showStore: function () {
-    this.currentPage = 'addon-store';
+  showPage: function (ev) {
+    this.currentPage = ev.detail.page;
   },
 
   dashboardSelected: function (currentPage) {
@@ -174,5 +190,9 @@
     return currentPage === 'addon-view';
   },
 
+  supervisorSelected: function (currentPage) {
+    return currentPage === 'supervisor';
+  },
+
 });
 </script>