Add new system menu descriptions (#12564)

src/panels/config/core/ha-config-system-navigation.ts

@@ -1,10 +1,21 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { canShowPage } from "../../../common/config/can_show_page";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { relativeTime } from "../../../common/datetime/relative_time";
 import "../../../components/ha-card";
-import "../../../components/ha-tip";
 import "../../../components/ha-navigation-list";
-import { CloudStatus } from "../../../data/cloud";
+import "../../../components/ha-tip";
+import { BackupContent, fetchBackupInfo } from "../../../data/backup";
+import { CloudStatus, fetchCloudStatus } from "../../../data/cloud";
+import { BOARD_NAMES } from "../../../data/hardware";
+import { fetchHassioBackups, HassioBackup } from "../../../data/hassio/backup";
+import {
+  fetchHassioHassOsInfo,
+  fetchHassioHostInfo,
+  HassioHassOSInfo,
+  HassioHostInfo,
+} from "../../../data/hassio/host";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -28,15 +39,80 @@ class HaConfigSystemNavigation extends LitElement {
 
   @property({ type: Boolean }) public showAdvanced!: boolean;
 
+  @state() private _latestBackupDate?: string;
+
+  @state() private _boardName?: string;
+
+  @state() private _storageInfo?: { used: number; free: number; total: number };
+
+  @state() private _externalAccess = false;
+
   protected render(): TemplateResult {
     const pages = configSections.general
       .filter((page) => canShowPage(this.hass, page))
-      .map((page) => ({
-        ...page,
-        name: page.translationKey
-          ? this.hass.localize(page.translationKey)
-          : page.name,
-      }));
+      .map((page) => {
+        let description = "";
+
+        switch (page.translationKey) {
+          case "backup":
+            description = this._latestBackupDate
+              ? this.hass.localize(
+                  "ui.panel.config.backup.description",
+                  "relative_time",
+                  relativeTime(
+                    new Date(this._latestBackupDate),
+                    this.hass.locale
+                  )
+                )
+              : this.hass.localize(
+                  "ui.panel.config.backup.description_no_backup"
+                );
+            break;
+          case "network":
+            description = this.hass.localize(
+              "ui.panel.config.network.description",
+              "state",
+              this._externalAccess
+                ? this.hass.localize("ui.panel.config.network.enabled")
+                : this.hass.localize("ui.panel.config.network.disabled")
+            );
+            break;
+          case "storage":
+            description = this._storageInfo
+              ? this.hass.localize(
+                  "ui.panel.config.storage.description",
+                  "percent_used",
+                  `${Math.round(
+                    (this._storageInfo.used / this._storageInfo.total) * 100
+                  )}%`,
+                  "free_space",
+                  `${this._storageInfo.free} GB`
+                )
+              : "";
+            break;
+          case "hardware":
+            description =
+              this._boardName ||
+              this.hass.localize("ui.panel.config.hardware.description");
+            break;
+
+          default:
+            description = this.hass.localize(
+              `ui.panel.config.${page.translationKey}.description`
+            );
+            break;
+        }
+
+        return {
+          ...page,
+          name: page.translationKey
+            ? this.hass.localize(
+                `ui.panel.config.${page.translationKey}.caption`
+              )
+            : page.name,
+          description,
+        };
+      });
 
     return html`
       <hass-subpage
@@ -60,6 +136,7 @@ class HaConfigSystemNavigation extends LitElement {
               .hass=${this.hass}
               .narrow=${this.narrow}
               .pages=${pages}
+              hasSecondary
             ></ha-navigation-list>
           </ha-card>
           ${this.hass.userData?.showAdvanced
@@ -73,6 +150,18 @@ class HaConfigSystemNavigation extends LitElement {
     `;
   }
 
+  protected firstUpdated(_changedProperties): void {
+    super.firstUpdated(_changedProperties);
+
+    this._fetchNetworkStatus();
+    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
+    this._fetchBackupInfo(isHassioLoaded);
+    if (isHassioLoaded) {
+      this._fetchHardwareInfo();
+      this._fetchStorageInfo();
+    }
+  }
+
   private _restart() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -97,6 +186,48 @@ class HaConfigSystemNavigation extends LitElement {
     });
   }
 
