From 79d1a2f4586be7c2f4d6d1f20617ef682c5d2fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Sat, 2 May 2020 15:18:57 +0200
Subject: [PATCH] Add reload buttons to store and snapshot (#5714)

---
 hassio/src/addon-store/hassio-addon-store.ts  |  86 ++++--
 .../src/addon-view/hassio-addon-dashboard.ts  |  10 +-
 hassio/src/dashboard/hassio-dashboard.ts      |  50 ++--
 hassio/src/hassio-panel-router.ts             |   8 +-
 hassio/src/hassio-panel.ts                    |  68 ++---
 hassio/src/snapshots/hassio-snapshots.ts      | 276 ++++++++++--------
 hassio/src/system/hassio-system.ts            |  50 ++--
 7 files changed, 314 insertions(+), 234 deletions(-)

diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index fd78be112f..d97bcd275c 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -13,11 +13,14 @@ import {
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/loading-screen";
-import { HomeAssistant } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
 import "../components/hassio-search-input";
 import "./hassio-addon-repository";
 import "./hassio-repositories-editor";
 
+import { supervisorTabs } from "../hassio-panel";
+
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
     return -1;
@@ -35,11 +38,15 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 };
 
 class HassioAddonStore extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _addons?: HassioAddonInfo[];
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() private _repos?: HassioAddonRepository[];
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) private _addons?: HassioAddonInfo[];
+
+  @property({ attribute: false }) private _repos?: HassioAddonRepository[];
 
   @property() private _filter?: string;
 
@@ -52,42 +59,61 @@ class HassioAddonStore extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._addons || !this._repos) {
-      return html` <loading-screen></loading-screen> `;
-    }
     const repos: TemplateResult[] = [];
 
-    for (const repo of this._repos) {
-      const addons = this._addons!.filter(
-        (addon) => addon.repository === repo.slug
-      );
+    if (this._repos) {
+      for (const repo of this._repos) {
+        const addons = this._addons!.filter(
+          (addon) => addon.repository === repo.slug
+        );
 
-      if (addons.length === 0) {
-        continue;
+        if (addons.length === 0) {
+          continue;
+        }
+
+        repos.push(html`
+          <hassio-addon-repository
+            .hass=${this.hass}
+            .repo=${repo}
+            .addons=${addons}
+            .filter=${this._filter}
+          ></hassio-addon-repository>
+        `);
       }
-
-      repos.push(html`
-        <hassio-addon-repository
-          .hass=${this.hass}
-          .repo=${repo}
-          .addons=${addons}
-          .filter=${this._filter}
-        ></hassio-addon-repository>
-      `);
     }
 
     return html`
-      <hassio-repositories-editor
+      <hass-tabs-subpage
         .hass=${this.hass}
-        .repos=${this._repos}
-      ></hassio-repositories-editor>
+        .narrow=${this.narrow}
+        .route=${this.route}
+        hassio
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Add-on store</span>
+        <paper-icon-button
+          icon="hassio:reload"
+          slot="toolbar-icon"
+          aria-label="Reload add-ons"
+          @click=${this.refreshData}
+        ></paper-icon-button>
 
-      <hassio-search-input
-        .filter=${this._filter}
-        @value-changed=${this._filterChanged}
-      ></hassio-search-input>
+        ${repos.length === 0
+          ? html`<loading-screen></loading-screen>`
+          : html`
+              <hassio-repositories-editor
+                .hass=${this.hass}
+                .repos=${this._repos!}
+              ></hassio-repositories-editor>
 
-      ${repos}
+              <hassio-search-input
+                .filter=${this._filter}
+                @value-changed=${this._filterChanged}
+              ></hassio-search-input>
+
+              ${repos}
+            `}
+      </hass-tabs-subpage>
     `;
   }
 
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts
index c614aced17..241f199685 100644
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -59,7 +59,7 @@ class HassioAddonDashboard extends LitElement {
       {
         name: "Info",
         path: `/hassio/addon/${this.addon.slug}/info`,
-        icon: "mdi:information-variant",
+        icon: "hassio:information-variant",
       },
     ];
 
@@ -67,7 +67,7 @@ class HassioAddonDashboard extends LitElement {
       addonTabs.push({
         name: "Documentation",
         path: `/hassio/addon/${this.addon.slug}/documentation`,
-        icon: "mdi:file-document",
+        icon: "hassio:file-document",
       });
     }
 
@@ -76,12 +76,12 @@ class HassioAddonDashboard extends LitElement {
         {
           name: "Configuration",
           path: `/hassio/addon/${this.addon.slug}/config`,
-          icon: "mdi:cogs",
+          icon: "hassio:cogs",
         },
         {
           name: "Log",
           path: `/hassio/addon/${this.addon.slug}/logs`,
-          icon: "mdi:math-log",
+          icon: "hassio:math-log",
         }
       );
     }
