Add system health card (#2626)

src/data/system_health.ts

@@ -0,0 +1,23 @@
+import { HomeAssistant } from "../types";
+
+export interface SystemHealthInfo {
+  homeassistant: {
+    version: string;
+    dev: boolean;
+    hassio: boolean;
+    virtualenv: string;
+    python_version: string;
+    docker: boolean;
+    arch: string;
+    timezone: string;
+    os_name: string;
+  };
+  [domain: string]: { [key: string]: string | number | boolean };
+}
+
+export const fetchSystemHealthInfo = (
+  hass: HomeAssistant
+): Promise<SystemHealthInfo> =>
+  hass.callWS({
+    type: "system_health/info",
+  });

src/panels/dev-info/ha-panel-dev-info.ts

@@ -16,6 +16,7 @@ import { haStyle } from "../../resources/ha-style";
 
 import "./system-log-card";
 import "./error-log-card";
+import "./system-health-card";
 
 const JS_VERSION = __BUILD__;
 const OPT_IN_PANEL = "states";
@@ -142,6 +143,7 @@ class HaPanelDevInfo extends LitElement {
               </paper-button>
             </p>
           </div>
+          <system-health-card .hass=${this.hass}></system-health-card>
           <system-log-card .hass=${this.hass}></system-log-card>
           <error-log-card .hass=${this.hass}></error-log-card>
         </div>
@@ -201,6 +203,12 @@ class HaPanelDevInfo extends LitElement {
         .about a {
           color: var(--dark-primary-color);
         }
+
+        system-health-card {
+          display: block;
+          max-width: 600px;
+          margin: 0 auto;
+        }
       `,
     ];
   }

src/panels/dev-info/system-health-card.ts

@@ -0,0 +1,118 @@
+import {
+  LitElement,
+  html,
+  CSSResult,
+  css,
+  PropertyDeclarations,
+  TemplateResult,
+} from "lit-element";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-spinner/paper-spinner";
+
+import { HomeAssistant } from "../../types";
+import {
+  SystemHealthInfo,
+  fetchSystemHealthInfo,
+} from "../../data/system_health";
+
+const sortKeys = (a: string, b: string) => {
+  if (a === "homeassistant") {
+    return -1;
+  }
+  if (b === "homeassistant") {
+    return 1;
+  }
+  if (a < b) {
+    return -1;
+  }
+  if (b < a) {
+    return 1;
+  }
+  return 0;
+};
+
+class SystemHealthCard extends LitElement {
+  public hass?: HomeAssistant;
+  private _info?: SystemHealthInfo;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _info: {},
+    };
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass) {
+      return;
+    }
+    const sections: TemplateResult[] = [];
+
+    if (!this._info) {
+      sections.push(
+        html`
+          <paper-spinner active></paper-spinner>
+        `
+      );
+    } else {
+      const domains = Object.keys(this._info).sort(sortKeys);
+      for (const domain of domains) {
+        const keys: TemplateResult[] = [];
+
+        for (const key of Object.keys(this._info[domain]).sort()) {
+          keys.push(html`
+            <tr>
+              <td>${key}</td>
+              <td>${this._info[domain][key]}</td>
+            </tr>
+          `);
+        }
+        if (domain !== "homeassistant") {
+          sections.push(
+            html`
+              <h3>${this.hass.localize(`domain.${domain}`) || domain}</h3>
+            `
+          );
+        }
+        sections.push(html`
+          <table>
+            ${keys}
+          </table>
+        `);
+      }
+    }
+
+    return html`
+      <paper-card heading="System Health">
+        <div class="card-content">${sections}</div>
+      </paper-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._fetchInfo();
+  }
+
+  private async _fetchInfo() {
+    this._info = await fetchSystemHealthInfo(this.hass!);
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-card {
+        display: block;
+      }
+
+      table {
+        width: 100%;
+      }
+
+      td:first-child {
+        width: 33%;
+      }
+    `;
+  }
+}
+
+customElements.define("system-health-card", SystemHealthCard);

src/translations/en.json

@@ -11,16 +11,19 @@
     "cover": "Cover",
     "device_tracker": "Device tracker",
     "fan": "Fan",
-    "history_graph": "History graph",
     "group": "Group",
+    "hassio": "Hass.io",
+    "history_graph": "History graph",
+    "homeassistant": "Home Assistant",
     "image_processing": "Image processing",
     "input_boolean": "Input boolean",
     "input_datetime": "Input datetime",
-    "input_select": "Input select",
     "input_number": "Input number",
+    "input_select": "Input select",
     "input_text": "Input text",
     "light": "Light",
     "lock": "Lock",
+    "lovelace": "Lovelace",
     "mailbox": "Mailbox",
     "media_player": "Media player",
     "notify": "Notify",