services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div class="nav-bar" *ngIf="isLoggedIn">
  <div class="menu-area" *ngIf="healthStatus">

    <button class="hamburger" [matMenuTriggerFor]="menu">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </button>

    <nav role="navigation">
      <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <a class="nav-item" mat-menu-item [routerLink]="['/resources_list']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">List of Resources</a>
        <a class="nav-item" mat-menu-item [routerLink]="['/environment_management']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">Environment Management</a>
        <a *ngIf="healthStatus.billingEnabled" class="nav-item" mat-menu-item [routerLink]="['/billing_report']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">Billing Report</a>
      </mat-menu>
    </nav>
    <a [routerLink]="['/resources_list']" class="navbar-logo">
      <img src="assets/img/logo-nav.png" alt="">
    </a>
  </div>

  <div class="control-area" *ngIf="healthStatus">
    <a *ngIf="healthStatus.status" [routerLink]="['/environment_management']" class="statusbar">
      <span class="material-icons" ngClass="{{healthStatus.status || ''}}">radio_button_checked</span>
    </a>
    <!-- *ngIf="metadata" -->
    <a  class="statusbar" #info (click)="actions.toggle($event, info)">
      <span class="material-icons meta">info</span>
    </a>
    <bubble-up #actions class="list-menu" position="bottom-right">
      <div class="app-info">
          <p>
            <strong>Version: </strong>
            <span class="ellipsis">{{ metadata?.version }}</span>
          </p>
          <p>
            <strong>Branch: </strong>
            <span class="ellipsis">{{ metadata?.branch }}</span>
          </p>
          <p>
            <strong>Revision: </strong>
            <span class="ellipsis">{{ metadata?.commmit }}</span>
          </p>
          <p>
            <strong>Release notes: </strong>
            <span class="ellipsis">{{ metadata?.release_notes }}</span>
          </p>
      </div>
    </bubble-up>
    <button class="btn btn-logout" (click)="logout_btnClick()">Log out <span class="user-name">{{currentUserName}}</span></button>
  </div>
</div>

<key-upload-dialog #keyUploadModal
  (generateUserKey)="generateUserKey($event)"
  (checkInfrastructureCreationProgress)="checkCreationProgress($event)"
  [primaryUploading]="true"></key-upload-dialog>
<progress-dialog #preloaderModal></progress-dialog>