From bc195c61cc3c9d47da9f4e27f79d50082cb90035 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:45:44 +0100 Subject: [PATCH] Integration Quality Scale indicator (#23015) --- src/data/integration.ts | 2 +- .../ha-config-integration-page.ts | 153 +++++++++++++----- src/translations/en.json | 7 +- 3 files changed, 118 insertions(+), 44 deletions(-) diff --git a/src/data/integration.ts b/src/data/integration.ts index 5a60b9454c..115e4fda1f 100644 --- a/src/data/integration.ts +++ b/src/data/integration.ts @@ -38,7 +38,7 @@ export interface IntegrationManifest { homekit?: { models: string[] }; integration_type?: IntegrationType; loggers?: string[]; - quality_scale?: "gold" | "internal" | "platinum" | "silver"; + quality_scale?: "bronze" | "gold" | "internal" | "platinum" | "silver"; iot_class: | "assumed_state" | "cloud_polling" diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts index 9beef88106..6a72748029 100644 --- a/src/panels/config/integrations/ha-config-integration-page.ts +++ b/src/panels/config/integrations/ha-config-integration-page.ts @@ -6,7 +6,6 @@ import { mdiBug, mdiBugPlay, mdiBugStop, - mdiCloud, mdiCog, mdiDelete, mdiDevices, @@ -14,6 +13,7 @@ import { mdiDownload, mdiFileCodeOutline, mdiHandExtendedOutline, + mdiMedal, mdiOpenInNew, mdiPackageVariant, mdiPlayCircleOutline, @@ -23,6 +23,8 @@ import { mdiRenameBox, mdiShapeOutline, mdiStopCircleOutline, + mdiTrophy, + mdiWeb, mdiWrench, } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; @@ -338,41 +340,72 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { ${this._manifest?.version != null ? html`
${this._manifest.version}
` : nothing} + ${this._manifest?.quality_scale && + this._manifest?.quality_scale !== "internal" + ? html` +
+ + + ${this.hass.localize( + `ui.panel.config.integrations.config_entry.${this._manifest.quality_scale}_quality`, + { + quality_scale: html` + + ${this.hass.localize( + "ui.panel.config.integrations.config_entry.quality_scale" + )} + + `, + } + )} + +
+ ` + : nothing} ${this._manifest?.is_built_in === false - ? html` + ${this.hass.localize( "ui.panel.config.integrations.config_entry.custom_integration" - )}` - : ""} + )} + ` + : nothing} ${this._manifest?.iot_class?.startsWith("cloud_") - ? html`${this.hass.localize( + ? html`
+ + ${this.hass.localize( "ui.panel.config.integrations.config_entry.depends_on_cloud" - )}` - : ""} + )} +
` + : nothing} ${normalEntries.length === 0 && this._manifest && !this._manifest.config_flow && this.hass.config.components.find( (comp) => comp.split(".")[0] === this.domain ) - ? html` + ${this.hass.localize( "ui.panel.config.integrations.config_entry.no_config_flow" - )}` - : ""} + )} + ` + : nothing}
@@ -398,7 +431,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { ` - : ""} + : nothing} ${numberOfEntities > 0 ? html` ` - : ""} + : nothing} ${this._manifest ? html` ` - : ""} + : nothing} ${this._manifest && (this._manifest.is_built_in || this._manifest.issue_tracker) ? html` ` - : ""} + : nothing} ${this._logInfo ? html` ` - : ""} + : nothing}
@@ -517,7 +550,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { )} ` - : ""} + : nothing} ${attentionFlows.length || attentionEntries.length ? html`

@@ -562,11 +595,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { role="separator" tabindex="-1" >` - : ""} ` + : nothing} ` )} ` - : ""} + : nothing}

@@ -602,7 +635,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { role="separator" tabindex="-1" >` - : ""} ` + : nothing}` )}
@@ -762,11 +795,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
${this.hass.localize(...stateText)}${stateTextExtra ? html`: ${stateTextExtra}` - : ""} + : nothing}
` - : ""} + : nothing} ${item.disabled_by === "user" ? html` @@ -793,7 +826,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { )} ` - : ""} + : nothing} ` - : ""} + : nothing} ${item.disabled_by && services.length ? html` ` - : ""} + : nothing} ${item.disabled_by && entities.length ? html` ` - : ""} + : nothing} ${!item.disabled_by && RECOVERABLE_STATES.includes(item.state) && item.supports_unload && @@ -886,7 +919,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { )} ` - : ""} + : nothing} ${!item.disabled_by && item.supports_reconfigure && item.source !== "system" @@ -1424,6 +1457,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { margin-top: 32px; margin-bottom: 32px; } + .card-content { + padding: 16px 0 8px; + } .column { width: 33%; flex-grow: 1; @@ -1471,12 +1507,45 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { max-width: 200px; max-height: 100px; } - ha-alert { - display: block; - margin-top: 4px; + + @keyframes shimmer { + 100% { + mask-position: left; + } } - ha-alert:first-of-type { - margin-top: 16px; + .integration-info { + display: flex; + align-items: center; + gap: 20px; + padding: 0 20px; + min-height: 48px; + } + .integration-info ha-svg-icon { + min-width: 24px; + color: var(--mdc-theme-text-icon-on-background); + } + .integration-info.warn ha-svg-icon { + color: var(--warning-color); + } + .integration-info.info ha-svg-icon { + color: var(--info-color); + } + .quality-scale ha-svg-icon { + mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% + 100%; + animation: shimmer 2.5s infinite; + } + ha-svg-icon.bronze-medal { + color: #cd7f32; + } + ha-svg-icon.silver-medal { + color: silver; + } + ha-svg-icon.gold-medal { + color: gold; + } + ha-svg-icon.platinum-medal { + color: #d9d9d9; } ha-md-list-item { position: relative; diff --git a/src/translations/en.json b/src/translations/en.json index 1227fb1251..c49ffd2ed1 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4520,7 +4520,12 @@ "failed_unload": "Failed to unload", "setup_in_progress": "Initializing" }, - "open_configuration_url": "Visit device" + "open_configuration_url": "Visit device", + "bronze_quality": "Bronze on our {quality_scale}", + "silver_quality": "Silver on our {quality_scale}", + "gold_quality": "Gold on our {quality_scale}", + "platinum_quality": "Platinum on our {quality_scale}", + "quality_scale": "quality scale" }, "config_flow": { "success": "Success",