Add event log search and filter capabilities
Change-Id: I9dc891e0f1e30abe488d401c57e1cf4f5656c3af
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
new file mode 100644
index 0000000..bf2cc1f
--- /dev/null
+++ b/app/common/directives/log-event.html
@@ -0,0 +1,60 @@
+<div class="row column event-log__single-event"
+ ng-class="{'active': event.meta, 'selected': event.selected}">
+ <div class="row">
+ <div class="inline__confirm" ng-class="{active: event.confirm}">
+ <div class="inline__confirm-message">
+ <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete this
+ event</strong>?</p>
+ </div>
+ <div class="inline__confirm-buttons">
+ <button class="btn-primary" ng-click="accept()">Yes</button>
+ <button class="btn-primary" ng-click="event.confirm=false;">No</button>
+ </div>
+ </div>
+ <div class="column small-1 large-2 event-log__col-check">
+ <label class="control-check">
+ <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
+ ng-checked="event.selected"/>
+ <span class="control__indicator"></span>
+ </label>
+ </div>
+ <div class="column small-9 large-9 event-log__event-info"
+ ng-click="event.meta = ! event.meta">
+ <p class="inline event__priority event-resolved" ng-hide="event.Resolved == 0">Resolved</p>
+ <p class="inline event__priority med-priority" ng-class="{'low-priority': event.priority == 'Low', 'medium-priority': event.priority == 'Medium', 'high-priority': event.priority == 'High'}" ng-hide="event.Resolved == 1">{{event.priority}}</p>
+ <p class="inline event__severity">{{event.severity_code}}</p>
+ <p class="inline event__description">{{event.Severity}}</p>
+ <div>
+ <p class="inline event__id">#{{event.Id}}</p>
+ <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy HH:mm:ss '+tmz: tmz}}</p></div>
+ </div>
+ <div class="column small-1 large-1">
+ <button class="accord-trigger" ng-class="{'active': event.meta}"
+ ng-click="event.meta = ! event.meta"></button>
+ </div>
+ </div>
+ <div class="row event__metadata-row" ng-class="{'active': event.meta}">
+ <div class="column small-1 large-1 event-log__col-check"> </div>
+ <div class="column small-11 large-11 end">
+ <div class="event__metadata">{{event.additional_data}}
+ </div>
+ <div>
+ <div class="event__actions">
+ <button class="btn-meta-copy" clipboard text="event.additional_data" on-copied="copySuccess(event)" on-error="copyfailed(err)">
+ <img class="event__icon" src="assets/images/icon-copy.svg" alt=""/><span ng-if="!event.copied">Copy</span><span ng-if="event.copied">Copied</span>
+ </button>
+ <button class="btn-delete" ng-click="event.confirm= ! event.confirm"><img
+ class="event__icon"
+ src="assets/images/icon-trashcan.svg"
+ alt=""/>Delete
+ </button>
+ <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg" alt=""/>Resolved</button>
+ </div>
+ <div class="event__related" ng-show="event.related_items.length">
+ <p class="inline event__related-label">Related items:</p>
+ <p class="event__related-item" ng-repeat="item in event.related_items">{{item}}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/app/common/directives/log-event.js b/app/common/directives/log-event.js
new file mode 100644
index 0000000..387ce3b
--- /dev/null
+++ b/app/common/directives/log-event.js
@@ -0,0 +1,28 @@
+window.angular && (function (angular) {
+ 'use strict';
+
+ angular
+ .module('app.common.directives')
+ .directive('logEvent', ['APIUtils', function (APIUtils) {
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'common/directives/log-event.html',
+ 'scope': {
+ 'event': '=',
+ 'tmz': '='
+ },
+ 'controller': ['$rootScope', '$scope','dataService', '$location', '$timeout', function($rootScope, $scope, dataService, $location, $timeout){
+ $scope.dataService = dataService;
+ $scope.copySuccess = function (event) {
+ event.copied = true;
+ $timeout(function(){
+ event.copied = false;
+ }, 5000);
+ };
+ $scope.copyFailed = function (err) {
+ console.error('Error!', err);
+ };
+ }]
+ };
+ }]);
+})(window.angular);
diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
new file mode 100644
index 0000000..c0c5a20
--- /dev/null
+++ b/app/common/directives/log-filter.html
@@ -0,0 +1,58 @@
+<section id="event-filter" class="row column">
+ <div class="inline event__severity-filter">
+ <p class="filter-label">Filter by severity</p>
+ <button class="inline first" ng-click="toggleSeverityAll()"
+ ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
+ </button>
+ <button class="inline " ng-click="toggleSeverity('high')"
+ ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
+ </button>
+ <button class="inline" ng-click="toggleSeverity('medium')"
+ ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
+ </button>
+ <button class="inline last" 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 (MM/DD/YYYY)</p>
+ <div class="inline">
+ <label for="event-filter-start-date">Start Date</label>
+ <input id="event-filter-start-date" type="date" 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" placeholder="MM/DD/YYYY" ng-model="end_date"/>
+ </div>
+ </div>
+ <div class="inline event__status-filter">
+ <p class="filter-label">Filter by issue 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 issues</span>
+ <span ng-if="!selectedStatus.all && selectedStatus.resolved">Resolved issues</span>
+ <span ng-if="!selectedStatus.all && !selectedStatus.resolved">Unresolved issues</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 issues</button>
+ </li>
+ <li>
+ <button
+ ng-click="selectedStatus.all = false; selectedStatus.resolved = true; statusFilter = false;"
+ ng-class="{'active' : selectedStatus.resolved}">Resolved issues</button>
+ </li>
+ <li>
+ <button
+ ng-click="selectedStatus.all = false; selectedStatus.resolved = false; statusFilter = false;"
+ ng-class="{'active' : !selectedStatus.resolved}">Unresolved issues</button>
+ </li>
+ </ul>
+ </div>
+ </div>
+</section>
\ No newline at end of file
diff --git a/app/common/directives/log-filter.js b/app/common/directives/log-filter.js
new file mode 100644
index 0000000..fcbffe4
--- /dev/null
+++ b/app/common/directives/log-filter.js
@@ -0,0 +1,39 @@
+window.angular && (function (angular) {
+ 'use strict';
+
+ angular
+ .module('app.common.directives')
+ .directive('logFilter', ['APIUtils', function (APIUtils) {
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'common/directives/log-filter.html',
+ 'controller': ['$rootScope', '$scope','dataService', '$location', function($rootScope, $scope, dataService, $location){
+ $scope.dataService = dataService;
+ $scope.toggleSeverityAll = function(){
+ $scope.selectedSeverity.all = !$scope.selectedSeverity.all;
+
+ if($scope.selectedSeverity.all){
+ $scope.selectedSeverity.low = false;
+ $scope.selectedSeverity.medium = false;
+ $scope.selectedSeverity.high = false;
+ }
+ }
+
+ $scope.toggleSeverity = function(severity){
+ $scope.selectedSeverity[severity] = !$scope.selectedSeverity[severity];
+
+ if($scope.selectedSeverity.low &&
+ $scope.selectedSeverity.medium &&
+ $scope.selectedSeverity.high){
+ $scope.selectedSeverity.all = true;
+ $scope.selectedSeverity.low = false;
+ $scope.selectedSeverity.medium = false;
+ $scope.selectedSeverity.high = false;
+ }else{
+ $scope.selectedSeverity.all = false;
+ }
+ }
+ }]
+ };
+ }]);
+})(window.angular);
diff --git a/app/common/directives/log-search-control.html b/app/common/directives/log-search-control.html
new file mode 100644
index 0000000..03b699b
--- /dev/null
+++ b/app/common/directives/log-search-control.html
@@ -0,0 +1,5 @@
+<div class="content__search">
+ <label for="content__search-input">Event Log Search</label>
+ <input id="content__search-input" type="text" placeholder="Filter issues" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
+ <input id="content__search-submit" type="submit" class="btn btn-secondary" value="Submit" ng-click="doSearchOnClick()"/>
+</div>
\ No newline at end of file
diff --git a/app/common/directives/log-search-control.js b/app/common/directives/log-search-control.js
new file mode 100644
index 0000000..1fa268c
--- /dev/null
+++ b/app/common/directives/log-search-control.js
@@ -0,0 +1,39 @@
+window.angular && (function (angular) {
+ 'use strict';
+
+ angular
+ .module('app.common.directives')
+ .directive('logSearchControl', ['APIUtils', function (APIUtils) {
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'common/directives/log-search-control.html',
+ 'controller': ['$rootScope', '$scope','dataService', '$location', function($rootScope, $scope, dataService, $location){
+ $scope.dataService = dataService;
+ $scope.doSearchOnEnter = function (event) {
+ var search = $scope.customSearch.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (event.keyCode === 13 &&
+ search.length >= 2) {
+ $scope.clearSearchItem();
+ $scope.addSearchItem(search);
+ }else{
+ if(search.length == 0){
+ $scope.clearSearchItem();
+ }
+ }
+ };
+
+ $scope.doSearchOnClick = function() {
+ var search = $scope.customSearch.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (search.length >= 2) {
+ $scope.clearSearchItem();
+ $scope.addSearchItem(search);
+ }else{
+ if(search.length == 0){
+ $scope.clearSearchItem();
+ }
+ }
+ }
+ }]
+ };
+ }]);
+})(window.angular);
diff --git a/app/common/services/api-utils.js b/app/common/services/api-utils.js
index 0a96f62..0c69b9e 100644
--- a/app/common/services/api-utils.js
+++ b/app/common/services/api-utils.js
@@ -348,7 +348,7 @@
severity_flags: severityFlags,
additional_data: content.data[key].AdditionalData.join("\n"),
selected: false,
- search_text: (severityCode + " " + content.data[key].Severity + " " + content.data[key].AdditionalData.join(" ")).toLowerCase(),
+ search_text: ("#" + content.data[key].Id + " " + severityCode + " " + content.data[key].Severity + " " + content.data[key].AdditionalData.join(" ")).toLowerCase(),
meta: false,
confirm: false,
related_items: relatedItems,
diff --git a/app/index.html b/app/index.html
index f2065a6..62d0744 100644
--- a/app/index.html
+++ b/app/index.html
@@ -46,6 +46,9 @@
<script src="common/directives/app-header.js"></script>
<script src="common/directives/app-navigation.js"></script>
<script src="common/directives/confirm.js"></script>
+ <script src="common/directives/log-event.js"></script>
+ <script src="common/directives/log-filter.js"></script>
+ <script src="common/directives/log-search-control.js"></script>
<script src="common/directives/toggle-flag.js"></script>
<script src="login/index.js"></script>
diff --git a/app/overview/controllers/log-controller.html b/app/overview/controllers/log-controller.html
deleted file mode 100644
index 4d3dcf7..0000000
--- a/app/overview/controllers/log-controller.html
+++ /dev/null
@@ -1,425 +0,0 @@
-<div id="event-log">
- <div class="row column">
- <h1>Event Log</h1>
- </div>
- <section class="row column">
- <div class="page-header">
- <h2 class="inline h4">Events generated by the system</h2>
- <div class="event-log__timezone inline float-right">
- <button class="dropdown__button" ng-click="timezone = timezone == true ? false : true;"
- ng-blur="timezone = timezone == true ? false : false;">User timezone: EDT (UTC-4)
- </button>
- <ul class="dropdown__list inline" ng-show="timezone">
- <li>
- <button>User timezone: EDT (UTC-4)</button>
- </li>
- <li>
- <button>UTC Timezone : UTC - 0</button>
- </li>
- </ul>
- </div>
- </div>
- </section>
- <!-- Filters -->
- <section class="row column">
- <!-- search -->
- <div class="content__search">
- <label for="content__search-input">Event Log Search</label>
- <input id="content__search-input" type="text" placeholder="Search logs"/>
- <input id="content__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
- <!-- filters -->
- <div class="event-log__filters">
-
- </div>
- </div>
- </section> <!-- end filter -->
-
- <section id="event-filter" class="row column">
- <div class="inline toggle-filter">
- <p class="filter-label">Filter by severity</p>
- <button class="inline first" ng-click="toggleall = !toggleall"
- ng-class="toggleall ? 'btn-primary' : 'btn-secondary'">All
- </button>
- <button class="inline " ng-click="togglehigh = !togglehigh"
- ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">High
- </button>
- <button class="inline" ng-click="togglemed = !togglemed"
- ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Medium
- </button>
- <button class="inline last" ng-click="togglelow = !togglelow"
- ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Low
- </button>
- </div>
- <div class="inline event__date-filter">
- <p class="filter-label">Filter by date range (MM/DD/YYYY)</p>
- <div class="inline">
- <label for="event-filter-start-date">Start Date</label>
- <input id="event-filter-start-date" type="date" placeholder="MM/DD/YYYY" />
- </div>
- <strong>–</strong>
- <div class="inline">
- <label for="event-filter-end-date">End Date</label>
- <input id="event-filter-end-date" type="date" placeholder="MM/DD/YYYY"/>
- </div>
- </div>
- <div class="inline event__status-filter">
- <p class="filter-label">Filter by issue status</p>
- <!-- Status filter -->
- <div class="dropdown__wrapper">
- <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
- ng-class="{'active' : statusFilter}">Unresolved issues
- </button>
- <ul class="dropdown__list inline" ng-show="statusFilter">
- <li>
- <button>All issues</button>
- </li>
- <li>
- <button>Resolved issues</button>
- </li>
- <li>
- <button>Unresolved issues</button>
- </li>
- </ul>
- </div>
- </div>
- </section> <!-- end filter -->
-
- <section id="event-log__events" class="row column">
- <div class="row header__actions-bar">
- <div class="column small-1 large-1 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="events__check-all" ng-model="all"/>
- <div class="control__indicator"></div>
- </label>
- </div>
- <div class="column small-11 large-11 end col-logged-events">
- <!-- top bar confirmation - ADD ACTIVE CLASS TO DISPLAY-->
- <div class="inline__confirm event__confirm" ng-class="{active: confirm}">
- <div class="inline__confirm-message">
- <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete 9 logs</strong>?
- </p>
- </div>
- <div class="inline__confirm-buttons">
- <button class="btn-primary" ng-click="accept()">Yes</button>
- <button class="btn-primary" ng-click="cancel()">No</button>
- </div>
- </div>
- <p class="inline"><span class="event__select-count">999</span> Events are logged</p>
- <!-- when logs are selected, this text changes to show how many logs are checked -->
- <div class="event__actions">
- <button class="inline btn-delete" ng-show="event || all" ng-click="confirm= ! confirm">
- <img class="event__icon" src="assets/images/icon-trashcan-white.svg" alt="">Delete
- </button>
- <button class="inline btn-resolve" ng-show="event || all">
- <img class="event__icon" src="assets/images/icon-checklist-white.svg" alt="">Mark as resolved
- </button>
- <button class="inline btn-export">Export</button>
- </div>
- </div>
- </div>
- <!-- EVENT -->
- <div class="row column event-log__single-event accord-row"
- ng-class="{'active': event__metadatarow, 'selected': event__selected}">
- <div class="row">
- <div class="inline__confirm" ng-class="{active: eventConfirm}">
- <div class="inline__confirm-message">
- <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete this
- event</strong>?</p>
- </div>
- <div class="inline__confirm-buttons">
- <button class="btn-primary" ng-click="accept()">Yes</button>
- <button class="btn-primary" ng-click="cancel()">No</button>
- </div>
- </div>
- <div class="column small-1 large-2 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="event__check" ng-click="event__selected= ! event__selected"
- ng-model="event" ng-checked="all"/>
- <div class="control__indicator"></div>
- </label>
- </div>
- <div class="column small-9 large-9 event-log__event-info"
- ng-click="event__metadatarow = ! event__metadatarow">
- <p class="inline event__priority med-priority">Medium</p>
- <p class="inline event__severity">warning</p>
- <p class="inline event__description">org.open_power.Error.Host.Event.Event</p>
- <div>
- <p class="inline event__id">#00997</p>
- <p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p></div>
- </div>
- <div class="column small-1 large-1">
- <button class="accord-trigger" ng-class="{'active': event__metadatarow}"
- ng-click="event__metadatarow = ! event__metadatarow"></button>
- </div>
- </div>
- <div class="row event__metadata-row" ng-class="{'active': event__metadatarow}">
- <div class="column small-1 large-1 event-log__col-check"> </div>
- <div class="column small-11 large-11 end">
- <div class="event__metadata">ESEL=00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00
- 17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00
- 00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00
- 00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20
- 00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20
- 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00
- 00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74
- 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00
- 00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03
- 01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03
- ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64
- 20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69
- 6e 00 00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71
- 56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00
- 00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01
- 00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d
- 00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20
- 20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03
- b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00
- 00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01
- 00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03
- f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00
- 25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73
- 74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00 00 df 00 00 00 00
- 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df
- b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17
- 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00
- 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00
- 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
- 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00
- 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
- 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7
- 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6
- 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01
- 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62
- 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00
- </div>
- <div>
- <div class="event__actions">
- <button class="btn-meta-copy"><img class="event__icon" src="assets/images/icon-copy.svg"
- alt="">Copy
- </button>
- <button class="btn-delete" ng-click="eventConfirm= ! eventConfirm"><img class="event__icon"
- src="assets/images/icon-trashcan.svg"
- alt=""/>Delete
- </button>
- <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg"
- alt="">Resolved
- </button>
- </div>
- <div class="event__related">
- <p class="inline event__related-label">Related items:</p>
- <a href="" class="event__related-item">/org/openbmc/control/chassis0/</a>
- <a href="" class="event__related-item">/org/openbmc/control/power0/</a>
- <a href="" class="event__related-item">/org/openbmc/control/chassis0/</a>
- <a href="" class="event__related-item">/org/openbmc/control/power0/</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- EVENT -->
- <div class="row column event-log__single-event accord-row"
- ng-class="{'active': event__metadatarow_2, 'selected': event__selected_2}">
- <div class="row">
- <div class="inline__confirm" ng-class="{active: eventConfirm2}">
- <div class="inline__confirm-message">
- <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete this
- event</strong>?</p>
- </div>
- <div class="inline__confirm-buttons">
- <button class="btn-primary" ng-click="accept()">Yes</button>
- <button class="btn-primary" ng-click="cancel()">No</button>
- </div>
- </div>
- <div class="column small-1 large-2 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="events__check" ng-click="event__selected_2= ! event__selected_2"
- ng-checked="all"/>
- <div class="control__indicator"></div>
- </label>
- </div>
- <div class="column small-9 large-9 event-log__event-info"
- ng-click="event__metadatarow_2 = ! event__metadatarow_2">
- <p class="inline event__priority event-resolved">Resolved</p>
- <p class="inline event__severity">emergency</p>
- <p class="inline event__description">org.open_power.Error.Host.Event.Event</p>
- <div>
- <p class="inline event__id">#00996</p>
- <p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p></div>
- </div>
- <div class="column small-1 large-1">
- <button class="accord-trigger" ng-class="{'active': event__metadatarow_2}"
- ng-click="event__metadatarow_2 = ! event__metadatarow_2"></button>
- </div>
- </div>
- <div class="row event__metadata-row" ng-class="{'active': event__metadatarow_2}">
- <div class="column small-1 large-1 event-log__col-check"> </div>
- <div class="column small-11 large-11 end">
- <div class="event__metadata">Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam
- id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci
- porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum
- ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id
- imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt.Curabitur aliquet quam id dui
- posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui
- posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum
- id enim. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a
- pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit
- amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor
- accumsan tincidunt.Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui
- posuere blandit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque
- velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta
- dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac
- diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id
- imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt.Curabitur aliquet quam id dui
- posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui
- posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum
- id enim. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a
- pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit
- amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor
- accumsan tincidunt.
- </div>
- <div>
- <div class="event__actions">
- <button class="btn-meta-copy"><img class="event__icon" src="assets/images/icon-copy.svg"
- alt="">Copy
- </button>
- <button class="btn-delete" ng-click="eventConfirm2= ! eventConfirm2"><img
- class="event__icon"
- src="assets/images/icon-trashcan.svg"
- alt="">Delete
- </button>
- <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg"
- alt="">Resolved
- </button>
- </div>
- <div class="event__related">
- <p class="inline event__related-label">Related items:</p>
- <p class="event__related-item">Attribute-1</p>
- <p class="event__related-item">Attribute-2</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- EVENT -->
- <div class="row column event-log__single-event accord-row" ng-class="{'active': event__metadatarow_1}">
- <div class="row">
- <div class="column small-1 large-2 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="events__check" ng-checked="all"/>
- <div class="control__indicator"></div>
- </label>
- </div>
- <div class="column small-9 large-9 event-log__event-info"
- ng-click="event__metadatarow_1 = ! event__metadatarow_1">
- <p class="inline event__priority high-priority">High</p>
- <p class="inline event__severity">emergency</p>
- <p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id
- dui</p>
- <div>
- <p class="inline event__id">#00995</p>
- <p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p></div>
- </div>
- <div class="column small-1 large-1">
- <button class="accord-trigger" ng-class="{'active': event__metadatarow_1}"
- ng-click="event__metadatarow_1 = ! event__metadatarow_1"></button>
- </div>
- </div>
- <div class="row event__metadata-row" ng-class="{'active': event__metadatarow_1}">
- <div class="column small-1 large-1 event-log__col-check"> </div>
- <div class="column small-11 large-11 end">
- <div class="event__metadata">Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam
- id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci
- porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum
- ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id
- imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt.Curabitur aliquet quam id dui
- posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui
- posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum
- id enim. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a
- pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit
- amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor
- accumsan tincidunt.Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui
- posuere blandit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque
- velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta
- dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac
- diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id
- imperdiet et, porttitor at sem. Nulla porttitor accumsan tincidunt.Curabitur aliquet quam id dui
- posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui
- posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum
- id enim. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a
- pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit
- amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor
- accumsan tincidunt.
- </div>
- <div>
- <div class="event__actions">
- <button class="btn-meta-copy"><img class="event__icon" src="assets/images/icon-copy.svg"
- alt="">Copy
- </button>
- <button class="btn-delete"><img class="event__icon" src="assets/images/icon-trashcan.svg"
- alt="">Delete
- </button>
- <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg"
- alt="">Resolved
- </button>
- </div>
- <div class="event__related">
- <p class="inline event__related-label">Related items:</p>
- <p class="event__related-item">Attribute-1</p>
- <p class="event__related-item">Attribute-2</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- EVENT -->
- <div class="row column event-log__single-event accord-row">
- <div class="row">
- <div class="column small-1 large-2 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="events__check" ng-checked="all"/>
- <div class="control__indicator"></div>
- </label>
- </div>
- <div class="column small-9 large-9 event-log__event-info">
- <p class="inline event__priority low-priority">Low</p>
- <p class="inline event__severity">Informational</p>
- <p class="inline event__description">org.open_power.Error.Host.Event.Event</p>
- <div>
- <p class="inline event__id">#00994</p>
- <p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p></div>
- </div>
- <div class="column small-1 large-1">
- <button class="accord-trigger"></button>
- </div>
- </div>
- <div class="row event__metadata-row">
- <div class="column small-1 large-1 event-log__col-check"> </div>
- <div class="column small-11 large-11 end">
- <div class="event__metadata">
- </div>
- <div>
- <div class="event__actions">
- <button class="btn-meta-copy"><img class="event__icon" src="assets/images/icon-copy.svg"
- alt="">Copy
- </button>
- <button class="btn-delete"><img class="event__icon" src="assets/images/icon-trashcan.svg"
- alt="">Delete
- </button>
- <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg"
- alt="">Resolved
- </button>
- </div>
- <div class="event__related">
- <p class="inline event__related-label">Related items:</p>
- <p class="event__related-item">Attribute-1</p>
- <p class="event__related-item">Attribute-2</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <paginate ng-include="paginate"></paginate>
-</div> <!-- end event log -->
\ No newline at end of file
diff --git a/app/overview/controllers/log-controller.js b/app/overview/controllers/log-controller.js
deleted file mode 100644
index b952893..0000000
--- a/app/overview/controllers/log-controller.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Controller for log
- *
- * @module app/overview
- * @exports logController
- * @name logController
- * @version 0.1.0
- */
-
-window.angular && (function (angular) {
- 'use strict';
-
- angular
- .module('app.overview')
- .controller('logController', [
- '$scope',
- '$window',
- 'APIUtils',
- 'dataService',
- function($scope, $window, APIUtils, dataService, userModel){
- $scope.dataService = dataService;
-
- $scope.dropdown_selected = false;
- }
- ]
- );
-
-})(angular);
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
new file mode 100644
index 0000000..713b879
--- /dev/null
+++ b/app/server-health/controllers/log-controller.html
@@ -0,0 +1,70 @@
+<div id="event-log">
+ <div class="row column">
+ <h1>Event Log</h1>
+ </div>
+ <section class="row column">
+ <div class="page-header">
+ <h2 class="inline h4">All events generated by the system</h2>
+ <div class="event-log__timezone inline float-right">
+ <button class="dropdown__button" ng-click="timezone = timezone == true ? false : true;" toggle-flag="timezone"
+ >User timezone: <span ng-show="tmz== 'EDT'">EDT (UTC-4)</span><span ng-show="tmz=='UTC'">UTC - 0</span>
+ </button>
+ <ul class="dropdown__list inline" ng-show="timezone">
+ <li>
+ <button ng-click="tmz = 'EDT'; timezone=false;">User timezone: EDT (UTC-4)</button>
+ </li>
+ <li>
+ <button ng-click="tmz = 'UTC'; timezone=false;">UTC Timezone : UTC - 0</button>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ <!-- Filters -->
+ <section class="row column">
+ <!-- search -->
+ <log-search-control></log-search-control>
+ <!-- filters -->
+ <log-filter></log-filter>
+ </section> <!-- end filter -->
+ <section id="event-log__events" class="row column">
+ <div id="event__actions-bar" class="row header__actions-bar">
+ <div class="column small-1 large-1 event-log__col-check">
+ <label class="control-check">
+ <input type="checkbox" name="events__check-all" ng-model="all" ng-checked="(logs|filter:{selected: true}).length == logs.length"/>
+ <div class="control__indicator"></div>
+ </label>
+ </div>
+ <div class="column small-11 large-11 end col-logged-events">
+ <!-- top bar confirmation - ADD ACTIVE CLASS TO DISPLAY-->
+ <div class="inline__confirm event__confirm" ng-class="{active: confirm}">
+ <div class="inline__confirm-message">
+ <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete {{selectedEvents.length}} logs</strong>?
+ </p>
+ </div>
+ <div class="inline__confirm-buttons">
+ <button class="btn-primary" ng-click="accept()">Yes</button>
+ <button class="btn-primary" ng-click="confirm = false">No</button>
+ </div>
+ </div>
+ <p class="inline"><span class="event__select-count">{{filteredLogs.length}}</span> Events are logged</p>
+ <!-- when logs are selected, this text changes to show how many logs are checked -->
+ <div class="event__actions">
+ <button class="inline btn-delete" ng-show="selectedEvents.length || all" ng-click="confirm= ! confirm">
+ <img class="event__icon" src="assets/images/icon-trashcan-white.svg" alt="">Delete
+ </button>
+ <button class="inline btn-resolve" ng-show="selectedEvents.length || all">
+ <img class="event__icon" src="assets/images/icon-checklist-white.svg" alt="">Mark as resolved
+ </button>
+ <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export" download="{{export_name}}" ng-show="selectedEvents.length || all">Export</a>
+ </div>
+ </div>
+ </div>
+ <log-event
+ dir-paginate="event in (filteredLogs = (logs|filter:filterBySeverity|filter:filterByStatus|filter:filterByDate|filter:filterBySearchTerms))| itemsPerPage: itemsPerPage"
+ event="event"
+ tmz="tmz">
+ </log-event>
+ </section>
+ <dir-pagination-controls template-url="common/directives/dirPagination.tpl.html"></dir-pagination-controls>
+</div> <!-- end event log -->
\ No newline at end of file
diff --git a/app/server-health/controllers/log-controller.js b/app/server-health/controllers/log-controller.js
new file mode 100644
index 0000000..59ebd01
--- /dev/null
+++ b/app/server-health/controllers/log-controller.js
@@ -0,0 +1,139 @@
+/**
+ * Controller for log
+ *
+ * @module app/serverHealth
+ * @exports logController
+ * @name logController
+ * @version 0.1.0
+ */
+
+window.angular && (function (angular) {
+ 'use strict';
+ var logData = [], originalData = {};
+ angular
+ .module('app.serverHealth')
+ .controller('logController', [
+ '$scope',
+ '$window',
+ 'APIUtils',
+ 'dataService',
+ 'Constants',
+ function($scope, $window, APIUtils, dataService, Constants){
+ $scope.dataService = dataService;
+ $scope.logs = [];
+ $scope.tmz = 'EDT';
+ $scope.itemsPerPage = Constants.PAGINATION.LOG_ITEMS_PER_PAGE;
+ // priority buttons
+ $scope.selectedSeverity = {
+ all: true,
+ low: false,
+ medium: false,
+ high: false
+ };
+ $scope.selectedStatus = {
+ all: true,
+ resolved: false
+ };
+
+ $scope.customSearch = "";
+ $scope.searchItems = [];
+ $scope.selectedEvents = [];
+
+ $scope.loadLogs = function(){
+ APIUtils.getLogs(function(data, originalData){
+ logData = data;
+ originalData = originalData;
+ $scope.logs = data;
+ $scope.originalData = originalData;
+ });
+ };
+ $scope.jsonData = function(data){
+ return JSON.stringify(data);
+ };
+
+ $scope.filterBySeverity = function(log){
+ if($scope.selectedSeverity.all) return true;
+
+ return( (log.severity_flags.low && $scope.selectedSeverity.low) ||
+ (log.severity_flags.medium && $scope.selectedSeverity.medium) ||
+ (log.severity_flags.high && $scope.selectedSeverity.high)
+ );
+ }
+
+
+ $scope.filterByStatus = function(log){
+ if ($scope.selectedStatus.all) return true;
+ return( (log.Resolved && $scope.selectedStatus.resolved)||
+ (!log.Resolved && !$scope.selectedStatus.resolved)
+ );
+ }
+
+ $scope.filterByDate = function(log){
+ if($scope.start_date && $scope.end_date){
+ var date = new Date(log.Timestamp);
+ return (date >= $scope.start_date &&
+ date <= $scope.end_date );
+ }else{
+ return true;
+ }
+ }
+
+ $scope.filterBySearchTerms = function(log){
+ if(!$scope.searchItems.length) return true;
+
+ var flag = false;
+ for(var i = 0, length = $scope.searchItems.length; i < length; i++){
+ if(log.search_text.indexOf($scope.searchItems[i].toLowerCase()) == -1) return false;
+ }
+ return true;
+ }
+
+ $scope.addSearchItem = function(searchTerms){
+ var terms = searchTerms.split(" ");
+ terms.forEach(function(searchTerm){
+ if($scope.searchItems.indexOf(searchTerm) == -1){
+ $scope.searchItems.push(searchTerm);
+ }
+ });
+ }
+
+ $scope.clearSearchItem = function(searchTerm){
+ $scope.searchItems = [];
+ }
+
+ $scope.removeSearchItem = function(searchTerm){
+ var termIndex = $scope.searchItems.indexOf(searchTerm);
+
+ if(termIndex > -1){
+ $scope.searchItems.splice(termIndex,1);
+ }
+ }
+
+ $scope.$watch('all', function(){
+ $scope.logs.forEach(function(item){
+ item.selected = $scope.all;
+ });
+ });
+
+ function updateExportData(){
+ $scope.export_name = ($scope.selectedEvents.length == 1) ? $scope.selectedEvents[0].Id + ".json" : "export.json";
+ var data = {};
+ $scope.selectedEvents.forEach(function(item){
+ data[item.data.key] = item.data.value;
+ });
+ $scope.export_data = JSON.stringify(data);
+ }
+
+ $scope.$watch('logs', function(){
+ $scope.selectedEvents = $scope.logs.filter(function(item){
+ return item.selected;
+ });
+ updateExportData();
+ }, true);
+
+ $scope.loadLogs();
+ }
+ ]
+ );
+
+})(angular);
diff --git a/app/server-health/index.js b/app/server-health/index.js
index 68a9a90..f64300b 100644
--- a/app/server-health/index.js
+++ b/app/server-health/index.js
@@ -58,6 +58,11 @@
'controller': 'diagnosticsController',
authenticated: true
})
+ .when('/server-health', {
+ 'templateUrl': 'server-health/controllers/log-controller.html',
+ 'controller': 'logController',
+ authenticated: true
+ });
}]);
})(window.angular);
diff --git a/app/server-health/styles/index.scss b/app/server-health/styles/index.scss
index dd2e5b6..858d836 100644
--- a/app/server-health/styles/index.scss
+++ b/app/server-health/styles/index.scss
@@ -1,3 +1,4 @@
+@import "./log.scss";
@import "./sensors.scss";
@import "./inventory.scss";
@import "./unit-id.scss";
diff --git a/app/overview/styles/log.scss b/app/server-health/styles/log.scss
similarity index 98%
rename from app/overview/styles/log.scss
rename to app/server-health/styles/log.scss
index afe773d..f1a5e8c 100644
--- a/app/overview/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -1,6 +1,5 @@
// Event Log SCSS
#event-log {
-
.accord-trigger {
transform: rotate(90deg);
font-size: 1.5em;
@@ -37,8 +36,8 @@
font-weight: 700;
border: 0;
}
-
.content__search {
+ float: none;
@include mediaQuery(x-large) {
max-width: 61%;
@include fastTransition-all;
@@ -110,10 +109,8 @@
#event-log__events {
display: block;
margin-top: 1.6em;
- border-top: 1px solid $lightgrey;
position: relative;
overflow: hidden;
-
.header__actions-bar {
.btn-export,
.btn-delete,
@@ -127,7 +124,6 @@
left: 0;
padding: 1em 2em 1em 2em
}
-
.inline__confirm-message {
margin-top: 5px;
margin-bottom: -10px;