Add check management dialog

hassio/src/dialogs/system_checks/dialog-hassio-system-checks.ts

@@ -0,0 +1,116 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { setCheckOption } from "../../../../src/data/hassio/resolution";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { SystemChecksParams } from "./show-dialog-system-checks";
+
+@customElement("dialog-hassio-system-checks")
+class HassioSystemChecksDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @internalProperty() private _opened = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-dialog
+        @closing=${this.closeDialog}
+        .open=${this._opened}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.supervisor.localize("dialog.system_check.title")
+        )}
+        hideActions
+      >
+        <div class="form">
+          ${this.supervisor.resolution.checks.map(
+            (check) => html`
+              <ha-settings-row three-line>
+                <span slot="heading">
+                  ${this.supervisor.localize(
+                    `dialog.system_check.check.${check.name}.title`
+                  )}
+                </span>
+                <span slot="description">
+                  ${this.supervisor.localize(
+                    `dialog.system_check.check.${check.name}.description`
+                  )}
+                </span>
+                <ha-switch
+                  .check=${check.name}
+                  @change=${this._checkToggled}
+                  .checked=${check.enabled}
+                  haptic
+                ></ha-switch>
+              </ha-settings-row>
+            `
+          )}
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  public async showDialog(dialogParams: SystemChecksParams): Promise<void> {
+    this._opened = true;
+    this.supervisor = dialogParams.supervisor;
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._opened = false;
+  }
+
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  private async _checkToggled(ev: Event): Promise<void> {
+    const check = ev.currentTarget as any;
+
+    try {
+      await setCheckOption(this.hass, check.check, { enabled: check.checked });
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "resolution",
+      });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.supervisor.localize(
+          "dialog.system_check.failed_to_set_option"
+        ),
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [haStyle, haStyleDialog];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-system-checks": HassioSystemChecksDialog;
+  }
+}

hassio/src/dialogs/system_checks/show-dialog-system-checks.ts

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import "./dialog-hassio-system-checks";
+
+export interface SystemChecksParams {
+  supervisor: Supervisor;
+}
+
+export const showSystemChecksDialog = (
+  element: HTMLElement,
+  dialogParams: SystemChecksParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-system-checks",
+    dialogImport: () => import("./dialog-hassio-system-checks"),
+    dialogParams,
+  });
+};

hassio/src/system/hassio-system.ts

@@ -1,3 +1,5 @@
+import { ActionDetail } from "@material/mwc-list";
+import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -11,6 +13,7 @@ import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
+import { showSystemChecksDialog } from "../dialogs/system_checks/show-dialog-system-checks";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-core-info";
@@ -42,6 +45,21 @@ class HassioSystem extends LitElement {
         <span slot="header">
           ${this.supervisor.localize("panel.system")}
         </span>
+        ${this.hass.userData?.showAdvanced
+          ? html` <ha-button-menu
+              corner="BOTTOM_START"
+              slot="toolbar-icon"
+              @action=${this._handleAction}
+            >
+              <mwc-icon-button slot="trigger" alt="menu">
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-list-item>
+                ${this.supervisor.localize("system.system_checks")}
+              </mwc-list-item>
+            </ha-button-menu>`
+          : ""}
+
         <div class="content">
           <div class="card-group">
             <hassio-core-info
@@ -66,6 +84,14 @@ class HassioSystem extends LitElement {
     `;
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        showSystemChecksDialog(this, { supervisor: this.supervisor });
+        break;
+    }
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

src/data/hassio/resolution.ts

@@ -7,6 +7,7 @@ export interface HassioResolution {
   unhealthy: string[];
   issues: string[];
   suggestions: string[];
+  checks: { name: string; enabled: boolean }[];
 }
 
 export const fetchHassioResolution = async (
@@ -27,3 +28,25 @@ export const fetchHassioResolution = async (
     )
   );
 };
+
+export const setCheckOption = async (
+  hass: HomeAssistant,
+  check: string,
+  data: Record<string, any>
+): Promise<void> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/resolution/check/${check}`,
+      data,
+      method: "post",
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<HassioResolution>>(
+    "POST",
+    `hassio/resolution/check/${check}`,
+    data
+  );
+};

src/translations/en.json

@@ -3667,6 +3667,7 @@
       "error_addon_not_found": "Add-on not found"
     },
     "system": {
+      "system_checks": "System checks",
       "log": {
         "log_provider": "Log Provider",
         "get_logs": "Failed to get {provider} logs, {error}"
@@ -3818,6 +3819,20 @@
         "create_snapshot": "Create a snapshot of {name} before updating",
         "updating": "Updating {name} to version {version}",
         "snapshotting": "Creating snapshot of {name}"
+      },
+      "system_check": {
+        "title": "Manage system checks",
+        "failed_to_set_option": "Failed to set check options",
+        "check": {
+          "addon_pwned": {
+            "title": "PWNED Add-ons",
+            "description": "Monitor secrets and passwords used in add-on configuration against HIBP"
+          },
+          "free_space": {
+            "title": "Free space",
+            "description": "Monitor free space left on the device"
+          }
+        }
       }
     }
   }