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>

2 files changed, 78 insertions, 0 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>&ndash;</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);