This is an automated email from the ASF dual-hosted git repository.
duncangrant pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 133b2c6 Re-position logbook query parameters, query result and query
result filters for a better UX
new 5771c98 Merge pull request #240 from algairim/logbook-widget
133b2c6 is described below
commit 133b2c6bac5a3750e3375b097bf22e5518c8be77
Author: Mykola Mandra <[email protected]>
AuthorDate: Tue Jul 6 15:17:08 2021 +0100
Re-position logbook query parameters, query result and query result filters
for a better UX
Signed-off-by: Mykola Mandra <[email protected]>
---
ui-modules/utils/logbook/logbook.js | 51 +++++++++---------
ui-modules/utils/logbook/logbook.less | 5 ++
ui-modules/utils/logbook/logbook.template.html | 72 +++++++++++++++-----------
3 files changed, 73 insertions(+), 55 deletions(-)
diff --git a/ui-modules/utils/logbook/logbook.js
b/ui-modules/utils/logbook/logbook.js
index 11bdbd8..0514aa0 100644
--- a/ui-modules/utils/logbook/logbook.js
+++ b/ui-modules/utils/logbook/logbook.js
@@ -41,7 +41,6 @@ export function logbook() {
$scope.getBrandedText = brBrandInfo.getBrandedText;
let vm = this;
- let scrollableElements = Array.from($element.find('textarea'));
$scope.$on('logbook.query', () => {
vm.doQuery();
@@ -56,7 +55,7 @@ export function logbook() {
}
vm.doQuery = function () {
$scope.waitingResponse = true;
- $scope.results = "Loading..."
+ $scope.results = 'Loading...';
const levels = $scope.allLevels ? ['ALL'] :
vm.getChecked($scope.logLevels);
@@ -64,8 +63,9 @@ export function logbook() {
reverseOrder: $scope.reverseOrder,
numberOfItems: $scope.numberOfItems,
levels: levels,
- initTime: $scope.initTime,
- finalTime: $scope.finalTime,
+ dateTimeFrom: $scope.dateTimeFrom,
+ dateTimeTo: $scope.dateTimeTo,
+ searchPhrase: $scope.searchPhrase
}
logbookApi.logbookQuery(params, true).then(function (success) {
@@ -74,7 +74,7 @@ export function logbook() {
$scope.results = vm.createLogOutputAsText($scope.logEntries);
scrollToMostRecentRecords();
}, function (error) {
- $scope.results = "Error getting the logs: \n" +
error.error.message;
+ $scope.results = 'Error getting the logs: \n' +
error.error.message;
console.log(JSON.stringify(error));
}).finally(() => {
$scope.waitingResponse = false;
@@ -86,37 +86,37 @@ export function logbook() {
const fieldsToShow = vm.getChecked($scope.logFields);
success.forEach(entry => {
let outputLine = [];
- if (fieldsToShow.includes("datetime") && entry.timestamp)
+ if (fieldsToShow.includes('datetime') && entry.timestamp)
outputLine.push(entry.timestamp);
- if (fieldsToShow.includes("taskId") && entry.taskId)
+ if (fieldsToShow.includes('taskId') && entry.taskId)
outputLine.push(entry.taskId);
- if (fieldsToShow.includes("entityIds") && entry.entityIds)
+ if (fieldsToShow.includes('entityIds') && entry.entityIds)
outputLine.push(entry.entityIds);
- if (fieldsToShow.includes("level") && entry.level)
+ if (fieldsToShow.includes('level') && entry.level)
outputLine.push(entry.level);
- if (fieldsToShow.includes("bundleId") && entry.bundleId)
+ if (fieldsToShow.includes('bundleId') && entry.bundleId)
outputLine.push(entry.bundleId);
- if (fieldsToShow.includes("class") && entry.class)
+ if (fieldsToShow.includes('class') && entry.class)
outputLine.push(entry.class);
- if (fieldsToShow.includes("threadName") && entry.threadName)
+ if (fieldsToShow.includes('threadName') && entry.threadName)
outputLine.push(entry.threadName);
- if (fieldsToShow.includes("message") && entry.message)
+ if (fieldsToShow.includes('message') && entry.message)
outputLine.push(entry.message);
- output.push(outputLine.join(" "));
+ output.push(outputLine.join(' '));
})
- return output.length > 0 ? output.join("\n") : "No results";
+ return output.length > 0 ? output.join('\n') : 'No results';
}
vm.resetForm = function () {
$scope.numberOfItems = 1000;
$scope.allLevels = true
$scope.logLevels = [
- {"name": "Debug", "value": "DEBUG", "selected": false},
- {"name": "Info", "value": "INFO ", "selected": false},
- {"name": "Warn", "value": "WARN ", "selected": false},
+ {"name": "Info", "value": "INFO", "selected": false},
+ {"name": "Warn", "value": "WARN", "selected": false},
{"name": "Error", "value": "ERROR", "selected": false},
{"name": "Fatal", "value": "FATAL", "selected": false},
+ {"name": "Debug", "value": "DEBUG", "selected": false},
];
$scope.fieldsToShow = ['datetime', 'class', 'message']
$scope.logFields = [
@@ -130,12 +130,13 @@ export function logbook() {
{"name": "Message", "value": "message", "selected": true},
];
$scope.reverseOrder = false;
- $scope.initTime = "";
- $scope.finalTime = "";
+ $scope.dateTimeFrom = '';
+ $scope.dateTimeTo = '';
+ $scope.searchPhrase = '';
}
- $scope.$watch('allLevels', function (v) {
- if (!v) {
+ $scope.$watch('allLevels', function (value) {
+ if (!value) {
if (vm.getChecked($scope.logLevels).length === 0) {
$scope.allLevels = true;
} else {
@@ -173,15 +174,15 @@ export function logbook() {
// NOOP: no need to scroll down. Reverse order displays
the most recent records at the beginning.
} else {
// Scroll down to the most recent records.
- scrollableElements.forEach(item => item.scrollTop =
item.scrollHeight);
+ Array.from($element.find('textarea')).forEach(item =>
item.scrollTop = item.scrollHeight);
}
});
}
$scope.waitingResponse = false;
vm.resetForm();
- $scope.logEntries = "";
- $scope.results = "-empty-"
+ $scope.logEntries = '';
+ $scope.results = null;
}
}
diff --git a/ui-modules/utils/logbook/logbook.less
b/ui-modules/utils/logbook/logbook.less
index 5150121..02f27de 100644
--- a/ui-modules/utils/logbook/logbook.less
+++ b/ui-modules/utils/logbook/logbook.less
@@ -34,7 +34,12 @@ input.logbook{
width:150px;
display:inline-block;
}
+
input[type=checkbox]{
margin-left: 20px;
margin-right: 5px;
+}
+
+textarea {
+ resize: none;
}
\ No newline at end of file
diff --git a/ui-modules/utils/logbook/logbook.template.html
b/ui-modules/utils/logbook/logbook.template.html
index 0cde2af..4f71df5 100644
--- a/ui-modules/utils/logbook/logbook.template.html
+++ b/ui-modules/utils/logbook/logbook.template.html
@@ -17,44 +17,56 @@
under the License.
-->
-<form>
- <div>
- <div class="form-group col-md-3">
- <label for="initTime">Initial time</label>
- <input id="initTime" type="datetime-local" ng-model="initTime"
class="form-control">
- <label for="finalTime">Final time</label>
- <input id="finalTime" type="datetime-local" ng-model="finalTime"
class="form-control">
-
- <label for="numberOfItems">Number of lines</label>
- <input id="numberOfItems" type="number" ng-model="numberOfItems"
class="form-control logbook" min="1">
- <label for="reverseOrder">Reverse order</label>
- <input id="reverseOrder" type="checkbox"
ng-model="reverseOrder"><br/>
- </div>
- <div class="form-group col-md-9">
- <h4>Log level</h4>
+<form class="form-group">
+ <div class="row">
+ <div class="col-md-6">
+ <label>Levels:</label>
<label>
- <input type="checkbox" ng-model="allLevels" class=""/>All
+ <input type="checkbox" ng-model="allLevels"
class="">All</label>
</label>
<label ng-repeat="level in logLevels">
- <input type="checkbox" ng-model="level.selected"
class=""/>{{level.name}}
+ <input type="checkbox" ng-model="level.selected"
class="">{{level.name}}</label>
</label>
</div>
- <div class="form-group col-md-9">
- <h4>Fields</h4>
- <label ng-repeat="field in logFields">
- <input type="checkbox" ng-model="field.selected"
class=""/>{{field.name}}
- </label>
+ <div class="col-md-3">
+ <label for="reverseOrder">Reverse order:</label>
+ <input id="reverseOrder" type="checkbox" ng-model="reverseOrder">
</div>
</div>
- <div class="form-group col-md-12">
- <button class="btn btn-outline btn-success" ng-click="vm.doQuery()"
ng-disabled="waitingResponse">
- Query
- </button>
- <button class="btn btn-outline" ng-click="vm.resetForm()">
- Reset form
- </button>
+ <br/>
+ <div class="row">
+ <div class="col-md-2">
+ <label for="dateTimeFrom">From:</label>
+ <input id="dateTimeFrom" type="datetime-local"
ng-model="dateTimeFrom" class="form-control">
+ </div>
+ <div class="col-md-2">
+ <label for="dateTimeTo">To:</label>
+ <input id="dateTimeTo" type="datetime-local" ng-model="dateTimeTo"
class="form-control">
+ </div>
+ <div class="col-md-2">
+ <label for="numberOfItems">Number of lines:</label>
+ <input id="numberOfItems" type="number" ng-model="numberOfItems"
class="form-control" min="1">
+ </div>
+ <div class="col-md-6">
+ <label for="searchPhrase">Search phrase:</label>
+ <div class="input-group">
+ <input id="searchPhrase" type="text" ng-model="searchPhrase"
class="form-control" placeholder="(None)">
+ <div class="input-group-btn">
+ <div class="btn-group" uib-dropdown keyboard-nav="true">
+ <button class="btn btn-default btn-success"
ng-click="vm.doQuery()" ng-disabled="waitingResponse">Query</button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</form>
-<div>
+<div ng-if="results">
<textarea id="logContent" class="logbook-text"
ng-model="results"></textarea>
+ <div class="form-group">
+ <br/>
+ <label>Filters:</label>
+ <label ng-repeat="field in logFields">
+ <input type="checkbox" ng-model="field.selected"
class="">{{field.name}}</label>
+ </label>
+ </div>
</div>
