diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index d6057e3169..48cd99b8ec 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -11,6 +11,12 @@ import {
mdiHomeAssistant,
mdiKey,
mdiNetwork,
+ mdiNumeric1,
+ mdiNumeric2,
+ mdiNumeric3,
+ mdiNumeric4,
+ mdiNumeric5,
+ mdiNumeric6,
mdiPound,
mdiShield,
} from "@mdi/js";
@@ -25,7 +31,7 @@ import "../../../../src/components/buttons/ha-call-api-button";
import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-label-badge";
+import "../../../../src/components/ha-chip";
import "../../../../src/components/ha-markdown";
import "../../../../src/components/ha-settings-row";
import "../../../../src/components/ha-svg-icon";
@@ -73,6 +79,15 @@ const STAGE_ICON = {
deprecated: mdiExclamationThick,
};
+const RATING_ICON = {
+ 1: mdiNumeric1,
+ 2: mdiNumeric2,
+ 3: mdiNumeric3,
+ 4: mdiNumeric4,
+ 5: mdiNumeric5,
+ 6: mdiNumeric6,
+};
+
@customElement("hassio-addon-info")
class HassioAddonInfo extends LitElement {
@property({ type: Boolean }) public narrow!: boolean;
@@ -246,6 +261,163 @@ class HassioAddonInfo extends LitElement {
>`}
+
+ ${this.addon.stage !== "stable"
+ ? html`
+
+
+ ${this.supervisor.localize(
+ `addon.dashboard.capability.stages.${this.addon.stage}`
+ )}
+ `
+ : ""}
+
+
+
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.rating"
+ )}
+
+ ${this.addon.host_network
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.host"
+ )}
+
+ `
+ : ""}
+ ${this.addon.full_access
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.hardware"
+ )}
+
+ `
+ : ""}
+ ${this.addon.homeassistant_api
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.core"
+ )}
+
+ `
+ : ""}
+ ${this._computeHassioApi
+ ? html`
+
+
+ ${this.supervisor.localize(
+ `addon.dashboard.capability.role.${this.addon.hassio_role}`
+ ) || this.addon.hassio_role}
+
+ `
+ : ""}
+ ${this.addon.docker_api
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.docker"
+ )}
+
+ `
+ : ""}
+ ${this.addon.host_pid
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.host_pid"
+ )}
+
+ `
+ : ""}
+ ${this.addon.apparmor !== "default"
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.apparmor"
+ )}
+
+ `
+ : ""}
+ ${this.addon.auth_api
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.auth"
+ )}
+
+ `
+ : ""}
+ ${this.addon.ingress
+ ? html`
+
+
+ ${this.supervisor.localize(
+ "addon.dashboard.capability.label.ingress"
+ )}
+
+ `
+ : ""}
+
+
${this.addon.description}.
${this.supervisor.localize(
@@ -266,172 +438,6 @@ class HassioAddonInfo extends LitElement {
/>
`
: ""}
-
- ${this.addon.stage !== "stable"
- ? html`
-
- `
- : ""}
-
-
- ${this.addon.rating}
-
- ${this.addon.host_network
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.full_access
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.homeassistant_api
- ? html`
-
-
-
- `
- : ""}
- ${this._computeHassioApi
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.docker_api
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.host_pid
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.apparmor
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.auth_api
- ? html`
-
-
-
- `
- : ""}
- ${this.addon.ingress
- ? html`
-
-
-
- `
- : ""}
-
-
${this.addon.version
? html`