Gets the rough wrieframe to use real API data now
* List number of total errors * Pie Chart of log level counts * Message counts * Log items with paging & searching
This commit is contained in:
Warren
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name umbraco.resources.logViewerResource
|
||||
* @description Retrives Umbraco log items (by default from JSON files on disk)
|
||||
*
|
||||
*
|
||||
**/
|
||||
function logViewerResource($q, $http, umbRequestHelper) {
|
||||
|
||||
//the factory object returned
|
||||
return {
|
||||
|
||||
getNumberOfErrors: function(){
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.get(
|
||||
umbRequestHelper.getApiUrl(
|
||||
"logViewerApiBaseUrl",
|
||||
"GetNumberOfErrors")),
|
||||
'Failed to retrieve number of errors in logs')
|
||||
},
|
||||
|
||||
getLogLevelCounts: function(){
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.get(
|
||||
umbRequestHelper.getApiUrl(
|
||||
"logViewerApiBaseUrl",
|
||||
"GetLogLevelCounts")),
|
||||
'Failed to retrieve log level counts');
|
||||
},
|
||||
|
||||
getCommonLogMessages: function(){
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.get(
|
||||
umbRequestHelper.getApiUrl(
|
||||
"logViewerApiBaseUrl",
|
||||
"GetCommonLogMessages")),
|
||||
'Failed to retrieve common log messages');
|
||||
},
|
||||
|
||||
getLogs: function(options){
|
||||
|
||||
var defaults = {
|
||||
pageSize: 100,
|
||||
pageNumber: 1,
|
||||
orderDirection: "Descending",
|
||||
filterExpression: ''
|
||||
};
|
||||
|
||||
if (options === undefined) {
|
||||
options = {};
|
||||
}
|
||||
|
||||
//overwrite the defaults if there are any specified
|
||||
angular.extend(defaults, options);
|
||||
|
||||
//now copy back to the options we will use
|
||||
options = defaults;
|
||||
|
||||
|
||||
return umbRequestHelper.resourcePromise(
|
||||
$http.get(
|
||||
umbRequestHelper.getApiUrl(
|
||||
"logViewerApiBaseUrl",
|
||||
"GetLogs",
|
||||
options)),
|
||||
'Failed to retrieve common log messages');
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
angular.module('umbraco.resources').factory('logViewerResource', logViewerResource);
|
||||
@@ -1,13 +1,19 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function LogViewerOverviewController($scope, $location, localizationService) {
|
||||
function LogViewerOverviewController($scope, $location, localizationService, logViewerResource) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.loading = false;
|
||||
vm.page = {};
|
||||
vm.labels = {};
|
||||
|
||||
vm.logItems = {};
|
||||
vm.numberOfErrors = 0;
|
||||
vm.commonLogMessages = [];
|
||||
vm.logOptions = {};
|
||||
|
||||
// ChartJS Options - for count/overview of log distribution
|
||||
vm.logTypeLabels = ["Info", "Debug", "Warning", "Error", "Critical"];
|
||||
vm.logTypeData = [0, 0, 0, 0, 0];
|
||||
@@ -19,12 +25,33 @@
|
||||
}
|
||||
};
|
||||
|
||||
vm.editLanguage = editLanguage;
|
||||
//Functions
|
||||
vm.getLogs = getLogs;
|
||||
vm.changePageNumber = changePageNumber;
|
||||
vm.search = search;
|
||||
|
||||
|
||||
function init() {
|
||||
|
||||
vm.loading = true;
|
||||
logViewerResource.getNumberOfErrors().then(function (data) {
|
||||
vm.numberOfErrors = data;
|
||||
});
|
||||
|
||||
logViewerResource.getLogLevelCounts().then(function (data) {
|
||||
vm.logTypeData = [];
|
||||
vm.logTypeData.push(data.Information);
|
||||
vm.logTypeData.push(data.Debug);
|
||||
vm.logTypeData.push(data.Warning);
|
||||
vm.logTypeData.push(data.Error);
|
||||
vm.logTypeData.push(data.Fatal);
|
||||
});
|
||||
|
||||
logViewerResource.getCommonLogMessages().then(function(data){
|
||||
vm.commonLogMessages = data;
|
||||
});
|
||||
|
||||
//Get all logs on init load
|
||||
getLogs();
|
||||
|
||||
// localize labels
|
||||
var labelKeys = [
|
||||
@@ -40,11 +67,24 @@
|
||||
// set page name
|
||||
vm.page.name = vm.labels.languages;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function search(){
|
||||
//Reset pagenumber back to 1
|
||||
vm.logOptions.pageNumber = 1;
|
||||
getLogs();
|
||||
}
|
||||
|
||||
function editLanguage(language) {
|
||||
$location.search('create', null);
|
||||
$location.path("/settings/languages/edit/" + language.id);
|
||||
|
||||
function changePageNumber(pageNumber) {
|
||||
vm.logOptions.pageNumber = pageNumber;
|
||||
getLogs();
|
||||
}
|
||||
|
||||
function getLogs(){
|
||||
logViewerResource.getLogs(vm.logOptions).then(function (data) {
|
||||
vm.logItems = data;
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
@@ -12,30 +12,40 @@
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-load-indicator></umb-load-indicator>
|
||||
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<umb-editor-sub-header-content-left>
|
||||
<input class="form-control search-input" type="text" ng-model="vm.logOptions.filterExpression" style="width:850px;" />
|
||||
<umb-button
|
||||
button-style="success"
|
||||
type="button"
|
||||
action="vm.addLanguage()"
|
||||
label-key="'Choose Day'">
|
||||
button-style="button"
|
||||
type="button"
|
||||
action="vm.search()"
|
||||
label-key="general_search">
|
||||
</umb-button>
|
||||
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
|
||||
<div class="umb-package-details">
|
||||
<div class="umb-package-details" ng-if="!vm.loading">
|
||||
|
||||
<!-- Empty states -->
|
||||
<umb-empty-state ng-if="vm.logItems.totalItems === 0" position="center">
|
||||
<localize key="general_searchNoResult"></localize>
|
||||
</umb-empty-state>
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<umb-box data-element="node-info-history">
|
||||
<umb-box-content class="block-form">
|
||||
<div ng-if="vm.logItems.totalItems > 0">
|
||||
Total Items: {{ vm.logItems.totalItems }}
|
||||
</div>
|
||||
|
||||
<table class="table table-hover">
|
||||
<table class="table table-hover" ng-if="vm.logItems.totalItems > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
@@ -46,30 +56,25 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2018-08-24T08:27:06</td>
|
||||
<td>INFO</td>
|
||||
<td>DELLBOOK</td>
|
||||
<td>Some info log message</td>
|
||||
<tr ng-repeat="log in vm.logItems.items">
|
||||
<td>{{ log.Timestamp }}</td>
|
||||
<td>{{ log.Level }}</td>
|
||||
<td>{{ log.Properties.MachineName.Value }}</td>
|
||||
<td>{{ log.RenderedMessage }}</td>
|
||||
<td><button class="btn">View Details</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2018-08-24T08:27:06</td>
|
||||
<td>INFO</td>
|
||||
<td>DELLBOOK</td>
|
||||
<td>Ordered Components: <br/>
|
||||
Umbraco.Core.Runtime.CoreRuntimeComponent<br/>
|
||||
Umbraco.Web.Runtime.WebRuntimeComponent<br/>
|
||||
Umbraco.Core.Logging.WebProfilerComponent<br/>
|
||||
Umbraco.Core.Auditing.AuditEventsComponent<br/>
|
||||
Umbraco.Web.PublishedCache.NuCache.NuCacheComponent<br/>
|
||||
Umbraco.Core.Components.UmbracoCoreComponent
|
||||
</td>
|
||||
<td><button class="btn">View Details</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div ng-if="!vm.loading" class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-if="vm.logItems.totalPages"
|
||||
page-number="vm.logItems.pageNumber"
|
||||
total-pages="vm.logItems.totalPages"
|
||||
on-change="vm.changePageNumber(pageNumber)">
|
||||
</umb-pagination>
|
||||
</div>
|
||||
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
@@ -81,7 +86,7 @@
|
||||
<umb-box data-element="node-info-scheduled-publishing">
|
||||
<umb-box-header>Number of Errors</umb-box-header>
|
||||
<umb-box-content class="block-form" style="font-size: 40px; font-weight:900; text-align:center; color:#fe6561;">
|
||||
1234
|
||||
{{ vm.numberOfErrors }}
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
@@ -101,42 +106,18 @@
|
||||
</umb-box>
|
||||
|
||||
<!-- List of top 5 common log messages -->
|
||||
<umb-box data-element="node-info-scheduled-publishing">
|
||||
<umb-box data-element="node-info-scheduled-publishing" ng-if="vm.commonLogMessages">
|
||||
<umb-box-header>Common Log Messages</umb-box-header>
|
||||
<umb-box-content class="block-form">
|
||||
|
||||
<table class="table table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<tr ng-repeat="template in vm.commonLogMessages">
|
||||
<td>
|
||||
[Timing {TimingId}] {EndMessage} ({TimingDuration}ms)
|
||||
{{ template.MessageTemplate }}
|
||||
</td>
|
||||
<td>
|
||||
1234
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
[Timing {TimingId}] {StartMessage}
|
||||
</td>
|
||||
<td>
|
||||
487
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
The tree definition: {AddElement} could not be resolved to a .Net object type
|
||||
</td>
|
||||
<td>
|
||||
360
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Getting {TypeName}: found a cached type list.
|
||||
</td>
|
||||
<td>
|
||||
145
|
||||
{{ template.Count }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user