xref: /openbmc/phosphor-webui/app/common/directives/app-header.html (revision 30d7c637)

<header id="header" class="header">
  <!-- HEADER -->
  <div class="header__info-section">
    <span class="header__title">OpenBMC</span>
    <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="inline header__server-name">
      <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__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__action header__action--refresh"
        ng-click="refresh()"
        aria-label="refresh page data"
      >
        <span>Refresh</span>
        <icon file="icon-restart.svg"></icon>
      </button>
    </div>
  </div>
</header>