Add more info to system log (#4899)

* Add more info to system log

* Add util, oops

* Tweak UI

src/data/integration.ts

@@ -0,0 +1,10 @@
+import { LocalizeFunc } from "../common/translations/localize";
+
+export const integrationDocsUrl = (domain: string) =>
+  `https://www.home-assistant.io/integrations/${domain}`;
+
+export const integrationIssuesUrl = (domain: string) =>
+  `https://github.com/home-assistant/home-assistant/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`;
+
+export const domainToName = (localize: LocalizeFunc, domain: string) =>
+  localize(`domain.${domain}`) || domain;

src/data/system_log.ts

@@ -1,6 +1,7 @@
 import { HomeAssistant } from "../types";
 
 export interface LoggedError {
+  name: string;
   message: string;
   level: string;
   source: string;
@@ -14,3 +15,8 @@ export interface LoggedError {
 
 export const fetchSystemLog = (hass: HomeAssistant) =>
   hass.callApi<LoggedError[]>("GET", "error/all");
+
+export const getLoggedErrorIntegration = (item: LoggedError) =>
+  item.name.startsWith("homeassistant.components.")
+    ? item.name.split(".")[2]
+    : undefined;

src/panels/developer-tools/info/integrations-card.ts

@@ -9,6 +9,10 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import memoizeOne from "memoize-one";
+import {
+  integrationDocsUrl,
+  integrationIssuesUrl,
+} from "../../../data/integration";
 
 @customElement("integrations-card")
 class IntegrationsCard extends LitElement {
@@ -28,18 +32,12 @@ class IntegrationsCard extends LitElement {
                 <tr>
                   <td>${domain}</td>
                   <td>
-                    <a
+                    <a href=${integrationDocsUrl(domain)} target="_blank">
-                      href=${`https://www.home-assistant.io/integrations/${domain}`}
-                      target="_blank"
-                    >
                       Documentation
                     </a>
                   </td>
                   <td>
-                    <a
+                    <a href=${integrationIssuesUrl(domain)} target="_blank">
-                      href=${`https://github.com/home-assistant/home-assistant/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`}
-                      target="_blank"
-                    >
                       Issues
                     </a>
                   </td>

src/panels/developer-tools/logs/dialog-system-log-detail.ts

@@ -14,6 +14,13 @@ import { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import {
+  integrationDocsUrl,
+  integrationIssuesUrl,
+  domainToName,
+} from "../../../data/integration";
+import { formatSystemLogTime } from "./util";
+import { getLoggedErrorIntegration } from "../../../data/system_log";
 
 class DialogSystemLogDetail extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -30,6 +37,8 @@ class DialogSystemLogDetail extends LitElement {
     }
     const item = this._params.item;
 
+    const integration = getLoggedErrorIntegration(item);
+
     return html`
       <ha-paper-dialog
         with-backdrop
@@ -44,7 +53,34 @@ class DialogSystemLogDetail extends LitElement {
           )}
         </h2>
         <paper-dialog-scrollable>
-          <p>${new Date(item.timestamp * 1000)}</p>
+          <p>
+            Logger: ${item.name}
+            ${integration
+              ? html`
+                  <br />
+                  Integration: ${domainToName(this.hass.localize, integration)}
+                  (<a href=${integrationDocsUrl(integration)} target="_blank"
+                    >documentation</a
+                  >,
+                  <a href=${integrationIssuesUrl(integration)} target="_blank"
+                    >issues</a
+                  >)
+                `
+              : ""}
+            <br />
+            ${item.count > 0
+              ? html`
+                  First occured:
+                  ${formatSystemLogTime(
+                    item.first_occured,
+                    this.hass!.language
+                  )}
+                  (${item.count} occurences) <br />
+                `
+              : ""}
+            Last logged:
+            ${formatSystemLogTime(item.timestamp, this.hass!.language)}
+          </p>
           ${item.message
             ? html`
                 <pre>${item.message}</pre>
@@ -73,6 +109,15 @@ class DialogSystemLogDetail extends LitElement {
         ha-paper-dialog {
           direction: ltr;
         }
+        a {
+          color: var(--primary-color);
+        }
+        p {
+          margin-top: 0;
+        }
+        pre {
+          margin-bottom: 0;
+        }
       `,
     ];
   }

src/panels/developer-tools/logs/system-log-card.ts

@@ -15,20 +15,14 @@ import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import { HomeAssistant } from "../../../types";
-import { LoggedError, fetchSystemLog } from "../../../data/system_log";
+import {
-import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
+  LoggedError,
-import { formatTimeWithSeconds } from "../../../common/datetime/format_time";
+  fetchSystemLog,
+  getLoggedErrorIntegration,
+} from "../../../data/system_log";
 import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail";
-
+import { formatSystemLogTime } from "./util";
-const formatLogTime = (date, language: string) => {
+import { domainToName } from "../../../data/integration";
-  const today = new Date().setHours(0, 0, 0, 0);
-  const dateTime = new Date(date * 1000);
-  const dateTimeDay = new Date(date * 1000).setHours(0, 0, 0, 0);
-
-  return dateTimeDay < today
-    ? formatDateTimeWithSeconds(dateTime, language)
-    : formatTimeWithSeconds(dateTime, language);
-};
 
 @customElement("system-log-card")
 export class SystemLogCard extends LitElement {
@@ -42,6 +36,9 @@ export class SystemLogCard extends LitElement {
   }
 
   protected render(): TemplateResult {
+    const integrations = this._items
+      ? this._items.map((item) => getLoggedErrorIntegration(item))
+      : [];
     return html`
       <div class="system-log-intro">
         <ha-card>
@@ -61,25 +58,32 @@ export class SystemLogCard extends LitElement {
                       </div>
                     `
                   : this._items.map(
-                      (item) => html`
+                      (item, idx) => html`
                         <paper-item @click=${this._openLog} .logItem=${item}>
                           <paper-item-body two-line>
                             <div class="row">
                               ${item.message}
                             </div>
                             <div secondary>
-                              ${formatLogTime(
+                              ${formatSystemLogTime(
                                 item.timestamp,
                                 this.hass!.language
                               )}
-                              ${item.source} (${item.level})
+                              –
+                              ${integrations[idx]
+                                ? domainToName(
+                                    this.hass!.localize,
+                                    integrations[idx]!
+                                  )
+                                : item.source}
+                              (${item.level})
                               ${item.count > 1
                                 ? html`
                                     -
                                     ${this.hass.localize(
                                       "ui.panel.developer-tools.tabs.logs.multiple_messages",
                                       "time",
-                                      formatLogTime(
+                                      formatSystemLogTime(
                                         item.first_occured,
                                         this.hass!.language
                                       ),

src/panels/developer-tools/logs/util.ts

@@ -0,0 +1,13 @@
+import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
+
+import { formatTimeWithSeconds } from "../../../common/datetime/format_time";
+
+export const formatSystemLogTime = (date, language: string) => {
+  const today = new Date().setHours(0, 0, 0, 0);
+  const dateTime = new Date(date * 1000);
+  const dateTimeDay = new Date(date * 1000).setHours(0, 0, 0, 0);
+
+  return dateTimeDay < today
+    ? formatDateTimeWithSeconds(dateTime, language)
+    : formatTimeWithSeconds(dateTime, language);
+};