diff options
author | AppaRao Puli <apparao.puli@linux.intel.com> | 2018-12-31 17:01:51 +0530 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2019-03-19 21:34:35 +0000 |
commit | a2e36e0f479d1a9fa2b6d26448d5e070aea7259b (patch) | |
tree | ed872a216e8bd40f6c509584dd630f3458078b75 | |
parent | b1289ec99faa6345bb402a6887df82bb7dd9a7c0 (diff) | |
download | phosphor-webui-a2e36e0f479d1a9fa2b6d26448d5e070aea7259b.tar.gz phosphor-webui-a2e36e0f479d1a9fa2b6d26448d5e070aea7259b.zip |
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>
-rw-r--r-- | app/common/directives/syslog-filter.html | 32 | ||||
-rw-r--r-- | app/common/directives/syslog-filter.js | 46 | ||||
-rw-r--r-- | app/index.js | 1 | ||||
-rw-r--r-- | app/server-health/controllers/syslog-controller.html | 15 | ||||
-rw-r--r-- | app/server-health/controllers/syslog-controller.js | 37 | ||||
-rw-r--r-- | app/server-health/styles/syslog.scss | 77 |
6 files changed, 183 insertions, 25 deletions
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 inventory_overview_controller from './server-health/controllers/inventory 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 @@ window.angular && (function(angular) { $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 @@ window.angular && (function(angular) { }; $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 @@ window.angular && (function(angular) { 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 |