app/overview/controllers/system-overview-controller.html

<loader loading="loading"></loader>
<div class="overview">
  <div class="row column">
    <h1 class="inline">{{dataService.hostname}}</h1>
    <button class="link" 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>
        <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>
      </div>
      <!-- BMC Metadata -->
      <div class="row overview__server-metadata">
        <div class="column large-4">
          <h2 class="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>
      </div>
      <!-- Power metadata -->
      <div class="row overview__server-metadata">
        <div class="column large-4">
          <h2 class="h3">Power information</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>
      </div>
      <!-- Power metadata -->
    </div>
    <div class="column large-4 no-padding">
      <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>
        </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>
        </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>
          <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 LED is <span
                class="led-switch__status">{{dataService.LED_state}}</span></label>
          </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>
          <span class="btn-pop-out inline float-right"></span>
        </a>
        <a href="#/configuration/network" class="quick-links__item">
          <p class="inline quick-links__label">Edit network settings</p>
        </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>

      <!-- 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">
              <button class="accord-trigger" aria-hidden="true"></button>
            </div>
          </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>
    </div>
  </section>
</div>
<!-- edit server name modal -->
<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog"
  ng-class="{'active': edit_hostname}">
  <div class="modal__upload" role="document">
    <!-- accessibility only; used for screen readers -->
    <div class="screen-reader-offscreen modal-description">Edit hostname</div>
    <div class="page-header ">
      <h2 class="modal-title"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <path d="M18 14h-6v2h1v6h-2v2h8v-2h-2z" />
            <circle cx="16" cy="10" r="2" />
            <path
              d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z" />
          </svg></span>
        Edit hostname
      </h2>
    </div>
    <div class="modal__content">

      <form name="edit_hostname_text">
        <label for="editServerName">Hostname</label>
        <p>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__char-count"
          ng-hide="edit_hostname_text.hostname.$error.pattern">{{0 + newHostname.length}}/64</span>
      </form>
    </div>
    <div class="modal__button-wrapper">
      <button class="inline btn-secondary"
        ng-click="edit_hostname= false; newHostname = dataService.hostname">Cancel</button>
      <button class="inline btn-primary" ng-click="saveHostname(newHostname);" ng-disabled="edit_hostname_text.$invalid"
        ng-class="{'disabled' : edit_hostname_text.$invalid}">Save</button>
    </div>
  </div>
</section>
<div class="modal-overlay" tabindex="-1" ng-class="{'active': edit_hostname}"></div>