From 108ea2df5ed96153bae86f5bad0cbfbfeb46079e Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Mon, 31 Aug 2020 20:56:00 +0100
Subject: [PATCH] Made the logviewer more accessible  (#8213)

---
 .../editor/umbeditorheader.directive.js       |  12 +
 .../src/less/components/umb-logviewer.less    |  12 +
 .../src/views/logviewer/overview.html         |  65 ++--
 .../src/views/logviewer/search.controller.js  |   3 +-
 .../src/views/logviewer/search.html           | 280 +++++++++---------
 5 files changed, 199 insertions(+), 173 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index 58f799e5af71..2cfc6257a205 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -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" ||
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
index 56fa905310ee..32dcccb8da98 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less
@@ -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 {
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html b/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html
index 3ce1c0e054dd..3d5dd7f610e9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html
@@ -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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js
index a289a1b35324..b11445e3e48c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js
@@ -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();
+
         }
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
index ed8c4b3213aa..aad61b739598 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
@@ -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">
+                            <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>
 
-                            <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>
-
-                                    <!-- 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>
-
-                                            <div class="btn-group" deep-blur="log.searchDropdownOpen = !log.searchDropdownOpen">
-                                                <button
-                                                    type="button"
+                                        <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"
                                                     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-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-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://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://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://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/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>
-
-                                            </div>
-
-                                        </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-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="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="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="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.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="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="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>
+
+                                    </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>
+                    </umb-box-content>
+                </umb-box>
 
             </div>