Add error messaging for error log date filtering and Safari support

- Updated filters to use semantic markup (fieldset)
- Added check for input date type support and updated
  expected date format to the legend
- Added error message if date format is invalid
- Updated layout to support error message

Tested the changes in the following browsers:
- Safari
- IE 11
- Chrome
- Edge
- Firefox

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: If0b874644b80640dc5bfd8211459c012807ea492

3 files changed, 108 insertions, 61 deletions

diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
index d3c392f..f825229 100644
--- a/app/common/directives/log-filter.html
+++ b/app/common/directives/log-filter.html
@@ -1,58 +1,66 @@
-<section id="event-filter" class="row column" aria-label="event log filtering">
-    <div class="inline event__severity-filter">
-        <p class="filter-label">Filter by severity</p>
-        <button class="btn" ng-click="toggleSeverityAll()"
-                ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
-        </button>
-        <button class="btn" ng-click="toggleSeverity('high')"
-                ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
-        </button>
-        <button class="btn" ng-click="toggleSeverity('medium')"
-                ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
-        </button>
-        <button class="btn" ng-click="toggleSeverity('low')"
-                ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
-        </button>
-    </div>
-    <div class="inline event__date-filter">
-        <p class="filter-label">Filter by date range</p>
-        <div class="inline">
-            <label for="event-filter-start-date">Start Date</label>
-            <input id="event-filter-start-date" type="date" max="{{end_date | date:'yyyy-MM-dd'}}" placeholder="MM/DD/YYYY" ng-model="start_date"/>
-        </div>
-        <strong>&ndash;</strong>
-        <div class="inline">
-            <label for="event-filter-end-date">End Date</label>
-            <input id="event-filter-end-date" type="date" min="{{start_date | date:'yyyy-MM-dd'}}" placeholder="MM/DD/YYYY" ng-model="end_date"/>
-        </div>
-    </div>
-    <div class="inline event__status-filter">
-        <p class="filter-label">Filter by event status</p>
-        <!-- Status filter -->
-        <div class="dropdown__wrapper">
-            <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
-                    ng-class="{'active' : statusFilter}" toggle-flag="statusFilter">
-                    <span ng-if="selectedStatus.all">All events</span>
-                    <span ng-if="!selectedStatus.all && selectedStatus.resolved">Resolved events</span>
-                    <span ng-if="!selectedStatus.all && !selectedStatus.resolved">Unresolved events</span>
+<div id="event-filter">
+    <div class="event-filter__content row column">
+        <fieldset class="event__severity-filter">
+            <legend class="filter-label">Filter by severity</legend>
+            <button class="btn" ng-click="toggleSeverityAll()"
+                    ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
+            </button>
+            <button class="btn" ng-click="toggleSeverity('high')"
+                    ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
             </button>
