Add frontend for system log (#603)

* Add frontend for system log

* Minor review fixes

* Cleanup

panels/dev-info/ha-panel-dev-info.html

@@ -1,11 +1,17 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
 <link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
+<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
 <link rel="import" href="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/resources/ha-style.html">
 
@@ -19,7 +25,7 @@
       }
 
       .content {
-        padding: 16px;
+        padding: 16px 0px 16px 0;
       }
 
       .about {
@@ -40,9 +46,7 @@
       }
 
       .error-log-intro {
-        margin-top: 16px;
+        margin: 16px;
-        border-top: 1px solid var(--light-primary-color);
-        padding-top: 16px;
       }
 
       paper-icon-button {
@@ -54,6 +58,51 @@
         clear: both;
         white-space: pre-wrap;
       }
+
+      .system-log-intro {
+        margin: 16px;
+        border-top: 1px solid var(--light-primary-color);
+        padding-top: 16px;
+      }
+
+      paper-card {
+        display: block;
+        padding-top: 16px;
+      }
+
+      paper-item {
+        cursor: pointer;
+      }
+
+      .header {
+        @apply(--paper-font-title);
+      }
+
+      paper-dialog {
+        border-radius: 2px;
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        paper-dialog {
+          margin: 0;
+          width: 100%;
+          max-height: calc(100% - 64px);
+
+          position: fixed !important;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          overflow: scroll;
+          border-bottom-left-radius: 0px;
+          border-bottom-right-radius: 0px;
+        }
+      }
+
+      .loading-container {
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+        height: 100px;
+       }
     </style>
 
     <app-header-layout has-scrolling-region>
@@ -64,7 +113,7 @@
         </app-toolbar>
       </app-header>
 
-      <div class='content fit'>
+      <div class='content'>
         <div class='about'>
           <p class='version'>
             <a href='https://home-assistant.io'><img src="/static/icons/favicon-192x192.png" height="192" /></a><br />
@@ -92,14 +141,65 @@
             Icons by <a href='https://www.google.com/design/icons/' target='_blank'>Google</a> and <a href='https://MaterialDesignIcons.com' target='_blank'>MaterialDesignIcons.com</a>.
           </p>
         </div>
+
+        <div class="system-log-intro">
+          <paper-card>
+            <template is='dom-if' if='[[updating]]'>
+              <div class='loading-container'>
+                <paper-spinner active></paper-spinner>
+              </div>
+            </template>
+            <template is='dom-if' if='[[!updating]]'>
+              <template is='dom-if' if='[[!items.length]]'>
+                <div class='card-content'>There are no new issues!</div>
+              </template>
+              <template is='dom-repeat' items='[[items]]'>
+                <paper-item on-tap='openLog'>
+                  <paper-item-body two-line>
+                    <div class="row">
+                      [[item.message]]
+                    </div>
+                    <div secondary>
+                      [[formatTime(item.timestamp)]] [[item.source]] ([[item.level]])
+                    </div>
+                  </paper-item-body>
+                </paper-item>
+              </template>
+
+              <div class='card-actions'>
+                <ha-call-service-button
+                 hass='[[hass]]'
+                 domain='system_log'
+                 service='clear'
+                 >Clear</ha-call-service-button>
+                <ha-progress-button
+                 on-tap='_fetchData'
+                 >Refresh</ha-progress-button>
+              </div>
+            </template>
+          </paper-card>
+        </div>
         <p class='error-log-intro'>
-          The following errors have been logged this session:
+          Press the button to load the full Home Assistant log.
           <paper-icon-button icon='mdi:refresh' on-tap='refreshErrorLog'></paper-icon-button>
         </p>
         <div class='error-log'>[[errorLog]]</div>
       </div>
     </app-header-layout>
-    </template>
+
+    <paper-dialog with-backdrop id="showlog">
+      <h2>Log Details ([[selectedItem.level]])</h2>
+      <paper-dialog-scrollable id="scrollable">
+	<p>[[fullTimeStamp(selectedItem.timestamp)]]</p>
+        <template is='dom-if' if='[[selectedItem.message]]'>
+          <pre>[[selectedItem.message]]</pre>
+        </template>
+        <template is='dom-if' if='[[selectedItem.exception]]'>
+          <pre>[[selectedItem.exception]]</pre>
+        </template>
+      </paper-dialog-scrollable>
+    </paper-dialog>
+  </template>
 </dom-module>
 
 <script>
@@ -131,12 +231,27 @@ class HaPanelDevInfo extends Polymer.Element {
         type: String,
         value: '',
       },
+
+      updating: {
+        type: Boolean,
+        value: true,
+      },
+
+      items: {
+        type: Array,
+        value: [],
+      },
+
+      selectedItem: {
+        type: Object,
+      },
     };
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.refreshErrorLog();
+    this.$.scrollable.dialogElement = this.$.showlog;
+    this._fetchData();
   }
 
   refreshErrorLog(ev) {
@@ -148,6 +263,28 @@ class HaPanelDevInfo extends Polymer.Element {
       this.errorLog = log || 'No errors have been reported.';
     }.bind(this));
   }
+
+  fullTimeStamp(date) {
+    return new Date(date * 1000);
+  }
+
+  formatTime(date) {
+    return window.hassUtil.formatTime(new Date(date * 1000));
+  }
+
+  openLog() {
+    this.selectedItem = event.model.item;
+    this.$.showlog.open();
+  }
+
+  _fetchData() {
+    this.updating = true;
+    this.hass.callApi('get', 'error/all')
+      .then(function (items) {
+        this.items = items;
+        this.updating = false;
+      }.bind(this));
+  }
 }
 
 customElements.define(HaPanelDevInfo.is, HaPanelDevInfo);