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

Made the logviewer more accessible (#8213)

Browse Source
This commit is contained in:
Rachel Breeze
2020-08-31 20:56:00 +01:00
committed by GitHub
parent ae7290ff8b
commit 108ea2df5e
5 changed files with 187 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
View File

@@ -227,6 +227,9 @@ Use this directive to construct a header inside the main editor window.
// to make it work for language edit/create
setAccessibilityForEditorState();
scope.loading = false;
} else if (scope.name) {
setAccessibilityForName();
scope.loading = false;
} else {
scope.loading = false;
}
@@ -265,6 +268,15 @@ Use this directive to construct a header inside the main editor window.
editorService.iconPicker(iconPicker);
};
function setAccessibilityForName() {
var setTitle = false;
if (scope.setpagetitle !== undefined) {
setTitle = scope.setpagetitle;
}
if (setTitle) {
setAccessibilityHeaderDirective(false, scope.editorfor, scope.nameLocked, scope.name, "", true);
}
}
function setAccessibilityForEditorState() {
var isNew = editorState.current.id === 0 ||
editorState.current.id === "0" ||

12
src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
View File

@@ -122,6 +122,11 @@
.table {
table-layout: fixed;
table {
display: table;
width: 100%;
}
thead th:first-child, thead th:nth-child(3) {
width: 20%;
}
@@ -130,9 +135,16 @@
width: 15%;
}
tr td:nth-child(3) {
word-break: break-word;
}
button {
white-space: normal;
word-break: break-word;
text-align-last: left;
}
}
.exception {

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

@@ -7,7 +7,8 @@
name-locked="true"
hide-icon="true"
hide-description="true"
hide-alias="true">
hide-alias="true"
setPageTitle="true">
</umb-editor-header>
<umb-editor-container>
@@ -32,17 +33,20 @@
<umb-box-header title="Saved Searches"></umb-box-header>
<umb-box-content>
<table>
<tr>
<td>
<a ng-click="vm.searchLogQuery()" 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>
<caption class="sr-only">Saved Searches</caption>
<tbody>
<tr>
<td>
<button type="button" ng-click="vm.searchLogQuery()" title="View all Logs" class="btn btn-link">All Logs <i class="icon-search" aria-hidden="true"></i></button>
</td>
</tr>
<!-- Fetch saved searches -->
<tr ng-repeat="search in vm.searches">
<td>
<button type="button" ng-click="vm.searchLogQuery(search.query)" title="{{search.name}}" class="btn btn-link">{{search.name}} <i class="icon-search" aria-hidden="true"></i></button>
</td>
</tr>
</tbody>
</table>
</umb-box-content>
</umb-box>
@@ -52,18 +56,19 @@
<umb-box-header title="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>
<table class="table table-hover">
<caption class="sr-only">Common Log Messages Total Unique Message types: {{ vm.commonLogMessages.length }}</caption>
<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>
<umb-button ng-if="vm.commonLogMessagesCount < vm.commonLogMessages.length"
button-style="action"
type="button"
@@ -89,20 +94,20 @@
<div ng-show=" vm.canLoadLogs">
<div class="umb-box-row">
<!-- No of Errors -->
<!-- No of Errors -->
<umb-box ng-click="vm.searchErrors()" style="cursor:pointer;">
<umb-box-header title="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>
</umb-box>
<umb-box>
<umb-box-header title="Log level"></umb-box-header>
<umb-box-content class="block-form" style="font-weight:900; text-align:center; color: {{ vm.logLevelColor }}">
{{ vm.logLevel }}
</umb-box-content>
</umb-box>
</umb-box>
</div>
<!-- Chart of diff log types -->
@@ -118,8 +123,8 @@
</canvas>
</umb-box-content>
</umb-box>
</umb-box>
</div>
</div>
</div>

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

@@ -138,11 +138,12 @@
"name": "Find all logs that use a specific log message template",
"query": "@MessageTemplate = '[Timing {TimingId}] {EndMessage} ({TimingDuration}ms)'"
}
]
];
});
//Get all logs on init load
getLogs();
}

256
src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
View File

