hassio-addon-info feedback (#6734)

* hassio-addon-info feedback

* lint

* init config validation

* better error

* Finish

* sort imports

* Use startup type for watchdog

* Only show error if issue with config

* Adjust

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

@@ -38,15 +38,22 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   fetchHassioAddonChangelog,
+  fetchHassioAddonInfo,
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
   installHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
+  startHassioAddon,
   uninstallHassioAddon,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-card-content";
@@ -126,8 +133,6 @@ class HassioAddonInfo extends LitElement {
 
   @internalProperty() private _error?: string;
 
-  @property({ type: Boolean }) private _installing = false;
-
   protected render(): TemplateResult {
     return html`
       ${this._computeUpdateAvailable
@@ -400,7 +405,7 @@ class HassioAddonInfo extends LitElement {
                     ></ha-switch>
                   </ha-settings-row>
 
-                  ${this.hass.userData?.showAdvanced
+                  ${this.addon.startup !== "once"
                     ? html`
                         <ha-settings-row ?three-line=${this.narrow}>
                           <span slot="heading">
@@ -498,12 +503,9 @@ class HassioAddonInfo extends LitElement {
                       </ha-call-api-button>
                     `
                   : html`
-                      <ha-call-api-button
+                      <ha-progress-button @click=${this._startClicked}>
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/start"
-                      >
                         Start
-                      </ha-call-api-button>
+                      </ha-progress-button>
                     `}
                 ${this._computeShowWebUI
                   ? html`
@@ -527,12 +529,12 @@ class HassioAddonInfo extends LitElement {
                       </mwc-button>
                     `
                   : ""}
-                <mwc-button
+                <ha-progress-button
                   class=" right warning"
                   @click=${this._uninstallClicked}
                 >
                   Uninstall
-                </mwc-button>
+                </ha-progress-button>
                 ${this.addon.build
                   ? html`
                       <ha-call-api-button
@@ -554,8 +556,7 @@ class HassioAddonInfo extends LitElement {
                     `
                   : ""}
                 <ha-progress-button
-                  .disabled=${!this.addon.available || this._installing}
+                  .disabled=${!this.addon.available}
-                  .progress=${this._installing}
                   @click=${this._installClicked}
                 >
                   Install
@@ -662,7 +663,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
@@ -680,7 +683,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
@@ -698,7 +703,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
@@ -716,9 +723,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon security option, ${
+      this._error = `Failed to set addon security option, ${extractApiErrorMessage(
-        err.body?.message || err
+        err
-      }`;
+      )}`;
     }
   }
 
@@ -736,12 +743,13 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
   private async _openChangelog(): Promise<void> {
-    this._error = undefined;
     try {
       const content = await fetchHassioAddonChangelog(
         this.hass,
@@ -752,15 +760,17 @@ class HassioAddonInfo extends LitElement {
         content,
       });
     } catch (err) {
-      this._error = `Failed to get addon changelog, ${
+      showAlertDialog(this, {
-        err.body?.message || err
+        title: "Failed to get addon changelog",
-      }`;
+        text: extractApiErrorMessage(err),
+      });
     }
   }
 
-  private async _installClicked(): Promise<void> {
+  private async _installClicked(ev: CustomEvent): Promise<void> {
-    this._error = undefined;
+    const button = ev.target as any;
-    this._installing = true;
+    button.progress = true;
+
     try {
       await installHassioAddon(this.hass, this.addon.slug);
       const eventdata = {
@@ -770,12 +780,62 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to install addon, ${err.body?.message || err}`;
+      showAlertDialog(this, {
+        title: "Failed to install addon",
+        text: extractApiErrorMessage(err),
+      });
     }
-    this._installing = false;
+    button.progress = false;
   }
 
-  private async _uninstallClicked(): Promise<void> {
+  private async _startClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+    try {
+      const validate = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug
+      );
+      if (!validate.data.valid) {
+        await showConfirmationDialog(this, {
+          title: "Failed to start addon - configruation validation faled!",
+          text: validate.data.message.split(" Got ")[0],
+          confirm: () => this._openConfiguration(),
+          confirmText: "Go to configruation",
+          dismissText: "Cancel",
+        });
+        button.progress = false;
+        return;
+      }
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to validate addon configuration",
+        text: extractApiErrorMessage(err),
+      });
+      button.progress = false;
+      return;
+    }
+
+    try {
+      await startHassioAddon(this.hass, this.addon.slug);
+      this.addon = await fetchHassioAddonInfo(this.hass, this.addon.slug);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to start addon",
+        text: extractApiErrorMessage(err),
+      });
+    }
+    button.progress = false;
+  }
+
+  private _openConfiguration(): void {
+    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
+  }
+
+  private async _uninstallClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.target as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: this.addon.name,
       text: "Are you sure you want to uninstall this add-on?",
@@ -784,6 +844,7 @@ class HassioAddonInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -797,8 +858,12 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
+      showAlertDialog(this, {
+        title: "Failed to uninstall addon",
+        text: extractApiErrorMessage(err),
+      });
     }
+    button.progress = false;
   }
 
   static get styles(): CSSResult[] {

src/data/hassio/addon.ts

@@ -51,6 +51,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   changelog: boolean;
   hassio_api: boolean;
   hassio_role: "default" | "homeassistant" | "manager" | "admin";
+  startup: "initialize" | "system" | "services" | "application" | "once";
   homeassistant_api: boolean;
   auth_api: boolean;
   full_access: boolean;
@@ -158,6 +159,19 @@ export const setHassioAddonOption = async (
   );
 };
 
+export const validateHassioAddonOption = async (
+  hass: HomeAssistant,
+  slug: string
+) => {
+  return await hass.callApi<
+    HassioResponse<{ message: string; valid: boolean }>
+  >("POST", `hassio/addons/${slug}/options/validate`);
+};
+
+export const startHassioAddon = async (hass: HomeAssistant, slug: string) => {
+  return hass.callApi<string>("POST", `hassio/addons/${slug}/start`);
+};
+
 export const setHassioAddonSecurity = async (
   hass: HomeAssistant,
   slug: string,

src/data/hassio/common.ts

@@ -5,3 +5,11 @@ export interface HassioResponse<T> {
 
 export const hassioApiResultExtractor = <T>(response: HassioResponse<T>) =>
   response.data;
+
+export const extractApiErrorMessage = (error: any): string => {
+  return typeof error === "object"
+    ? typeof error.body === "object"
+      ? error.body.message || "Unkown error, see logs"
+      : error.body || "Unkown error, see logs"
+    : error;
+};