Supervisor dialogs (#5740)

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -116,6 +116,7 @@ class HassioAddonConfig extends LitElement {
       title: this.addon.name,
       text: "Are you sure you want to reset all your options?",
       confirmText: "reset options",
+      dismissText: "no",
     });
 
     if (!confirmed) {

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -35,6 +35,7 @@ import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-card-content";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
 import { hassioStyle } from "../../resources/hassio-style";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 
 const STAGE_ICON = {
   stable: "mdi:check-circle",
@@ -407,29 +408,8 @@ class HassioAddonInfo extends LitElement {
         <div class="card-actions">
           ${this.addon.version
             ? html`
-                <mwc-button class="warning" @click=${this._uninstallClicked}>
-                  Uninstall
-                </mwc-button>
-                ${this.addon.build
-                  ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/rebuild"
-                      >
-                        Rebuild
-                      </ha-call-api-button>
-                    `
-                  : ""}
                 ${this._computeIsRunning
                   ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/restart"
-                      >
-                        Restart
-                      </ha-call-api-button>
                       <ha-call-api-button
                         class="warning"
                         .hass=${this.hass}
@@ -437,6 +417,13 @@ class HassioAddonInfo extends LitElement {
                       >
                         Stop
                       </ha-call-api-button>
+                      <ha-call-api-button
+                        class="warning"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/restart"
+                      >
+                        Restart
+                      </ha-call-api-button>
                     `
                   : html`
                       <ha-call-api-button
@@ -468,6 +455,23 @@ class HassioAddonInfo extends LitElement {
                       </mwc-button>
                     `
                   : ""}
+                <mwc-button
+                  class=" right warning"
+                  @click=${this._uninstallClicked}
+                >
+                  Uninstall
+                </mwc-button>
+                ${this.addon.build
+                  ? html`
+                      <ha-call-api-button
+                        class="warning right"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/rebuild"
+                      >
+                        Rebuild
+                      </ha-call-api-button>
+                    `
+                  : ""}
               `
             : html`
                 ${!this.addon.available
@@ -801,9 +805,17 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _uninstallClicked(): Promise<void> {
-    if (!confirm("Are you sure you want to uninstall this add-on?")) {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.addon.name,
+      text: "Are you sure you want to uninstall this add-on?",
+      confirmText: "uninstall add-on",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
       return;
     }
+
     this._error = undefined;
     try {
       await uninstallHassioAddon(this.hass, this.addon.slug);

hassio/src/system/hassio-host-info.ts

@@ -12,13 +12,23 @@ import {
 import "../../../src/components/buttons/ha-call-api-button";
 import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
+  fetchHassioHostInfo,
   HassioHassOSInfo,
   HassioHostInfo as HassioHostInfoType,
+  rebootHost,
+  shutdownHost,
+  updateOS,
+  changeHostOptions,
 } from "../../../src/data/hassio/host";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 import { hassioStyle } from "../resources/hassio-style";
+import {
+  showConfirmationDialog,
+  showAlertDialog,
+  showPromptDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
 
 @customElement("hassio-host-info")
 class HassioHostInfo extends LitElement {
@@ -76,21 +86,15 @@ class HassioHostInfo extends LitElement {
         <div class="card-actions">
           ${this.hostInfo.features.includes("reboot")
             ? html`
-                <ha-call-api-button
+                <mwc-button class="warning" @click=${this._rebootHost}
-                  class="warning"
+                  >Reboot</mwc-button
-                  .hass=${this.hass}
-                  path="hassio/host/reboot"
-                  >Reboot</ha-call-api-button
                 >
               `
             : ""}
           ${this.hostInfo.features.includes("shutdown")
             ? html`
-                <ha-call-api-button
+                <mwc-button class="warning" @click=${this._shutdownHost}
-                  class="warning"
+                  >Shutdown</mwc-button
-                  .hass=${this.hass}
-                  path="hassio/host/shutdown"
-                  >Shutdown</ha-call-api-button
                 >
               `
             : ""}
@@ -106,11 +110,7 @@ class HassioHostInfo extends LitElement {
               `
             : ""}
           ${this.hostInfo.version !== this.hostInfo.version_latest
-            ? html`
+            ? html` <mwc-button @click=${this._updateOS}>Update</mwc-button> `
-                <ha-call-api-button .hass=${this.hass} path="hassio/os/update"
-                  >Update</ha-call-api-button
-                >
-              `
             : ""}
         </div>
       </paper-card>
@@ -189,6 +189,72 @@ class HassioHostInfo extends LitElement {
     }
   }
 
+  private async _rebootHost(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: "Reboot",
+      text: "Are you sure you want to reboot the host?",
+      confirmText: "reboot host",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await rebootHost(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to reboot",
+        text: err.body.message,
+      });
+    }
+  }
+
+  private async _shutdownHost(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: "Shutdown",
+      text: "Are you sure you want to shutdown the host?",
+      confirmText: "shutdown host",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await shutdownHost(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to shutdown",
+        text: err.body.message,
+      });
+    }
+  }
+
+  private async _updateOS(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: "Update",
+      text: "Are you sure you want to update the OS?",
+      confirmText: "update os",
+      dismissText: "no",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await updateOS(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to update",
+        text: err.body.message,
+      });
+    }
+  }
+
   private _objectToMarkdown(obj, indent = ""): string {
     let data = "";
     Object.keys(obj).forEach((key) => {
@@ -210,11 +276,25 @@ class HassioHostInfo extends LitElement {
     return data;
   }
 
-  private _changeHostnameClicked(): void {
+  private async _changeHostnameClicked(): Promise<void> {
-    const curHostname = this.hostInfo.hostname;
+    const curHostname: string = this.hostInfo.hostname;
-    const hostname = prompt("Please enter a new hostname:", curHostname);
+    const hostname = await showPromptDialog(this, {
+      title: "Change hostname",
+      inputLabel: "Please enter a new hostname:",
+      inputType: "string",
+      defaultValue: curHostname,
+    });
+
     if (hostname && hostname !== curHostname) {
-      this.hass.callApi("POST", "hassio/host/options", { hostname });
+      try {
+        await changeHostOptions(this.hass, { hostname });
+        this.hostInfo = await fetchHassioHostInfo(this.hass);
+      } catch (err) {
+        showAlertDialog(this, {
+          title: "Setting hostname failed",
+          text: err.body.message,
+        });
+      }
     }
   }
 }

hassio/src/system/hassio-supervisor-info.ts

@@ -19,6 +19,7 @@ import {
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
+import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
@@ -142,17 +143,30 @@ class HassioSupervisorInfo extends LitElement {
   }
 
   private async _joinBeta() {
-    if (
+    const confirmed = await showConfirmationDialog(this, {
-      !confirm(`WARNING:
+      title: "WARNING",
-Beta releases are for testers and early adopters and can contain unstable code changes. Make sure you have backups of your data before you activate this feature.
+      text: html` Beta releases are for testers and early adopters and can
+        contain unstable code changes.
+        <br />
+        <b>
+          Make sure you have backups of your data before you activate this
+          feature.
+        </b>
+        <br /><br />
+        This includes beta releases for:
+        <li>Home Assistant Core</li>
+        <li>Home Assistant Supervisor</li>
+        <li>Home Assistant Operating System</li>
+        <br />
+        Do you want to join the beta channel?`,
+      confirmText: "join beta",
+      dismissText: "no",
+    });
 
-This includes beta releases for:
+    if (!confirmed) {
-- Home Assistant Core (Release Candidates)
-- Home Assistant Supervisor
-- Home Assistant Operating System`)
-    ) {
       return;
     }
+
     try {
       const data: SupervisorOptions = { channel: "beta" };
       await setSupervisorOption(this.hass, data);

src/data/hassio/host.ts

@@ -27,3 +27,23 @@ export const fetchHassioHassOsInfo = async (hass: HomeAssistant) => {
     )
   );
 };
+
+export const rebootHost = async (hass: HomeAssistant) => {
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/host/reboot");
+};
+
+export const shutdownHost = async (hass: HomeAssistant) => {
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/host/shutdown");
+};
+
+export const updateOS = async (hass: HomeAssistant) => {
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/update");
+};
+
+export const changeHostOptions = async (hass: HomeAssistant, options: any) => {
+  return hass.callApi<HassioResponse<void>>(
+    "POST",
+    "hassio/host/options",
+    options
+  );
+};