Display red 'error' icon for Error state
- Display a red 'error' icon vs a yellow 'warning' icon when
the Server Power is in an Error (Quiesced) state.
Resolves openbmc/openbmc#3149
Change-Id: I0d23d9406370e5b49d554b979aaedb5754601e3b
Signed-off-by: CamVan Nguyen <ctnguyen@us.ibm.com>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 887af51..5395d2a 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -18,7 +18,7 @@
<a href="#/server-health/event-log" class="header__server-health">Server health
<i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}">{{dataService.server_health}}</span></a>
<a href="#/server-control/power-operations" class="header__server-power" role="button">Server power
- <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__warn': dataService.server_state == 'Quiesced'}">{{dataService.server_state | quiescedToError}}</span></a>
+ <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}">{{dataService.server_state | quiescedToError}}</span></a>
<p class="header__refresh">Data last refreshed<span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span>
</p>
<button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index d20778d..dae0c67 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -12,7 +12,7 @@
</div>
</div>
<div class="row column">
- <div id="power-indicator-bar" class="power__indicator-bar" ng-class="{'power__state-on': dataService.server_state == 'Running', 'power__state-off': dataService.server_state == 'Off', 'power__state-indet': dataService.server_state == 'Standby'}">
+ <div id="power-indicator-bar" class="power__indicator-bar" ng-class="{'power__state-on': dataService.server_state == 'Running', 'power__state-off': dataService.server_state == 'Off', 'power__state-indet': dataService.server_state == 'Standby', 'power__state-error': dataService.server_state == 'Quiesced'}">
<p class="inline">{{dataService.hostname}} - {{dataService.server_id}}</p>
<h3 class="power__state inline no-margin h3"><span>{{dataService.server_state | quiescedToError}}</span></h3>
</div>
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index add4ff3..cb2e190 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -76,6 +76,16 @@
}
}
}
+ &.power__state-error {
+ background-position: 0;
+ color: $black;
+ .power__state {
+ span:before {
+ content: '';
+ @extend .icon__critical;
+ }
+ }
+ }
}
// Power button options
@@ -100,4 +110,4 @@
}
}
-} //end power-operations
\ No newline at end of file
+} //end power-operations