Updating sensors logics with mock data
Change-Id: Icede8defdae3a677db5c13dcd6324a1117ce25db
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/app/server-health/controllers/sensors-controller.html b/app/server-health/controllers/sensors-controller.html
index 15720c1..64a0fff 100644
--- a/app/server-health/controllers/sensors-controller.html
+++ b/app/server-health/controllers/sensors-controller.html
@@ -5,7 +5,7 @@
<section class="row column">
<div class="page-header">
<h2 class="inline h4">Sensors present in the system</h2>
- <button class="inline btn-export float-right">Export</button>
+ <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export float-right" download="{{export_name}}" ng-show="filteredSensorData.length">Export</a>
</div>
</section>
@@ -14,20 +14,22 @@
<!-- search -->
<div class="content__search">
<label for="content__search-input">Sensors Search</label>
- <input id="content__search-input" type="text" placeholder="Filter issues"/>
- <input id="content__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
+ <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>
+
<div class="toggle-filter">
- <button class="inline first btn-primary">All
+ <button class="inline first btn-primary" ng-click="toggleSeverityAll()"
+ ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
</button>
- <button class="inline " ng-click="togglehigh = !togglehigh"
- ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">Critical
+ <button class="inline " ng-click="toggleSeverity('critical')"
+ ng-class="selectedSeverity.critical ? 'btn-primary' : 'btn-secondary'">Critical
</button>
- <button class="inline" ng-click="togglemed = !togglemed"
- ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Warning
+ <button class="inline" ng-click="toggleSeverity('warning')"
+ ng-class="selectedSeverity.warning ? 'btn-primary' : 'btn-secondary'">Warning
</button>
- <button class="inline last" ng-click="togglelow = !togglelow"
- ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Normal
+ <button class="inline last" ng-click="toggleSeverity('normal')"
+ ng-class="selectedSeverity.normal ? 'btn-primary' : 'btn-secondary'">Normal
</button>
</div>
</section> <!-- end filter -->
@@ -38,25 +40,25 @@
</div>
</section>
- <section id="sensor__details" class="row column">
+ <section id="sensor__details" class="row column" ng-hide="!data.display_headers">
<div class="row column header-row">
<div class="column small-10 large-11 header__actions-bar">
<p class="inline priority-tag-circ high-priority" aria-label="High Priority"></p>
- <p class="inline sensor__heading sensor__category">Fan speed (RPMs)</p>
- <p class="inline sensor__heading middle">Reading</p>
- <p class="inline float-right sensor__heading right">State</p>
+ <p class="inline sensor__heading sensor__category">{{data.display_headers[0]}}</p>
+ <p class="inline sensor__heading middle">{{data.display_headers[1]}}</p>
+ <p class="inline float-right sensor__heading right">{{data.display_headers[2]}}</p>
</div>
<div class="column small-2 large-1 sensor__heading trigger-col"></div>
</div>
<!-- Sensor -->
- <div class="row column accord-row" ng-class="{'active': sensors__metadatarow, 'selected': sensors__selected}">
+ <div ng-repeat="sensor in (filteredSensorData = (data.data|filter:filterBySeverity|filter:filterBySearchTerms))" class="row column accord-row" ng-class="{'active': sensors__metadatarow, 'selected': sensors__selected}">
<div class="row">
<div class="column small-10 large-11 sensor__info" ng-click="sensors__metadatarow = ! sensors__metadatarow">
<p class="inline priority-tag-circ high-priority" aria-label="High Priority"></p>
- <p class="inline sensor__title">Fan Speed 1</p>
- <p class="inline sensor__reading">6200 <span>rpms</span></p>
- <p class="inline float-right sensor__critical-label">Critical</p>
+ <p class="inline sensor__title">{{sensor.title}}</p>
+ <p class="inline sensor__reading">{{sensor.reading}}</p>
+ <p class="inline float-right" ng-class="{'sensor__critical-label': sensor.status == 'critical', 'sensor__warning-label': sensor.status == 'warning', 'sensor__normal-label': sensor.status == 'normal'}">{{sensor.status}}</p>
</div>
<div class="column small-2 large-1">
<button class="accord-trigger" ng-class="{'active': sensors__metadatarow}" ng-click="sensors__metadatarow = ! sensors__metadatarow"></button>
@@ -67,7 +69,7 @@
<div class="threshold-chart__wrapper">
<span class="threshold__label low">Low</span>
<div class="threshold-chart">
- <span class="threshold__marker thresh__high-critical" style="left: 90%;"><span class="threshold__value">6200 RPMs</span></span>
+ <span class="threshold__marker" ng-class="{'thresh__high-critical': sensor.status == 'critical', 'thresh__low-warn': sensor.status == 'warning', 'thresh__normal': sensor.status == 'normal'}" style="left: {{sensor.indicator}};"><span class="threshold__value">{{sensor.reading}}</span></span>
<span class="threshold thresh__low-critical"></span>
<span class="threshold thresh__low-warn"></span>
<span class="threshold thresh__normal"></span>
@@ -77,94 +79,8 @@
<span class="threshold__label high">High</span>
</div>
</div>
- <!--<div class="column small-12 large-6">-->
- <!--<p class="h5 content-header">Associated Events</p>-->
- <!--<a href="#/overview/log">View 5 events related to Fan 1</a>-->
- <!--</div>-->
- <!--<div class="column small-12 large-6">-->
- <!--<p class="h5 content-header">Associated Hardware</p>-->
- <!--<a href="">Chassis0</a>-->
- <!--</div>-->
</div>
</div>
- <!-- Sensor -->
- <div class="row column accord-row" ng-class="{'active': sensors__metadatarow2, 'selected': sensors__selected}">
- <div class="row">
- <div class="column small-10 large-11 sensor__info" ng-click="sensors__metadatarow2 = ! sensors__metadatarow2">
- <p class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></p>
- <p class="inline sensor__title">Fan Speed 2</p>
- <p class="inline sensor__reading">4600 <span>rpms</span></p>
- </div>
- <div class="column small-2 large-1">
- <button class="accord-trigger" ng-class="{'active': sensors__metadatarow2}" ng-click="sensors__metadatarow2 = ! sensors__metadatarow2"></button>
- </div>
- </div>
- <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow2}">
- <div class="column small-12">
- <div class="threshold-chart__wrapper">
- <span class="threshold__label low">Low</span>
- <div class="threshold-chart">
- <span class="threshold__marker thresh__normal" style="left: 40%;"><span class="threshold__value">4600 RPMs</span></span>
- <span class="threshold thresh__low-critical"></span>
- <span class="threshold thresh__low-warn"></span>
- <span class="threshold thresh__normal"></span>
- <span class="threshold thresh__high-warn"></span>
- <span class="threshold thresh__high-critical"></span>
- </div>
- <span class="threshold__label high">High</span>
- </div>
- </div>
- <!--<div class="column small-12 large-6">-->
- <!--<p class="h5 content-header">Associated Events</p>-->
- <!--<a href="#/overview/log">View 5 events related to Fan 1</a>-->
- <!--</div>-->
- <!--<div class="column small-12 large-6">-->
- <!--<p class="h5 content-header">Associated Hardware</p>-->
- <!--<p>None</p>-->
- <!--</div>-->
- </div>
- </div>
-
- <!-- Sensor -->
- <div class="row column accord-row" ng-class="{'active': sensors__metadatarow3, 'selected': sensors__selected}">
- <div class="row">
- <div class="column small-10 large-11 sensor__info" ng-click="sensors__metadatarow3 = ! sensors__metadatarow3">
- <p class="inline priority-tag-circ warn-priority" aria-label="Medium Priority"></p>
- <p class="inline sensor__title">Fan Speed 3</p>
- <p class="inline sensor__reading">1200 <span>rpms</span></p>
- <p class="inline float-right sensor__warning-label">warning</p>
- </div>
- <div class="column small-2 large-1">
- <button class="accord-trigger" ng-class="{'active': sensors__metadatarow3}"
- ng-click="sensors__metadatarow3 = ! sensors__metadatarow3"></button>
- </div>
- </div>
- <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow3}">
- <div class="column small-12">
- <div class="threshold-chart__wrapper">
- <span class="threshold__label low">Low</span>
- <div class="threshold-chart">
- <span class="threshold__marker thresh__low-warn" style="left: 15%;"><span class="threshold__value">1200 RPMs</span></span>
- <span class="threshold thresh__low-critical"></span>
- <span class="threshold thresh__low-warn"></span>
- <span class="threshold thresh__normal"></span>
- <span class="threshold thresh__high-warn"></span>
- <span class="threshold thresh__high-critical"></span>
- </div>
- <span class="threshold__label high">High</span>
- </div>
- </div>
- <!--<div class="column small-12 large-6">-->
- <!--<p class="h5 content-header">Associated Events</p>-->
- <!--<a href="#/overview/log">View 5 events related to Fan 1</a>-->
- <!--</div>-->
- <!--<div class="column small-12 large-6">-->
- <!--<p class="h5 content-header">Associated Hardware</p>-->
- <!--<a href="">Chassis0</a>-->
- <!--</div>-->
- </div>
- </div>
</section>
- <paginate ng-include="paginate"></paginate>
</div> <!-- end event log -->
diff --git a/app/server-health/controllers/sensors-controller.js b/app/server-health/controllers/sensors-controller.js
index aaa5aa6..cf10541 100644
--- a/app/server-health/controllers/sensors-controller.js
+++ b/app/server-health/controllers/sensors-controller.js
@@ -9,7 +9,7 @@
window.angular && (function (angular) {
'use strict';
-
+ var sensorData = [], originalData = {};
angular
.module('app.overview')
.controller('sensorsController', [
@@ -18,13 +18,120 @@
'$window',
'APIUtils',
'dataService',
- function($scope, $log, $window, APIUtils, dataService, userModel){
+ '$routeParams',
+ function($scope, $log, $window, APIUtils, dataService, $routeParams){
$scope.dataService = dataService;
-
+ $scope.customSearch = "";
$scope.dropdown_selected = false;
-
$scope.$log = $log;
- $scope.message = 'Hello World!';
+ $scope.data = {};
+ $scope.searchTerms = [];
+
+ $scope.selectedSeverity = {
+ all: true,
+ normal: false,
+ warning: false,
+ critical: false
+ };
+
+ var sensorType = $routeParams.type;
+
+ $scope.export_name = sensorType + "_sensors.json";
+
+ $scope.toggleSeverityAll = function(){
+ $scope.selectedSeverity.all = !$scope.selectedSeverity.all;
+
+ if($scope.selectedSeverity.all){
+ $scope.selectedSeverity.normal = false;
+ $scope.selectedSeverity.warning = false;
+ $scope.selectedSeverity.critical = false;
+ }
+ }
+
+ $scope.toggleSeverity = function(severity){
+ $scope.selectedSeverity[severity] = !$scope.selectedSeverity[severity];
+
+ if($scope.selectedSeverity.normal &&
+ $scope.selectedSeverity.warning &&
+ $scope.selectedSeverity.critical){
+ $scope.selectedSeverity.all = true;
+ $scope.selectedSeverity.normal = false;
+ $scope.selectedSeverity.warning = false;
+ $scope.selectedSeverity.critical = false;
+ }else{
+ $scope.selectedSeverity.all = false;
+ }
+ }
+
+ $scope.doSearchOnEnter = function (event) {
+ var search = $scope.customSearch.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (event.keyCode === 13 &&
+ search.length >= 2) {
+ $scope.searchTerms = $scope.customSearch.split(" ");
+ }else{
+ if(search.length == 0){
+ $scope.searchTerms = [];
+ }
+ }
+ };
+
+ $scope.doSearchOnClick = function() {
+ var search = $scope.customSearch.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (search.length >= 2) {
+ $scope.searchTerms = $scope.customSearch.split(" ");
+ }else{
+ if(search.length == 0){
+ $scope.searchTerms = [];
+ }
+ }
+ }
+
+ $scope.jsonData = function(data){
+ var dt = {};
+ data.data.forEach(function(item){
+ dt[item.original_data.key] = item.original_data.value;
+ });
+ return JSON.stringify(dt);
+ };
+
+ $scope.filterBySeverity = function(sensor){
+ if($scope.selectedSeverity.all) return true;
+
+ return( (sensor.severity_flags.normal && $scope.selectedSeverity.normal) ||
+ (sensor.severity_flags.warning && $scope.selectedSeverity.warning) ||
+ (sensor.severity_flags.critical && $scope.selectedSeverity.critical)
+ );
+ }
+ $scope.filterBySearchTerms = function(sensor){
+
+ if(!$scope.searchTerms.length) return true;
+
+ for(var i = 0, length = $scope.searchTerms.length; i < length; i++){
+ if(sensor.search_text.indexOf($scope.searchTerms[i].toLowerCase()) == -1) return false;
+ }
+ return true;
+ }
+
+ function setSensorData(){
+ var data = dataService.sensorData.sensors.filter(function(item){
+ return item.type == sensorType;
+ });
+ if(data.length){
+ sensorData = data[0];
+ $scope.data = sensorData;
+ $scope.export_data = $scope.jsonData($scope.data);
+ }
+ }
+
+ if(!dataService.sensorData.sensors){
+ APIUtils.getAllSensorStatus(function(data, originalData){
+ dataService.sensorData = data;
+ setSensorData();
+ });
+ }else{
+ setSensorData();
+ }
+
}
]
);
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 10ee4fa..6a8f3c4 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -5,7 +5,7 @@
<section class="row column">
<div class="page-header">
<h2 class="inline h4">Sensors present in the system</h2>
- <button class="inline btn-export float-right">Export</button>
+ <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export float-right" download="{{export_name}}" ng-show="filteredSensorData.length">Export</a>
</div>
</section>
@@ -13,20 +13,21 @@
<!-- search -->
<div class="content__search">
<label for="content__search-input">Event Log Search</label>
- <input id="content__search-input" type="text" placeholder="Filter issues"/>
- <input id="content__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
+ <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>
<div class="toggle-filter">
- <button class="inline first btn-primary">All
+ <button class="inline first btn-primary" ng-click="toggleSeverityAll()"
+ ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
</button>
- <button class="inline " ng-click="togglehigh = !togglehigh"
- ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">Critical
+ <button class="inline " ng-click="toggleSeverity('critical')"
+ ng-class="selectedSeverity.critical ? 'btn-primary' : 'btn-secondary'">Critical
</button>
- <button class="inline" ng-click="togglemed = !togglemed"
- ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Warning
+ <button class="inline" ng-click="toggleSeverity('warning')"
+ ng-class="selectedSeverity.warning ? 'btn-primary' : 'btn-secondary'">Warning
</button>
- <button class="inline last" ng-click="togglelow = !togglelow"
- ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Normal
+ <button class="inline last" ng-click="toggleSeverity('normal')"
+ ng-class="selectedSeverity.normal ? 'btn-primary' : 'btn-secondary'">Normal
</button>
</div>
@@ -39,12 +40,8 @@
<p class="inline float-right sensor__heading right">State</p>
</div>
</div>
- <a class="sensor__group" href="">All Sensors (50)</a>
- <a class="sensor__group" href=""><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>Temperature (20)</a>
- <a class="sensor__group" href="#/server-health/sensors"> <span class="inline priority-tag-circ high-priority" aria-label="High Priority"></span>Fan Speed (15) <p class="inline float-right sensor__critical-label">Critical</p></a>
- <a class="sensor__group" href=""><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>Altitude (1)</a>
- <a class="sensor__group" href=""><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>Voltage (6)</a>
- <a class="sensor__group" href=""><span class="inline priority-tag-circ warn-priority" aria-label="Warning Priority"></span>Current (5) <p class="inline float-right sensor__warning-label">Warning</p></a>
- <a class="sensor__group" href=""><span class="inline priority-tag-circ normal-priority"></span>Power (3)</a>
+
+ <a ng-repeat="sensor in (filteredSensorData = data.sensors|filter:filterBySeverity|filter:filterBySearchTerms)" class="sensor__group" href="#/server-health/sensors/{{sensor.type}}"> <span class="inline priority-tag-circ high-priority" aria-label="High Priority"></span>{{sensor.title}} ({{sensor.data.length}}) <p class="inline float-right" ng-class="{'sensor__critical-label': sensor.status == 'critical', 'sensor__warning-label': sensor.status == 'warning', 'sensor__normal-label': sensor.status == 'normal'}">{{sensor.status}}</p></a>
+
</section>
</div>
\ No newline at end of file
diff --git a/app/server-health/controllers/sensors-overview-controller.js b/app/server-health/controllers/sensors-overview-controller.js
index 1b7234d..1e53829 100644
--- a/app/server-health/controllers/sensors-overview-controller.js
+++ b/app/server-health/controllers/sensors-overview-controller.js
@@ -9,7 +9,7 @@
window.angular && (function (angular) {
'use strict';
-
+ var sensorData = [], originalData = {};
angular
.module('app.overview')
.controller('sensorsOverviewController', [
@@ -24,7 +24,101 @@
$scope.dropdown_selected = false;
$scope.$log = $log;
- $scope.message = 'Hello World!';
+ $scope.customSearch = "";
+ $scope.searchTerms = [];
+ $scope.selectedSeverity = {
+ all: true,
+ normal: false,
+ warning: false,
+ critical: false
+ };
+ $scope.export_name = "sensors.json";
+ $scope.jsonData = function(data){
+ var dt = {};
+ data.data.forEach(function(item){
+ dt[item.original_data.key] = item.original_data.value;
+ });
+ return JSON.stringify(dt);
+ };
+
+ $scope.doSearchOnEnter = function (event) {
+ var search = $scope.customSearch.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (event.keyCode === 13 &&
+ search.length >= 2) {
+ $scope.searchTerms = $scope.customSearch.split(" ");
+ }else{
+ if(search.length == 0){
+ $scope.searchTerms = [];
+ }
+ }
+ };
+
+ $scope.doSearchOnClick = function() {
+ var search = $scope.customSearch.replace(/^\s+/g,'').replace(/\s+$/g,'');
+ if (search.length >= 2) {
+ $scope.searchTerms = $scope.customSearch.split(" ");
+ }else{
+ if(search.length == 0){
+ $scope.searchTerms = [];
+ }
+ }
+ }
+
+ $scope.toggleSeverityAll = function(){
+ $scope.selectedSeverity.all = !$scope.selectedSeverity.all;
+
+ if($scope.selectedSeverity.all){
+ $scope.selectedSeverity.normal = false;
+ $scope.selectedSeverity.warning = false;
+ $scope.selectedSeverity.critical = false;
+ }
+ }
+
+ $scope.toggleSeverity = function(severity){
+ $scope.selectedSeverity[severity] = !$scope.selectedSeverity[severity];
+
+ if($scope.selectedSeverity.normal &&
+ $scope.selectedSeverity.warning &&
+ $scope.selectedSeverity.critical){
+ $scope.selectedSeverity.all = true;
+ $scope.selectedSeverity.normal = false;
+ $scope.selectedSeverity.warning = false;
+ $scope.selectedSeverity.critical = false;
+ }else{
+ $scope.selectedSeverity.all = false;
+ }
+ }
+
+ $scope.filterBySeverity = function(sensor){
+ if($scope.selectedSeverity.all) return true;
+
+ return( (sensor.severity_flags.normal && $scope.selectedSeverity.normal) ||
+ (sensor.severity_flags.warning && $scope.selectedSeverity.warning) ||
+ (sensor.severity_flags.critical && $scope.selectedSeverity.critical)
+ );
+ }
+ $scope.filterBySearchTerms = function(sensor){
+
+ if(!$scope.searchTerms.length) return true;
+
+ for(var i = 0, length = $scope.searchTerms.length; i < length; i++){
+ if(sensor.search_text.indexOf($scope.searchTerms[i].toLowerCase()) == -1) return false;
+ }
+ return true;
+ }
+
+ $scope.loadSensorData = function(){
+ APIUtils.getAllSensorStatus(function(data, originalData){
+ sensorData = data;
+ originalData = originalData;
+ $scope.data = data;
+ $scope.originalData = originalData;
+ dataService.sensorData = sensorData;
+ $scope.export_data = JSON.stringify(originalData);
+ });
+ };
+
+ $scope.loadSensorData();
}
]
);