<!--
 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
  [style.height]="dynamicHeight"
  style="overflow-y: auto">
  <nz-card
    class="section-title"
    [style.background]="backgroundColor">
    <h2
      class="page-title"
      [style.color]="textColor">
      Quota
    </h2>
  </nz-card>
  <div>
    <nz-tabs nzCentered>
      <nz-tab nzTitle="Quota Table">
        <div class="info-container">
          <div class="info-box">
            <h2 class="info-heading">Files Uploaded</h2>
            <p class="info-content">{{ this.createdFiles.length }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Datasets Uploaded</h2>
            <p class="info-content">{{ this.totalUploadedDatasetCount }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Total Size of Datasets</h2>
            <p class="info-content">{{ formatSize(this.totalUploadedDatasetSize) }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Workflows Created</h2>
            <p class="info-content">{{ this.createdWorkflows.length }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Files with Access</h2>
            <p class="info-content">{{ this.accessFiles.length }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Workflows with Access</h2>
            <p class="info-content">{{ this.accessWorkflows.length }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Total Size of the Files</h2>
            <p class="info-content">{{ formatSize(this.totalFileSize) }}</p>
          </div>
          <div class="info-box">
            <h2 class="info-heading">Total Result Cache Size</h2>
            <p class="info-content">{{ formatSize(this.totalQuotaSize) }}</p>
          </div>
        </div>
      </nz-tab>
      <nz-tab nzTitle="Result Cache">
        <nz-collapse>
          <nz-collapse-panel
            *ngFor="let workflow of workflows"
            [nzHeader]="workflow.workflowName">
            <nz-table
              #executionTable
              [nzData]="workflow.executions"
              [nzPageSize]="3"
              nzFrontPagination="true">
              <thead>
                <tr>
                  <th>Collection Name</th>
                  <th>Execution ID</th>
                  <th [nzSortFn]="sortBySize">Cache Size</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let execution of executionTable.data">
                  <td>{{ execution.workflowName }}</td>
                  <td>{{ execution.eid }}</td>
                  <td>{{ formatSize(execution.resultBytes + execution.logBytes + execution.runTimeStatsBytes) }}</td>
                  <td>
                    <button
                      nz-popconfirm
                      nzPopconfirmTitle="Confirm to delete selected workflows."
                      nz-button
                      nz-tooltip="delete collection"
                      (nzOnConfirm)="deleteCollection(execution.eid)"
                      type="button">
                      <i
                        nz-icon
                        nzTheme="outline"
                        nzType="delete"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </nz-collapse-panel>
        </nz-collapse>
      </nz-tab>
      <nz-tab
        nzTitle="Diagrams"
        nzForceRender="true">
        <div class="charts-grid">
          <div id="sizePieChart"></div>
          <div id="datasetLineChart"></div>
          <div id="workflowLineChart"></div>
        </div>
      </nz-tab>
    </nz-tabs>
  </div>
</div>
