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/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index ffbf0a1..9ef38ff 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -1,193 +1,191 @@
<loader loading="loading"></loader>
-<div class="overview">
- <div class="row column">
- <h1 class="inline">{{dataService.hostname}}</h1>
- <button class="btn btn-tertiary" ng-click="edit_hostname = !edit_hostname">Edit</button>
- </div>
- <section class="row">
- <div class="column large-8">
- <!-- Server Metadata -->
- <div class="row overview__server-metadata">
- <div class="column large-4">
- <h2 class="h3">Server information</h2>
+<div class="page overview">
+ <h1 class="page-title inline">{{ dataService.hostname }}</h1>
+ <button class="btn btn-tertiary" ng-click="edit_hostname = !edit_hostname" aria-label="edit host name">
+ <icon class="nav-icon" aria-hidden="true" file="icon-edit.svg"></icon>
+ </button>
+ <div class="row">
+ <div class="small-12 large-8">
+ <section class="section">
+ <div class="section-header">
+ <h2 class="section-title h3">Server information</h2>
</div>
- <div class="column large-8">
- <ul class="overview__metadata-wrapper">
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Model</dt>
- <dd class="courier-bold">{{server_info.Model}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Manufacturer</dt>
- <dd class="courier-bold">{{server_info.Manufacturer}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Firmware version</dt>
- <dd class="courier-bold">{{server_firmware}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Serial number</dt>
- <dd class="courier-bold">{{server_info.SerialNumber}}</dd>
- </dl>
- </li>
- </ul>
+ <div class="section-content row">
+ <div class="column large-6">
+ <dl class="list-pair">
+ <dt>Model</dt>
+ <dd>{{ server_info.Model || "N/A" }}</dd>
+ </dl>
+ <dl class="list-pair">
+ <dt>Serial number</dt>
+ <dd>{{ server_info.SerialNumber || "N/A" }}</dd>
+ </dl>
+ </div>
+ <div class="column large-6">
+ <dl class="list-pair">
+ <dt>Manufacturer</dt>
+ <dd>{{ server_info.Manufacturer || "N/A" }}</dd>
+ </dl>
+ <dl class="list-pair">
+ <dt>Firmware version</dt>
+ <dd>{{ server_firmware }}</dd>
+ </dl>
+ </div>
</div>
- </div>
- <!-- BMC Metadata -->
- <div class="row overview__server-metadata">
- <div class="column large-4">
- <h2 class="h3">BMC information</h2>
+ </section>
+
+ <section class="section">
+ <div class="section-header">
+ <h2 class="section-title h3">BMC information</h2>
</div>
- <div class="column large-8">
- <ul class="overview__metadata-wrapper">
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Hostname</dt>
- <dd class="courier-bold overview__hostname">{{dataService.hostname}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">IP addresses</dt>
- <dd class="courier-bold" ng-repeat="ip_address in bmc_ip_addresses">{{ip_address}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Firmware Version</dt>
- <dd class="courier-bold">{{bmc_firmware}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Mac address</dt>
- <dd class="courier-bold">{{dataService.mac_address}}</dd>
- </dl>
- </li>
- </ul>
+ <div class="section-content row">
+ <div class="column large-6">
+ <dl class="list-pair">
+ <dt>Hostname</dt>
+ <dd class="overview__hostname">
+ {{ dataService.hostname }}
+ </dd>
+ </dl>
+ <dl class="list-pair">
+ <dt>IP addresses</dt>
+ <dd class="courier-bold" ng-repeat="ip_address in bmc_ip_addresses">
+ {{ ip_address }}
+ </dd>
+ </dl>
+ </div>
+ <div class="column large-6">
+ <dl class="list-pair">
+ <dt>Mac address</dt>
+ <dd class="courier-bold">{{ dataService.mac_address }}</dd>
+ </dl>
+ <dl class="list-pair">
+ <dt>Firmware Version</dt>
+ <dd class="courier-bold">{{ bmc_firmware }}</dd>
+ </dl>
+ </div>
</div>
- </div>
- <!-- Power metadata -->
- <div class="row overview__server-metadata">
- <div class="column large-4">
- <h2 class="h3">Power information</h2>
+ </section>
+
+ <section class="section">
+ <div class="section-header">
+ <h2 class="section-title h3">Power Consumption</h2>
</div>
- <div class="column large-8">
- <ul class="overview__metadata-wrapper">
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Power Consumption</dt>
- <dd class="courier-bold">{{power_consumption}}</dd>
- </dl>
- </li>
- <li class="overview__metadata-block">
- <dl>
- <dt class="content-label">Power Cap</dt>
- <dd class="courier-bold">{{power_cap}}</dd>
- </dl>
- </li>
- </ul>
+ <div class="section-content row">
+ <div class="column large-6">
+ <dl class="list-pair">
+ <dt>Power Consumption</dt>
+ <dd class="courier-bold">{{ power_consumption }}</dd>
+ </dl>
+ </div>
+ <div class="column large-6">
+ <dl class="list-pair">
+ <dt>Power Cap</dt>
+ <dd class="courier-bold">{{ power_cap }}</dd>
+ </dl>
+ </div>
</div>
- </div>
- <!-- Power metadata -->
+ </section>
</div>
- <div class="column large-4 no-padding">
+ <div class="small-12 large-4">
<div class="quick-links">
<a href="#/server-health/event-log/high" class="quick-links__item quick-links__events event-log__events"
ng-show="logs.length">
<!-- link to event log filtered to the high priority events -->
- <p class="inline quick-links__event-copy">View {{logs.length}} high priority events</p>
+ <span class="inline quick-links__event-copy">
+ View {{ logs.length }} high priority events
+ </span>
</a>
<dl class="quick-links__item no-icon">
<dt class="inline quick-links__label">BMC time</dt>
- <dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd>
+ <dd class="bmc-time">{{ bmc_time | localeDate }}</dd>
</dl>
<div class="quick-links__item no-icon">
- <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span>
- <span ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
+ <p class="inline quick-links__label">
+ Turn <span ng-if="dataService.LED_state == 'off'">on</span>
+ <span ng-if="dataService.LED_state == 'on'">off</span> server LED
+ </p>
<div class="toggle-container">
<div class="toggle">
<input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox"
tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'"
- ng-disabled="dataService.server_unreachable">
- <label for="toggle__switch-round" tabindex="0">Server LED is <span
- class="uid-switch__status">{{dataService.LED_state}}</span></label>
+ ng-disabled="dataService.server_unreachable" />
+ <label for="toggle__switch-round" tabindex="0">Server LED is
+ <span class="uid-switch__status">{{
+ dataService.LED_state
+ }}</span></label>
</div>
- <span>
- {{ dataService.LED_state == 'on' ? "On" : "Off" }}
- </span>
+ <span>
+ {{ dataService.LED_state == "on" ? "On" : "Off" }}
+ </span>
+ </div>
</div>
- </div>
<a href="#/server-control/remote-console" class="no-icon quick-links__item">
- <p class="inline quick-links__label">Serial over LAN console</p>
- <icon file="icon-launch.svg" class="float-right"></icon>
+ <span class="inline quick-links__label">Serial over LAN console</span>
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
</a>
<a href="#/configuration/network" class="quick-links__item">
- <p class="inline quick-links__label">Edit network settings</p>
+ <span class="inline quick-links__label">Edit network settings</span>
+ <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
</a>
- </d>
</div>
- </section>
- <section class="row">
- <div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
- <div class="page-header">
- <div class="row">
- <div class="column large-7 small-6">
- <h2 class="h3">High priority events ({{logs.length}})</h2>
- </div>
- <div class="column large-5 small-6 no-padding">
- <a href="#/server-health/event-log/" class="float-right">View all event logs</a>
- </div>
- </div>
- </div>
+ </div>
+ </div>
- <!-- single event -->
- <a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'-Id'|limitTo : 5">
- <div class="row column event-log__single-event">
- <div class="row">
- <!-- click will go to specific event in event log page-->
- <div class="column small-10 large-11 event-log__event-info" ng-click="">
- <div class="row">
- <div class="column large-1 small-1">
- <p class="inline event__id">#{{event.Id}}</p>
- </div>
- <div class="column large-4 small-11">
- <p class="inline event__priority high-priority">High</p>
- <p class="inline event__severity high-priority">{{event.severity_code}}</p>
- </div>
- <div class="column large-7 large-offset-0 small-12 small-offset-1">
- <p class="inline event__timestamp">{{ event.Timestamp | localeDate }}</p>
- </div>
- </div>
-
- <div class="row">
- <div class="column large-12 small-12 small-offset-1">
- <p class="inline event__description">{{getEventLogTitle(event)}}</p>
- </div>
- </div>
- </div>
- <div class="column small-2 large-1">
- <span class="accord-trigger" aria-hidden="true"></span>
- </div>
- </div>
- </div>
+ <div class="section overview__event-log event-log__events" ng-show="logs.length">
+ <div class="section-header">
+ <h2 class="section-title h3">High priority events ({{ logs.length }})</h2>
+ <a href="#/server-health/event-log/">
+ View all event logs
</a>
</div>
- <div class="row column overview__event-log event-log__events" ng-show="!logs.length">
- <div class="page-header">
- <h2 class="h3">High priority events (0)</h2>
+ <!-- single event -->
+ <a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'-Id'|limitTo : 5">
+ <div class="row column event-log__single-event">
+ <div class="row">
+ <!-- click will go to specific event in event log page-->
+ <div class="column small-10 large-11 event-log__event-info" ng-click="">
+ <div class="row">
+ <div class="column large-1 small-1">
+ <p class="inline event__id">#{{ event.Id }}</p>
+ </div>
+ <div class="column large-4 small-11">
+ <p class="inline event__priority high-priority">High</p>
+ <p class="inline event__severity high-priority">
+ {{ event.severity_code }}
+ </p>
+ </div>
+ <div class="column large-7 large-offset-0 small-11 small-offset-1">
+ <p class="inline event__timestamp">
+ {{ event.Timestamp | localeDate }}
+ </p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="column large-12 small-11 small-offset-1">
+ <p class="inline event__description">
+ {{ getEventLogTitle(event) }}
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="column small-2 large-1">
+ <span class="accord-trigger" aria-hidden="true"></span>
+ </div>
+ </div>
</div>
- <p>There are no high priority events to display at this time.</p>
+ </a>
+ </div>
+
+ <div class="section overview__event-log event-log__events" ng-show="!logs.length">
+ <div class="section-header">
+ <h2 class="section-title h3">High priority events</h2>
</div>
- </section>
+ <p class="section-content">
+ There are no high priority events to display at this time.
+ </p>
+ </div>
</div>
<!-- edit server name modal -->
<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog"
@@ -197,26 +195,32 @@
<div class="screen-reader-offscreen modal-description">Edit hostname</div>
<div class="page-header ">
<h2 class="modal-title">
- <icon class="icon__info" file="icon-information.svg"></icon>Edit hostname
+ <icon class="icon__info" file="icon-information.svg"></icon>Edit
+ hostname
</h2>
</div>
<div class="modal__content">
<form name="edit_hostname_text">
<label for="editServerName">Hostname</label>
- <p class="label__helper-text">Hostname must be less than 64 characters and must not contain spaces.</p>
+ <p class="label__helper-text">
+ Hostname must be less than 64 characters and must not contain spaces.
+ </p>
<input id="editServerName" class="modal__edit-server-name" type="text" ng-model="newHostname" ng-trim="false"
name="hostname" ng-pattern="/^\S{0,64}$/" required autofocus />
- <span class="modal__error" ng-show="edit_hostname_text.hostname.$error.pattern">Invalid format.
- Remove spaces.</span>
+ <span class="modal__error" ng-show="edit_hostname_text.hostname.$error.pattern">Invalid format. Remove
+ spaces.</span>
<span class="modal__char-count"
- ng-hide="edit_hostname_text.hostname.$error.pattern">{{0 + newHostname.length}}/64</span>
+ ng-hide="edit_hostname_text.hostname.$error.pattern">{{ 0 + newHostname.length }}/64</span>
</form>
</div>
<div class="modal__button-wrapper">
- <button class="btn btn-secondary"
- ng-click="edit_hostname= false; newHostname = dataService.hostname">Cancel</button>
+ <button class="btn btn-secondary" ng-click="edit_hostname= false; newHostname = dataService.hostname">
+ Cancel
+ </button>
<button class="btn btn-primary" ng-click="saveHostname(newHostname);" ng-disabled="edit_hostname_text.$invalid"
- ng-class="{'disabled' : edit_hostname_text.$invalid}">Save</button>
+ ng-class="{'disabled' : edit_hostname_text.$invalid}">
+ Save
+ </button>
</div>
</div>
</section>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index 627ecf5..241a622 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -1,41 +1,19 @@
-.row {
- width: 100%;
-}
-
-.overview__server-metadata {
- border-bottom: 1px solid $border-color-01;
- padding: 1.8em 0 0 0;
-}
-.overview__metadata-wrapper {
- overflow: hidden;
- margin: 0;
- padding: 0;
-}
-.overview__metadata-block {
- list-style-type: none;
- min-width: 47%;
- margin-bottom: 1em;
- margin-right: .7em;
- display: inline-block;
- white-space: normal;
- word-break: break-all;
- @include mediaQuery(small) {
- float: left;
- }
-}
.overview__event-log {
- padding-top: 2em;
.event__description {
color: $primary-dark;
text-decoration: none;
}
- .control-check {display: none;}
+
+ .control-check {
+ display: none;
+ }
.accord-trigger {
transform: rotate(0deg) translateY(-50%);
position: absolute;
top: 50%;
right: 0;
}
+
.event-log__event-info {
padding-left: 1.4em;
}
@@ -47,14 +25,10 @@
.modal__char-count,
.modal__error {
- font-size: .8em;
+ font-size: 0.8em;
color: $text-02;
}
.modal__error {
color: $status-error;
}
-
-dl {
- margin-bottom: 0;
-}
\ No newline at end of file