Add Repairs to Settings (#13249)

Co-authored-by: Zack Barett <zackbarett@hey.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/repairs.ts

@@ -6,7 +6,7 @@ export interface RepairsIssue {
   issue_id: string;
   active: boolean;
   is_fixable: boolean;
-  severity?: "error" | "warning" | "critical";
+  severity: "error" | "warning" | "critical";
   breaks_in_ha_version?: string;
   ignored: boolean;
   created: string;
@@ -16,6 +16,12 @@ export interface RepairsIssue {
   translation_placeholders?: Record<string, string>;
 }
 
+export const severitySort = {
+  critical: 1,
+  error: 2,
+  warning: 3,
+};
+
 export const fetchRepairsIssues = async (hass: HomeAssistant) =>
   hass.callWS<{ issues: RepairsIssue[] }>({
     type: "repairs/list_issues",

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -23,6 +23,11 @@ import "../../../components/ha-menu-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tip";
 import { CloudStatus } from "../../../data/cloud";
+import {
+  fetchRepairsIssues,
+  RepairsIssue,
+  severitySort,
+} from "../../../data/repairs";
 import {
   checkForEntityUpdates,
   filterUpdateEntitiesWithInstall,
@@ -36,6 +41,7 @@ import { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
+import "../repairs/ha-config-repairs";
 import "./ha-config-navigation";
 import "./ha-config-updates";
 
@@ -118,6 +124,8 @@ class HaConfigDashboard extends LitElement {
 
   @state() private _tip?: string;
 
+  @state() private _repairsIssues: [RepairsIssue[], number] = [[], 0];
+
   private _pages = memoizeOne((clouStatus, isLoaded) => {
     const pages: PageNavigation[] = [];
     if (clouStatus && isLoaded) {
@@ -137,6 +145,8 @@ class HaConfigDashboard extends LitElement {
     const [canInstallUpdates, totalUpdates] =
       this._filterUpdateEntitiesWithInstall(this.hass.states);
 
+    const [repairsIssues, totalRepairIssues] = this._repairsIssues;
+
     return html`
       <ha-app-layout>
         <app-header fixed slot="header">
@@ -174,26 +184,55 @@ class HaConfigDashboard extends LitElement {
           .isWide=${this.isWide}
           full-width
         >
-          ${canInstallUpdates.length
-            ? html`<ha-card outlined>
-                <ha-config-updates
-                  .hass=${this.hass}
-                  .narrow=${this.narrow}
-                  .total=${totalUpdates}
-                  .updateEntities=${canInstallUpdates}
-                ></ha-config-updates>
-                ${totalUpdates > canInstallUpdates.length
-                  ? html`<a class="button" href="/config/updates">
-                      ${this.hass.localize(
-                        "ui.panel.config.updates.more_updates",
-                        {
-                          count: totalUpdates - canInstallUpdates.length,
-                        }
-                      )}
-                    </a>`
-                  : ""}
-              </ha-card>`
+          ${repairsIssues.length
+            ? html`
+                <ha-card outlined>
+                  <ha-config-repairs
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .total=${totalRepairIssues}
+                    .repairsIssues=${repairsIssues}
+                  ></ha-config-repairs>
+                  ${totalRepairIssues > repairsIssues.length
+                    ? html`
+                        <a class="button" href="/config/repairs">
+                          ${this.hass.localize(
+                            "ui.panel.config.repairs.more_repairs",
+                            {
+                              count: totalRepairIssues - repairsIssues.length,
+                            }
+                          )}
+                        </a>
+                      `
+                    : ""}
+                </ha-card>
+              `
             : ""}
+          ${canInstallUpdates.length
+            ? html`
+                <ha-card outlined>
+                  <ha-config-updates
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .total=${totalUpdates}
+                    .updateEntities=${canInstallUpdates}
+                  ></ha-config-updates>
+                  ${totalUpdates > canInstallUpdates.length
+                    ? html`
+                        <a class="button" href="/config/updates">
+                          ${this.hass.localize(
+                            "ui.panel.config.updates.more_updates",
+                            {
+                              count: totalUpdates - canInstallUpdates.length,
+                            }
+                          )}
+                        </a>
+                      `
+                    : ""}
+                </ha-card>
+              `
+            : ""}
+
           <ha-card outlined>
             <ha-config-navigation
               .hass=${this.hass}
@@ -211,6 +250,11 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+    this._fetchIssues();
+  }
+
   protected override updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
@@ -230,6 +274,23 @@ class HaConfigDashboard extends LitElement {
     }
   );
 
+  private async _fetchIssues(): Promise<void> {
+    const [, repairsIssues] = await Promise.all([
+      this.hass.loadBackendTranslation("issues"),
+      fetchRepairsIssues(this.hass),
+    ]);
+
+    this._repairsIssues = [
+      repairsIssues.issues
+        .sort((a, b) => severitySort[a.severity] - severitySort[b.severity])
+        .slice(
+          0,
+          repairsIssues.issues.length === 3 ? repairsIssues.issues.length : 2
+        ),
+      repairsIssues.issues.length,
+    ];
+  }
+
   private _showQuickBar(): void {
     showQuickBar(this, {
       commandMode: true,

src/panels/config/repairs/ha-config-repairs.ts

@@ -24,6 +24,9 @@ class HaConfigRepairs extends LitElement {
   @property({ attribute: false })
   public repairsIssues?: RepairsIssue[];
 
+  @property({ type: Number })
+  public total?: number;
+
   protected render(): TemplateResult {
     if (!this.repairsIssues?.length) {
       return html``;
@@ -34,7 +37,7 @@ class HaConfigRepairs extends LitElement {
     return html`
       <div class="title">
         ${this.hass.localize("ui.panel.config.repairs.title", {
-          count: this.repairsIssues.length,
+          count: this.total || this.repairsIssues.length,
         })}
       </div>
       <mwc-list>

src/translations/en.json

@@ -1231,6 +1231,7 @@
           "description": "Find and fix issues with your Home Assistant instance",
           "title": "{count} {count, plural,\n  one {repair}\n  other {repairs}\n}",
           "no_repairs": "There are currently no repairs available",
+          "more_repairs": "+{count} repairs",
           "dialog": {
             "title": "Repair",
             "fix": "Repair",