volume-details-page.component.html

<div class="lib-content-wrapper details-page">
  <lib-title-actions-toolbar
    title="Volume details"
    i18n-title
    [buttons]="buttonsConfig"
    [backButton]="true"
    (back)="navigateBack()"
  >
  </lib-title-actions-toolbar>

  <div class="details-page-outer">
    <lib-loading-spinner *ngIf="!pvcInfoLoaded"></lib-loading-spinner>

    <ng-container *ngIf="pvcInfoLoaded">
      <div class="details-page-inner">
        <div class="details-page-inner-2">
          <lib-status-icon
            class="small-padding-right"
            [phase]="status"
          ></lib-status-icon>

          <div class="mat-headline-6 volume-name">{{ name }}</div>
        </div>
      </div>
      <mat-tab-group
        dynamicHeight
        animationDuration="0ms"
        (selectedTabChange)="onTabChange($event)"
        [selectedIndex]="selectedTab.index"
      >
        <mat-tab label="OVERVIEW" i18n-label>
          <app-overview
            [pvc]="pvc"
            [notebooksURLs]="notebooksURLs"
          ></app-overview>
        </mat-tab>

        <mat-tab label="EVENTS" i18n-label>
          <ng-template matTabContent>
            <app-events [pvc]="pvc"></app-events>
          </ng-template>
        </mat-tab>

        <mat-tab label="YAML" i18n-label>
          <ng-template matTabContent>
            <app-yaml [pvcInfoLoaded]="pvcInfoLoaded" [pvc]="pvc"></app-yaml>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
    </ng-container>
  </div>
</div>