Update overview page to use new UI patterns
- Use page, section, list-pair to establish
consistent layout
- Update header and overview page to use new
caret icon
- Reordered Server and BMC information to
accomodate small screen views
- Added chevron icons to create consistency
between header and server overview page
quick links
- Changed edit hostname text to use the
standard icon
- Added OR operator to short circuit the server
model, server serial number, and server manufacturer
to display N/A if the information is not available
Change-Id: I6619f5369ff290555142e85aa432e901c4f93d2d
Signed-off-by: Derick Montague <derick.montague@ibm.com>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index a9c41b4..651e56d 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -5,20 +5,51 @@
<a href="" class="header__logout" ng-click="logout()">Log out</a>
</div>
<div class="header__functions-section">
- <div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
+ <div class="logo__wrapper">
+ <img
+ src="../../assets/images/logo.svg"
+ class="header__logo"
+ alt="company logo"
+ />
+ </div>
<div class="inline header__server-name">
- <p class="header__hostname">{{dataService.hostname}}</p>
- <p class="header__server-ip courier-bold">{{dataService.server_id}}</p>
+ <p class="header__hostname">{{ dataService.hostname }}</p>
+ <p class="header__server-ip courier-bold">{{ dataService.server_id }}</p>
</div>
<div class="header__functions" ng-class="{'active' : toggle}">
- <button type="button" class="header__info" ng-click="toggle = !toggle"><i class="icon icon-angle" aria-hidden="true"></i></button>
- <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__error': dataService.server_state == 'Quiesced'}">{{dataService.server_state | quiescedToError}}</span></a>
- <p class="header__refresh">Data last refreshed<span>{{dataService.last_updated | localeDate}}</span>
+ <button
+ type="button"
+ class="header__action header__action--info"
+ ng-click="toggle = !toggle"
+ >
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
+ </button>
+ <a href="#/server-health/event-log" class="header__action"
+ >Server health
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
+ ><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__action"
+ >Server power
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
+ ><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 | localeDate
+ }}</span>
</p>
- <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
+ <button
+ class="header__action header__action--refresh"
+ ng-click="refresh()"
+ aria-label="refresh page data"
+ >
<span>Refresh</span>
<icon file="icon-restart.svg"></icon>
</button>