+  private async _fetchBackupInfo(isHassioLoaded: boolean) {
+    const backups: BackupContent[] | HassioBackup[] = isHassioLoaded
+      ? await fetchHassioBackups(this.hass)
+      : await fetchBackupInfo(this.hass).then(
+          (backupData) => backupData.backups
+        );
+
+    if (backups.length > 0) {
+      this._latestBackupDate = (backups as any[]).reduce((a, b) =>
+        a.date > b.date ? a : b
+      ).date;
+    }
+  }
+
+  private async _fetchHardwareInfo() {
+    const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
+    if (osData.board) {
+      this._boardName = BOARD_NAMES[osData.board];
+    }
+  }
+
+  private async _fetchStorageInfo() {
+    const hostInfo: HassioHostInfo = await fetchHassioHostInfo(this.hass);
+    this._storageInfo = {
+      used: hostInfo.disk_used,
+      free: hostInfo.disk_free,
+      total: hostInfo.disk_total,
+    };
+  }
+
+  private async _fetchNetworkStatus() {
+    if (isComponentLoaded(this.hass, "cloud")) {
+      fetchCloudStatus(this.hass).then((cloudStatus) => {
+        if (cloudStatus.logged_in) {
+          this._externalAccess = true;
+        }
+      });
+    } else {
+      this._externalAccess = this.hass.config.external_url !== null;
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -141,7 +272,6 @@ class HaConfigSystemNavigation extends LitElement {
 
         ha-navigation-list {
           --navigation-list-item-title-font-size: 16px;
-          --navigation-list-item-padding: 4px;
         }
         ha-tip {
           margin-bottom: max(env(safe-area-inset-bottom), 8px);

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

@@ -6,7 +6,7 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-navigation-list";
-import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
+import type { CloudStatus } from "../../../data/cloud";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../../../types";
 
@@ -37,9 +37,7 @@ class HaConfigNavigation extends LitElement {
             ? page.info.logged_in
               ? `
                   ${this.hass.localize(
-                    "ui.panel.config.cloud.description_login",
-                    "email",
-                    (page.info as CloudStatusLoggedIn).email
+                    "ui.panel.config.cloud.description_login"
                   )}
                 `
               : `

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

@@ -256,68 +256,68 @@ export const configSections: { [name: string]: PageNavigation[] } = {
   general: [
     {
       path: "/config/general",
-      translationKey: "ui.panel.config.core.caption",
+      translationKey: "core",
       iconPath: mdiCog,
       iconColor: "#653249",
       core: true,
     },
     {
       path: "/config/updates",
-      translationKey: "ui.panel.config.updates.caption",
+      translationKey: "updates",
       iconPath: mdiUpdate,
       iconColor: "#3B808E",
     },
     {
       component: "logs",
       path: "/config/logs",
-      translationKey: "ui.panel.config.logs.caption",
+      translationKey: "logs",
       iconPath: mdiMathLog,
       iconColor: "#C65326",
       core: true,
     },
     {
       path: "/config/backup",
-      translationKey: "ui.panel.config.backup.caption",
+      translationKey: "backup",
       iconPath: mdiBackupRestore,
       iconColor: "#0D47A1",
       component: "backup",
     },
     {
       path: "/hassio/backups",
-      translationKey: "ui.panel.config.backup.caption",
+      translationKey: "backup",
       iconPath: mdiBackupRestore,
       iconColor: "#0D47A1",
       component: "hassio",
     },
     {
       path: "/config/analytics",
-      translationKey: "ui.panel.config.analytics.caption",
+      translationKey: "analytics",
       iconPath: mdiShape,
       iconColor: "#f1c447",
     },
     {
       path: "/config/network",
-      translationKey: "ui.panel.config.network.caption",
+      translationKey: "network",
       iconPath: mdiNetwork,
       iconColor: "#B1345C",
     },
     {
       path: "/config/storage",
-      translationKey: "ui.panel.config.storage.caption",
+      translationKey: "storage",
       iconPath: mdiDatabase,
       iconColor: "#518C43",
       component: "hassio",
     },
     {
       path: "/config/hardware",
-      translationKey: "ui.panel.config.hardware.caption",
+      translationKey: "hardware",
       iconPath: mdiMemory,
       iconColor: "#301A8E",
       component: "hassio",
     },
     {
       path: "/config/system_health",
-      translationKey: "ui.panel.config.system_health.caption",
+      translationKey: "system_health",
       iconPath: mdiHeart,
       iconColor: "#507FfE",
       components: ["system_health", "hassio"],

src/panels/config/storage/ha-config-section-storage.ts

@@ -3,6 +3,7 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-alert";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-metric";
 import { fetchHassioHostInfo, HassioHostInfo } from "../../../data/hassio/host";
 import "../../../layouts/hass-subpage";

src/translations/en.json

@@ -1144,7 +1144,7 @@
           },
           "tags": {
             "main": "Tags",
-            "secondary": "Manage NFC tags and QR codes"
+            "secondary": "Setup NFC tags and QR codes"
           },
           "people": {
             "main": "People",
@@ -1175,6 +1175,7 @@
         },
         "updates": {
           "caption": "Updates",
+          "description": "Manage updates of Home Assistant, Add-ons and devices",
           "no_updates": "No updates available",
           "no_update_entities": {
             "title": "Unable to check for updates",
@@ -1233,6 +1234,8 @@
         },
         "backup": {
           "caption": "Backups",
+          "description": "Last backup {relative_time}",
+          "description_no_backup": "Manage backups and restore Home Assistant to a previous state",
           "create_backup": "[%key:supervisor::backup::create_backup%]",
           "creating_backup": "Backup is currently being created",
           "download_backup": "[%key:supervisor::backup::download_backup%]",
@@ -1487,7 +1490,7 @@
         },
         "core": {
           "caption": "General",
-          "description": "Location, network and analytics",
+          "description": "Name, Timezone and locale settings",
           "section": {
             "core": {
               "header": "General Configuration",
@@ -1529,6 +1532,7 @@
         },
         "hardware": {
           "caption": "Hardware",
+          "description": "Configure your hub and connected hardware",
           "available_hardware": {
             "failed_to_get": "Failed to get available hardware",
             "title": "All Hardware",
@@ -1573,7 +1577,7 @@
         },
         "logs": {
           "caption": "Logs",
-          "description": "View the Home Assistant logs",
+          "description": "View and search logs to diagnose issues",
           "details": "Log Details ({level})",
           "search": "Search logs",
           "failed_get_logs": "Failed to get {provider} logs, {error}",
@@ -2242,7 +2246,7 @@
           }
         },
         "cloud": {
-          "description_login": "Logged in as {email}",
+          "description_login": "Logged in and connected",
           "description_not_login": "Not logged in",
           "description_features": "Control home when away and integrate with Alexa and Google Assistant",
           "login": {
@@ -3134,10 +3138,14 @@
           "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}"
         },
         "analytics": {
-          "caption": "Analytics"
+          "caption": "Analytics",
+          "description": "Learn how to share data to better the Open Home"
         },
         "network": {
           "caption": "Network",
+          "description": "External access {state}",
+          "enabled": "enabled",
+          "disabled": "disabled",
           "supervisor": {
             "title": "Configure network interfaces",
             "connected_to": "Connected to {ssid}",
@@ -3158,6 +3166,7 @@
         },
         "storage": {
           "caption": "Storage",
+          "description": "{percent_used} used - {free_space} free",
           "used_space": "Used Space",
           "emmc_lifetime_used": "eMMC Lifetime Used",
           "datadisk": {
@@ -3175,6 +3184,7 @@
         },
         "system_health": {
           "caption": "System Health",
+          "description": "Status, Stats and Integration startup time",
           "cpu_usage": "Processor Usage",
           "ram_usage": "Memory Usage",
           "core_stats": "Core Stats",