@@ -2,14 +2,14 @@
<umb-editor-view footer="false">
<umb-editor-header
name="'Log Search'"
name-locked="true"
on-back="vm.back()"
show-back-button="vm.showBackButton"
hide-icon="true"
hide-description="true"
hide-alias="true">
<umb-editor-header name="'Log Search'"
name-locked="true"
on-back="vm.back()"
show-back-button="vm.showBackButton"
hide-icon="true"
hide-description="true"
hide-alias="true"
setPageTitle="true">
</umb-editor-header>
<umb-editor-container>
@@ -38,12 +38,7 @@
<umb-dropdown class="pull-left" ng-if="vm.page.showLevelFilter" on-close="vm.page.showLevelFilter = false;">
<umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
<div class="flex items-center">
<umb-checkbox input-id="loglevel-{{$index}}"
name="loglevel"
model="level.selected"
on-change="vm.setLogLevelFilter(level)">
</umb-checkbox>
<umb-checkbox input-id="loglevel-{{$index}}" name="loglevel" model="level.selected" on-change="vm.setLogLevelFilter(level)" />
<label for="loglevel-{{$index}}">
<umb-badge size="s" color="{{level.logTypeColor}}">{{level.name}}</umb-badge>
</label>
@@ -104,143 +99,144 @@
<div ng-if="!vm.loading" class="log-items">
<!-- Loader for the main logs content when paging -->
<umb-load-indicator ng-if="vm.logsLoading"></umb-load-indicator>
<!-- Loader for the main logs content when paging -->
<umb-load-indicator ng-if="vm.logsLoading"></umb-load-indicator>
<!-- Empty states -->
<umb-empty-state ng-if="vm.logItems.totalItems === 0 && !vm.logsLoading" position="center">
<localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize>
</umb-empty-state>
<!-- Empty states -->
<umb-empty-state ng-if="vm.logItems.totalItems === 0 && !vm.logsLoading" position="center">
<localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize>
</umb-empty-state>
<!-- Main Log Table -->
<umb-box data-element="node-info-history" ng-if="!vm.logsLoading && vm.logItems.totalItems > 0">
<umb-box-content class="block-form">
<!-- Main Log Table -->
<umb-box data-element="node-info-history" ng-if="!vm.logsLoading && vm.logItems.totalItems > 0">
<umb-box-content class="block-form">
<div ng-if="vm.logItems.totalItems > 0">
<localize key="logViewer_totalItems">Total Items</localize>: {{ vm.logItems.totalItems }}
</div>
<div ng-if="vm.logItems.totalItems > 0">
<p> <localize key="logViewer_totalItems">Total Items</localize>: {{ vm.logItems.totalItems }}</p>
</div>
<table class="table table-hover" ng-if="vm.logItems.totalItems > 0">
<thead>
<tr>
<th ng-click="vm.toggleOrderBy()">
<localize key="logViewer_timestamp">Timestamp</localize>
<umb-icon icon="{{vm.logOptions.orderDirection === 'Descending' ? 'icon-navigation-down' : 'icon-navigation-up'}}" class="icon-navigation-down" ng-class="{'icon-navigation-down': vm.logOptions.orderDirection === 'Descending', 'icon-navigation-up': vm.logOptions.orderDirection !== 'Descending'}">&nbsp;</umb-icon>
</th>
<th><localize key="logViewer_level">Level</localize></th>
<th><localize key="logViewer_machine">Machine</localize></th>
<th><localize key="logViewer_message">Message</localize></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="log in vm.logItems.items" ng-click="log.open = !log.open">
<td>{{ log.Timestamp | date:'medium' }}</td>
<td><umb-badge size="s" color="{{ log.logTypeColor }}">{{ log.Level }}</umb-badge></td>
<td><small>{{ log.Properties.MachineName.Value }}</small></td>
<td>{{ log.RenderedMessage }}</td>
</tr>
<table class="table table-hover" ng-if="vm.logItems.totalItems > 0">
<caption class="sr-only">Logs <localize key="logViewer_totalItems">Total Items</localize>: {{ vm.logItems.totalItems }}</caption>
<thead>
<tr>
<th ng-click="vm.toggleOrderBy()">
<localize key="logViewer_timestamp">Timestamp</localize>
<umb-icon icon="{{vm.logOptions.orderDirection === 'Descending' ? 'icon-navigation-down' : 'icon-navigation-up'}}" class="icon-navigation-down" ng-class="{'icon-navigation-down': vm.logOptions.orderDirection === 'Descending', 'icon-navigation-up': vm.logOptions.orderDirection !== 'Descending'}">&nbsp;</umb-icon>
</th>
<th><localize key="logViewer_level">Level</localize></th>
<th><localize key="logViewer_machine">Machine</localize></th>
<th><localize key="logViewer_message">Message</localize></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="log in vm.logItems.items" ng-click="log.open = !log.open">
<td>{{ log.Timestamp | date:'medium' }}</td>
<td><umb-badge size="s" color="{{ log.logTypeColor }}">{{ log.Level }}</umb-badge></td>
<td><small>{{ log.Properties.MachineName.Value }}</small></td>
<td>{{ log.RenderedMessage }}</td>
</tr>
<!-- Log Details (Exception & Properties) -->
<tr ng-repeat-end ng-if="log.open">
<td colspan="4">
<div ng-if="log.Exception"class="exception">
<h3 class="text-error"><localize key="logViewer_exception">Exception</localize></h3>
<p class="exception-message">{{ log.Exception }}</p>
</div>
<!-- Log Details (Exception & Properties) -->
<tr ng-repeat-end ng-if="log.open">
<td colspan="4">
<div ng-if="log.Exception" class="exception">
<h3 class="text-error"><localize key="logViewer_exception">Exception</localize></h3>
<p class="exception-message">{{log.Exception}}</p>
</div>
<h3><localize key="logViewer_properties">Properties</localize></h3>
<table class="table">
<tbody>
<tr>
<th><localize key="logViewer_timestamp">Timestamp</localize></th>
<td>{{log.Timestamp}}</td>
</tr>
<tr>
<th>@MessageTemplate</th>
<td>{{log.MessageTemplateText}}</td>
</tr>
<tr ng-repeat="(key, val) in log.Properties">
<th>{{key}}</th>
<td ng-switch on="key">
<a ng-switch-when="HttpRequestNumber" ng-click="vm.findItem(key, val.Value)" localize="title" title="@logViewer_findLogsWithRequestId">{{val.Value}} <i class="icon-search"></i></a>
<a ng-switch-when="SourceContext" ng-click="vm.findItem(key, val.Value)" localize="title" title="@logViewer_findLogsWithNamespace">{{val.Value}} <i class="icon-search"></i></a>
<a ng-switch-when="MachineName" ng-click="vm.findItem(key, val.Value)" localize="title" title="@logViewer_findLogsWithMachineName">{{val.Value}} <i class="icon-search"></i></a>
<a ng-switch-when="RequestUrl" href="{{val.Value}}" target="_blank" rel="noreferrer" localize="title" title="@logViewer_Open">{{val.Value}} <i class="icon-link"></i></a>
<span ng-switch-default>{{val.Value}}</span>
</td>
</tr>
</tbody>
</table>
<h3><localize key="logViewer_properties">Properties</localize></h3>
<table class="table">
<caption class="sr-only">{{log.RenderedMessage}} Properties for {{log.Timestamp | date:'medium'}}</caption>
<tbody>
<tr>
<th scope="row"><localize key="logViewer_timestamp">Timestamp</localize></th>
<td>{{log.Timestamp}}</td>
</tr>
<tr>
<th scope="row">@MessageTemplate</th>
<td>{{log.MessageTemplateText}}</td>
</tr>
<tr ng-repeat="(key, val) in log.Properties">
<th scope="row">{{key}}</th>
<td ng-switch on="key">
<button type="button" class="btn-reset" ng-switch-when="HttpRequestNumber" ng-click="vm.findItem(key, val.Value)" localize="title" title="@logViewer_findLogsWithRequestId" aria-describedby="{{key}}">{{val.Value}} <i class="icon-search" aria-hidden="true"></i> </button>
<button type="button" class="btn-reset" ng-switch-when="SourceContext" ng-click="vm.findItem(key, val.Value)" localize="title" title="@logViewer_findLogsWithNamespace" aria-describedby="{{key}}">{{val.Value}} <i class="icon-search" aria-hidden="true"></i></button>
<button type="button" class="btn-reset" ng-switch-when="MachineName" ng-click="vm.findItem(key, val.Value)" localize="title" title="@logViewer_findLogsWithMachineName" aria-describedby="{{key}}">{{val.Value}} <i class="icon-search" aria-hidden="true"></i></button>
<button type="button" class="btn-reset" ng-switch-when="RequestUrl" href="{{val.Value}}" target="_blank" rel="noopener" localize="title" title="@logViewer_Open" aria-describedby="{{key}}">{{val.Value}} <i class="icon-link" aria-hidden="true"></i></button>
<span ng-switch-default>{{val.Value}}</span>
</td>
</tr>
</tbody>
</table>
<div class="btn-group" deep-blur="log.searchDropdownOpen = !log.searchDropdownOpen">
<button
type="button"
<div class="btn-group" deep-blur="log.searchDropdownOpen = !log.searchDropdownOpen">
<button type="button"
class="btn btn-info dropdown-toggle"
aria-haspopup="true"
aria-expanded="{{log.searchDropdownOpen === undefined ? false : log.searchDropdownOpen}}"
ng-click="log.searchDropdownOpen = !log.searchDropdownOpen">
<umb-icon icon="icon-search" class="icon-search"></umb-icon>
<localize key="general_search">Search</localize>
<span class="caret" aria-hidden="true"></span>
</button>
<umb-icon icon="icon-search" class="icon-search"></umb-icon>
<localize key="general_search">Search</localize>
<span class="caret" aria-hidden="true"></span>
</button>
<umb-dropdown ng-if="log.searchDropdownOpen" on-close="log.searchDropdownOpen = false">
<umb-dropdown-item>
<a ng-href="https://www.google.com/search?q={{ log.RenderedMessage }}" href="" target="_blank" rel="noreferrer" localize="title" title="@logViewer_searchThisMessageWithGoogle">
<img src="https://www.google.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchWithGoogle">Search With Google</localize>
</a>
</umb-dropdown-item>
<umb-dropdown ng-if="log.searchDropdownOpen" on-close="log.searchDropdownOpen = false">
<umb-dropdown-item>
<a ng-href="https://www.google.com/search?q={{ log.RenderedMessage }}" href="" target="_blank" rel="noopener" localize="title" title="@logViewer_searchThisMessageWithGoogle">
<img src="https://www.google.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchWithGoogle">Search With Google</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://www.bing.com/search?q={{ log.RenderedMessage }}" href="" target="_blank" rel="noreferrer" localize="title" title="@logViewer_searchThisMessageWithBing">
<img src="https://www.bing.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchWithBing">Search With Bing</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://www.bing.com/search?q={{ log.RenderedMessage }}" href="" target="_blank" rel="noopener" localize="title" title="@logViewer_searchThisMessageWithBing">
<img src="https://www.bing.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchWithBing">Search With Bing</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://our.umbraco.com/search?q={{ log.RenderedMessage }}&content=wiki,forum,documentation" href="" target="_blank" rel="noreferrer" localize="title" title="@logViewer_searchThisMessageOnOurUmbracoForumsAndDocs">
<img src="https://our.umbraco.com/assets/images/app-icons/favicon.png" width="16" height="16" alt="" /> <localize key="logViewer_searchOurUmbraco">Search Our Umbraco</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://our.umbraco.com/search?q={{ log.RenderedMessage }}&content=wiki,forum,documentation" href="" target="_blank" rel="noopener" localize="title" title="@logViewer_searchThisMessageOnOurUmbracoForumsAndDocs">
<img src="https://our.umbraco.com/assets/images/app-icons/favicon.png" width="16" height="16" alt="" /> <localize key="logViewer_searchOurUmbraco">Search Our Umbraco</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://www.google.com/?q=site:our.umbraco.com {{ log.RenderedMessage }}&safe=off#q=site:our.umbraco.com {{ log.RenderedMessage }} {{ log.Properties['SourceContext'].Value }}&safe=off" href="" target="_blank" rel="noreferrer" localize="title" title="@logViewer_searchOurUmbracoForumsUsingGoogle">
<img src="https://www.google.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchOurUmbracoWithGoogle">Search Our Umbraco with Google</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://www.google.co.uk/?q=site:our.umbraco.com {{ log.RenderedMessage }}&safe=off#q=site:our.umbraco.com {{ log.RenderedMessage }} {{ log.Properties['SourceContext'].Value }}&safe=off" href="" target="_blank" rel="noopener" localize="title" title="@logViewer_searchOurUmbracoForumsUsingGoogle">
<img src="https://www.google.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchOurUmbracoWithGoogle">Search Our Umbraco with Google</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://github.com/umbraco/Umbraco-CMS/search?q={{ log.Properties['SourceContext'].Value }}" href="" target="_blank" rel="noreferrer" localize="title" title="@logViewer_searchWithinUmbracoSourceCodeOnGithub">
<img src="https://www.github.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchUmbracoSource">Search Umbraco Source</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://github.com/umbraco/Umbraco-CMS/search?q={{ log.Properties['SourceContext'].Value }}" href="" target="_blank" rel="noopener" localize="title" title="@logViewer_searchWithinUmbracoSourceCodeOnGithub">
<img src="https://www.github.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchUmbracoSource">Search Umbraco Source</localize>
</a>
</umb-dropdown-item>
<umb-dropdown-item>
<a ng-href="https://github.com/umbraco/Umbraco-CMS/issues?q={{ log.Properties['SourceContext'].Value }}" href="" target="_blank" rel="noreferrer" localize="title" title="@logViewer_searchUmbracoIssuesOnGithub">
<img src="https://www.github.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchUmbracoIssues">Search Umbraco Issues</localize>
</a>
</umb-dropdown-item>
</umb-dropdown>
<umb-dropdown-item>
<a ng-href="https://github.com/umbraco/Umbraco-CMS/issues?q={{ log.Properties['SourceContext'].Value }}" href="" target="_blank" rel="noopener" localize="title" title="@logViewer_searchUmbracoIssuesOnGithub">
<img src="https://www.github.com/favicon.ico" width="16" height="16" alt="" /> <localize key="logViewer_searchUmbracoIssues">Search Umbraco Issues</localize>
</a>
</umb-dropdown-item>
</umb-dropdown>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</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>
<!-- 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>
</umb-box-content>
</umb-box>
</div>