From 12173388a029d4b2cd7f97f652d4af6f5a437c3a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 2 Sep 2019 06:53:12 +0200
Subject: [PATCH] Split Logs from info tab in dev tools (#3560)

* Split Logs from info tab in dev tools

* lint

* Remove border above logs
---
 .../developer-tools/developer-tools-router.ts |  4 ++
 .../ha-panel-developer-tools.ts               |  3 ++
 .../info/developer-tools-info.ts              |  5 +-
 .../logs/developer-tools-logs.ts              | 52 +++++++++++++++++++
 .../dialog-system-log-detail.ts               |  0
 .../{info => logs}/error-log-card.ts          |  0
 .../show-dialog-system-log-detail.ts          |  0
 .../{info => logs}/system-log-card.ts         |  2 -
 src/translations/en.json                      |  3 ++
 9 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 src/panels/developer-tools/logs/developer-tools-logs.ts
 rename src/panels/developer-tools/{info => logs}/dialog-system-log-detail.ts (100%)
 rename src/panels/developer-tools/{info => logs}/error-log-card.ts (100%)
 rename src/panels/developer-tools/{info => logs}/show-dialog-system-log-detail.ts (100%)
 rename src/panels/developer-tools/{info => logs}/system-log-card.ts (98%)

diff --git a/src/panels/developer-tools/developer-tools-router.ts b/src/panels/developer-tools/developer-tools-router.ts
index 924c82232e..7af7705ac1 100644
--- a/src/panels/developer-tools/developer-tools-router.ts
+++ b/src/panels/developer-tools/developer-tools-router.ts
@@ -28,6 +28,10 @@ class DeveloperToolsRouter extends HassRouterPage {
         tag: "developer-tools-info",
         load: () => import("./info/developer-tools-info"),
       },
+      logs: {
+        tag: "developer-tools-logs",
+        load: () => import("./logs/developer-tools-logs"),
+      },
       mqtt: {
         tag: "developer-tools-mqtt",
         load: () => import("./mqtt/developer-tools-mqtt"),
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index f982cc1f1a..edb2236237 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -52,6 +52,9 @@ class PanelDeveloperTools extends LitElement {
             <paper-tab page-name="info">
               ${this.hass.localize("ui.panel.developer-tools.tabs.info.title")}
             </paper-tab>
+            <paper-tab page-name="logs">
+              ${this.hass.localize("ui.panel.developer-tools.tabs.logs.title")}
+            </paper-tab>
             <paper-tab page-name="event">
               ${this.hass.localize(
                 "ui.panel.developer-tools.tabs.events.title"
diff --git a/src/panels/developer-tools/info/developer-tools-info.ts b/src/panels/developer-tools/info/developer-tools-info.ts
index f9b1be82f0..3c021f7c57 100644
--- a/src/panels/developer-tools/info/developer-tools-info.ts
+++ b/src/panels/developer-tools/info/developer-tools-info.ts
@@ -10,8 +10,6 @@ import {
 import { HomeAssistant } from "../../../types";
 import { haStyle } from "../../../resources/styles";
 
-import "./system-log-card";
-import "./error-log-card";
 import "./system-health-card";
 
 const JS_TYPE = __BUILD__;
@@ -119,8 +117,6 @@ class HaPanelDevInfo extends LitElement {
       </div>
       <div class="content">
         <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>
     `;
   }
@@ -181,6 +177,7 @@ class HaPanelDevInfo extends LitElement {
           display: block;
           max-width: 600px;
           margin: 0 auto;
+          padding-bottom: 16px;
         }
       `,
     ];
diff --git a/src/panels/developer-tools/logs/developer-tools-logs.ts b/src/panels/developer-tools/logs/developer-tools-logs.ts
new file mode 100644
index 0000000000..6bc7190ffd
--- /dev/null
+++ b/src/panels/developer-tools/logs/developer-tools-logs.ts
@@ -0,0 +1,52 @@
+import {
+  LitElement,
+  html,
+  CSSResult,
+  css,
+  TemplateResult,
+  property,
+} from "lit-element";
+
+import { HomeAssistant } from "../../../types";
+import { haStyle } from "../../../resources/styles";
+
+import "../logs/system-log-card";
+import "../logs/error-log-card";
+
+class HaPanelDevLogs extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="content">
+        <system-log-card .hass=${this.hass}></system-log-card>
+        <error-log-card .hass=${this.hass}></error-log-card>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+
+        .content {
+          direction: ltr;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "developer-tools-logs": HaPanelDevLogs;
+  }
+}
+
+customElements.define("developer-tools-logs", HaPanelDevLogs);
diff --git a/src/panels/developer-tools/info/dialog-system-log-detail.ts b/src/panels/developer-tools/logs/dialog-system-log-detail.ts
similarity index 100%
rename from src/panels/developer-tools/info/dialog-system-log-detail.ts
rename to src/panels/developer-tools/logs/dialog-system-log-detail.ts
diff --git a/src/panels/developer-tools/info/error-log-card.ts b/src/panels/developer-tools/logs/error-log-card.ts
similarity index 100%
rename from src/panels/developer-tools/info/error-log-card.ts
rename to src/panels/developer-tools/logs/error-log-card.ts
diff --git a/src/panels/developer-tools/info/show-dialog-system-log-detail.ts b/src/panels/developer-tools/logs/show-dialog-system-log-detail.ts
similarity index 100%
rename from src/panels/developer-tools/info/show-dialog-system-log-detail.ts
rename to src/panels/developer-tools/logs/show-dialog-system-log-detail.ts
diff --git a/src/panels/developer-tools/info/system-log-card.ts b/src/panels/developer-tools/logs/system-log-card.ts
similarity index 98%
rename from src/panels/developer-tools/info/system-log-card.ts
rename to src/panels/developer-tools/logs/system-log-card.ts
index e3800dcfec..1d3e264e46 100644
--- a/src/panels/developer-tools/info/system-log-card.ts
+++ b/src/panels/developer-tools/logs/system-log-card.ts
@@ -141,8 +141,6 @@ class SystemLogCard extends LitElement {
 
       .system-log-intro {
         margin: 16px;
-        border-top: 1px solid var(--light-primary-color);
-        padding-top: 16px;
       }
 
       .loading-container {
diff --git a/src/translations/en.json b/src/translations/en.json
index fd9d65bed1..72816e5649 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1320,6 +1320,9 @@
           "info": {
             "title": "Info"
           },
+          "logs": {
+            "title": "Logs"
+          },
           "events": {
             "title": "Events"
           },