diff options
Diffstat (limited to 'app')
35 files changed, 1623 insertions, 807 deletions
diff --git a/app/assets/mocks/sensors.json b/app/assets/mocks/sensors.json deleted file mode 100644 index 8eabd78..0000000 --- a/app/assets/mocks/sensors.json +++ /dev/null @@ -1,258 +0,0 @@ -{ - "data": { - "/xyz/openbmc_project/sensors/fan_tach/fan0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.RPMS", - "Value": 2000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/fan_tach/fan1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.RPMS", - "Value": 11000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 4000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/fan_tach/fan2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.RPMS", - "Value": 1000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 4000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/temperature/item0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.DegreesC", - "Value": 8278, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/temperature/item1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.DegreesC", - "Value": 11000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 5000, - "CriticalLow": 4000 - }, - "/xyz/openbmc_project/sensors/temperature/item2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.DegreesC", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/altitude/item0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Meters", - "Value": 8278, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 8000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/altitude/item1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Meters", - "Value": 1009, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/altitude/item2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Meters", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/voltage/item0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Volts", - "Value": 8278, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/voltage/item1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Volts", - "Value": 18259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/voltage/item2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Volts", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/current/item0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Amperes", - "Value": 11000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/current/item1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Amperes", - "Value": 11000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/current/item2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Amperes", - "Value": 11000, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/power/item0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Watts", - "Value": 8278, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/power/item1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Watts", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/power/item2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Watts", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/energy/item0": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Joules", - "Value": 8278, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/energy/item1": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Joules", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 20000, - "CriticalLow": 5000 - }, - "/xyz/openbmc_project/sensors/energy/item2": { - "Scale": 0, - "Target": 0, - "Unit": "xyz.openbmc_project.Sensor.Value.Unit.Joules", - "Value": 8259, - "WarningAlarmHigh": 0, - "WarningAlarmLow": 0, - "WarningHigh": 40000, - "WarningLow": 10000, - "CriticalHigh": 6000, - "CriticalLow": 5000 - } - }, - "message": "200 OK", - "status": "ok" -}
\ No newline at end of file diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html index 4891c61..7a48757 100644 --- a/app/common/directives/app-navigation.html +++ b/app/common/directives/app-navigation.html @@ -1,4 +1,4 @@ -<nav> +<nav class="nav__wrapper"> <ul id="nav__top-level" ng-style="navStyle"> <li> <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/system" ng-click="change('overview')" tabindex="1"> diff --git a/app/common/directives/log-filter.js b/app/common/directives/log-filter.js index fcbffe4..b760308 100644 --- a/app/common/directives/log-filter.js +++ b/app/common/directives/log-filter.js @@ -10,7 +10,9 @@ window.angular && (function (angular) { '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 !== true){ + $scope.selectedSeverity.all = !$scope.selectedSeverity.all; + } if($scope.selectedSeverity.all){ $scope.selectedSeverity.low = false; diff --git a/app/common/services/api-utils.js b/app/common/services/api-utils.js index 3b8b7e0..0f3b729 100644 --- a/app/common/services/api-utils.js +++ b/app/common/services/api-utils.js @@ -369,12 +369,9 @@ window.angular && (function (angular) { }); }, getAllSensorStatus: function(callback){ - /** - GET https://9.3.185.156/xyz/openbmc_project/sensors/enumerate - */ $http({ method: 'GET', - url: "/assets/mocks/sensors.json", + url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/sensors/enumerate", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' @@ -385,101 +382,93 @@ window.angular && (function (angular) { var content = JSON.parse(json); var dataClone = JSON.parse(JSON.stringify(content.data)); var sensorData = []; - var allSensorSeveries = []; - var allSensorRows = []; - var total = 0; - var status = 'normal'; - var data = { - total: 0, - status: '', - sensors: [{ - title: 'All Sensors', - type: 'all', - status: '', - severity_flags: {}, - search_text: '', - display_headers: ['Sensor (Unit)', 'Reading', 'State'], - data: [] - }] - }; + var severity = {}; + var title = ""; + var tempKeyParts = []; + var order = 0; function getSensorStatus(reading){ - var severityFlags = {critical: false, warning: false, normal: false}, severityText = ''; - if(reading.Value >= reading.CriticalLow && reading.Value <= reading.CriticalHigh){ + var severityFlags = {critical: false, warning: false, normal: false}, severityText = '', order = 0; + + if(reading.hasOwnProperty('CriticalLow') && + reading.Value < reading.CriticalLow + ){ severityFlags.critical = true; severityText = 'critical'; - } - else if(reading.Value >= reading.WarningLow && reading.Value <= reading.WarningHigh){ + order = 2; + }else if(reading.hasOwnProperty('CriticalHigh') && + reading.Value > reading.CriticalHigh + ){ + severityFlags.critical = true; + severityText = 'critical'; + order = 2; + }else if(reading.hasOwnProperty('CriticalLow') && + reading.hasOwnProperty('WarningLow') && + reading.Value >= reading.CriticalLow && reading.Value <= reading.WarningLow){ severityFlags.warning = true; severityText = 'warning'; + order = 1; + }else if(reading.hasOwnProperty('WarningHigh') && + reading.hasOwnProperty('CriticalHigh') && + reading.Value >= reading.WarningHigh && reading.Value <= reading.CriticalHigh){ + severityFlags.warning = true; + severityText = 'warning'; + order = 1; }else{ severityFlags.normal = true; severityText = 'normal'; } - return { flags: severityFlags, severityText: severityText}; + return { flags: severityFlags, severityText: severityText, order: order}; } for(var key in content.data){ if(content.data.hasOwnProperty(key) && content.data[key].hasOwnProperty('Unit')){ + + severity = getSensorStatus(content.data[key]); + + if(!content.data[key].hasOwnProperty('CriticalLow')){ + content.data[key].CriticalLow = "--"; + content.data[key].CriticalHigh = "--"; + } + + if(!content.data[key].hasOwnProperty('WarningLow')){ + content.data[key].WarningLow = "--"; + content.data[key].WarningHigh = "--"; + } + + tempKeyParts = key.split("/"); + title = tempKeyParts.pop(); + title = tempKeyParts.pop() + '_' + title; + title = title.split("_").map(function(item){ + return item.toLowerCase().charAt(0).toUpperCase() + item.slice(1); + }).reduce(function(prev, el){ + return prev + " " + el; + }); + sensorData.push(Object.assign({ path: key, selected: false, confirm: false, copied: false, + title: title, + unit: Constants.SENSOR_UNIT_MAP[content.data[key].Unit], + severity_flags: severity.flags, + status: severity.severityText, + order: severity.order, + search_text: (title + " " + content.data[key].Value + " " + + Constants.SENSOR_UNIT_MAP[content.data[key].Unit] + " " + + severity.severityText + " " + + content.data[key].CriticalLow + " " + + content.data[key].CriticalHigh + " " + + content.data[key].WarningLow + " " + + content.data[key].WarningHigh + " " + ).toLowerCase(), original_data: {key: key, value: content.data[key]} }, content.data[key])); } } - Constants.SENSOR_DATA_TEMPLATE.sensors.forEach(function(sensor){ - var rowData = []; - var severities = []; - var thisSensorData = sensorData.filter(function(el){ - return el.path.indexOf('sensors/'+sensor.key_search) > -1; - }); - - for(var i = 0; i < thisSensorData.length; i++){ - - var severity = getSensorStatus(thisSensorData[i]); - severities.push(severity.severityText); - rowData.push(Object.assign({ - title: sensor.sensor_row.title + (i+1), - status: severity.severityText, - severity_flags: severity.flags, - reading: thisSensorData[i].Value + sensor.sensor_row.reading, - search_text: (sensor.sensor_row.title + (i+1) + " " + severity.severityText + " " + thisSensorData[i].Value + sensor.sensor_row.reading).toLowerCase(), - indicator: (severity.flags.critical) ? '90%' : ((severity.flags.warning) ? '15%' : '50%') - }, thisSensorData[i])); - } - - status = (severities.indexOf('critical') > -1) ? 'critical' : ((severities.indexOf('warning') > -1) ? 'warning' : 'normal'); - total += rowData.length; - allSensorSeveries.push(status); - var sevFlags = {critical: false, warning: false, normal: false}; - sevFlags[status] = true; - data.sensors.push({ - title: sensor.title, - type: sensor.type, - status: status, - severity_flags: sevFlags, - search_text: (sensor.title + " " + status).toLowerCase(), - display_headers: sensor.display_headers, - data: rowData - }); - Array.prototype.push.apply(allSensorRows, rowData); - }); - - data.status = (allSensorSeveries.indexOf('critical') > -1) ? 'critical' : ((allSensorSeveries.indexOf('warning') > -1) ? 'warning' : 'normal'); - data.total = total; - if(allSensorRows.length){ - data.sensors[0].status = data.status; - data.sensors[0].data = allSensorRows; - data.sensors[0].search_text = (data.sensors[0].title + " " + data.sensors[0].status).toLowerCase(); - var flags = {critical: false, warning: false, normal: false}; - flags[data.status] = true; - data.sensors[0].severity_flags = flags; - } - callback(data, dataClone); + callback(sensorData, dataClone); }).error(function(error){ console.log(error); }); @@ -680,11 +669,15 @@ window.angular && (function (angular) { } function camelcaseToLabel(obj){ - var transformed = [], label = ""; + var transformed = [], label = "", value = ""; for(var key in obj){ label = key.replace(/([A-Z0-9]+)/g, " $1").replace(/^\s+/, ""); if(obj[key] !== ""){ - transformed.push({key:label, value: obj[key]}); + value = obj[key]; + if(value == 1 || value == 0){ + value = (value == 1) ? 'Yes' : 'No'; + } + transformed.push({key:label, value: value}); } } diff --git a/app/common/services/constants.js b/app/common/services/constants.js index 7d77ec0..a610ba9 100644 --- a/app/common/services/constants.js +++ b/app/common/services/constants.js @@ -59,7 +59,7 @@ window.angular && (function (angular) { Warning: 'Medium' }, PAGINATION: { - LOG_ITEMS_PER_PAGE: 25 + LOG_ITEMS_PER_PAGE: 4 }, HARDWARE: { component_key_filter: '/xyz/openbmc_project/inventory/system', @@ -70,93 +70,14 @@ window.angular && (function (angular) { 'cpu', 'dimm' ] }, - SENSOR_DATA_TEMPLATE: { - sensors: [ - { - type: 'fan', - title: 'Fan Speed', - key_search: 'fan_tach', - display_headers: ['Fan Speed(RPM)', 'Reading', 'State'], - sensor_row: { - title: 'Fan Speed ', - reading: ' rpms', - status: '', - indicator: '' - } - }, - { - type: 'temperature', - title: 'Temperature', - 'key_search': 'temperature', - display_headers: ['Temperature (DegreesC)', 'Reading', 'State'], - sensor_row: { - title: 'Temperature ', - reading: ' degreeC', - status: '', - indicator: '' - } - }, - { - type: 'altitude', - title: 'Altitude', - 'key_search': 'altitude', - display_headers: ['Altitude (Meters)', 'Reading', 'State'], - sensor_row: { - title: 'Altitude ', - reading: ' Meters', - status: '', - indicator: '' - } - }, - { - type: 'voltage', - title: 'Voltage', - 'key_search': 'voltage', - display_headers: ['Temperature (Volts)', 'Reading', 'State'], - sensor_row: { - title: 'Voltage ', - reading: ' volts', - status: '', - indicator: '' - } - }, - { - type: 'current', - title: 'Current', - 'key_search': 'current', - display_headers: ['Current (Amperes)', 'Reading', 'State'], - sensor_row: { - title: 'Current ', - reading: ' amperes', - status: '', - indicator: '' - } - }, - { - type: 'power', - title: 'Power', - 'key_search': 'power', - display_headers: ['Power (Watts)', 'Reading', 'State'], - sensor_row: { - title: 'Power ', - reading: ' watts', - status: '', - indicator: '' - } - }, - { - type: 'energy', - title: 'Energy', - 'key_search': 'energy', - display_headers: ['Energy (Joules)', 'Reading', 'State'], - sensor_row: { - title: 'Energy ', - reading: ' joules', - status: '', - indicator: '' - } - } - ] + SENSOR_UNIT_MAP: { + 'xyz.openbmc_project.Sensor.Value.Unit.RPMS': 'rpms', + 'xyz.openbmc_project.Sensor.Value.Unit.DegreesC': 'C', + 'xyz.openbmc_project.Sensor.Value.Unit.Volts': 'volts', + 'xyz.openbmc_project.Sensor.Value.Unit.Meters': 'meters', + 'xyz.openbmc_project.Sensor.Value.Unit.Watts': 'watts', + 'xyz.openbmc_project.Sensor.Value.Unit.Amperes': 'amperes', + 'xyz.openbmc_project.Sensor.Value.Unit.Joules': 'joules' } }; }); diff --git a/app/common/services/userModel.js b/app/common/services/userModel.js index 747b288..dba607d 100644 --- a/app/common/services/userModel.js +++ b/app/common/services/userModel.js @@ -41,8 +41,6 @@ window.angular && (function (angular) { response.status == APIUtils.API_RESPONSE.SUCCESS_STATUS){ sessionStorage.removeItem('LOGIN_ID'); callback(true); - }else if(response.status == APIUtils.API_RESPONSE.ERROR_STATUS){ - callback(false); }else{ callback(false, error); } diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss index 4f79625..299c9b3 100644 --- a/app/common/styles/base/buttons.scss +++ b/app/common/styles/base/buttons.scss @@ -1,4 +1,4 @@ -button, .btn, .button, .submit { +button, .button, .submit { font-size: 1em; @include fontFamilyBold; text-transform: none; @@ -10,15 +10,13 @@ button, .btn, .button, .submit { &:hover { cursor: pointer; } -} - -.disabled { - button, .button, input[type="submit"] { + &.disabled { opacity: 0.2; color: $btn__disabled-txt; &:hover { cursor: default; background: transparent; + text-decoration: none; } } } @@ -39,7 +37,7 @@ button, .btn, .button, .submit { cursor: default; } } - i { // button symbol + i { //button symbol font-style: normal; text-transform: none; font-size: 1.5em; diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss index 780e319..ac8e0ae 100644 --- a/app/common/styles/base/colors.scss +++ b/app/common/styles/base/colors.scss @@ -65,8 +65,8 @@ $normal: #00baa1; // Threshold graphs $thresh-critical: $error-color; -$thresh-warning: #ff806c; -$thresh-normal: #8ee9d4; +$thresh-warning: #ffb001; +$thresh-normal: $lightgrey; //Inventory $active: #c6b6f5; diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss index 27fe0e1..bac0be0 100644 --- a/app/common/styles/base/icons.scss +++ b/app/common/styles/base/icons.scss @@ -45,16 +45,16 @@ } .icon__warning{ - width: 30px; - height: 30px; + width: 40px; + height: 40px; background-image: url(/assets/images/icon-warning.svg); background-repeat: no-repeat; vertical-align: middle; } .icon__critical{ - width: 30px; - height: 30px; + width: 40px; + height: 40px; background-image: url(/assets/images/icon-critical.svg); background-repeat: no-repeat; vertical-align: middle; diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss index e868354..d13f2ce 100644 --- a/app/common/styles/base/mixins.scss +++ b/app/common/styles/base/mixins.scss @@ -85,12 +85,14 @@ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>"); } +@mixin calcColumn-5 { + min-width: calc(100% * (1/5) - 5px); +} @mixin calcColumn-4 ($offset: 0) { min-width: calc(100% * (1/4) - #{$offset}); } - @mixin calcColumn-3 { min-width: calc(100% * (1/3) - 5px); } diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss index d674bbc..2ce17ee 100644 --- a/app/common/styles/components/form-elements.scss +++ b/app/common/styles/components/form-elements.scss @@ -3,7 +3,7 @@ position: relative; padding: .5em .8em; margin-top: -10px; - border: 1px solid $darkgrey; + border: 1px solid $input-border; min-width: 70px; padding-right: 25px; font-weight: 400; diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss index 496fbf7..2d818a9 100644 --- a/app/common/styles/directives/app-navigation.scss +++ b/app/common/styles/directives/app-navigation.scss @@ -1,11 +1,18 @@ $nav__toplvlWidth: 125px; $nav__seclvlWidth: 240px; +.nav__wrapper { + height: 100%; + position: fixed; + top: 0; + z-index: 100; +} + // Top level navigation #nav__top-level { background: $nav__top-level-color; - height: 100%; - position: fixed; + //height: 100%; + position: absolute; left: 0; top: 0; bottom: 0; @@ -14,6 +21,7 @@ $nav__seclvlWidth: 240px; margin: 0; padding: 0; width: $nav__toplvlWidth; + overflow-y: auto; li { margin: 0; } @@ -113,7 +121,7 @@ $nav__seclvlWidth: 240px; background: $nav__second-level-color; top: 0; bottom: 0; - left: -$nav__toplvlWidth; + left: -245px; width: $nav__seclvlWidth; z-index: 97; padding: 0; diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss index 76624b1..96f0a4c 100644 --- a/app/common/styles/elements/alerts.scss +++ b/app/common/styles/elements/alerts.scss @@ -13,7 +13,7 @@ .close { color: $lightbg__primary; position: absolute; - right: 0%; + right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5em; @@ -24,7 +24,7 @@ justify-content: center; flex-direction: column; background: transparent; - border: 0px; + border: 0; margin: 0; &:hover { color: $lightbg__accent; diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss index a8ae381..e93bff0 100644 --- a/app/common/styles/elements/content-search.scss +++ b/app/common/styles/elements/content-search.scss @@ -7,7 +7,6 @@ float: left; position: relative; margin-right: 1em; - margin-top: .5em; margin-bottom: .5em; #content__search-input { @@ -43,6 +42,10 @@ margin: 0; font-weight: 700; font-size: .8em; + border: 0; + &:hover { + cursor: pointer; + } } .tag-filter-label { diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss index ea0ab92..66847ae 100644 --- a/app/common/styles/elements/export.scss +++ b/app/common/styles/elements/export.scss @@ -4,10 +4,10 @@ font-size: .9em; font-weight: 700; position: relative; - padding: 0 0 1em 2em; + padding: 0 0 0 2em; margin-right: .6em; text-decoration: none; - margin-top: 7px; + margin-top: 0; &:hover { text-decoration: underline; } diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss index d136134..7b1d1c5 100644 --- a/app/common/styles/elements/index.scss +++ b/app/common/styles/elements/index.scss @@ -11,4 +11,4 @@ @import "thresholds"; @import "export"; @import "modals"; -@import "quicklinks";
\ No newline at end of file +@import "quicklinks"; diff --git a/app/common/styles/elements/thresholds.scss b/app/common/styles/elements/thresholds.scss deleted file mode 100644 index 52230ee..0000000 --- a/app/common/styles/elements/thresholds.scss +++ /dev/null @@ -1,78 +0,0 @@ -// Thresholds graph - -$threshColorLighten: 5%; -.threshold-chart__wrapper { - position: relative; - .threshold__label { - position: absolute; - top: 38%; - transform: translateY(-50%); - font-weight: 700; - &.low { - margin-left: 0; - } - &.high { - right: 5px; - } - } - @include mediaQuery(large) { - max-width: 1000px; - } -} - -.threshold-chart { - position: relative; - line-height: 0; - padding: .8em 0 2em 0; - margin: 0 2.5em 1em 2.5em; - //margin: 0 auto; - .threshold__marker { - position: absolute; - top: 13px; - bottom: -15px; - width: 4px; - background-color: $black; - @include slowTransition-all; - .threshold__value { - position: absolute; - bottom: 3px; - right: 5px; - margin: 0; - color: $black; - padding: 3px 6px; - font-weight: 400; - font-size: 1em; - white-space: nowrap; - } - } - - .threshold { - display: inline-block; - background-color: $thresh-normal; - min-width: 10%; - min-height: 25px; - margin: 0 -3px; - &.thresh__normal { - min-width: 60%; - } - } - - .threshold__marker, - .threshold { - &.thresh__low-critical { - background-color: $thresh-critical; - } - &.thresh__low-warn { - background-color: $thresh-warning; - } - &.thresh__high-warn { - background-color: $thresh-warning; - } - &.thresh__high-critical { - background-color: $thresh-critical; - } - &.thresh__normal { - background-color: $thresh-normal; - } - } -} diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss index 1a7d602..7305414 100644 --- a/app/common/styles/elements/toggle-filter.scss +++ b/app/common/styles/elements/toggle-filter.scss @@ -1,6 +1,12 @@ // toggle buttons for filtering .toggle-filter { - margin-top: 12px; + display: inline-block; + @media (min-width: 1300px) { + margin-top: -25px; + } + .content-label { + margin-bottom: .4em; + } .filter-label { color: darken($lightgrey, 10%); text-transform: uppercase; @@ -18,6 +24,7 @@ font-weight: 700; border-radius: 0; display: inline-block; + border-left: 0; &.first, &.last { border-radius: 3px; @@ -26,5 +33,4 @@ .btn-primary { border: 2px solid $primebtn__bg; } - }
\ No newline at end of file diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss index 326d896..b1a7942 100644 --- a/app/common/styles/layout/content.scss +++ b/app/common/styles/layout/content.scss @@ -37,10 +37,15 @@ section.row { margin-top: 2em; } -.content-label { - color: lighten($darkgrey, 15%); +.content-label, label { + color: $darkgrey; text-transform: uppercase; font-weight: 700; font-size: .75em; margin-bottom: 0; } + +.subhead { + border-bottom: 1px solid $medgrey; + padding-bottom: .5em; +}
\ No newline at end of file diff --git a/app/index.js b/app/index.js index 13add97..e2c7af4 100644 --- a/app/index.js +++ b/app/index.js @@ -45,7 +45,7 @@ window.angular && (function (angular) { $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|data|blob):/); }]) .config(['$httpProvider', function($httpProvider){ - $httpProvider.defaults.timeout = 10000; + $httpProvider.defaults.timeout = 20000; $httpProvider.interceptors.push('apiInterceptor'); }]) .run(['$rootScope', '$location', 'dataService', 'userModel', diff --git a/app/login/controllers/login-controller.html b/app/login/controllers/login-controller.html index a0da982..a634302 100644 --- a/app/login/controllers/login-controller.html +++ b/app/login/controllers/login-controller.html @@ -33,4 +33,4 @@ </form> </div> </div> -</div> +</div>
\ No newline at end of file diff --git a/app/login/controllers/login-controller.js b/app/login/controllers/login-controller.js index f4ca375..212abcc 100644 --- a/app/login/controllers/login-controller.js +++ b/app/login/controllers/login-controller.js @@ -35,7 +35,6 @@ window.angular && (function (angular) { }; $scope.login = function(username, password){ $scope.error = false; - $scope.server_unreachable = false; if(!username || username == "" || !password || password == ""){ @@ -46,11 +45,9 @@ window.angular && (function (angular) { $scope.$emit('user-logged-in',{}); $window.location.hash = '#/overview/system'; }else{ - if(unreachable){ - $scope.server_unreachable = true; - }else{ - $scope.error = true; - } + if(!unreachable){ + $scope.error = true; + } }; }); } diff --git a/app/overview/controllers/log-controller.html b/app/overview/controllers/log-controller.html new file mode 100644 index 0000000..47429f5 --- /dev/null +++ b/app/overview/controllers/log-controller.html @@ -0,0 +1,422 @@ +<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 event__severity-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>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 id="header__actions-bar" class="row "> + <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.svg" alt="">Delete + </button> + <button class="inline btn-resolve" ng-show="event || all"> + <img class="event__icon" src="assets/images/icon-checklist.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" + 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" + 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" 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"> + <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 new file mode 100644 index 0000000..b952893 --- /dev/null +++ b/app/overview/controllers/log-controller.js @@ -0,0 +1,28 @@ +/** + * 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/overview/controllers/sensors-controller.html b/app/overview/controllers/sensors-controller.html new file mode 100644 index 0000000..b742f07 --- /dev/null +++ b/app/overview/controllers/sensors-controller.html @@ -0,0 +1,191 @@ +<div id="sensors"> + <div class="row column"> + <h1>Sensors</h1> + </div> + <section class="row column"> + <div class="page-header"> + <h2 class="inline h4">Sensors present in the system</h2> + + </div> + </section> + <!-- Filters --> + <section class="row column"> + <!-- filters --> + <div class="event-log__filters"> + <!-- severity filter --> + <div class="dropdown__wrapper"> + <button class="dropdown__button" ng-click="severityFilter = severityFilter == true ? false : true;" + ng-class="{'active' : severityFilter}">All Severity + </button> + <ul class="dropdown__list multi-select inline" ng-show="severityFilter"> + <li> + <button>All severity (999)</button> + </li> + <li ng-click="dropdown_selectedHigh = !dropdown_selectedHigh; filterHigh = !filterHigh " + ng-class="{'active' : dropdown_selectedHigh, 'active' : filterHigh}"> + <button>High severity (999)</button> + </li> + <li ng-click="dropdown_selectedMed = !dropdown_selectedMed; filterMed = !filterMed" + ng-class="{'active' : dropdown_selectedMed, 'active' : filterMed}"> + <button>Medium severity (999)</button> + </li> + <li ng-click="dropdown_selectedLow = !dropdown_selectedLow; filterLow = !filterLow" + ng-class="{'active' : dropdown_selectedLow, 'active' : filterLow}"> + <button>Low severity (999)</button> + </li> + </ul> + </div> + <!-- date range --> + <div class="dropdown__wrapper"> + <button class="dropdown__button" ng-click="dateFilter = dateFilter == true ? false : true;" + ng-class="{'active' : dateFilter}">Date Range + </button> + <div class="dropdown__list dropdown__date row" ng-show="dateFilter"> + <div class="column small-6"> + <label>Start Date</label> + <input type="date"/> + </div> + <div class="column small-6"> + <label>End Date</label> + <input type="date"/> + </div> + </div> + </div> + <!-- Status filter --> + <div class="dropdown__wrapper"> + <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;" + ng-class="{'active' : statusFilter}">Status + </button> + <ul class="dropdown__list multi-select inline" ng-show="statusFilter"> + <li> + <button>All status (999)</button> + </li> + <li ng-click="dropdown_selectedResolved = !dropdown_selectedResolved; filterResolved = !filterResolved" + ng-class="{'active' : dropdown_selectedResolved, 'active' : filterResolved}"> + <button>Resolved issues (999)</button> + </li> + <li ng-click="dropdown_selectedUnresolved = !dropdown_selectedUnresolved; filterUnresolved = !filterUnresolved" + ng-class="{'active' : dropdown_selectedUnresolved, 'active' : filterUnresolved}"> + <button>Unresolved issues (999)</button> + </li> + </ul> + </div> + </div> + <!-- 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="sensors__search-submit" type="submit" class="btn btn-secondary" value="Submit"/> + <div class="sensors__search-tag-wrapper row" + ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow"> + <div class="column small-2 large-1 no-padding"> + <p class="inline label tag-filter-label">Filtered by: </p> + </div> + <div class="column small-10 large-11 "> + <button class="tag custom">Custom Tag</button> + <button class="tag sensors__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High + priority + </button> + <button class="tag sensors__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium + priority + </button> + <button class="tag sensors__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority + </button> + <button class="tag sensors__resolved" ng-click="filterUnresolved = !filterUnresolved" + ng-show="filterUnresolved">Unresolved issues + </button> + <button class="tag sensors__resolved" ng-click="filterResolved = !filterResolved" + ng-show="filterResolved">Resolved issues + </button> + </div> + </div> + </div> + </section> <!-- end filter --> + + <section id="sensor__details" class="row column"> + <div id="header__actions-bar" class="row "> + <div class="column"> + <p class="inline">icon here</p> + <h3 class="inline"><strong>Fan speed sensors</strong> <span class="h5">(RPMs)</span></h3> + </div> + </div> + + <!-- Sensor --> + <div 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 high-priority">High</p> + <p class="inline sensor__title">Fan Speed 1</p> + <p class="inline sensor__reading float-right">6200 <span>rpms</span></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> + </div> + </div> + <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow}"> + <div class="column small-12"> + <div class="threshold-chart"> + <span class="threshold__marker" style="left: 90%;"><p class="threshold__value">6200</p></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> + </div> + + <div class="column small-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-6"> + <p class="h5 content-header">Associated Hardware</p> + <a href="">None</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 high-priority">High</p> + <p class="inline sensor__title">Fan Speed 2</p> + <p class="inline sensor__reading float-right">3600 <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"> + <span class="threshold__marker" style="left: 50%"><p class="threshold__value">3600</p></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> + </div> + + <div class="column small-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-6"> + <p class="h5 content-header">Associated Hardware</p> + <a href="">None</a> + </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/sensors-controller.js b/app/overview/controllers/sensors-controller.js new file mode 100644 index 0000000..0ab0a42 --- /dev/null +++ b/app/overview/controllers/sensors-controller.js @@ -0,0 +1,32 @@ +/** + * 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('sensorsController', [ + '$scope', + '$log', + '$window', + 'APIUtils', + 'dataService', + function($scope, $log, $window, APIUtils, dataService, userModel){ + $scope.dataService = dataService; + + $scope.dropdown_selected = false; + + $scope.$log = $log; + $scope.message = 'Hello World!'; + } + ] + ); + +})(angular); diff --git a/app/overview/controllers/sensors-overview-controller.js b/app/overview/controllers/sensors-overview-controller.js new file mode 100644 index 0000000..ecb4ec1 --- /dev/null +++ b/app/overview/controllers/sensors-overview-controller.js @@ -0,0 +1,28 @@ +/** + * 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('sensorsController', [ + '$scope', + '$window', + 'APIUtils', + 'dataService', + function($scope, $window, APIUtils, dataService, userModel){ + $scope.dataService = dataService; + + $scope.dropdown_selected = false; + } + ] + ); + +})(angular); diff --git a/app/overview/controllers/sensors-overview.html b/app/overview/controllers/sensors-overview.html new file mode 100644 index 0000000..882fcd9 --- /dev/null +++ b/app/overview/controllers/sensors-overview.html @@ -0,0 +1,442 @@ +<div id="sensors"> + <div class="row column"> + <h1>Sensors</h1> + </div> + <section class="row column"> + <div class="page-header"> + <h2 class="inline h4">Sensors present in the system</h2> + + </div> + </section> + <!-- Filters --> + <section class="row column"> + <!-- filters --> + <div class="event-log__filters"> + <!-- severity filter --> + <div class="dropdown__wrapper"> + <button class="dropdown__button" ng-click="severityFilter = severityFilter == true ? false : true;" + ng-class="{'active' : severityFilter}">All Severity + </button> + <ul class="dropdown__list multi-select inline" ng-show="severityFilter"> + <li> + <button>All severity (999)</button> + </li> + <li ng-click="dropdown_selectedHigh = !dropdown_selectedHigh; filterHigh = !filterHigh " + ng-class="{'active' : dropdown_selectedHigh, 'active' : filterHigh}"> + <button>High severity (999)</button> + </li> + <li ng-click="dropdown_selectedMed = !dropdown_selectedMed; filterMed = !filterMed" + ng-class="{'active' : dropdown_selectedMed, 'active' : filterMed}"> + <button>Medium severity (999)</button> + </li> + <li ng-click="dropdown_selectedLow = !dropdown_selectedLow; filterLow = !filterLow" + ng-class="{'active' : dropdown_selectedLow, 'active' : filterLow}"> + <button>Low severity (999)</button> + </li> + </ul> + </div> + <!-- date range --> + <div class="dropdown__wrapper"> + <button class="dropdown__button" ng-click="dateFilter = dateFilter == true ? false : true;" + ng-class="{'active' : dateFilter}">Date Range + </button> + <div class="dropdown__list dropdown__date row" ng-show="dateFilter"> + <div class="column small-6"> + <label>Start Date</label> + <input type="date"/> + </div> + <div class="column small-6"> + <label>End Date</label> + <input type="date"/> + </div> + </div> + </div> + <!-- Status filter --> + <div class="dropdown__wrapper"> + <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;" + ng-class="{'active' : statusFilter}">Status + </button> + <ul class="dropdown__list multi-select inline" ng-show="statusFilter"> + <li> + <button>All status (999)</button> + </li> + <li ng-click="dropdown_selectedResolved = !dropdown_selectedResolved; filterResolved = !filterResolved" + ng-class="{'active' : dropdown_selectedResolved, 'active' : filterResolved}"> + <button>Resolved issues (999)</button> + </li> + <li ng-click="dropdown_selectedUnresolved = !dropdown_selectedUnresolved; filterUnresolved = !filterUnresolved" + ng-class="{'active' : dropdown_selectedUnresolved, 'active' : filterUnresolved}"> + <button>Unresolved issues (999)</button> + </li> + </ul> + </div> + </div> + <!-- search --> + <div class="content__search"> + <label for="event__search">Event Log Search</label> + <input id="content__search-input" type="text" placeholder="Filter issues"/> + <input id="event__search-submit" type="submit" class="btn btn-secondary" value="Submit"/> + <div class="event__search-tag-wrapper row" + ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow"> + <div class="column small-2 large-1 no-padding"> + <p class="inline label tag-filter-label">Filtered by: </p> + </div> + <div class="column small-10 large-11 "> + <button class="tag custom">Custom Tag</button> + <button class="tag event__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High + priority + </button> + <button class="tag event__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium + priority + </button> + <button class="tag event__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority + </button> + <button class="tag event__resolved" ng-click="filterUnresolved = !filterUnresolved" + ng-show="filterUnresolved">Unresolved issues + </button> + <button class="tag event__resolved" ng-click="filterResolved = !filterResolved" + ng-show="filterResolved">Resolved issues + </button> + </div> + </div> + </div> + </section> <!-- end filter --> + <section id="event-log__events" class="row column"> + <div id="header__actions-bar" class="row "> + <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.svg" alt="">Delete + </button> + <button class="inline btn-resolve" ng-show="event || all"> + <img class="event__icon" src="assets/images/icon-checklist.svg" alt="">Mark as resolved + </button> + <button class="inline btn-export">Export</button> + </div> + </div> + </div> + <!-- EVENT --> + <div class="row column 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 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 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 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/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html index be4601a..c188da7 100644 --- a/app/overview/controllers/system-overview-controller.html +++ b/app/overview/controllers/system-overview-controller.html @@ -116,6 +116,11 @@ </div> </a> </div> + + <div class="row column overview__event-log event-log__events" ng-show="!logs.length"> + <h3 class="bold h4">High priority events</h3> + <p>There are no high priority events to display at this time.</p> + </div> </div> <div class="column large-4"> <div class="quick-links" > diff --git a/app/overview/styles/sensors.scss b/app/overview/styles/sensors.scss new file mode 100644 index 0000000..ee101c0 --- /dev/null +++ b/app/overview/styles/sensors.scss @@ -0,0 +1,133 @@ +// Event Log SCSS +#sensors { + #sensors__detail { + display: block; + margin-top: 1.6em; + border-top: 1px solid $lightgrey; + position: relative; + overflow: hidden; + } +} + +//end sensors + + + +#sensor__details { + display: block; + margin-top: 1.6em; + border-top: 1px solid $lightgrey; + position: relative; + overflow: hidden; + + + //Export log + .btn-export { + text-transform: capitalize; + color: $black; + font-size: .9em; + font-weight: 700; + position: relative; + padding: 0 0 1em 2em; + &:hover { + text-decoration: underline; + } + } + .btn-export { + margin-top: 7px; + } + .btn-export:before { + content: '\21E5'; + position: absolute; + font-size: 1.7em; + vertical-align: middle; + transform: rotate(90deg); + display: inline-block; + left: 2px; + top: -5px; + } + + .sensor__info { + padding-top: 10px; + + &:hover { + cursor: pointer; + } + } + + .accord-row { + .priority-tag { + margin: 0 2em 0 1em; + } + } + + //Sensor info + .sensor__title { + font-weight: 400; + font-size: 1.3em; + } + .sensors__description { + font-weight: 400; + } + + //Event ID + .sensor__reading { + @include fontCourierBold; + font-size: 1.2em; + color: $darkgrey; + float: left; + margin-left: 1em; + @media (min-width: 950px) { + float: right; + } + } + + // Event metadata row + .sensors__metadata-row { + max-height: 0; + overflow: hidden; + -webkit-transition: 0.5s linear max-height; + transition: 0.5s linear max-height; + padding: 0 1em; + &.active { + max-height: 1000px; //max-height used to allow flexible height of content and still allow transition + @include mediaQuery(small) { + max-height: 1000px; + } + @include mediaQuery(medium) { + max-height: 1000px; + } + } + } + + + //Event Related Items + .sensors__related { + width: 100%; + } + .sensors__related-label { + font-weight: 700; + margin-right: 1.2em; + padding-top: .3em; + } + + .sensors__related-item { + margin-right: 1em; + padding-top: .3em; + display: inline-block; + float: left; + clear: both; + } + + .sensors__icon { + width: 20px; + height: 20px; + font-weight: normal; + margin-right: .5em; + margin-top: -3px; + display: inline-block; + } + +} + +//end sensors diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html index 59edc72..a5dc5a7 100644 --- a/app/server-health/controllers/log-controller.html +++ b/app/server-health/controllers/log-controller.html @@ -68,4 +68,4 @@ </log-event> </section> <dir-pagination-controls template-url="common/directives/dirPagination.tpl.html"></dir-pagination-controls> -</div> <!-- end event log --> +</div> <!-- end event log -->
\ No newline at end of file diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html index fc80405..58028ee 100644 --- a/app/server-health/controllers/sensors-overview-controller.html +++ b/app/server-health/controllers/sensors-overview-controller.html @@ -1,44 +1,107 @@ <div id="sensors-overview"> - <div class="row column"> - <h1>Sensors</h1> - </div> - <section class="row column"> - <div class="page-header"> - <h2 class="inline h4">Sensors present in the system</h2> - <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> + <div class="row column"> + <h1>Sensors</h1> + </div> + <section class="row column"> + <div class="page-header"> + <h2 class="inline h4">All sensors present in the system</h2> + <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export float-right" download="{{export_name}}">Export</a> + </div> + </section> + <section class="row column"> + <!-- search --> + <p class="content-label" aria-label="sensors filter">Filter sensors</p> + <div class="content__search"> + <label for="content__search-input">Sensors Search</label> + <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/> + <input id="content__search-submit" type="submit" class="btn btn-primary" value="Filter" ng-click="doSearchOnClick()"/> + </div> + <div class="toggle-filter"> + <p class="content-label">FILTER BY SEVERITY</p> + <button class="inline first btn-primary" ng-click="toggleSeverityAll()" + ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All + </button> + <button class="inline " ng-click="toggleSeverity('critical')" + ng-class="selectedSeverity.critical ? 'btn-primary' : 'btn-secondary'">Critical + </button> + <button class="inline" ng-click="toggleSeverity('warning')" + ng-class="selectedSeverity.warning ? 'btn-primary' : 'btn-secondary'">Warning + </button> + </div> - <section class="row column"> - <!-- search --> - <div class="content__search"> - <label for="content__search-input">Sensors 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-primary" value="Filter" ng-click="doSearchOnClick()"/> - </div> - <div class="toggle-filter"> - <button class="inline first btn-primary" ng-click="toggleSeverityAll()" - ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All - </button> - <button class="inline " ng-click="toggleSeverity('critical')" - ng-class="selectedSeverity.critical ? 'btn-primary' : 'btn-secondary'">Critical - </button> - <button class="inline" ng-click="toggleSeverity('warning')" - ng-class="selectedSeverity.warning ? 'btn-primary' : 'btn-secondary'">Warning - </button> - </div> + </section> <!-- end search --> - </section> <!-- end search --> + <section id="sensor-categories" class="row column"> + <div class="row column header-row"> + <div class="column large-12 header__actions-bar"> + <p class="inline sensor__title">Sensors</p> + <p class="inline sensor__reading">Low critical</p> + <p class="inline sensor__reading">Low warning</p> + <p class="inline sensor__reading sensor__heading-current">Current</p> + <p class="inline sensor__reading">High warning</p> + <p class="inline sensor__reading">High critical</p> + </div> + </div> + <!-- sensor --> +<<<<<<< HEAD + <div class="sensor__readings-row" ng-repeat="sensor in (filteredSensorData = data|filter:filterBySeverity|filter:filterBySearchTerms|orderBy:'-order')"> + <p class="inline sensor__title"><span class="icon" ng-class="{'icon__critical': sensor.status == 'critical', 'icon__warning': sensor.status == 'warning', 'icon__normal': sensor.status == 'normal'}" aria-label="sensor.status" ></span>{{sensor.title}}</p> + <p class="inline sensor__reading"><span class="sensor__label">Low critical</span>{{sensor.CriticalLow}}<span class="content-label">{{sensor.unit}}<span ng-if="sensor.unit == 'C'">°</span></p> + <p class="inline sensor__reading"><span class="sensor__label">Low warning</span>{{sensor.WarningLow}}<span class="content-label">{{sensor.unit}}<span ng-if="sensor.unit == 'C'">°</span></p> + <p class="inline sensor__reading sensor__current" ng-class="{'sensor__critical': sensor.status == 'critical', 'sensor__warn': sensor.status == 'warning', 'sensor__normal': sensor.status == 'normal'}"><span class="sensor__label">Current</span>{{sensor.Value}}<span class="content-label">{{sensor.unit}}<span ng-if="sensor.unit == 'C'">°</span></span></p> + <p class="inline sensor__reading"><span class="sensor__label">High warning</span>{{sensor.WarningHigh}}<span class="content-label">{{sensor.unit}}<span ng-if="sensor.unit == 'C'">°</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High critical</span>{{sensor.CriticalHigh}}<span class="content-label">{{sensor.unit}}<span ng-if="sensor.unit == 'C'">°</span></p> + </div> +======= + <div class="sensor__readings-row" > + <p class="inline sensor__title"><span class="icon icon__critical" aria-label="critical"></span>Temperature 5</p> + <p class="inline sensor__reading"><span class="sensor__label">Low critical</span>32<span class="content-label">C°</span></p> + <p class="inline sensor__reading"><span class="sensor__label">Low warning</span>45<span class="content-label">C°</span></p> + <p class="inline sensor__reading sensor__current sensor__critical "><span class="sensor__label">Current</span>124<span class="content-label">C°</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High warning</span>105<span class="content-label">C°</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High critical</span>120<span class="content-label">C°</span></p> + </div> + <!-- sensor --> + <div class="sensor__readings-row" > + <p class="inline sensor__title"><span class="icon icon__critical" aria-label="critical"></span>Fan 3</p> + <p class="inline sensor__reading"><span class="sensor__label">Low critical</span>100<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">Low warning</span>400<span class="content-label">rpm</span></p> + <p class="inline sensor__reading sensor__current sensor__critical"><span class="sensor__label">Current</span>90<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High warning</span>2000<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High critical</span>2500<span class="content-label">rpm</span></p> + </div> + <!-- sensor --> + <div class="sensor__readings-row" > + <p class="inline sensor__title"><span class="icon icon__warning" aria-label="warning"></span>Fan 5</p> + <p class="inline sensor__reading"><span class="sensor__label">Low critical</span>100<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">Low warning</span>400<span class="content-label">rpm</span></p> + <p class="inline sensor__reading sensor__current sensor__warn"><span class="sensor__label">Current</span>90<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High warning</span>2000<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High critical</span>2500<span class="content-label">rpm</span></p> + </div> + <!-- sensor --> + <div class="sensor__readings-row" > + <p class="inline sensor__title">Temperature 1</p> + <p class="inline sensor__reading"><span class="sensor__label">Low critical</span>100<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">Low warning</span>400<span class="content-label">rpm</span></p> + <p class="inline sensor__reading sensor__current"><span class="sensor__label">Current</span>130<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High warning</span>2000<span class="content-label">rpm</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High critical</span>2500<span class="content-label">rpm</span></p> + </div> + <!-- sensor --> + <div class="sensor__readings-row" > + <p class="inline sensor__title">Altitude</p> + <p class="inline sensor__reading"><span class="sensor__label">Low critical</span>--</p> + <p class="inline sensor__reading"><span class="sensor__label">Low warning</span>--</p> + <p class="inline sensor__reading sensor__current"><span class="sensor__label">Current</span>300<span class="content-label">M</span></p> + <p class="inline sensor__reading"><span class="sensor__label">High warning</span>--</p> + <p class="inline sensor__reading"><span class="sensor__label">High critical</span>--</p> + </div> + <!--<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" ng-class="{'high-priority': sensor.status == 'critical', 'medium-priority': sensor.status == 'warning', 'low-priority': sensor.status == 'normal'}" 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 id="sensor-categories" class="row column"> - <div class="row column header-row"> - <div class="column large-12 header__actions-bar"> - <p class="inline sensor__heading sensor__category">Sensors</p> - <p class="inline float-right sensor__heading right">State</p> - </div> - </div> - - <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" ng-class="{'high-priority': sensor.status == 'critical', 'medium-priority': sensor.status == 'warning', 'low-priority': sensor.status == 'normal'}" 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 +>>>>>>> work on sensors page. minor bug fixes. removed thresholds scss file. no longer needed due to design changes. + </section> +</div> diff --git a/app/server-health/controllers/sensors-overview-controller.js b/app/server-health/controllers/sensors-overview-controller.js index 213a4e3..d68b31f 100644 --- a/app/server-health/controllers/sensors-overview-controller.js +++ b/app/server-health/controllers/sensors-overview-controller.js @@ -64,7 +64,10 @@ window.angular && (function (angular) { } $scope.toggleSeverityAll = function(){ - $scope.selectedSeverity.all = !$scope.selectedSeverity.all; + + if($scope.selectedSeverity.all !== true){ + $scope.selectedSeverity.all = !$scope.selectedSeverity.all; + } if($scope.selectedSeverity.all){ $scope.selectedSeverity.normal = false; diff --git a/app/server-health/controllers/unit-id-controller.js b/app/server-health/controllers/unit-id-controller.js index 5494c61..fa47781 100644 --- a/app/server-health/controllers/unit-id-controller.js +++ b/app/server-health/controllers/unit-id-controller.js @@ -19,26 +19,6 @@ window.angular && (function (angular) { 'dataService', function($scope, $window, APIUtils, dataService, userModel){ $scope.dataService = dataService; - - $scope.getLEDState = function(){ - APIUtils.getLEDState(function(state){ - if(state == APIUtils.LED_STATE.on){ - dataService.LED_state = APIUtils.LED_STATE_TEXT.on; - }else{ - dataService.LED_state = APIUtils.LED_STATE_TEXT.off; - } - }); - } - $scope.toggleLED = function(){ - var toggleState = (dataService.LED_state == APIUtils.LED_STATE_TEXT.on) ? - APIUtils.LED_STATE.off : APIUtils.LED_STATE.on; - dataService.LED_state = (dataService.LED_state == APIUtils.LED_STATE_TEXT.on) ? - APIUtils.LED_STATE_TEXT.off : APIUtils.LED_STATE_TEXT.on; - APIUtils.setLEDState(toggleState, function(status){ - }); - } - - $scope.getLEDState(); } ] ); diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss index f720c3b..cd30d6f 100644 --- a/app/server-health/styles/sensors.scss +++ b/app/server-health/styles/sensors.scss @@ -1,4 +1,3 @@ - @mixin state-label { text-transform: uppercase; font-weight: 700; @@ -7,243 +6,136 @@ $title-minWidth: 210px; -.sensor__heading { +.header__actions-bar { + padding-left: 1.5em; font-weight: 700; - &.middle, - &.right { - display: none; - @media (min-width: 950px) { - display: inline-block; - } + .sensor__heading-current { + padding-right: 1em; } } -.sensor__critical-label { - color: $thresh-critical; - @include state-label; -} -.sensor__warning-label { - color: $thresh-warning; - @include state-label; +.sensor__heading-current { + margin: 0; + @include mediaQuery(medium) { + margin-left: 10px; + margin-right: 10px; + } } -#sensors-overview { - .sensor__group { - position: relative; - display: block; - margin: .5em 0; - background: $white; - padding: 1.5em 6em 1.5em 3.7em; - text-decoration: none; - border: 1px solid $lightgrey; - font-weight: 700; - &:hover { - background: $lightblue; - color: $black; - } - @include mediaQuery(x-large) { - //max-width: 60%; - } - } - .priority-tag-circ { - position: absolute; - top: 50%; - left: 1.2em; - transform: translateY(-50%); - } - .header__actions-bar { - padding-left: 3.5em; - padding-right: 7.3em; +.sensor__label { + float: left; + font-weight: 300; + @include mediaQuery(medium) { + display: none; } } -// Sensors - -#sensors, #sensors-overview { - .accord-row { - padding-left: 3.7em; - padding-right: 1em; - } - .content__search { - max-width: 100%; - @media(min-width: 1300px) { - max-width: 50%; - } - } - .toggle-filter { - display: inline-block; - margin-right: 0; - } +.sensor__title { + min-width: 30%; + margin-bottom: 0; } -#back-link { - margin: 1em 0 0; - a { - text-decoration: none; - position: relative; +.sensor__reading { + width: 100%; + text-align: right; + margin-bottom: 0; + display: none; + @include mediaQuery(medium) { display: inline-block; - padding-left: 1.2em; - font-weight: 700; - &:before { - content: '\221F'; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-53%) rotate(45deg); - display: inline-block; - margin-right: 6px; - font-size: 1.1em; - font-weight: bold; - text-shadow: 0 0 1px black; - } - &:hover { - text-decoration: underline; - } + width: auto; + min-width: calc(70% * (1 / 5) - 10px); } } -#sensor__details { - display: block; - margin-top: .6em; +.sensor__readings-row { position: relative; - overflow: hidden; - - .header__actions-bar { - position: relative; - padding: 1em 35px 0 3.7em; - - .priority-tag-circ { - position: absolute; - left: 1.2em; - top: 50%; - transform: translateY(-50%); - &.high-priority { - background-color: rgba($critical-darkbg, .3); - } - } - .sensor__category { - margin: 0; - color: $white; - min-width: $title-minWidth; - } - } - .header-row { - background: $darkpurple; - } - - //Export log - .btn-export { - text-transform: capitalize; - color: $black; - font-size: .9em; - font-weight: 700; - position: relative; - padding: 0 0 1em 2em; - &:hover { - text-decoration: underline; - } - } - .btn-export { - margin-top: 7px; - } - .btn-export:before { - content: '\21E5'; - position: absolute; - font-size: 1.7em; - vertical-align: middle; - transform: rotate(90deg); - display: inline-block; - left: 2px; - top: -5px; - } - - .sensor__info { - padding-top: 10px; - &:hover { - cursor: pointer; - } - } - - .accord-row { - // accordion row - .priority-tag-circ { - position: absolute; - top: 28px; - left: 1.2em; - } - + display: block; + margin: 0; + background: $white; + text-decoration: none; + border: 1px solid $medgrey; + background: lighten($lightgrey,1%); + margin-top: 1em; + @include mediaQuery(medium) { + padding: .3em 1em .3em 1.5em; + margin-top: 0; + border-top: 0; + background: transparent; + } + .icon { + margin: -8px 0 -8px -8px; } - - //Sensor info .sensor__title { font-weight: 700; - font-size: 1.1em; - min-width: $title-minWidth; - max-width: 78%; - vertical-align: top; + background: darken($lightgrey, 5%); + min-width: 100%; + padding: .8em; + @include mediaQuery(medium) { + min-width: 30%; + background: transparent; + padding: .5em .5em .5em 0; + } } - .sensors__description { - font-weight: 400; + .content-label { + font-size: 1em; + margin-left: .8em; + color: lighten($darkgrey, 10%); } - .sensor__reading { @include fontCourierBold; - font-size: 1.2em; - color: $black; - max-width: 18%; + display: block; + padding: .3em .8em; + @include mediaQuery(medium) { + display: inline-block; + padding: 0; + } } - - // Sensor metadata row - .sensors__metadata-row { - max-height: 0; - overflow: hidden; - -webkit-transition: 0.5s linear max-height; - transition: 0.5s linear max-height; - padding: 0; - @include fastTransition-all; - @include mediaQuery(large) { - margin-left: 200px; + .sensor__current { + background: darken($thresh-normal, 3%); + margin: 0; + @include mediaQuery(medium) { + background: $thresh-normal; + padding: .7em 1em; + margin-left: 10px; + margin-right: 10px; } - &.active { - max-height: 1000px; //max-height used to allow flexible height of content and still allow transition - @include mediaQuery(small) { - max-height: 1000px; - } + .sensor__label { + font-weight: 700; @include mediaQuery(medium) { - max-height: 1000px; + font-weight:300; } } } - - //Sensor Related Items - .sensors__related { - width: 100%; - } - .sensors__related-label { - font-weight: 700; - margin-right: 1.2em; - padding-top: .3em; - } - - .sensors__related-item { - margin-right: 1em; - padding-top: .3em; - display: inline-block; - float: left; - clear: both; + .sensor__critical { + background: $thresh-critical; + color: $white; + .content-label { + color: $white; + } } - - .sensors__icon { - width: 20px; - height: 20px; - font-weight: normal; - margin-right: .5em; - margin-top: -3px; - display: inline-block; + .sensor__warn { + background: $thresh-warning; + color: $black; + .content-label { + color: $black; + } } } -//end sensor details +// Sensors + +#sensors, #sensors-overview { + .content__search { + max-width: 100%; + @media(min-width: 1300px) { + max-width: 70%; + } + } + .toggle-filter { + margin-right: 0; + } +} +//end sensor details
\ No newline at end of file |
