zeppelin-web-angular/src/app/share/header/header.component.html

<!--
~ Licensed 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="header">
  <div class="brand">
    <a routerLink="/">
      <div class="logo"></div>
      <div class="title">Zeppelin</div>
    </a>
  </div>
  <div class="nav">
    <ul nz-menu [nzMode]="'horizontal'">
      <li nz-menu-item [class.ant-menu-item-selected]="noteListVisible">
        <a
          nz-dropdown
          class="node-list-trigger"
          [nzDropdownMenu]="list"
          [nzTrigger]="'click'"
          nzOverlayClassName="zeppelin-notebook-dropdown"
          [(nzVisible)]="noteListVisible"
        >
          Notebook
          <i class="small-icon" nz-icon nzType="caret-down"></i>
        </a>
        <nz-dropdown-menu #list="nzDropdownMenu">
          @if (noteListVisible) {
            <zeppelin-node-list [headerMode]="true" class="ant-dropdown-menu padding-sm"></zeppelin-node-list>
          }
        </nz-dropdown-menu>
      </li>
      <li nz-menu-item routerLinkActive="ant-menu-item-selected">
        <a [routerLink]="['/jobmanager']">Job</a>
      </li>
    </ul>
  </div>
  @if (ticketService.ticket.init) {
    <div class="user">
      <a
        nz-dropdown
        class="status"
        [nzTrigger]="'click'"
        [nzDropdownMenu]="menu"
        nzOverlayClassName="zeppelin-user-menu"
      >
        <nz-badge [nzStatus]="connectStatus" [nzText]="ticketService.ticket.screenUsername"></nz-badge>
        <i class="small-icon" nz-icon nzType="caret-down"></i>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="about()">About Zeppelin</li>
          <li nz-menu-divider></li>
          <li nz-menu-item nzMatchRouter>
            <a [routerLink]="['/interpreter']">Interpreter</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a [routerLink]="['/notebook-repos']">Notebook Repos</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a [routerLink]="['/credential']">Credential</a>
          </li>
          <!--        <li nz-menu-item nzMatchRouter>-->
          <!--          <a [routerLink]="['/helium']">Helium</a>-->
          <!--        </li>-->
          <li nz-menu-item nzMatchRouter>
            <a [routerLink]="['/configuration']">Configuration</a>
          </li>
          @if (ticketService.ticket.principal !== 'anonymous') {
            <li nz-menu-divider></li>
            <li nz-menu-item (click)="logout()">Logout</li>
          }
          <li nz-menu-divider></li>
          <li nz-menu-item><a [href]="classicUiHref">Switch to Classic UI</a></li>
        </ul>
      </nz-dropdown-menu>
    </div>
  }
  <div class="search">
    <nz-input-group [nzPrefixIcon]="'search'">
      <input
        type="text"
        nz-input
        placeholder="Search"
        list="search-history"
        (keyup.enter)="onSearch()"
        [(ngModel)]="queryStr"
      />
    </nz-input-group>
    <datalist id="search-history">
      @for (item of searchHistory; track item) {
        <option [value]="item"></option>
      }
    </datalist>
  </div>
  <zeppelin-theme-toggle class="theme-toggle"></zeppelin-theme-toggle>
</div>