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/assets/icons/icon-chevron-right.svg b/app/assets/icons/icon-chevron-right.svg
new file mode 100644
index 0000000..7c48325
--- /dev/null
+++ b/app/assets/icons/icon-chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
\ No newline at end of file
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>
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 87ad432..dc1c9d8 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -11,9 +11,9 @@
opacity: 0;
}
-.modal-overlay.active{
+.modal-overlay.active {
z-index: 100;
- opacity: .5;
+ opacity: 0.5;
display: block;
@include fastTransition-all;
}
@@ -23,12 +23,12 @@
height: auto;
left: 50%;
top: 50%;
- transform: translate(-50%,-50%);
+ transform: translate(-50%, -50%);
max-width: 850px;
min-width: 450px;
- padding: .8em 1.5em;
+ padding: 0.8em 1.5em;
border: thin $primary-dark solid;
- background-color :$background-01;
+ background-color: $background-01;
z-index: 101;
position: fixed;
overflow: hidden;
@@ -38,13 +38,13 @@
}
}
-.modal.active{
+.modal.active {
@include fastTransition-all;
display: block;
}
.modal .page-header {
- padding-bottom: .7em;
+ padding-bottom: 0.7em;
}
.screen-reader-offscreen {
@@ -61,20 +61,21 @@
}
.modal__link {
display: block;
- margin: .8em 0 1em;
+ margin: 0.8em 0 1em;
@include mediaQuery(medium) {
display: inline-block;
- margin: .6em 0;
+ margin: 0.6em 0;
}
}
+// TODO: Use the form__actions pattern / selector
.modal__button-wrapper {
float: right;
button {
- margin-bottom: .8em;
- margin-right: .8em;
+ margin-bottom: 0.8em;
+ margin-right: 0.8em;
display: inline-block;
@include mediaQuery(medium) {
- margin-left: .8em;
+ margin-left: 0.8em;
margin-right: 0;
}
}
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index c1bff93..e6f49a3 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -1,21 +1,26 @@
//Quick links block
.quick-links {
background-color: $background-02;
- padding: .5em 1em;
- font-size: .9em;
+ padding: 0.5em 1em;
+ font-size: 0.9em;
font-weight: 400;
margin: 1em 0;
@include mediaQuery(medium) {
margin: 0 0 0 1em;
}
+
a {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
color: $primary-dark;
text-decoration: none;
- display: block;
}
+
p {
margin-bottom: 0;
}
+
.event-log__events {
margin-top: 0;
}
@@ -25,21 +30,16 @@
padding: 1em 0 1em 0;
border-bottom: 1px solid $border-color-01;
position: relative;
- &:after {
- content: '\203A';
- position: absolute;
- top: 50%;
- right: 0;
- font-size: 3em;
- color: $text-02;
- transform: translateY(-50%);
- }
+
&.no-icon {
overflow: auto;
+
.bmc-time {
+ @include fontCourierBold;
text-align: right;
max-width: 17em;
float: right;
+
@include mediaQuery(medium) {
display: block;
text-align: left;
@@ -59,7 +59,7 @@
}
.float-right {
float: right;
- @media(min-width: 1024px) and (max-width: 1140px) {
+ @media (min-width: 1024px) and (max-width: 1140px) {
display: block;
float: none;
}
@@ -74,7 +74,7 @@
color: $status-error;
margin-bottom: 0;
font-weight: 700;
- font-size: .9em;
+ font-size: 0.9em;
a {
color: $status-error;
}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 8c8b916..f5d2757 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -38,12 +38,12 @@
@include label;
}
-// TODO: Remove and replace with page and page-title pattern
+// TODO: Remove and replace with section and section-title pattern
// Page header
.page-header {
width: 100%;
position: relative;
- border-bottom: 1px solid $border-color-02;
+ border-bottom: 1px solid $border-color-01;
margin: 0.5em 0 2.2em;
padding-left: 0;
}
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 3e0f0da..084fe71 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -136,43 +136,26 @@
}
}
- .header__server-power,
- .header__page-refresh,
- .header__server-health,
- .header__info,
- .header__multi-server {
- background: $background-02;
- @include round-corners;
- margin: 0 0.3em;
- height: 100%;
- border: 1px solid $border-color-01;
- opacity: 1;
+ .header__action {
@include fastTransition-all;
+ @include round-corners;
+ height: 100%;
+ background: $background-02;
+ border: 1px solid $border-color-01;
+ margin: 0 0.3em;
+ opacity: 1;
+
+ .icon svg {
+ width: 1rem;
+ }
+
&:hover {
background: $background-01;
}
}
- .header__multi-server {
- padding: 0.5em;
- padding-top: 0.8em;
- float: left;
- margin-top: 10px;
- margin-right: -10px;
- .icon-angle::before {
- margin-left: 0;
- transform: rotate(90deg);
- @include fastTransition-all;
- }
- &.active {
- .icon-angle::before {
- transform: rotate(266deg);
- @include fastTransition-all;
- }
- }
- }
.header__functions {
- .header__info {
+ .header__action--info {
padding: 0.3em;
min-width: 40px;
text-align: center;
@@ -183,25 +166,24 @@
font-weight: 400;
color: $text-02;
}
- .icon-angle {
- margin: 0.2em 0 0 0;
- }
- .icon-angle::before {
- font-size: 1.625em;
- font-weight: 400;
- margin-left: 0;
- display: block;
- transform: rotate(180deg);
+
+ .icon {
@include fastTransition-all;
+ margin: 0.2em 0 0 0;
+
+ svg {
+ width: 2.6rem;
+ height: auto;
+ }
}
+
@media (min-width: 1025px) {
display: none;
}
}
- &.active > .header__info > .icon-angle::before {
- transform: rotate(-360deg);
- @include fastTransition-all;
+ &.active > .header__action--info > .icon {
+ transform: rotate(-180deg);
}
.header__refresh {
@@ -213,7 +195,7 @@
}
}
}
- .header__page-refresh {
+ .header__action--refresh {
padding-top: 1em;
span {
font-size: 0.875em;
@@ -226,11 +208,12 @@
display: block;
margin-left: auto;
margin-right: auto;
- }
- svg {
- width: 25px;
- height: auto;
- fill: $primary-accent;
+
+ svg {
+ width: 1.6rem;
+ height: auto;
+ fill: $primary-accent;
+ }
}
}
}
diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss
index 9be7522..ac1e3a4 100644
--- a/app/common/styles/layout/list.scss
+++ b/app/common/styles/layout/list.scss
@@ -8,6 +8,8 @@
*/
.list-pair {
+ margin-bottom: 0;
+
dt {
@include label;
}
@@ -15,4 +17,8 @@
@include fontCourierBold;
margin-bottom: 0;
}
+
+ + .list-pair {
+ margin-top: 1.5rem;
+ }
}
diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss
index e92b096..aeb7ff2 100644
--- a/app/common/styles/layout/section.scss
+++ b/app/common/styles/layout/section.scss
@@ -1,28 +1,41 @@
/**
* Used for section layout. This should be used for the page container
* Mark up
- <div class="section">
- <h2 class="section-title">Section Title</h2>
+ <section class="section">
+ <div class="section-header">
+ <h2 class="section-title">Section Title</h2>
+ ... any element added here will be right aligned
+ </div>
<div class="section-content">
...
</div>
<div class="section-content">
...
</div>
- </div>
+ </section>
*/
.section {
margin-bottom: 3rem;
}
-.section-title {
+.section-header {
+ display: flex;
+ justify-content: space-between;
border-bottom: 1px solid $border-color-01;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
+.section-title {
+ margin-bottom: 0;
+}
+
.section-content {
- margin-bottom: 1.5rem;
margin-top: 0;
+ margin-bottom: 0;
+
+ + .section-content {
+ margin-top: 1.5rem;
+ }
}
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
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index b0760e0..1a2a4b5 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -3,16 +3,20 @@
<h1 class="page-title">Manage Power Usage</h1>
<form class="power-usage__form" role="form" action="">
<section class="section">
- <h2 class="section-title">Power information</h2>
+ <div class="section-header">
+ <h2 class="section-title">Power information</h2>
+ </div>
<dl class="list-pair">
<dt>Power Consumption</dt>
<dd>{{ power_consumption }}</dd>
</dl>
</section>
<section class="section">
- <h2 class="section-title">
- Server power cap setting
- </h2>
+ <div class="section-header">
+ <h2 class="section-title">
+ Server power cap setting
+ </h2>
+ </div>
<div class="section-content">
<p>
Set a power cap to keep power consumption at or below the specified
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 3b164bd..3921c20 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -30,7 +30,7 @@
<log-search-control></log-search-control>
<!-- filters -->
<log-filter></log-filter>
- <section id="event-log__events" class="row column">
+ <section class="row column event-log__events">
<div id="event__actions-bar" class="row header__actions-bar no-margin">
<div class="column small-1 large-1 event-log__col-check">
<label class="control-check">
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 7b82549..60bbba9 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -10,13 +10,12 @@
// Event Log SCSS
#event-log {
-
.row {
width: 100%;
}
// Dropwdowns filter
.dropdown__date.row {
- padding: .5em;
+ padding: 0.5em;
}
//Timezone select
@@ -25,7 +24,7 @@
position: relative;
text-transform: uppercase;
color: $primary-accent;
- font-size: .9em;
+ font-size: 0.9em;
font-weight: 700;
border: 0;
}
@@ -42,7 +41,7 @@
color: $text-02;
text-transform: uppercase;
font-weight: 700;
- font-size: .75em;
+ font-size: 0.75em;
margin-bottom: 3px;
}
.event__severity-filter {
@@ -60,7 +59,7 @@
.event__date-filter {
margin-right: 1.5em;
color: $text-02;
- float:left;
+ float: left;
input {
width: 170px;
}
@@ -70,7 +69,7 @@
}
}
.event__status-filter {
- float:left;
+ float: left;
@include mediaQuery(medium) {
width: 25%;
}
@@ -84,8 +83,8 @@
.event-log__filters {
position: relative;
- padding-bottom: .5em;
- padding-top: .5em;
+ padding-bottom: 0.5em;
+ padding-top: 0.5em;
@media (min-width: 1333px) {
float: right;
@@ -94,7 +93,7 @@
}
.empty__logs {
border: 1px solid $border-color-02;
- margin-top: .5em;
+ margin-top: 0.5em;
text-align: center;
padding: 2em;
}
@@ -102,13 +101,11 @@
.accord-trigger {
position: absolute;
right: 1em;
- top: .3em;
+ top: 0.3em;
}
-#event-log__events,
.event-log__events {
display: block;
- margin-top: 1.6em;
position: relative;
overflow: hidden;
.header__actions-bar {
@@ -130,16 +127,16 @@
height: auto;
margin-left: 0;
left: 0;
- padding: 1em 2em 1em 2em
+ padding: 1em 2em 1em 2em;
}
.inline__confirm-message {
margin-top: 5px;
margin-bottom: -10px;
}
.inline__confirm-buttons .btn-primary {
- padding: .5em 2em;
+ padding: 0.5em 2em;
min-height: 25px;
- margin-top: .5em;
+ margin-top: 0.5em;
@include mediaQuery(medium) {
margin-top: 0;
}
@@ -152,15 +149,15 @@
span {
display: inline-block;
font-weight: 700;
- margin-right: .3em;
+ margin-right: 0.3em;
}
}
// Single event log card
.event-log__single-event {
border: 1px solid $border-color-01;
- padding: 1em 1em 1em .7em;
- margin: .5em 0 .5em 0;
+ padding: 1em 1em 1em 0.7em;
+ margin: 0.5em 0 0.5em 0;
position: relative;
overflow: hidden;
@include fastTransition-all;
@@ -178,7 +175,7 @@
//Event priorities
.event__priority {
color: $primary-light;
- font-size: .8em;
+ font-size: 0.8em;
text-transform: uppercase;
padding: 2px 2em;
font-weight: 700;
@@ -209,7 +206,7 @@
//Event Severity
.event__severity {
- font-size: .7em;
+ font-size: 0.7em;
text-transform: uppercase;
font-weight: 700;
min-width: 103px;
@@ -230,7 +227,7 @@
//Event ID
.event__id {
@include fontCourierBold;
- font-size: .9em;
+ font-size: 0.9em;
color: $text-02;
margin-right: 1em;
}
@@ -238,7 +235,7 @@
.event__timestamp {
text-align: left;
@include fontCourierBold;
- font-size: .9em;
+ font-size: 0.9em;
color: $text-02;
max-width: 18em;
@include mediaQuery(medium) {
@@ -267,7 +264,7 @@
height: 200px;
overflow-y: scroll;
border: 1px solid $border-color-01;
- padding: .5em .5em 0;
+ padding: 0.5em 0.5em 0;
background: $primary-light;
display: block;
margin-bottom: 1.5em;
@@ -277,7 +274,7 @@
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0, 0, 0, 0.5);
}
}
@@ -288,19 +285,19 @@
.event__related-label {
font-weight: 700;
margin-right: 1.2em;
- padding-top: .3em;
+ padding-top: 0.3em;
float: left;
}
.event__related-item {
margin-right: 1em;
- padding-top: .3em;
+ padding-top: 0.3em;
display: inline-block;
float: left;
clear: both;
}
.event__actions {
margin-left: -1em;
- margin-top: .5em;
+ margin-top: 0.5em;
@include mediaQuery(medium) {
float: right;
margin-top: -5px;
@@ -315,7 +312,8 @@
}
}
-/*p*/.event__description {
+/*p*/
+.event__description {
margin-bottom: 0;
line-height: 1.7;
font-weight: 400;
