From c5de8a4361111704ab66a526ef8e3ef18ce7baf6 Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Tue, 3 May 2022 11:44:43 -0500 Subject: [PATCH] Add new system menu descriptions (#12564) --- .../core/ha-config-system-navigation.ts | 150 ++++++++++++++++-- .../config/dashboard/ha-config-navigation.ts | 6 +- src/panels/config/ha-panel-config.ts | 20 +-- .../storage/ha-config-section-storage.ts | 1 + src/translations/en.json | 20 ++- 5 files changed, 168 insertions(+), 29 deletions(-) diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts index a71e398685..82087c1a07 100644 --- a/src/panels/config/core/ha-config-system-navigation.ts +++ b/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` ${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); diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 217cc9555a..7a293b4225 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/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" )} ` : ` diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 0c933e8d8b..2d987e8b6e 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/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"], diff --git a/src/panels/config/storage/ha-config-section-storage.ts b/src/panels/config/storage/ha-config-section-storage.ts index d9acb79e38..29945f919a 100644 --- a/src/panels/config/storage/ha-config-section-storage.ts +++ b/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"; diff --git a/src/translations/en.json b/src/translations/en.json index 1dfad9e4a0..4255e3aaab 100755 --- a/src/translations/en.json +++ b/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",