WebUI: Adding Filters support to system logs
Adding Filter support to system logs page
- Severity filter.
- Date filter with start and end date.
- Filter by Sensort Type.
Tested By:
Loaded System logs page with type selection
'Event' and check all filters.
Change-Id: I41eba4cd59c0f3c2933637bf0e207a3eca3214f1
Signed-off-by: AppaRao Puli <apparao.puli@linux.intel.com>
diff --git a/app/common/directives/syslog-filter.html b/app/common/directives/syslog-filter.html
new file mode 100644
index 0000000..f24311e
--- /dev/null
+++ b/app/common/directives/syslog-filter.html
@@ -0,0 +1,32 @@
+<section id="sys-log-filter" class="row column" aria-label="system log filtering">
+ <div class="inline sys-log__severity-filter">
+ <p class="filter-label">Filter by severity</p>
+ <button ng-repeat="severity in severityList" class="inline " ng-click="toggleSeverity(severity)"
+ ng-class="((selectedSeverityList.indexOf(severity) > -1) || ((severity == 'All') && (selectedSeverityList.length == 0))) ? 'btn-primary' : 'btn-secondary'">{{severity}}
+ </button>
+ </div>
+ <div class="inline sys-log__date-filter">
+ <p class="filter-label">Filter by date range</p>
+ <div class="inline">
+ <label for="sys-log-filter-start-date">Start Date</label>
+ <input id="sys-log-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="sys-log-filter-end-date">End Date</label>
+ <input id="sys-log-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 sys-log__status-filter">
+ <p class="filter-label">Filter by Type</p>
+ <!-- Type Filter-->
+ <div class="dropdown__wrapper">
+ <button type="button" class="dropdown__button" ng-click="typeFilter = !typeFilter">{{selectedType}}</button>
+ <ul class="dropdown__list inline" ng-show="typeFilter">
+ <li ng-repeat="typeName in filterTypes">
+ <button type="button" ng-click="selectType(typeName);">{{typeName}}</button>
+ </li>
+ </ul>
+ </div>
+ </div>
+</section>
diff --git a/app/common/directives/syslog-filter.js b/app/common/directives/syslog-filter.js
new file mode 100644
index 0000000..cdd32ae
--- /dev/null
+++ b/app/common/directives/syslog-filter.js
@@ -0,0 +1,46 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ angular.module('app.common.directives').directive('syslogFilter', [
+ 'APIUtils',
+ function(APIUtils) {
+ return {
+ 'restrict': 'E',
+ 'template': require('./syslog-filter.html'),
+ 'controller': [
+ '$rootScope', '$scope', 'dataService', '$location',
+ function($rootScope, $scope, dataService, $location) {
+ $scope.dataService = dataService;
+
+ $scope.toggleSeverityAll = function() {
+ $scope.selectedSeverityList = [];
+ };
+
+ $scope.toggleSeverity = function(severity) {
+ if (severity == 'All') {
+ $scope.selectedSeverityList = [];
+ return;
+ }
+
+ var index = $scope.selectedSeverityList.indexOf(severity);
+ if (index > -1) {
+ $scope.selectedSeverityList.splice(index, 1);
+ } else {
+ $scope.selectedSeverityList.push(severity);
+ }
+ if ($scope.selectedSeverityList.length >=
+ ($scope.severityList.length - 1)) {
+ $scope.selectedSeverityList = [];
+ }
+ };
+
+ $scope.selectType = function(type) {
+ $scope.selectedType = type;
+ $scope.typeFilter = false;
+ };
+ }
+ ]
+ };
+ }
+ ]);
+})(window.angular);
diff --git a/app/index.js b/app/index.js
index 3b1089d..38df0e9 100644
--- a/app/index.js
+++ b/app/index.js
@@ -75,6 +75,7 @@
import log_controller from './server-health/controllers/log-controller.js';
import sensors_overview_controller from './server-health/controllers/sensors-overview-controller.js';
import syslog_controller from './server-health/controllers/syslog-controller.js';
+import syslog_filter from './common/directives/syslog-filter.js';
import redfish_index from './redfish/index.js';
import redfish_controller from './redfish/controllers/redfish-controller.js';
diff --git a/app/server-health/controllers/syslog-controller.html b/app/server-health/controllers/syslog-controller.html
index b503bd0..6a5e8ea 100644
--- a/app/server-health/controllers/syslog-controller.html
+++ b/app/server-health/controllers/syslog-controller.html
@@ -1,6 +1,6 @@
<loader loading="loading"></loader>
<div id="sys-log">
- <section id="sys-log__events" class="table row column">
+ <section id="sys-log__logs">
<div class="row column">
<h1>System Logs</h1>
<div class="page-header">
@@ -15,7 +15,7 @@
</div>
<a ng-href="data:text/json;charset=utf-8,{{sysLogs}}" class="inline btn-export float-right" download="systemLogs.json" ng-show="sysLogs.length">Export </a>
<button class="inline clear-input float-right btn-secondary" ng-click="confirm = !confirm" ng-show="sysLogs.length">✕ Clear {{selectedRecordType}} Logs</button>
- <div class="inline__confirm event__confirm" ng-show="confirm">
+ <div class="inline__confirm sys-log__confirm" ng-show="confirm">
<div class="inline__confirm-message">
<p class="h3">Are you sure you want to <strong class="ng-binding">clear {{selectedRecordType}} logs</strong>?
</p>
@@ -39,7 +39,10 @@
</div>
</div>
</section>
- <section id="sys-log__events" class="table row column" ng-show="sysLogs.length">
+ <section>
+ <syslog-filter></syslog-filter>
+ </section>
+ <section id="sys-log__logs" class="table row column" ng-show="sysLogs.length">
<div class="table row column">
<div class="table__head">
<div class="table__row">
@@ -82,7 +85,7 @@
</div>
</div>
<div class="table__body">
- <div class="table__row" dir-paginate="log in (sysLogs | filter:filterBySearchTerms | orderBy:sortKey:reverse) | itemsPerPage:itemsPerPage">
+ <div class="table__row" dir-paginate="log in (sysLogs | filter:filterBySearchTerms | filter:filterBySeverity | filter:filterByDate | filter:filterByType | orderBy:sortKey:reverse) | itemsPerPage:itemsPerPage">
<div class="table__cell sys-log__col-wrapper sys-log__col-id">{{log.Id}}</div>
<div class="table__cell sys-log__col-wrapper">{{log.Created | localeDate}}</div>
<div class="table__cell sys-log__col-wrapper">{{log.Name}}</div>
@@ -94,7 +97,7 @@
</div>
<dir-pagination-controls></dir-pagination-controls>
</section>
- <section id="sys-log__events" class="table row column" ng-show="!sysLogs.length">
+ <section id="sys-log__logs" class="table row column" ng-show="!sysLogs.length">
<p>There are no {{selectedRecordType}} logs to display at this time.</p>
</section>
-</div> <!-- end event log -->
+</div> <!-- end log -->
diff --git a/app/server-health/controllers/syslog-controller.js b/app/server-health/controllers/syslog-controller.js
index cec1d99..c073320 100644
--- a/app/server-health/controllers/syslog-controller.js
+++ b/app/server-health/controllers/syslog-controller.js
@@ -29,10 +29,17 @@
$scope.recordTypeList =
['SEL', 'Event', 'Oem']; // From Redfish specification.
$scope.selectedRecordType = 'SEL'; // Default Select to SEL.
+ $scope.typeFilter = false;
+ $scope.selectedSeverityList = [];
+ $scope.severityList = ['All', 'Critical', 'Warning', 'Ok'];
+ $scope.filterTypes = [];
+ $scope.selectedType = 'All';
$scope.selectRecordType = function(recordType) {
$scope.selectedRecordType = recordType;
$scope.showLogDropdown = false;
+ $scope.filterTypes = [];
+
APIUtils.getSystemLogs(recordType)
.then(
function(res) {
@@ -102,7 +109,9 @@
};
$scope.filterBySearchTerms = function(log) {
- if (!$scope.searchTerms.length) return true;
+ if (!$scope.searchTerms.length) {
+ return true;
+ }
for (var i = 0, length = $scope.searchTerms.length; i < length;
i++) {
@@ -116,6 +125,32 @@
return true;
};
+ $scope.filterBySeverity = function(log) {
+ if ($scope.selectedSeverityList.length == 0) {
+ return true;
+ }
+
+ return ($scope.selectedSeverityList.indexOf(log.Severity) > -1);
+ };
+
+ $scope.filterByType = function(log) {
+ if ($scope.selectedType == 'All') {
+ return true;
+ }
+
+ return (($scope.selectedType == log.SensorType));
+ };
+
+ $scope.filterByDate = function(log) {
+ var logDate = new Date(log.Created);
+ if ($scope.start_date && $scope.end_date) {
+ return (
+ logDate >= $scope.start_date && logDate <= $scope.end_date);
+ } else {
+ return true;
+ }
+ };
+
setTimeout($scope.selectRecordType($scope.selectedRecordType), 2000);
}
]);
diff --git a/app/server-health/styles/syslog.scss b/app/server-health/styles/syslog.scss
index c225e55..52681e0 100644
--- a/app/server-health/styles/syslog.scss
+++ b/app/server-health/styles/syslog.scss
@@ -1,4 +1,4 @@
-// Event Log SCSS
+// System Logs SCSS
#sys-log {
// Dropwdowns filter
@@ -27,27 +27,68 @@
.sort_button_wrapper {
padding-top:.3em;
}
-.sys-log__filters {
- position: relative;
- padding-bottom: .5em;
- padding-top: .5em;
- @media (min-width: 1333px) {
- float: right;
- display: inline-block;
+#sys-log-filter {
+ .filter-label {
+ color: $darkgrey;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: .75em;
+ margin-bottom: 3px;
+ }
+ .sys-log__severity-filter {
+ float:left;
+ margin-right: 2em;
+ margin-bottom: 1em;
+ button {
+ padding: .6em 2em;
+ margin: 0px -1px;
+ min-height: 2.1em;
+ font-size: .9em;
+ font-weight: 700;
+ border-radius: 0;
+ &.first,
+ &.last {
+ border-radius: 3px;
+ }
+ @media (min-width: 583px) {
+ &.last {
+ border-left: 0;
+ }
+ }
+ }
+ .btn-primary {
+ border: 2px solid $primebtn__bg;
+ }
+ }
+ .sys-log__date-filter {
+ margin-right: 1em;
+ color: $darkgrey;
+ float:left;
+ input {
+ width: 170px;
+ height: 2.1rem;
+ }
+ label {
+ height: 0;
+ text-indent: -9999px;
+ }
+ }
+ .sys-log__status-filter {
+ float:left;
+ @include mediaQuery(medium) {
+ width: 25%;
+ }
+ .dropdown__wrapper,
+ .dropdown__button {
+ width: 100%;
+ text-align: left;
+ }
}
}
-.accord-trigger {
- position: absolute;
- right: 1em;
- top: .3em;
-}
-
-#sys-log__events,
-.sys-log__events {
+#sys-log__logs {
display: block;
- margin-top: 1.6em;
position: relative;
.header__actions-bar {
.btn-export,
@@ -306,4 +347,4 @@
}
}
}
-//end sys-log__events
+//end sys-log__logs