strolch-wc-inspector/strolch-wc-operations-log.html

475 lines
17 KiB
HTML

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
<link rel="import" href="strolch-wc-inspector-behavior.html">
<link rel="import" href="strolch-wc-inspector-paging-behavior.html">
<dom-module id="strolch-wc-operations-log">
<template>
<style is="custom-style" include="strolch-wc-styles">
:host {
display: block;
margin: 0;
padding: 0;
height: 100%;
}
.g-table {
font-size: small;
}
.g-table th, .g-table td {
vertical-align: inherit;
}
vaadin-date-picker {
--vaadin-date-picker-yearscroller: {
color: var(--app-dark-highlight-fg-color);
background-color: var(--app-dark-highlight-bg-color);
overflow: initial;
};
--vaadin-date-picker-calendar-cell-selected: {
color: var(--app-regular-highlight-fg-color);
background-color: var(--app-regular-highlight-bg-color);
border-radius: 2px;
};
--vaadin-date-picker-calendar-cell-focused: {
color: var(--app-dark-highlight-fg-color);
background-color: var(--app-dark-highlight-bg-color);
};
--vaadin-date-picker-calendar-cell-today: {
color: unset;
background-color: unset;
font-weight: bold;
};
--vaadin-date-picker-footer: {
color: var(--google-grey-700);
};
}
paper-material {
background: white;
margin-top: 0.3em;
margin-bottom: 0.3em;
padding: 0.3em;
}
.dlg {
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
textarea {
padding: 10px;
margin: 10px;
width: calc(100% - 40px);
height: 100%;
min-height: 300px;
}
</style>
<paper-material elevation="1" class="g-m-3">
<div class="g-row g-pt-4">
<div class="g-3">
<paper-dropdown-menu no-label-float label="select realm" class="custom">
<paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRealm}}">
<template is="dom-repeat" items="[[realms]]">
<paper-item value="[[item.name]]">[[item.name]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
<div class="g-3 g-pl-2">
<paper-dropdown-menu no-label-float label="select severity" class="custom">
<paper-listbox attr-for-selected="value"
class="dropdown-content"
selected="{{selectedSeverity}}">
<paper-item value=""></paper-item>
<template is="dom-repeat" items="[[severities]]">
<paper-item value="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<paper-checkbox checked="{{exactSeverity}}">Exact</paper-checkbox>
</div>
<div class="g-3 g-pl-2">
<paper-input no-label-float value="{{searchTerm}}" class="searchField">
<template is="dom-if" if="[[isEmptyString(searchTerm)]]">
<iron-icon suffix icon="search"></iron-icon>
</template>
<template is="dom-if" if="[[!isEmptyString(searchTerm)]]">
<iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
</template>
</paper-input>
</div>
<div class="g-3">
<paper-icon-button class="g-pull-right"
icon="refresh"
title="Refresh"
on-tap="queryPage"></paper-icon-button>
</div>
</div>
<div class="g-row">
<div class="g-2">
<vaadin-date-picker label="from" value="{{from}}" i18n="{{i18n}}"></vaadin-date-picker>
</div>
<div class="g-2 g-pl-2">
<vaadin-date-picker label="to" value="{{to}}" i18n="{{i18n}}"></vaadin-date-picker>
</div>
</div>
<div class="g-row g-pt-4">
<div class="g-12">
<div class="g-row">
<div class="g-2"><b>ID</b></div>
<div class="g-2"><b>Date</b></div>
<div class="g-2"><b>Severity</b></div>
<div class="g-2"><b>Username</b></div>
<div class="g-3"><b>Locator</b></div>
<div class="g-1"></div>
</div>
<template is="dom-repeat" items="[[dataObj.data]]" as="log">
<hr />
<div class="g-row ">
<div class="g-2">[[log.id]]</div>
<div class="g-2">[[toLocalDateTime(log.date)]]</div>
<div class="g-2">[[log.severity]]</div>
<div class="g-2">[[log.username]]</div>
<div class="g-3">[[log.locator]]</div>
<div class="g-1">
<paper-icon-button icon="bug-report"
on-tap="showException"
hidden="[[!log.exception]]"></paper-icon-button>
</div>
</div>
<div class="g-row">
<div class="g-12">
<p>[[log.message]]</p>
</div>
</div>
</template>
<div class="g-row">
<div class="g-3"></div>
<div class="g-6">
<div class="g-m-2 g-center">
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]] ([[dataObj.dataSetSize]])</span>
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
</div>
</div>
<div class="g-3">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
</div>
</div>
</div>
</paper-material>
<paper-dialog id="dlg" modal>
<h2>[[dlgTitle]]</h2>
<p>[[dlgText]]</p>
<div class="buttons">
<paper-button dialog-confirm autofocus>Close</paper-button>
</div>
</paper-dialog>
<paper-dialog id="exDlg" class="dlg" modal>
<h3>Exception</h3>
<textarea value="{{exception::input}}"></textarea>
<div class="buttons">
<paper-button dialog-confirm autofocus>Close</paper-button>
</div>
</paper-dialog>
<iron-ajax id="ajax"
content-type="application/json"
handle-as="json"
on-response="_handleAjaxResponse"
on-error="onAjaxError"></iron-ajax>
</template>
<script>
Polymer({
is: 'strolch-wc-operations-log',
behaviors: [
StrolchInspectorBehavior,
StrolchInspectorPagingBehavior
],
properties: {
realms: {
type: Array,
value: null
},
selectedRealm: {
type: Object,
value: null,
observer: 'realmChanged'
},
severities: {
type: Array,
value: ['Info', 'Notification', 'Warning', 'Error', 'Exception']
},
selectedSeverity: {
type: String,
observer: 'severityChanged'
},
exactSeverity: {
type: Boolean,
observer: 'severityChanged'
},
exception: {
type: String,
value: ''
},
searchTerm: {
type: String,
observer: 'searchTermChanged'
},
from: {
type: String,
observer: 'fromChanged',
value: null
},
to: {
type: String,
observer: 'toChanged',
value: null
},
propagateShowDialog: {
type: Boolean,
value: function () {
return false
}
},
i18n: {
type: Object,
value: {
monthNames: [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
],
weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
firstDayOfWeek: 0,
week: "Week",
calendar: "Calendar",
clear: "Clear",
today: "Today",
cancel: "Cancel",
formatDate: function (datetime) {
if (typeof (datetime) == 'string') {
datetime = new Date(datetime);
}
var day = (datetime.getDate()).toString();
var month = (datetime.getMonth() + 1).toString();
var year = (datetime.getFullYear()).toString();
day = day.length < 2 ? "0" + day : day;
month = month.length < 2 ? "0" + month : month;
return year + "-" + month + "-" + day;
},
parseDate: function (datetimeString) {
var splitString = datetimeString.split("-");
if (splitString.length != 3) return null;
var year = Number(splitString[0]);
var month = Number(splitString[1]) - 1;
var day = Number(splitString[2]);
return new Date(year, month, day);
},
formatTitle: function (monthName, fullYear) {
return monthName + " " + fullYear;
}
}
}
},
toLocalDateTime: function (val) {
return Strolch.toDateTime(val);
},
listeners: {
"strolch-show-dialog": "onShowDialog"
},
severityChanged: function (newValue, oldValue) {
if (newValue != null)
this.queryPage();
},
searchTermChanged: function (newValue, oldValue) {
if (newValue != null)
this.queryPage();
},
fromChanged: function (newValue, oldValue) {
if (newValue != null)
this.queryPage();
},
toChanged: function (newValue, oldValue) {
if (newValue != null)
this.queryPage();
},
realmChanged: function (newValue, oldValue) {
if (newValue != null) {
Strolch.setQueryParamValue('realm', newValue);
this.queryPage();
}
},
showException: function (e) {
this.exception = e.model.log.exception;
this.$.exDlg.open();
},
onShowDialog: function (event) {
if (!this.propagateShowDialog) {
event.cancelBubble = true;
event.stopPropagation();
this.showError(event.detail.title, event.detail.text);
}
},
showError: function (title, text) {
this.dlgTitle = title;
this.dlgText = text;
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
this.$.dlg.open();
},
reload: function () {
this.reloadRealms();
},
onClearTapped: function () {
this.searchTerm = '';
},
queryPage: function () {
if (this.realms == null) {
return;
}
this.dlgTitle = 'Fetching log failed';
this._handleAjaxResponse = function (data) {
this.dataObj = data.detail.response;
};
this.$.ajax.url = this.basePath + 'rest/strolch/operations-log/' + this.selectedRealm;
this.$.ajax.method = 'GET';
this.$.ajax.params = {
severity: this.selectedSeverity ? this.selectedSeverity : null,
exactSeverity: this.exactSeverity,
from: this.from,
to: this.to,
query: this.searchTerm,
offset: this.dataObj.offset,
limit: this.dataObj.limit
};
this.$.ajax.generateRequest();
},
reloadRealms: function () {
var realmToSelect = Strolch.getQueryParamValue('realm');
this._handleAjaxResponse = function (data) {
if (data.detail.response.realms == null) {
return;
}
this.selectedRealm = null;
this.realms = data.detail.response.realms;
if (Strolch.isNotEmptyString(realmToSelect)) {
for (var i = 0; i < this.realms.length; i++) {
if (this.realms[i].name == realmToSelect) {
this.selectedRealm = realmToSelect;
break;
}
}
}
if (this.selectedRealm == null && this.realms.length > 0) {
this.selectedRealm = this.realms[0].name;
}
};
this.$.ajax.url = this.basePath + 'rest/strolch/inspector';
this.$.ajax.method = 'GET';
this.$.ajax.params = null;
this.$.ajax.generateRequest();
},
_handleAjaxResponse: function (evt) {
console.log('NOT YET DEFINED!');
}
});
</script>
</dom-module>