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
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>–</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>
- <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('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>
+ </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">–</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>
-</section>
+ <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>
+</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 @@
'$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 @@
$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 @@
}
}
+// Event Filter
#event-filter {
.filter-label {
color: $text-02;
@@ -47,7 +48,6 @@
.event__severity-filter {
margin-right: 2em;
margin-bottom: 1em;
- font-size: 0.9em;
.btn {
width: 100px;
float: left;
@@ -63,10 +63,6 @@
input {
width: 170px;
}
- label {
- height: 0;
- text-indent: -9999px;
- }
}
.event__status-filter {
float: left;
@@ -81,6 +77,30 @@
}
}
+.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;