From 53bdef68f4b9f9c429f0e48627dc2d29a21e1f2d Mon Sep 17 00:00:00 2001
From: Warren Buckley <warren@umbraco.com>
Date: Mon, 10 Sep 2018 11:23:48 +0100
Subject: [PATCH] * Click on a message template in right column - searches for
 it * Show more button - to list out more/all message templates * Get the
 variant style dropdown to work & display example queries

---
 .../views/logviewer/overview.controller.js    | 18 +++++++++
 .../src/views/logviewer/overview.html         | 38 ++++++++++++-------
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.controller.js b/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.controller.js
index 914234b4d3..c935ad1d81 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.controller.js
@@ -62,6 +62,7 @@
         vm.logItems = {};
         vm.numberOfErrors = 0;
         vm.commonLogMessages = [];
+        vm.commonLogMessagesCount = 10;
         vm.logOptions = {};
         vm.logOptions.orderDirection = 'Descending';
 
@@ -110,6 +111,8 @@
         vm.getFilterName = getFilterName;
         vm.setLogLevelFilter = setLogLevelFilter;
         vm.toggleOrderBy = toggleOrderBy;
+        vm.findMessageTemplate = findMessageTemplate;
+        vm.selectSearch = selectSearch;
 
 
         function init() {
@@ -225,6 +228,21 @@
             getLogs();
         }
 
+        function findMessageTemplate(template){
+
+            //Update search box input
+            vm.logOptions.filterExpression = "@MessageTemplate='" + template.MessageTemplate + "'";
+            search();
+        }
+
+        function selectSearch(searchItem){
+            //Update search box input
+            vm.logOptions.filterExpression = searchItem.query;
+            vm.dropdownOpen = false;
+
+            search();
+        }
+
         init();
 
     }
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 b65de92444..560e9fbc5d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html
@@ -56,9 +56,29 @@
             </umb-editor-sub-header>
 
             <umb-editor-sub-header>
-                <umb-editor-sub-header-content-left style="width:calc(100% - 350px - 20px); position:relative;">
-                    <!-- Search/expression filter -->
-                    <input class="form-control search-input" type="text" ng-model="vm.logOptions.filterExpression" style="width:100%;" />
+                <umb-editor-sub-header-content-left style="width:calc(100% - 350px - 20px);">
+
+                    <div style="position:relative; width:100%;">
+                        <!-- Search/expression filter -->
+                        <input class="form-control search-input" type="text" ng-model="vm.logOptions.filterExpression" style="width:100%;" />
+
+                        <a class="umb-variant-switcher__toggle ng-scope" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen" style="top:0;">
+                            <span class="ng-binding">Example Searches</span>
+                            <ins class="umb-variant-switcher__expand icon-navigation-down" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
+                        </a>
+
+                        <!-- Common Searches Dropdown -->
+                        <umb-dropdown ng-if="vm.dropdownOpen"  style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: -10px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
+                            <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active}" ng-repeat="search in vm.searches">
+                                <a href="" class="umb-variant-switcher__name-wrapper" ng-click="vm.selectSearch(search)" prevent-default>
+                                    <span class="umb-variant-switcher__name">{{search.name}}</span>
+                                    <span>{{ search.query }}</span>
+                                </a>
+                            </umb-dropdown-item>
+                        </umb-dropdown>
+                    </div>
+
+                    <!-- Search Button -->
                     <umb-button
                         button-style="button"
                         type="button"
@@ -66,15 +86,6 @@
                         label-key="general_search">
                     </umb-button>
 
-                    <umb-dropdown ng-if="vm.something"  style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: -10px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
-                        <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active}" ng-repeat="search in vm.searches">
-                            <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, search)" prevent-default>
-                                <span class="umb-variant-switcher__name">{{search.name}}</span>
-                                <span>{{ search.query }}</span>
-                            </a>
-                        </umb-dropdown-item>
-                    </umb-dropdown>
-
                 </umb-editor-sub-header-content-left>
             </umb-editor-sub-header>
 
@@ -180,7 +191,7 @@
                                 <em>Total Unique Message types</em>: {{ vm.commonLogMessages.length }}
                                     <table class="table table-hover">
                                         <tbody>
-                                            <tr ng-repeat="template in vm.commonLogMessages | limitTo:10">
+                                            <tr ng-repeat="template in vm.commonLogMessages | limitTo:vm.commonLogMessagesCount" ng-click="vm.findMessageTemplate(template)" style="cursor: pointer;">
                                                 <td>
                                                     {{ template.MessageTemplate }}
                                                 </td>
@@ -190,6 +201,7 @@
                                             </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>