484 lines
17 KiB
HTML
484 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="../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-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="../paper-tabs/paper-tabs.html">
|
|
|
|
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
|
|
|
|
<link rel="import" href="strolch-wc-inspector-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>
|
|
</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="reloadOperationsLog"></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-3"><b>Date</b></div>
|
|
<div class="g-2"><b>Severity</b></div>
|
|
<div class="g-5"><b>Locator</b></div>
|
|
</div>
|
|
|
|
<template is="dom-repeat" items="[[operationsLog.data]]" as="log">
|
|
|
|
<hr />
|
|
|
|
<div class="g-row ">
|
|
<div class="g-2">[[log.id]]</div>
|
|
<div class="g-3">[[log.date]]</div>
|
|
<div class="g-2">[[log.severity]]</div>
|
|
<div class="g-4">[[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-12">
|
|
<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>[[operationsLog.offset]] to [[_getEnd(operationsLog)]] of [[operationsLog.size]]</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>
|
|
|
|
</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
|
|
],
|
|
|
|
properties: {
|
|
realms: {
|
|
type: Array,
|
|
value: function () {
|
|
return null;
|
|
}
|
|
},
|
|
selectedRealm: {
|
|
type: Object,
|
|
value: function () {
|
|
return null;
|
|
},
|
|
observer: 'realmChanged'
|
|
},
|
|
|
|
severities: {
|
|
type: Array,
|
|
value: ['Notification', 'Info', 'Warning', 'Error', 'Exception']
|
|
},
|
|
selectedSeverity: {
|
|
type: String,
|
|
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
|
|
},
|
|
|
|
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;
|
|
}
|
|
}
|
|
},
|
|
|
|
operationsLog: {
|
|
type: Object
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
value: function () {
|
|
return 0;
|
|
}
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
value: function () {
|
|
return 100;
|
|
}
|
|
}
|
|
},
|
|
|
|
_hasNext: function (objects) {
|
|
return objects != null && objects.nextOffset > objects.offset;
|
|
},
|
|
_getEnd: function (objects) {
|
|
if (this._hasNext(objects)) return objects.nextOffset;
|
|
return objects == null ? 0 : objects.size;
|
|
},
|
|
_toFirstPage: function () {
|
|
this.offset = 0;
|
|
this.reloadOperationsLog();
|
|
},
|
|
_toPreviousPage: function () {
|
|
this.offset = this.operationsLog.previousOffset;
|
|
this.reloadOperationsLog();
|
|
},
|
|
_toNextPage: function () {
|
|
this.offset = this.operationsLog.nextOffset;
|
|
this.reloadOperationsLog();
|
|
},
|
|
_toLastPage: function () {
|
|
this.offset = this.operationsLog.lastOffset;
|
|
this.reloadOperationsLog();
|
|
},
|
|
|
|
toLocalDateTime: function (val) {
|
|
return Strolch.toDateTime(val);
|
|
},
|
|
|
|
listeners: {
|
|
"strolch-show-dialog": "onShowDialog"
|
|
},
|
|
severityChanged: function (newValue, oldValue) {
|
|
if (newValue != null)
|
|
this.reloadOperationsLog();
|
|
},
|
|
searchTermChanged: function (newValue, oldValue) {
|
|
if (newValue != null)
|
|
this.reloadOperationsLog();
|
|
},
|
|
fromChanged: function (newValue, oldValue) {
|
|
if (newValue != null)
|
|
this.reloadOperationsLog();
|
|
},
|
|
toChanged: function (newValue, oldValue) {
|
|
if (newValue != null)
|
|
this.reloadOperationsLog();
|
|
},
|
|
realmChanged: function (newValue, oldValue) {
|
|
if (newValue != null) {
|
|
Strolch.setQueryParamValue('realm', newValue);
|
|
this.reloadOperationsLog();
|
|
}
|
|
},
|
|
|
|
showException: function (e) {
|
|
this.exception = e.model.log.exception;
|
|
this.$.exDlg.open();
|
|
},
|
|
|
|
onShowDialog: function (event) {
|
|
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();
|
|
},
|
|
|
|
ready: function () {
|
|
this.reloadRealms();
|
|
},
|
|
|
|
reloadOperationsLog: function () {
|
|
|
|
this.dlgTitle = 'Fetching log failed';
|
|
this._handleAjaxResponse = function (data) {
|
|
this.operationsLog = data.detail.response;
|
|
this.offset = this.operationsLog.offset;
|
|
this.limit = this.operationsLog.limit;
|
|
};
|
|
|
|
this.$.ajax.url = this.basePath + 'rest/strolch/operations-log/' + this.selectedRealm;
|
|
this.$.ajax.method = 'GET';
|
|
this.$.ajax.params = {
|
|
severity: this.selectedSeverity ? this.selectedSeverity : null,
|
|
from: this.from,
|
|
to: this.to,
|
|
query: this.searchTerm,
|
|
offset: this.offset,
|
|
limit: this.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>
|