Add frontend for system log (#603)

* Add frontend for system log

* Minor review fixes

* Cleanup
This commit is contained in:
Pierre Ståhl 2017-11-17 06:25:46 +01:00 committed by Paulus Schoutsen
parent 1af77e682d
commit c0df1e2a89

View File

@ -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;
border-top: 1px solid var(--light-primary-color);
padding-top: 16px;
margin: 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);