@@ -94,7 +94,7 @@ class HassioAddonDashboard extends LitElement {
         .narrow=${this.narrow}
         .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
         .route=${route}
-        .hassio=${true}
+        hassio
         .tabs=${addonTabs}
       >
         <span slot="header">${this.addon.name}</span>
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index c847e3bc26..12d31988b1 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -13,34 +13,50 @@ import {
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
 import "./hassio-addons";
 import "./hassio-update";
 
+import { supervisorTabs } from "../hassio-panel";
+
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public route!: Route;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
+
+  @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
+
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {
     return html`
-      <div class="content">
-        <hassio-update
-          .hass=${this.hass}
-          .hassInfo=${this.hassInfo}
-          .supervisorInfo=${this.supervisorInfo}
-          .hassOsInfo=${this.hassOsInfo}
-        ></hassio-update>
-        <hassio-addons
-          .hass=${this.hass}
-          .addons=${this.supervisorInfo.addons}
-        ></hassio-addons>
-      </div>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Dashboard</span>
+        <div class="content">
+          <hassio-update
+            .hass=${this.hass}
+            .hassInfo=${this.hassInfo}
+            .supervisorInfo=${this.supervisorInfo}
+            .hassOsInfo=${this.hassOsInfo}
+          ></hassio-update>
+          <hassio-addons
+            .hass=${this.hass}
+            .addons=${this.supervisorInfo.addons}
+          ></hassio-addons>
+        </div>
+      </hass-tabs-subpage>
     `;
   }
 
diff --git a/hassio/src/hassio-panel-router.ts b/hassio/src/hassio-panel-router.ts
index fbfcda1b4b..3025fe2f9a 100644
--- a/hassio/src/hassio-panel-router.ts
+++ b/hassio/src/hassio-panel-router.ts
@@ -8,7 +8,7 @@ import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import { HomeAssistant } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
 import "./addon-store/hassio-addon-store";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./dashboard/hassio-dashboard";
@@ -20,6 +20,10 @@ import "./system/hassio-system";
 class HassioPanelRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
 
   @property({ attribute: false }) public hostInfo: HassioHostInfo;
@@ -47,6 +51,8 @@ class HassioPanelRouter extends HassRouterPage {
 
   protected updatePageEl(el) {
     el.hass = this.hass;
+    el.route = this.route;
+    el.narrow = this.narrow;
     el.supervisorInfo = this.supervisorInfo;
     el.hostInfo = this.hostInfo;
     el.hassInfo = this.hassInfo;
diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts
index 16a75af7ff..0d8ed62d18 100644
--- a/hassio/src/hassio-panel.ts
+++ b/hassio/src/hassio-panel.ts
@@ -15,7 +15,29 @@ import "../../src/resources/ha-style";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import "../../src/layouts/hass-tabs-subpage";
+
+export const supervisorTabs: PageNavigation[] = [
+  {
+    name: "Dashboard",
+    path: `/hassio/dashboard`,
+    icon: "hassio:view-dashboard",
+  },
+  {
+    name: "Add-on store",
+    path: `/hassio/store`,
+    icon: "hassio:store",
+  },
+  {
+    name: "Snapshots",
+    path: `/hassio/snapshots`,
+    icon: "hassio:backup-restore",
+  },
+  {
+    name: "System",
+    path: `/hassio/system`,
+    icon: "hassio:cogs",
+  },
+];
 
 @customElement("hassio-panel")
 class HassioPanel extends LitElement {
@@ -34,46 +56,16 @@ class HassioPanel extends LitElement {
   @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {
-    const supervisorTabs: PageNavigation[] = [
-      {
-        name: "Dashboard",
-        path: `/hassio/dashboard`,
-        icon: "mdi:view-dashboard",
-      },
-      {
-        name: "Add-on store",
-        path: `/hassio/store`,
-        icon: "mdi:store",
-      },
-      {
-        name: "Snapshots",
-        path: `/hassio/snapshots`,
-        icon: "mdi:backup-restore",
-      },
-      {
-        name: "System",
-        path: `/hassio/system`,
-        icon: "mdi:cogs",
-      },
-    ];
-
     return html`
-      <hass-tabs-subpage
+      <hassio-panel-router
+        .route=${this.route}
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .route=${this.route}
-        .tabs=${supervisorTabs}
-      >
-        <span slot="header">Supervisor</span>
-        <hassio-panel-router
-          .route=${this.route}
-          .hass=${this.hass}
-          .supervisorInfo=${this.supervisorInfo}
-          .hostInfo=${this.hostInfo}
-          .hassInfo=${this.hassInfo}
-          .hassOsInfo=${this.hassOsInfo}
-        ></hassio-panel-router>
-      </hass-tabs-subpage>
+        .supervisorInfo=${this.supervisorInfo}
+        .hostInfo=${this.hostInfo}
+        .hassInfo=${this.hassInfo}
+        .hassOsInfo=${this.hassOsInfo}
+      ></hassio-panel-router>
     `;
   }
 }
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index dac771dc3d..cfd6901de2 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -30,11 +30,14 @@ import {
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
 import "../components/hassio-card-content";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
 import { hassioStyle } from "../resources/hassio-style";
 
+import { supervisorTabs } from "../hassio-panel";
+
 interface CheckboxItem {
   slug: string;
   name: string;
@@ -43,9 +46,13 @@ interface CheckboxItem {
 
 @customElement("hassio-snapshots")
 class HassioSnapshots extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfo;
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
 
   @property() private _snapshotName = "";
 
@@ -81,135 +88,152 @@ class HassioSnapshots extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="content">
-        <h1>
-          Create snapshot
-        </h1>
-        <p class="description">
-          Snapshots allow you to easily backup and restore all data of your Home
-          Assistant instance.
-        </p>
-        <div class="card-group">
-          <paper-card>
-            <div class="card-content">
-              <paper-input
-                autofocus
-                label="Name"
-                name="snapshotName"
-                .value=${this._snapshotName}
-                @value-changed=${this._handleTextValueChanged}
-              ></paper-input>
-              Type:
-              <paper-radio-group
-                name="snapshotType"
-                .selected=${this._snapshotType}
-                @selected-changed=${this._handleRadioValueChanged}
-              >
-                <paper-radio-button name="full">
-                  Full snapshot
-                </paper-radio-button>
-                <paper-radio-button name="partial">
-                  Partial snapshot
-                </paper-radio-button>
-              </paper-radio-group>
-              ${this._snapshotType === "full"
-                ? undefined
-                : html`
-                    Folders:
-                    ${this._folderList.map(
-                      (folder, idx) => html`
-                        <paper-checkbox
-                          .idx=${idx}
-                          .checked=${folder.checked}
-                          @checked-changed=${this._folderChecked}
-                        >
-                          ${folder.name}
-                        </paper-checkbox>
-                      `
-                    )}
-                    Add-ons:
-                    ${this._addonList.map(
-                      (addon, idx) => html`
-                        <paper-checkbox
-                          .idx=${idx}
-                          .checked=${addon.checked}
-                          @checked-changed=${this._addonChecked}
-                        >
-                          ${addon.name}
-                        </paper-checkbox>
-                      `
-                    )}
-                  `}
-              Security:
-              <paper-checkbox
-                name="snapshotHasPassword"
-                .checked=${this._snapshotHasPassword}
-                @checked-changed=${this._handleCheckboxValueChanged}
-              >
-                Password protection
-              </paper-checkbox>
-              ${this._snapshotHasPassword
-                ? html`
-                    <paper-input
-                      label="Password"
-                      type="password"
-                      name="snapshotPassword"
-                      .value=${this._snapshotPassword}
-                      @value-changed=${this._handleTextValueChanged}
-                    ></paper-input>
-                  `
-                : undefined}
-              ${this._error !== ""
-                ? html` <p class="error">${this._error}</p> `
-                : undefined}
-            </div>
-            <div class="card-actions">
-              <mwc-button
-                .disabled=${this._creatingSnapshot}
-                @click=${this._createSnapshot}
-              >
-                Create
-              </mwc-button>
-            </div>
-          </paper-card>
-        </div>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Snapshots</span>
 
-        <h1>Available snapshots</h1>
-        <div class="card-group">
-          ${this._snapshots === undefined
-            ? undefined
-            : this._snapshots.length === 0
-            ? html`
-                <paper-card>
-                  <div class="card-content">
-                    You don't have any snapshots yet.
-                  </div>
-                </paper-card>
-              `
-            : this._snapshots.map(
-                (snapshot) => html`
-                  <paper-card
-                    class="pointer"
-                    .snapshot=${snapshot}
-                    @click=${this._snapshotClicked}
-                  >
+        <paper-icon-button
+          icon="hassio:reload"
+          slot="toolbar-icon"
+          aria-label="Reload snapshots"
+          @click=${this.refreshData}
+        ></paper-icon-button>
+
+        <div class="content">
+          <h1>
+            Create snapshot
+          </h1>
+          <p class="description">
+            Snapshots allow you to easily backup and restore all data of your
+            Home Assistant instance.
+          </p>
+          <div class="card-group">
+            <paper-card>
+              <div class="card-content">
+                <paper-input
+                  autofocus
+                  label="Name"
+                  name="snapshotName"
+                  .value=${this._snapshotName}
+                  @value-changed=${this._handleTextValueChanged}
+                ></paper-input>
+                Type:
+                <paper-radio-group
+                  name="snapshotType"
+                  .selected=${this._snapshotType}
+                  @selected-changed=${this._handleRadioValueChanged}
+                >
+                  <paper-radio-button name="full">
+                    Full snapshot
+                  </paper-radio-button>
+                  <paper-radio-button name="partial">
+                    Partial snapshot
+                  </paper-radio-button>
+                </paper-radio-group>
+                ${this._snapshotType === "full"
+                  ? undefined
+                  : html`
+                      Folders:
+                      ${this._folderList.map(
+                        (folder, idx) => html`
+                          <paper-checkbox
+                            .idx=${idx}
+                            .checked=${folder.checked}
+                            @checked-changed=${this._folderChecked}
+                          >
+                            ${folder.name}
+                          </paper-checkbox>
+                        `
+                      )}
+                      Add-ons:
+                      ${this._addonList.map(
+                        (addon, idx) => html`
+                          <paper-checkbox
+                            .idx=${idx}
+                            .checked=${addon.checked}
+                            @checked-changed=${this._addonChecked}
+                          >
+                            ${addon.name}
+                          </paper-checkbox>
+                        `
+                      )}
+                    `}
+                Security:
+                <paper-checkbox
+                  name="snapshotHasPassword"
+                  .checked=${this._snapshotHasPassword}
+                  @checked-changed=${this._handleCheckboxValueChanged}
+                >
+                  Password protection
+                </paper-checkbox>
+                ${this._snapshotHasPassword
+                  ? html`
+                      <paper-input
+                        label="Password"
+                        type="password"
+                        name="snapshotPassword"
+                        .value=${this._snapshotPassword}
+                        @value-changed=${this._handleTextValueChanged}
+                      ></paper-input>
+                    `
+                  : undefined}
+                ${this._error !== ""
+                  ? html` <p class="error">${this._error}</p> `
+                  : undefined}
+              </div>
+              <div class="card-actions">
+                <mwc-button
+                  .disabled=${this._creatingSnapshot}
+                  @click=${this._createSnapshot}
+                >
+                  Create
+                </mwc-button>
+              </div>
+            </paper-card>
+          </div>
+
+          <h1>Available snapshots</h1>
+          <div class="card-group">
+            ${this._snapshots === undefined
+              ? undefined
+              : this._snapshots.length === 0
+              ? html`
+                  <paper-card>
                     <div class="card-content">
-                      <hassio-card-content
-                        .hass=${this.hass}
-                        .title=${snapshot.name || snapshot.slug}
-                        .description=${this._computeDetails(snapshot)}
-                        .datetime=${snapshot.date}
-                        .icon=${snapshot.type === "full"
-                          ? "hassio:package-variant-closed"
-                          : "hassio:package-variant"}
-                        .icon-class="snapshot"
-                      ></hassio-card-content>
+                      You don't have any snapshots yet.
                     </div>
                   </paper-card>
                 `
-              )}
+              : this._snapshots.map(
+                  (snapshot) => html`
+                    <paper-card
+                      class="pointer"
+                      .snapshot=${snapshot}
+                      @click=${this._snapshotClicked}
+                    >
+                      <div class="card-content">
+                        <hassio-card-content
+                          .hass=${this.hass}
+                          .title=${snapshot.name || snapshot.slug}
+                          .description=${this._computeDetails(snapshot)}
+                          .datetime=${snapshot.date}
+                          .icon=${snapshot.type === "full"
+                            ? "hassio:package-variant-closed"
+                            : "hassio:package-variant"}
+                          .icon-class="snapshot"
+                        ></hassio-card-content>
+                      </div>
+                    </paper-card>
+                  `
+                )}
+          </div>
         </div>
-      </div>
+      </hass-tabs-subpage>
     `;
   }
 
diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts
index ea60843d8c..da2b55b243 100644
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -14,15 +14,22 @@ import {
 } from "../../../src/data/hassio/host";
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-host-info";
 import "./hassio-supervisor-info";
 import "./hassio-supervisor-log";
 
+import { supervisorTabs } from "../hassio-panel";
+
 @customElement("hassio-system")
 class HassioSystem extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
 
   @property() public supervisorInfo!: HassioSupervisorInfo;
 
@@ -32,22 +39,31 @@ class HassioSystem extends LitElement {
 
   public render(): TemplateResult | void {
     return html`
-      <div class="content">
-        <h1>Information</h1>
-        <div class="card-group">
-          <hassio-supervisor-info
-            .hass=${this.hass}
-            .supervisorInfo=${this.supervisorInfo}
-          ></hassio-supervisor-info>
-          <hassio-host-info
-            .hass=${this.hass}
-            .hostInfo=${this.hostInfo}
-            .hassOsInfo=${this.hassOsInfo}
-          ></hassio-host-info>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        hassio
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">System</span>
+        <div class="content">
+          <h1>Information</h1>
+          <div class="card-group">
+            <hassio-supervisor-info
+              .hass=${this.hass}
+              .supervisorInfo=${this.supervisorInfo}
+            ></hassio-supervisor-info>
+            <hassio-host-info
+              .hass=${this.hass}
+              .hostInfo=${this.hostInfo}
+              .hassOsInfo=${this.hassOsInfo}
+            ></hassio-host-info>
+          </div>
+          <h1>System log</h1>
+          <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
         </div>
-        <h1>System log</h1>
-        <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
-      </div>
+      </hass-tabs-subpage>
     `;
   }