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

Merge pull request #5784 from nathanwoulfe/5768-log-viewer-chart-naming

Browse Source 
V8: Make log naming and colors consistent between Log Search and Log Overview
This commit is contained in:
Warren Buckley
2019-07-15 11:47:20 +01:00
committed by GitHub
parent da525513a3 bc3e4847fe
commit 47dcd37d1d
5 changed files with 100 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/Umbraco.Web.UI.Client/src/views/logviewer/overview.controller.js
View File

@@ -10,11 +10,12 @@
vm.numberOfErrors = 0;
vm.commonLogMessages = [];
vm.commonLogMessagesCount = 10;
vm.dateRangeLabel = "";
// ChartJS Options - for count/overview of log distribution
vm.logTypeLabels = ["Info", "Debug", "Warning", "Error", "Critical"];
vm.logTypeLabels = ["Debug", "Info", "Warning", "Error", "Fatal"];
vm.logTypeData = [0, 0, 0, 0, 0];
vm.logTypeColors = [ '#dcdcdc', '#97bbcd', '#46bfbd', '#fdb45c', '#f7464a'];
vm.logTypeColors = ['#eaddd5', '#2bc37c', '#3544b1', '#ff9412', '#d42054'];
vm.chartOptions = {
legend: {
display: true,
@@ -23,21 +24,27 @@
};
let querystring = $location.search();
if(querystring.startDate){
if (querystring.startDate) {
vm.startDate = querystring.startDate;
}else{
vm.dateRangeLabel = getDateRangeLabel("Selected Time Period");
} else {
vm.startDate = new Date(Date.now());
vm.startDate.setDate(vm.startDate.getDate()-1);
vm.startDate.setDate(vm.startDate.getDate() - 1);
vm.startDate = vm.startDate.toIsoDateString();
vm.dateRangeLabel = getDateRangeLabel("Today");
}
if(querystring.endDate){
if (querystring.endDate) {
vm.endDate = querystring.endDate;
}else{
if (querystring.endDate === querystring.startDate) {
vm.dateRangeLabel = getDateRangeLabel("Selected Date");
}
} else {
vm.endDate = new Date(Date.now()).toIsoDateString();
}
vm.period = [vm.startDate, vm.endDate];
vm.period = [vm.startDate, vm.endDate];
//functions
vm.searchLogQuery = searchLogQuery;
@@ -48,11 +55,11 @@
vm.loading = true;
//Do our pre-flight check (to see if we can view logs)
//IE the log file is NOT too big such as 1GB & crash the site
logViewerResource.canViewLogs(vm.startDate, vm.endDate).then(function(result){
logViewerResource.canViewLogs(vm.startDate, vm.endDate).then(function (result) {
vm.loading = false;
vm.canLoadLogs = result;
if(result){
if (result) {
//Can view logs - so initalise
init();
}
@@ -63,39 +70,39 @@
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')"
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 has an exception property (Warning, Error & Fatal 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'",
"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 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 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)'"
{
"name": "Find all logs that use a specific log message template",
"query": "@MessageTemplate = '[Timing {TimingId}] {EndMessage} ({TimingDuration}ms)'"
}
]
});
});
var numOfErrors = logViewerResource.getNumberOfErrors(vm.startDate, vm.endDate).then(function (data) {
vm.numberOfErrors = data;
@@ -103,45 +110,56 @@
var logCounts = logViewerResource.getLogLevelCounts(vm.startDate, vm.endDate).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);
for (let [key, value] of Object.entries(data)) {
const index = vm.logTypeLabels.findIndex(x => key.startsWith(x));
if (index > -1) {
vm.logTypeData[index] = value;
}
}
});
var commonMsgs = logViewerResource.getMessageTemplates(vm.startDate, vm.endDate).then(function(data){
var commonMsgs = logViewerResource.getMessageTemplates(vm.startDate, vm.endDate).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) {
//Set loading indicator to false when these 3 queries complete
$q.all([savedSearches, numOfErrors, logCounts, commonMsgs]).then(function () {
vm.loading = false;
});
$timeout(function () {
navigationService.syncTree({ tree: "logViewer", path: "-1" });
navigationService.syncTree({
tree: "logViewer",
path: "-1"
});
});
}
function searchLogQuery(logQuery){
$location.path("/settings/logViewer/search").search({lq: logQuery, startDate: vm.startDate, endDate: vm.endDate});
function searchLogQuery(logQuery) {
$location.path("/settings/logViewer/search").search({
lq: logQuery,
startDate: vm.startDate,
endDate: vm.endDate
});
}
function findMessageTemplate(template){
function findMessageTemplate(template) {
var logQuery = "@MessageTemplate='" + template.MessageTemplate + "'";
searchLogQuery(logQuery);
}
function getDateRangeLabel(suffix) {
return "Log Overview for " + suffix;
}
function searchErrors(){
var logQuery = "@Level='Fatal' or @Level='Error' or Has(@Exception)";
searchLogQuery(logQuery);
}
preFlightCheck();
/////////////////////
vm.config = {
@@ -152,20 +170,21 @@
maxDate: "today",
conjunction: " to "
};
vm.dateRangeChange = function(selectedDates, dateStr, instance) {
if(selectedDates.length > 0){
vm.startDate = selectedDates[0].toIsoDateString();
vm.endDate = selectedDates[selectedDates.length-1].toIsoDateString(); // Take the last date as end
if(vm.startDate === vm.endDate){
vm.period = [vm.startDate];
}else{
vm.period = [vm.startDate, vm.endDate];
}
preFlightCheck();
vm.dateRangeChange = function (selectedDates, dateStr, instance) {
if (selectedDates.length > 0) {
// Update view by re-requesting route with updated querystring.
// By doing this we make sure the URL matches the selected time period, aiding sharing the link.
// Also resolves a minor layout issue where the " to " conjunction between the selected dates
// is collapsed to a comma.
const startDate = selectedDates[0].toIsoDateString();
const endDate = selectedDates[selectedDates.length - 1].toIsoDateString(); // Take the last date as end
$location.path("/settings/logViewer/overview").search({
startDate: startDate,
endDate: endDate
});
}
}

11
src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html
View File

@@ -3,7 +3,7 @@
<umb-editor-view footer="false">
<umb-editor-header
name="'Log Overview for Today'"
name="vm.dateRangeLabel"
name-locked="true"
hide-icon="true"
hide-description="true"
@@ -74,11 +74,10 @@
<umb-box>
<umb-box-header title="Time Period"></umb-box-header>
<umb-flatpickr
class="datepicker"
ng-model="vm.period"
options="vm.config"
on-close="vm.dateRangeChange(selectedDates, dateStr, instance)">
<umb-flatpickr class="datepicker"
ng-model="vm.period"
options="vm.config"
on-close="vm.dateRangeChange(selectedDates, dateStr, instance)">
</umb-flatpickr>
</umb-box>

35
src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js
View File

@@ -11,26 +11,28 @@
vm.showBackButton = true;
vm.page = {};
// this array is also used to map the logTypeColor param onto the log items
// in setLogTypeColors()
vm.logLevels = [
{
name: 'Verbose',
logTypeColor: 'gray'
logTypeColor: ''
},
{
name: 'Debug',
logTypeColor: 'secondary'
logTypeColor: 'gray'
},
{
name: 'Information',
logTypeColor: 'primary'
logTypeColor: 'success'
},
{
name: 'Warning',
logTypeColor: 'warning'
logTypeColor: 'primary'
},
{
name: 'Error',
logTypeColor: 'danger'
logTypeColor: 'warning'
},
{
name: 'Fatal',
@@ -118,7 +120,7 @@
"query": "Not(@Level='Verbose') and Not(@Level='Debug')"
},
{
"name": "Find all logs that has an exception property (Warning, Error & Critical with Exceptions)",
"name": "Find all logs that has an exception property (Warning, Error & Fatal with Exceptions)",
"query": "Has(@Exception)"
},
{
@@ -173,25 +175,8 @@
}
function setLogTypeColor(logItems) {
angular.forEach(logItems, function (log) {
switch (log.Level) {
case "Information":
log.logTypeColor = "primary";
break;
case "Debug":
log.logTypeColor = "secondary";
break;
case "Warning":
log.logTypeColor = "warning";
break;
case "Fatal":
case "Error":
log.logTypeColor = "danger";
break;
default:
log.logTypeColor = "gray";
}
});
logItems.forEach(logItem =>
logItem.logTypeColor = vm.logLevels.find(x => x.name === logItem.Level).logTypeColor);
}
function getFilterName(array) {

2
src/Umbraco.Web.UI/config/logviewer.searches.config.js
View File

@@ -4,7 +4,7 @@
"query": "Not(@Level='Verbose') and Not(@Level='Debug')"
},
{
"name": "Find all logs that has an exception property (Warning, Error & Critical with Exceptions)",
"name": "Find all logs that has an exception property (Warning, Error & Fatal with Exceptions)",
"query": "Has(@Exception)"
},
{

6
src/Umbraco.Web/Editors/LogViewerController.cs
View File

@@ -15,11 +15,11 @@ namespace Umbraco.Web.Editors
[PluginController("UmbracoApi")]
public class LogViewerController : UmbracoAuthorizedJsonController
{
private ILogViewer _logViewer;
private readonly ILogViewer _logViewer;
public LogViewerController(ILogViewer logViewer)
{
_logViewer = logViewer;
_logViewer = logViewer ?? throw new ArgumentNullException(nameof(logViewer));
}
private bool CanViewLogs(LogTimePeriod logTimePeriod)
@@ -91,8 +91,6 @@ namespace Umbraco.Web.Editors
var direction = orderDirection == "Descending" ? Direction.Descending : Direction.Ascending;
return _logViewer.GetLogs(logTimePeriod, filterExpression: filterExpression, pageNumber: pageNumber, orderDirection: direction, logLevels: logLevels);
}