| <!-- |
| ~ 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') && !clustersInProgress(element.resources)" |
| 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">Compute</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> |
| {{ resource.computational_name }} |
| </a> |
| </div> |
| <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span> |
| <div class="resource-actions"> |
| <span class="not-allow"> |
| <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' || selected?.length }">pause_circle_outline</i> |
| </a> |
| </span> |
| <span class="not-allow"> |
| <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)" |
| [ngClass]="{ 'disabled' : element.status !== 'running' || (resource.status !== 'running' && resource.status !== 'stopped') || selected?.length }"> |
| <i class="material-icons">highlight_off</i> |
| </a> |
| </span> |
| </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 compute 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="8" class="info"> |
| <div |
| *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering"> |
| To start working, please, create new environment</div> |
| <div *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering">No matches found</div> |
| </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']" class="info"></tr> |
| </table> |
| |
| </div> |