v8: Log viewer datepicker (#5890)

src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js

@@ -189,7 +189,7 @@ Use this directive to render a date time picker
                 };
             }
 
-            // bind hook for onOpen
+			// bind hook for onOpen
             if (ctrl.options && ctrl.onClose) {
                 ctrl.options.onClose = function (selectedDates, dateStr, instance) {
                     $timeout(function () {

src/Umbraco.Web.UI.Client/src/less/components/umb-date-time-picker.less

@@ -3,23 +3,28 @@
     box-shadow: 0 5px 10px 0 rgba(0,0,0,0.16);
 }
 
-span.flatpickr-day {
+.flatpickr-day {
     border-radius: @baseBorderRadius;
     border: none;
 
     &.today:not(.active) {
         border: 1px solid;
     }
-}
 
-span.flatpickr-day:hover {
-    background-color: @gray-10;
-}
+    &:hover {
+        background-color: @gray-10;
+    }
 
-span.flatpickr-day.selected {
-    background-color: @ui-selected;
-}
+    &.selected, &.startRange, &.endRange {
+        background-color: @ui-selected-type !important;
+        border-color: @ui-selected-type !important;
 
-span.flatpickr-day.selected:hover {
-    background-color: @ui-selected-hover;
+        &:hover {
+            background-color: @ui-selected-type-hover !important;
+        }
+
+        &.startRange + .endRange:not(:nth-child(7n+1)) {
+            box-shadow: -10px 0 0 @ui-selected-type !important;
+        }
+    }
 }

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -156,11 +156,11 @@
 @ui-active-type-hover:  @blueMid;
 
 @ui-selected:           @sand-5;
-@ui-selected-hover:     ligthen(@sand-5, 10);
+@ui-selected-hover:     ligthen(@sand-5, 10%);
 @ui-selected-type:           @blueExtraDark;
 @ui-selected-type-hover:     @blueMid;
 @ui-selected-border:           @blueDark;
-@ui-selected-border-hover:     darken(@blueDark, 10);
+@ui-selected-border-hover:     darken(@blueDark, 10%);
 
 @ui-light-border:           @pinkLight;
 @ui-light-type:             @gray-4;

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

@@ -13,6 +13,15 @@
         vm.commonLogMessagesCount = 10;
         vm.dateRangeLabel = "";
 
+        vm.config = {
+            enableTime: false,
+            dateFormat: "Y-m-d",
+            time_24hr: false,
+            mode: "range",
+            maxDate: "today",
+            conjunction: " to "
+        };
+
         // ChartJS Options - for count/overview of log distribution
         vm.logTypeLabels = ["Debug", "Info", "Warning", "Error", "Fatal"];
         vm.logTypeData = [0, 0, 0, 0, 0];
@@ -23,6 +32,13 @@
                 position: 'left'
             }
         };
+
+        // Functions
+        vm.searchLogQuery = searchLogQuery;
+        vm.findMessageTemplate = findMessageTemplate;
+        vm.searchErrors = searchErrors;
+        vm.showMore = showMore;
+        vm.dateRangeChange = dateRangeChange;
         
         let querystring = $location.search();
         if (querystring.startDate) {
@@ -47,22 +63,16 @@
 
         vm.period = [vm.startDate, vm.endDate];
 
-        //functions
-        vm.searchLogQuery = searchLogQuery;
-        vm.findMessageTemplate = findMessageTemplate;
-        vm.searchErrors = searchErrors;
-        vm.showMore = showMore;
-
-        function preFlightCheck(){
+        function preFlightCheck() {
             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
+            // 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) {
                 vm.loading = false;
                 vm.canLoadLogs = result;
 
                 if (result) {
-                    //Can view logs - so initalise
+                    // Can view logs - so initialize
                     init();
                 }
             });
@@ -79,7 +89,7 @@
             var savedSearches = logViewerResource.getSavedSearches().then(function (data) {
                     vm.searches = data;
                 },
-                // fallback to some defaults if error from API response
+                // Fallback to some defaults if error from API response
                 function () {
                     vm.searches = [
                         {
@@ -134,7 +144,7 @@
                 vm.logLevelColor = index > -1 ? vm.logTypeColors[index] : '#000';
             });
 
-            //Set loading indicator to false when these 3 queries complete
+            // Set loading indicator to false when these 3 queries complete
             $q.all([savedSearches, numOfErrors, logCounts, commonMsgs, logLevel]).then(function () {
                 vm.loading = false;
             });
@@ -147,6 +157,8 @@
             });
         }
 
+        preFlightCheck();
+
         function searchLogQuery(logQuery) {
             $location.path("/settings/logViewer/search").search({
                 lq: logQuery,
@@ -164,25 +176,12 @@
             return "Log Overview for " + suffix;
         }
       
-        function searchErrors(){
+        function searchErrors() {
             var logQuery = "@Level='Fatal' or @Level='Error' or Has(@Exception)";
             searchLogQuery(logQuery);
         }
 
-        preFlightCheck();
-
-        /////////////////////
-
-        vm.config = {
-            enableTime: false,
-            dateFormat: "Y-m-d",
-            time_24hr: false,
-            mode: "range",
-            maxDate: "today",
-            conjunction: " to "
-        };
-
-        vm.dateRangeChange = function (selectedDates, dateStr, instance) {
+        function dateRangeChange(selectedDates, dateStr, instance) {
 
             if (selectedDates.length > 0) {
 
@@ -192,6 +191,13 @@
                 // is collapsed to a comma.
                 const startDate = selectedDates[0].toIsoDateString();
                 const endDate = selectedDates[selectedDates.length - 1].toIsoDateString(); // Take the last date as end
+
+                // Check if date range has changed
+                if (startDate === vm.period[0] && endDate === vm.period[1]) {
+                    // Same date range
+                    return;
+                }
+
                 $location.path("/settings/logViewer/overview").search({
                     startDate: startDate,
                     endDate: endDate