<!--
  ~ 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.
  -->
<nz-tabs [nzTabBarGutter]="16" [nzSize]="'small'">
  <nz-tab nzTitle="Subtask Metrics">
    <nz-table
      nzSize="small"
      [nzLoading]="isLoading"
      [nzData]="listOfTask"
      [nzScroll]="{ x: '2210px', y: 'calc(100% - 36px)' }"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzVirtualItemSize]="36"
      [nzVirtualMinBufferPx]="720"
      [nzVirtualMaxBufferPx]="720"
      [nzVirtualForTrackBy]="trackBySubtask"
    >
      <thead>
        <tr>
          <th nzWidth="120px" nzLeft>ID</th>
          <th [nzSortFn]="sortReadBytesFn" (nzSortOrderChange)="collapseAll()" nzWidth="140px">
            Bytes Received
          </th>
          <th [nzSortFn]="sortReadRecordsFn" (nzSortOrderChange)="collapseAll()" nzWidth="150px">
            Records Received
          </th>
          <th [nzSortFn]="sortWriteBytesFn" (nzSortOrderChange)="collapseAll()" nzWidth="120px">
            Bytes Sent
          </th>
          <th [nzSortFn]="sortWriteRecordsFn" (nzSortOrderChange)="collapseAll()" nzWidth="120px">
            Records Sent
          </th>
          <th [nzSortFn]="sortAttemptFn" (nzSortOrderChange)="collapseAll()" nzWidth="100px">
            Attempt
          </th>
          <th [nzSortFn]="sortEndpointFn" (nzSortOrderChange)="collapseAll()" nzWidth="200px">
            Endpoint
          </th>
          <th [nzSortFn]="sortStartTimeFn" (nzSortOrderChange)="collapseAll()" nzWidth="150px">
            Start Time
          </th>
          <th [nzSortFn]="sortDurationFn" (nzSortOrderChange)="collapseAll()" nzWidth="150px">
            Duration
          </th>
          <th [nzSortFn]="sortEndTimeFn" (nzSortOrderChange)="collapseAll()" nzWidth="150px">
            End Time
          </th>
          <th nzWidth="320px">Accumulated Time (Backpressured/Idle/Busy)</th>
          <th nzWidth="320px">Status Durations</th>
          <th [nzSortFn]="sortStatusFn" (nzSortOrderChange)="collapseAll()" nzWidth="120px" nzRight>
            Status
          </th>
          <th nzWidth="50px" nzRight>More</th>
        </tr>
      </thead>
      <tbody>
        <ng-template nz-virtual-scroll let-data>
          <ng-container *ngIf="narrowType(data) as subtask">
            <tr>
              <td
                nzLeft
                [nzShowExpand]="subtask['other-concurrent-attempts']?.length > 0"
                [nzExpand]="expandSet.has(subtask['subtask'])"
                (nzExpandChange)="onExpandChange(subtask, $event)"
              >
                {{ subtask['subtask'] }}
              </td>
              <td>
                <span *ngIf="subtask['metrics']['read-bytes-complete']; else loadingTemplate">
                  {{ subtask['metrics']['read-bytes'] | humanizeBytes }}
                </span>
              </td>
              <td>
                <span *ngIf="subtask['metrics']['read-records-complete']; else loadingTemplate">
                  {{ subtask['metrics']['read-records'] | number: '1.0-0' }}
                </span>
              </td>
              <td>
                <span *ngIf="subtask['metrics']['write-bytes-complete']; else loadingTemplate">
                  {{ subtask['metrics']['write-bytes'] | humanizeBytes }}
                </span>
              </td>
              <td>
                <span *ngIf="subtask['metrics']['write-records-complete']; else loadingTemplate">
                  {{ subtask['metrics']['write-records'] | number: '1.0-0' }}
                </span>
              </td>
              <td>{{ subtask.attempt + 1 }}</td>
              <td>{{ subtask.endpoint }}</td>
              <td>{{ subtask['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
              <td>{{ subtask.duration | humanizeDuration }}</td>
              <td>{{ subtask['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
              <td>
                {{ subtask['metrics']['accumulated-backpressured-time'] | humanizeDuration }}
                /
                {{ subtask['metrics']['accumulated-idle-time'] | humanizeDuration }}
                /
                {{ subtask['metrics']['accumulated-busy-time'] | humanizeDuration }}
              </td>
              <td>
                <ng-container *ngIf="!subtask['status-duration']; else badges">-</ng-container>
                <ng-template #badges>
                  <flink-dynamic-host
                    *ngFor="let duration of convertStatusDuration(subtask['status-duration'])"
                    [data]="duration"
                    [component]="durationBadgeComponent"
                  ></flink-dynamic-host>
                </ng-template>
              </td>
              <td nzRight>
                <flink-dynamic-host
                  [data]="{ state: subtask['status'] }"
                  [component]="stateBadgeComponent"
                ></flink-dynamic-host>
              </td>
              <td nzRight>
                <flink-dynamic-host
                  [data]="{ subtask }"
                  [component]="actionComponent"
                ></flink-dynamic-host>
              </td>
            </tr>
            <ng-container *ngIf="expandSet.has(subtask['subtask'])">
              <ng-container
                *ngFor="
                  let attempt of subtask['other-concurrent-attempts'];
                  trackBy: trackBySubtaskAttempt
                "
              >
                <tr>
                  <td nzLeft [nzIndentSize]="8">{{ subtask['subtask'] }}</td>
                  <td>
                    <span *ngIf="attempt['metrics']['read-bytes-complete']; else loadingTemplate">
                      {{ attempt['metrics']['read-bytes'] | humanizeBytes }}
                    </span>
                  </td>
                  <td>
                    <span *ngIf="attempt['metrics']['read-records-complete']; else loadingTemplate">
                      {{ attempt['metrics']['read-records'] | number: '1.0-0' }}
                    </span>
                  </td>
                  <td>
                    <span *ngIf="attempt['metrics']['write-bytes-complete']; else loadingTemplate">
                      {{ attempt['metrics']['write-bytes'] | humanizeBytes }}
                    </span>
                  </td>
                  <td>
                    <span
                      *ngIf="attempt['metrics']['write-records-complete']; else loadingTemplate"
                    >
                      {{ attempt['metrics']['write-records'] | number: '1.0-0' }}
                    </span>
                  </td>
                  <td>{{ attempt.attempt + 1 }}</td>
                  <td>{{ attempt.endpoint }}</td>
                  <td>{{ attempt['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
                  <td>{{ attempt.duration | humanizeDuration }}</td>
                  <td>{{ attempt['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
                  <td>
                    {{ attempt['metrics']['accumulated-backpressured-time'] | humanizeDuration }}
                    /
                    {{ attempt['metrics']['accumulated-idle-time'] | humanizeDuration }}
                    /
                    {{ attempt['metrics']['accumulated-busy-time'] | humanizeDuration }}
                  </td>
                  <td>
                    <ng-container *ngIf="!attempt['status-duration']; else badges">-</ng-container>
                    <ng-template #badges>
                      <flink-dynamic-host
                        *ngFor="let duration of convertStatusDuration(attempt['status-duration'])"
                        [data]="duration"
                        [component]="durationBadgeComponent"
                      ></flink-dynamic-host>
                    </ng-template>
                  </td>
                  <td nzRight>
                    <flink-dynamic-host
                      [data]="{ state: attempt['status'] }"
                      [component]="stateBadgeComponent"
                    ></flink-dynamic-host>
                  </td>
                  <td nzRight></td>
                </tr>
              </ng-container>
            </ng-container>
          </ng-container>
        </ng-template>
      </tbody>
    </nz-table>
  </nz-tab>
  <nz-tab nzTitle="Aggregated Metrics">
    <flink-table-aggregated-metrics
      [isLoading]="isLoading"
      [aggregated]="aggregated"
    ></flink-table-aggregated-metrics>
  </nz-tab>
</nz-tabs>

<ng-template #loadingTemplate>
  <span class="text-secondary">loading...</span>
</ng-template>
