diff options
Diffstat (limited to 'app/overview/controllers/system-overview-controller.html')
| -rw-r--r-- | app/overview/controllers/system-overview-controller.html | 326 |
1 files changed, 165 insertions, 161 deletions
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="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"> - <div class="column large-12 small-12 small-offset-1"> - <p class="inline event__description">{{getEventLogTitle(event)}}</p> - </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-11 small-offset-1"> + <p class="inline event__timestamp"> + {{ event.Timestamp | localeDate }} + </p> </div> </div> - <div class="column small-2 large-1"> - <span class="accord-trigger" aria-hidden="true"></span> + + <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> - </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> </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> |
