Added server overview page.
Change-Id: Ic6a39c66a4a7573e74093395f6add9a76c5177fb
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 b555622..895ec5f 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -1,4 +1,178 @@
-<div class="row column">
- <h1>Server overview</h1>
- <p>Server overview will be here.</p>
+<div class="overview">
+ <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 -->
+ <div class="row overview__server-metadata">
+ <div class="column large-4">
+ <h3 class="bold h4">Server information</h3>
+ </div>
+ <div class="column large-8">
+ <ul class="overview__metadata-wrapper">
+ <li class="overview__metadata-block">
+ <p class="content-label">Model</p>
+ <p class="courier-bold">5150-A0A</p>
+ </li>
+ <li class="overview__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </li>
+ <li class="overview__metadata-block">
+ <p class="content-label">Firmware version</p>
+ <p class="courier-bold">2.3.104497</p>
+ </li>
+ <li class="overview__metadata-block">
+ <p class="content-label">Serial number</p>
+ <p class="courier-bold">123456abcd</p>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- BMC Metadata -->
+ <div class="row overview__server-metadata">
+ <div class="column large-4">
+ <h3 class="bold h4">BMC information</h3>
+ </div>
+ <div class="column large-8">
+ <ul class="overview__metadata-wrapper">
+ <li class="overview__metadata-block">
+ <p class="content-label">BMC IP address</p>
+ <p class="courier-bold">9.3.111.222</p>
+ </li>
+ <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">Mac address</p>
+ <p class="courier-bold">70:E2:84:14:05:2F</p>
+ </li>
+ <li class="overview__metadata-block">
+ <p class="content-label">Firmware</p>
+ <p class="courier-bold">4.3.104497</p>
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ <!-- Power metadata -->
+ <div class="row overview__server-metadata">
+ <div class="column large-4">
+ <h3 class="bold h4">Power information</h3>
+ </div>
+ <div class="column large-8">
+ <ul class="overview__metadata-wrapper">
+ <li class="overview__metadata-block">
+ <p class="content-label">Power Consumption</p>
+ <p class="courier-bold">000 W</p>
+ </li>
+ <li class="overview__metadata-block">
+ <p class="content-label">Power Cap</p>
+ <p class="courier-bold">000 W</p>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <!-- Power metadata -->
+ <div class="row column overview__event-log event-log__events" >
+ <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 -->
+
+ <!-- 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"> <!-- this should go to specific event in event log page -->
+ <div class="row column event-log__single-event">
+ <div class="row">
+ <div class="column small-1 large-1 event-log__col-check">
+ <label class="control-check">
+ <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
+ ng-checked="event.selected"/>
+ <span class="control__indicator"></span>
+ </label>
+ </div>
+ <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">#00995</p>
+ <p class="inline event__priority high-priority">High</p>
+ <p class="inline event__severity">emergency</p>
+ <p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p>
+ <div>
+ <p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id dui</p>
+ </div>
+ </div>
+ <div class="column small-1 large-1">
+ <button class="accord-trigger"></button>
+ </div>
+ </div>
+ </div>
+ </a>
+ <!-- single event -->
+ <a href="#/server-health/event-log"><!-- this should go to specific event in event log page -->
+ <div class="row column event-log__single-event">
+ <div class="row">
+ <div class="column small-1 large-1 event-log__col-check">
+ <label class="control-check">
+ <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
+ ng-checked="event.selected"/>
+ <span class="control__indicator"></span>
+ </label>
+ </div>
+ <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">#00991</p>
+ <p class="inline event__priority high-priority">High</p>
+ <p class="inline event__severity">emergency</p>
+ <p class="inline event__timestamp">02/09/2017 21:00:26 EDT</p>
+ <div>
+ <p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id dui Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
+ </div>
+ </div>
+ <div class="column small-1 large-1">
+ <button class="accord-trigger"></button>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+ <div class="column large-4">
+ <div class="quick-links" >
+ <a href="" class="quick-links__item quick-links__events event-log__events" >
+ <span class="event__priority high-priority">High</span><p class="inline quick-links__event-copy">3 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>
+ </div>
+ <div class="quick-links__item no-icon">
+ <p class="inline quick-links__label">Turn on server indicator</p>
+ <div class="toggle inline float-right">
+ <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 indicator is <span class="uid-switch__status">{{dataService.LED_state}}</span></label>
+ </div>
+ </div>
+ <a href="" class="no-icon quick-links__item">
+ <p class="inline quick-links__label">Launch Serial Over Lan</p>
+ <span class="btn-pop-out inline float-right"></span>
+ </a>
+ <a href="" class="quick-links__item">
+ <p class="inline quick-links__label">Edit network settings</p>
+ </a>
+ </div>
+ </div>
+ </section>
</div>
\ No newline at end of file
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index e69de29..ac61aff 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -0,0 +1,38 @@
+.overview__server-metadata {
+ border-bottom: 1px solid $medgrey;
+ padding: 1.8em 0 0 0;
+}
+.overview__metadata-wrapper {
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+}
+.overview__metadata-block {
+ list-style-type: none;
+ min-width: 45%;
+ margin-bottom: 1em;
+ display: inline-block;
+ white-space: normal;
+ word-break: break-all;
+ @include mediaQuery(small) {
+ float: left;
+ }
+ @include mediaQuery(medium) {
+ margin-left: 1em;
+ }
+}
+.overview__event-log {
+ padding-top: 2em;
+ a {color: $black; text-decoration: none;}
+ .control-check {display: none;}
+ .accord-trigger {
+ transform: rotate(0deg) translateY(-50%);
+ position: absolute;
+ top: 50%;
+ right: 0;
+ }
+ .event-log__event-info {
+ width: 90%;
+ padding-left: 1.4em;
+ }
+}