yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start work on getting an overview page that will be entry point with shiny graphs and numbers before jumping over to search page

Browse Source
This commit is contained in:
Warren Buckley
2018-09-12 22:46:58 +01:00
parent 603a1c7814
commit 5bbe17af54
2 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/Umbraco.Web.UI.Client/src/views/logviewer/overview.controller.js Normal file
View File

@@ -0,0 +1,99 @@
(function () {
"use strict";
function LogViewerOverviewController($q, $location, logViewerResource) {
var vm = this;
vm.loading = false;
vm.searches = [];
vm.numberOfErrors = 0;
vm.commonLogMessages = [];
vm.commonLogMessagesCount = 10;
// ChartJS Options - for count/overview of log distribution
vm.logTypeLabels = ["Info", "Debug", "Warning", "Error", "Critical"];
vm.logTypeData = [0, 0, 0, 0, 0];
vm.logTypeColors = [ '#dcdcdc', '#97bbcd', '#46bfbd', '#fdb45c', '#f7464a'];
vm.chartOptions = {
legend: {
display: true,
position: 'left'
}
};
//functions
vm.searchLogQuery = searchLogQuery;
function init() {
vm.loading = true;
var savedSearches = logViewerResource.getSavedSearches().then(function (data) {
vm.searches = data;
},
// fallback to some defaults if error from API response
function () {
vm.searches = [
{
"name": "Find all logs where the Level is NOT Verbose and NOT Debug",
"query": "Not(@Level='Verbose') and Not(@Level='Debug')"
},
{
"name": "Find all logs that has an exception property (Warning, Error & Critical with Exceptions)",
"query": "Has(@Exception)"
},
{
"name": "Find all logs that have the property 'Duration'",
"query": "Has(Duration)"
},
{
"name": "Find all logs that have the property 'Duration' and the duration is greater than 1000ms",
"query": "Has(Duration) and Duration > 1000"
},
{
"name": "Find all logs that are from the namespace 'Umbraco.Core'",
"query": "StartsWith(SourceContext, 'Umbraco.Core')"
},
{
"name": "Find all logs that use a specific log message template",
"query": "@MessageTemplate = '[Timing {TimingId}] {EndMessage} ({TimingDuration}ms)'"
}
]
});
var numOfErrors = logViewerResource.getNumberOfErrors().then(function (data) {
vm.numberOfErrors = data;
});
var logCounts = 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);
});
var commonMsgs = logViewerResource.getMessageTemplates().then(function(data){
vm.commonLogMessages = data;
});
//Set loading indicatior to false when these 3 queries complete
$q.all([savedSearches, numOfErrors, logCounts, commonMsgs]).then(function(data) {
vm.loading = false;
});
}
function searchLogQuery(logQuery){
$location.path("/developer/logViewer/search").search({lq: logQuery});
}
init();
}
angular.module("umbraco").controller("Umbraco.Editors.LogViewer.OverviewController", LogViewerOverviewController);
})();

85
src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html Normal file
View File

@@ -0,0 +1,85 @@
<div data-element="editor-logs" ng-controller="Umbraco.Editors.LogViewer.OverviewController as vm" class="clearfix">
<umb-editor-view footer="false">
<umb-editor-header
name="'Log Overview for Today'"
name-locked="true"
hide-icon="true"
hide-description="true"
hide-alias="true">
</umb-editor-header>
<umb-editor-container>
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<div class="umb-package-details" ng-if="!vm.loading">
<div class="umb-package-details__main-content">
<!-- Saved Searches -->
<umb-box>
<umb-box-header>Saved Searches</umb-box-header>
<umb-box-content>
<table>
<tr>
<td>
<a ng-click="vm.openSearch()" title="View all Logs" class="btn btn-link">All Logs <i class="icon-search"></i></a>
</td>
</tr>
<!-- Fetch saved searches -->
<tr ng-repeat="search in vm.searches">
<td>
<a ng-click="vm.searchLogQuery(search.query)" title="{{search.name}}" class="btn btn-link">{{search.name}} <i class="icon-search"></i></a>
</td>
</tr>
</table>
</umb-box-content>
</umb-box>
<!-- List of top X common log messages -->
<umb-box>
<umb-box-header>Common Log Messages</umb-box-header>
<umb-box-content class="block-form">
<em>Total Unique Message types</em>: {{ vm.commonLogMessages.length }}
<table class="table table-hover">
<tbody>
<tr ng-repeat="template in vm.commonLogMessages | limitTo:vm.commonLogMessagesCount" ng-click="vm.findMessageTemplate(template)" style="cursor: pointer;">
<td>
{{ template.MessageTemplate }}
</td>
<td>
{{ template.Count }}
</td>
</tr>
</tbody>
</table>
<a class="btn btn-primary" ng-if="vm.commonLogMessagesCount < vm.commonLogMessages.length" ng-click="vm.commonLogMessagesCount = vm.commonLogMessagesCount +10">Show More</a>
</umb-box-content>
</umb-box>
</div>
<div class="umb-package-details__sidebar">
<!-- No of Errors -->
<umb-box ng-click="vm.searchLogQuery('Has(@Exception)')" style="cursor:pointer;">
<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;">
{{ vm.numberOfErrors }}
</umb-box-content>
</umb-box>
<!-- Chart of diff log types -->
<umb-box>
<umb-box-header>Log Types</umb-box-header>
<umb-box-content class="block-form">
<canvas chart-doughnut
chart-data="vm.logTypeData"
chart-labels="vm.logTypeLabels"
chart-colors="vm.logTypeColors"
chart-options="vm.chartOptions"></canvas>
</umb-box-content>
</umb-box>
</div>
</div>
</umb-editor-container>
</umb-editor-view>
</div>