-            <ul class="dropdown__list inline" ng-show="statusFilter">
-                <li>
-                    <button
-                        ng-click="selectedStatus.all = true; statusFilter = false;"
-                        ng-class="{'active' : selectedStatus.all}">All events</button>
-                </li>
-                <li>
-                    <button
-                        ng-click="selectedStatus.all = false; selectedStatus.resolved = true; statusFilter = false;"
-                        ng-class="{'active' : selectedStatus.resolved}">Resolved events</button>
-                </li>
-                <li>
-                    <button
-                        ng-click="selectedStatus.all = false; selectedStatus.resolved = false; statusFilter = false;"
-                        ng-class="{'active' : !selectedStatus.resolved}">Unresolved events</button>
-                </li>
-            </ul>
-        </div>
+            <button class="btn" ng-click="toggleSeverity('medium')"
+                    ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
+            </button>
+            <button class="btn" ng-click="toggleSeverity('low')"
+                    ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
+            </button>
+        </fieldset>
+        <fieldset ng-form="eventDateFilter" class="event__date-filter">
+            <legend class="filter-label">Filter by date range ({{supportsDateInput ? 'mm/dd/yyyy' : 'yyyy-mm-dd'}})</legend>
+            <div class="event__date-filter-content">
+                <div>
+                    <label for="event-filter-start-date" class="accessible-text">Start Date</label>
+                    <input name="eventFilterStartDate" id="event-filter-start-date" type="date" max="{{end_date | date:'yyyy-MM-dd'}}" placeholder="{{supportsDateInput ? 'mm/dd/yyyy' : 'yyyy-mm-dd'}}" ng-model="start_date"/>
+                    <p class="error" ng-show="eventDateFilter.eventFilterStartDate.$invalid">Invalid date format.</p>
+                </div>
+                <strong class="event__date-filter-divider" aria-hidden="true">&ndash;</strong>
+                <div>
+                    <label for="event-filter-end-date" class="accessible-text">End Date</label>
+                    <input name="eventFilterEndDate" id="event-filter-end-date" type="date" min="{{start_date | date:'yyyy-MM-dd'}}" placeholder="{{supportsDateInput ? 'mm/dd/yyyy' : 'yyyy-mm-dd'}}" ng-model="end_date"/>
+                    <p class="error" ng-show="eventDateFilter.eventFilterEndDate.$invalid">Invalid date format.</p>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+    <div class="event-filter__content row column">
+        <fieldset class="event__status-filter">
+            <legend class="filter-label">Filter by event status</legend>
+            <!-- Status filter -->
+            <div class="dropdown__wrapper">
+                <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
+                        ng-class="{'active' : statusFilter}" toggle-flag="statusFilter">
+                        <span ng-if="selectedStatus.all">All events</span>
+                        <span ng-if="!selectedStatus.all && selectedStatus.resolved">Resolved events</span>
+                        <span ng-if="!selectedStatus.all && !selectedStatus.resolved">Unresolved events</span>
+                </button>
+                <ul class="dropdown__list inline" ng-show="statusFilter">
+                    <li>
+                        <button
+                            ng-click="selectedStatus.all = true; statusFilter = false;"
+                            ng-class="{'active' : selectedStatus.all}">All events</button>
+                    </li>
+                    <li>
+                        <button
+                            ng-click="selectedStatus.all = false; selectedStatus.resolved = true; statusFilter = false;"
+                            ng-class="{'active' : selectedStatus.resolved}">Resolved events</button>
+                    </li>
+                    <li>
+                        <button
+                            ng-click="selectedStatus.all = false; selectedStatus.resolved = false; statusFilter = false;"
+                            ng-class="{'active' : !selectedStatus.resolved}">Unresolved events</button>
+                    </li>
+                </ul>
+            </div>
+        </fieldset>
     </div>
-</section>
+</div>
diff --git a/app/common/directives/log-filter.js b/app/common/directives/log-filter.js
index fcbe0b3..1b7939c 100644
--- a/app/common/directives/log-filter.js
+++ b/app/common/directives/log-filter.js
@@ -11,6 +11,8 @@ window.angular && (function(angular) {
           '$rootScope', '$scope', 'dataService', '$location',
           function($rootScope, $scope, dataService, $location) {
             $scope.dataService = dataService;
+            $scope.supportsDateInput = true;
+
             $scope.toggleSeverityAll = function() {
               $scope.selectedSeverity.all = !$scope.selectedSeverity.all;
 
@@ -46,6 +48,23 @@ window.angular && (function(angular) {
                 $scope.selectedSeverity.all = false;
               }
             };
+
+            /**
+             * Handle browsers that don't support the native date input element
+             * IE 11 and Safari do not support this native date element and
+             * users cannot select a date from a browser generated date picker.
+             * This is a test so that we can indicate to the user the proper
+             * date format based on date input element support.
+             */
+            const testDateInputSupport = () => {
+              const firstDateInput = document.querySelector('input[type=date]');
+
+              if (firstDateInput && firstDateInput.type == 'text') {
+                $scope.supportsDateInput = false;
+              }
+            };
+
+            testDateInputSupport();
           }
         ]
       };
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 301dc2c..bb5fc69 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -36,6 +36,7 @@ $priority-resolve--light: $base-02--04;
   }
 }
 
+// Event Filter
 #event-filter {
   .filter-label {
     color: $text-02;
@@ -47,7 +48,6 @@ $priority-resolve--light: $base-02--04;
   .event__severity-filter {
     margin-right: 2em;
     margin-bottom: 1em;
-    font-size: 0.9em;
     .btn {
       width: 100px;
       float: left;
@@ -63,10 +63,6 @@ $priority-resolve--light: $base-02--04;
     input {
       width: 170px;
     }
-    label {
-      height: 0;
-      text-indent: -9999px;
-    }
   }
   .event__status-filter {
     float: left;
@@ -81,6 +77,30 @@ $priority-resolve--light: $base-02--04;
   }
 }
 
+.event-filter__content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-top: 1em;
+
+  > fieldset {
+    flex: 0 0 auto;
+  }
+
+  .error {
+    margin-bottom: 0;
+  }
+}
+
+.event__date-filter-content {
+  display: flex;
+  align-items: flex-start;
+}
+
+.event__date-filter-divider {
+  margin: .25rem .5rem 0 .5rem;
+}
+
 .event-log__filters {
   position: relative;
   padding-bottom: 0.5em;