services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.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="ani">
  <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
    <ng-container matColumnDef="checkbox">
      <th mat-header-cell *matHeaderCellDef class="checkbox label-header">
        <div  class="empty-checkbox header-checkbox"
              *ngIf="allActiveNotebooks?.length>0"
              [ngClass]="{'checked': selected?.length === allActiveNotebooks?.length}"
              (click)="toggleSelectionAll();$event.stopPropagation()"
        >
          <span class="checked-checkbox" *ngIf="selected?.length === allActiveNotebooks?.length"></span>
        </div>
        <button mat-icon-button aria-label="More" class="ar checkbox-border" (click)="toggleFilterRow()">
          <i class="material-icons">
<!--            <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>-->
            <span>more_vert</span>
          </i>
        </button>
      </th>
      <td mat-cell *matCellDef="let element">
        <div
          *ngIf="element.type !== 'edge node' && (element.status==='running' || element.status==='stopped')"
           class="empty-checkbox"
           [ngClass]="{'checked': element.isSelected}"
           (click)="toggleActionForAll(element);$event.stopPropagation()"
        >
          <span class="checked-checkbox" *ngIf="element.isSelected"></span>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="user">
      <th mat-header-cell *matHeaderCellDef class="user label-header">
        <span class="label">User</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>
            <span [hidden]="filtering && filterForm.users.length > 0 && !collapsedFilterRow">more_vert</span>
          </i>
        </button> </th>
      <td
        mat-cell *matCellDef="let element"
        class="user-name"
        matTooltip="{{element.user}}"
        matTooltipPosition="above"
        [matTooltipDisabled]="element.user?.length<30"
      >
        <span >{{ element.user }}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="project">
      <th mat-header-cell *matHeaderCellDef class="project label-header">
        <span class="label">Project</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">filter_list</span>
            <span [hidden]="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">more_vert</span>
          </i>
        </button> </th>
      <td mat-cell *matCellDef="let element">{{ element.project }}</td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef class="type label-header">
        <span class="label">Name</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filtering && filterForm.type.length > 0 && !collapsedFilterRow">filter_list</span>
            <span [hidden]="filtering && filterForm.type.length > 0 && !collapsedFilterRow">more_vert</span>
          </i>
        </button> </th>
      <td type mat-cell *matCellDef="let element">
        <span
          *ngIf="element.name"
          [ngClass]="{'computation': element.exploratory_urls?.length}"
          (click)="openNotebookDetails(element)"
        >
          {{element.name}}
        </span>
        <span *ngIf="!element.name">{{element.type}}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="shape">
      <th mat-header-cell *matHeaderCellDef class="shape label-header">
        <span class="label">Shape / Resource id</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">filter_list</span>
            <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">more_vert</span>
          </i>
        </button> </th>
      <td mat-cell *matCellDef="let element" class="shape">{{ element.shape || element.ip }}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef class="status label-header">
        <span class="label">Status</span>

        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">filter_list</span>
            <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
          </i>
        </button> </th>
      <td mat-cell *matCellDef="let element" class="ani status label-header" >
        <span ngClass="{{element.status || ''}}">{{ element.status }}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="resources">
      <th mat-header-cell *matHeaderCellDef class="resources label-header">
        <span class="label">Computational resources</span>
        <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
          <i class="material-icons">
            <span *ngIf="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">filter_list</span>
            <span [hidden]="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">more_vert</span>
          </i>
        </button> </th>
      <td mat-cell *matCellDef="let element" class="ani resources">
        <div class="source" *ngIf="element.resources">
          <div *ngIf="!element.resources?.length">
            <span *ngIf="!element.resources.length" class="no-details">no details</span>
          </div>
          <div *ngIf="element.resources?.length">
            <div *ngFor="let resource of element.resources" class="resource-wrap">
              <div class="resource-name">
                <a class="detailed-link">
                  {{ resource.computational_name }}
                </a>
              </div>
              <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
              <div class="resource-actions">
                <a class="start-stop-action" *ngIf="resource.image === 'docker.dlab-dataengine'">
                  <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
                    [ngClass]="{'not-allowed' : resource.status !== 'running' }">pause_circle_outline</i>
                </a>

                <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
                  [ngClass]="{ 'disabled' : element.status !== 'running' || resource.status !== 'running' && resource.status !== 'stopped' }">
                  <i class="material-icons">highlight_off</i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef class="actions label-header">
        <span class="label"> Actions </span>
      </th>
      <td mat-cell *matCellDef="let element" class="settings actions-col">
        <span [ngClass]="{'not-allow' : selected?.length}">
          <span #settings class="actions" (click)="actions.toggle($event, settings)" *ngIf="element.type !== 'edge node'"
            [ngClass]="{
              'disabled' : isActiveResources(element),
              'disabled' : (element.status !== 'running' && element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'failed') || selected?.length}">

          </span>
        </span>
        <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
          <ul class="list-unstyled">
            <li
              matTooltip="{{ element.type !== 'edge node' ? 'Unable to stop notebook because at least one computational resource is in progress' : 'Unable to stop edge node because at least one resource of this user is in progress' }}"
              matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)"
              [hidden]="element.name === 'edge node' && element.status === 'stopped'">
              <div (click)="toggleResourceAction(element, 'stop')"
                [ngClass]="{'not-allowed' : element.status === 'stopped' || element.status === 'stopping' || element.status === 'starting' || element.status === 'creating image' || element.status === 'failed' || isResourcesInProgress(element)}">
                <i class="material-icons">pause_circle_outline</i>
                <span>Stop</span>
              </div>
            </li>
            <li *ngIf="element.name !== 'edge node'"
              matTooltip="Unable to terminate notebook because at least one computational resource is in progress"
              matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
              <div (click)="toggleResourceAction(element, 'terminate')"
                [ngClass]="{'not-allowed' : element.status !== 'running' && element.status !== 'stopped' || isResourcesInProgress(element)}">
                <i class="material-icons">phonelink_off</i>
                <span>Terminate</span>
              </div>
            </li>

            <div *ngIf="element.name === 'edge node' && element.status === 'stopped'">
              <li (click)="toggleResourceAction(element, 'run')">
                <i class="material-icons">play_circle_outline</i>
                <span>Start</span>
              </li>
            </div>
          </ul>
        </bubble-up>
      </td>
    </ng-container>


    <!-- FILTERING -->
    <ng-container matColumnDef="checkbox-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">

      </th>
    </ng-container>

    <ng-container matColumnDef="user-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
          [model]="filterForm.users"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="type-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <input placeholder="Filter by environment type" type="text" class="form-control filter-field"
          [value]="filterForm.type" (input)="filterForm.type = $event.target['value']"/>
      </th>
    </ng-container>
    <ng-container matColumnDef="project-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
          [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="shape-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'shapes'"
          [items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="status-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
          [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="resource-filter" sticky>
      <th mat-header-cell *matHeaderCellDef class="filter-row-item">
        <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
          [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
      </th>
    </ng-container>
    <ng-container matColumnDef="actions-filter" sticky>
      <th mat-header-cell *matHeaderCellDef  class="actions-col filter-row-item">
        <div class="actions">
          <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()">
            <i class="material-icons">close</i>
          </button>

          <button mat-icon-button class="btn apply" (click)="applyFilter(filterForm)"
            [disabled]="allFilteredEnvironmentData?.length == 0 && !filtering">
            <i class="material-icons"
              [ngClass]="{'not-allowed': allFilteredEnvironmentData?.length == 0 && !filtering}">done</i>
          </button>
        </div>
      </th>
    </ng-container>


    <ng-container matColumnDef="placeholder">
      <td mat-footer-cell *matFooterCellDef colspan="6" class="info">
        <span
          *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering">
          To start working, please, create new environment</span>
        <span *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering">No matches found</span>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
    <tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
      class="filter-row"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>


    <tr [hidden]="allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
  </table>

</div>