misc system overview changes
- removed page header
- rearranged server/bmc section content blocks to match designs
- added view all event logs link
- added priority color to severity label for events
Change-Id: If7ac335033a6b5032d52aa325953c823d6d6f35c
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index c188da7..c16e12d 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -2,10 +2,6 @@
<div class="row column">
<h1>Server overview</h1> <!-- this is default name. Will show custom server name if set -->
</div>
- <section class="row column">
- <div class="page-header"></div>
- </section>
-
<section class="row">
<div class="column large-8">
<!-- Server Metadata -->
@@ -42,22 +38,21 @@
<div class="column large-8">
<ul class="overview__metadata-wrapper">
<li class="overview__metadata-block">
+ <p class="content-label">Hostname</p>
+ <p class="courier-bold overview__hostname">bmc401.aus.stg1.global</p>
+ </li>
+ <li class="overview__metadata-block">
<p class="content-label">BMC IP address</p>
<p class="courier-bold">{{dataService.server_id}}</p>
</li>
<li class="overview__metadata-block">
- <p class="content-label">Hostname</p>
- <p class="courier-bold overview__hostname">bmc401.aus.stg1.global</p>
+ <p class="content-label">Firmware Version</p>
+ <p class="courier-bold">{{bmc_firmware}}</p>
</li>
<li class="overview__metadata-block">
<p class="content-label">Mac address</p>
<p class="courier-bold">{{mac_address}}</p>
</li>
- <li class="overview__metadata-block">
- <p class="content-label">Firmware</p>
- <p class="courier-bold">{{bmc_firmware}}</p>
- </li>
-
</ul>
</div>
</div>
@@ -79,18 +74,17 @@
</ul>
</div>
</div>
-
<!-- Power metadata -->
<div class="row column overview__event-log event-log__events" ng-show="logs.length">
- <h3 class="bold h4">High priority events</h3>
-
- <!-- TODO: I built event log section so that you could easily just pull in our existing event log template. All display tweaks (such as hiding checkbox) are done via SCSS -->
-
+ <div class="page-header">
+ <h3 class="bold h4 inline">High priority events</h3>
+ <a href="#/server-health/event-log" class="inline float-right">View all event logs</a>
+ </div>
<!-- show when there are no critical events from event log -->
<!-- <p class="disabled">No high priority events</p> -->
<!-- single event -->
- <a href="#/server-health/event-log" ng-repeat="event in logs|orderBy:'+Id'"> <!-- this should go to specific event in event log page -->
+ <a href="#/server-health/event-log" ng-repeat="event in logs|orderBy:'+Id'">
<div class="row column event-log__single-event">
<div class="row">
<div class="column small-1 large-1 event-log__col-check">
@@ -103,7 +97,7 @@
<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
<p class="inline event__id">#{{event.Id}}</p>
<p class="inline event__priority high-priority">High</p>
- <p class="inline event__severity">{{event.severity_code}}</p>
+ <p class="inline event__severity high-priority">{{event.severity_code}}</p>
<p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy HH:mm:ss '+tmz: tmz}}</p>
<div>
<p class="inline event__description">{{event.Severity}}</p>
@@ -122,14 +116,14 @@
<p>There are no high priority events to display at this time.</p>
</div>
</div>
- <div class="column large-4">
- <div class="quick-links" >
+ <div class="column large-4 no-padding">
+ <div class="quick-links">
<a href="#/server-health/event-log" class="quick-links__item quick-links__events event-log__events" ng-show="logs.length">
- <span class="event__priority high-priority">High</span><p class="inline quick-links__event-copy">{{logs.length}} High priority events</p><!-- link to event log filtered to the high priority events -->
+ <p class="inline quick-links__event-copy">{{logs.length}} High priority events</p><!-- link to event log filtered to the high priority events -->
</a>
<div class="quick-links__item no-icon">
<p class="inline quick-links__label">BMC time</p>
- <p class="inline float-right courier-bold">3:20:12 5/22/2017 UTC</p>
+ <p class="inline courier-bold float-right">3:20:12 5/22/2017 UTC</p>
</div>
<div class="quick-links__item no-icon">
<p class="inline quick-links__label">Turn on server indicator</p>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index ac61aff..ad0ef29 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -9,8 +9,9 @@
}
.overview__metadata-block {
list-style-type: none;
- min-width: 45%;
+ min-width: 47%;
margin-bottom: 1em;
+ margin-right: .7em;
display: inline-block;
white-space: normal;
word-break: break-all;
@@ -18,12 +19,12 @@
float: left;
}
@include mediaQuery(medium) {
- margin-left: 1em;
+ margin-left: .8em;
}
}
.overview__event-log {
padding-top: 2em;
- a {color: $black; text-decoration: none;}
+ .event__description {color: $black; text-decoration: none;}
.control-check {display: none;}
.accord-trigger {
transform: rotate(0deg) translateY(-50%);
@@ -35,4 +36,7 @@
width: 90%;
padding-left: 1.4em;
}
+ .event-log__single-event .event__description {
+ margin-left: 2.3em;
+ }
}