services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-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.
  -->

<table class="dashboard_table">
  <tr>
    <th *ngFor="let column of filteringColumns"
        ngClass="{{column.className || ''}}" [hidden]="column.name === 'cost' && !healthStatus?.billingEnabled">
      {{column.title}}
      <button mat-icon-button *ngIf="column.filtering" aria-label="More" class="ar" (click)="toggleFilterRow()">
        <i class="material-icons">
          <span *ngIf="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">filter_list</span>
          <span [hidden]="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">more_vert</span>
        </i>
      </button>
    </th>
  </tr>

  <tr *ngIf="filteredEnvironments && collapseFilterRow" class="filter-row">
    <td>
      <input placeholder="Filter by environment name" type="text" class="form-control filter-field" [value]="filterForm.name" (input)="filterForm.name = $event.target.value" />
    </td>
    <td>
      <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'" [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
    </td>
    <td>
      <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="DICTIONARY.cloud_provider === 'aws' ? 'shapes': 'sizes'" [items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
    </td>
    <td>
      <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'" [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
    </td>
    <td *ngIf="healthStatus?.billingEnabled"></td>
    <td>
      <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_btnClick(filterForm)" [disabled]="filteredEnvironments.length == 0 && !filtering">
          <i class="material-icons" [ngClass]="{'not-allowed': filteredEnvironments.length == 0 && !filtering}">done</i>
        </button>
      </div>
    </td>
  </tr>

  <tr *ngIf="(!filteredEnvironments) && !filtering || (filteredEnvironments.length == 0) && !filtering" class="message_block">
    <td [colSpan]="!healthStatus?.billingEnabled ? filteringColumns.length -1 : filteringColumns.length">To start working, please, create new environment</td>
  </tr>

  <tr *ngIf="(filteredEnvironments.length == 0) && filtering" class="message_block">
    <td [colSpan]="!healthStatus?.billingEnabled ? filteringColumns.length -1 : filteringColumns.length">No matches found</td>
  </tr>

  <tr *ngFor="let env of filteredEnvironments;" class="dashboard_table_body" [ngClass]="{'dropdown-outscreen': isOutscreenDropdown}">
    <td (click)="printDetailEnvironmentModal(env)">{{env.name}}</td>
    <td class="status" ngClass="{{env.status.toLowerCase() || ''}}">{{ env.status | underscoreless }}</td>
    <td>{{env.shape}}</td>
    <td>
      <computational-resources-list [resources]="env.resources" [environment]="env" [healthStatus]="healthStatus?.status" (buildGrid)="buildGrid($event)"></computational-resources-list>
    </td>
    <td *ngIf="healthStatus?.billingEnabled">
      <span class="total_cost">{{ env.cost || 'N/A' }} {{env.currency_code || ''}}</span>
      <span (click)="env.billing && printCostDetails(env)" class="currency_details" [ngClass]="{'not-allowed' : !env.billing}">
        <i class="material-icons">help_outline</i>
      </span>
    </td>
    <td class="settings">
      <span #settings (click)="actions.toggle($event, settings)" class="actions"
            [ngClass]="{'disabled': env.status.toLowerCase() == 'creating' || healthStatus?.status === 'error'}">
      </span>

      <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
        <ul class="list-unstyled">
          <div class="active-items" *ngIf="env.status.toLowerCase() !== 'failed'
                && env.status !== 'terminating'
                && env.status !== 'terminated'
                && env.status !== 'creating image'">
            <li *ngIf="env.status !== 'stopped' && env.status !== 'stopping' && env.status !== 'starting' && env.status !== 'creating image'"
                matTooltip="Unable to stop notebook because at least one computational resource is in progress"
                matTooltipPosition="above"
                [matTooltipDisabled]="!isResourcesInProgress(env)">
                <div (click)="exploratoryAction(env, 'stop')" [ngClass]="{'not-allowed': isResourcesInProgress(env) }">
                  <i class="material-icons">pause_circle_outline</i>
                  <span>Stop</span>
                </div>
            </li>
            <li *ngIf="env.status.toLowerCase() === 'stopped' || env.status.toLowerCase() === 'stopping'"
                matTooltip="Unable to run notebook until it will be stopped"
                matTooltipPosition="above"
                [matTooltipDisabled]="!isResourcesInProgress(env) && env.status.toLowerCase() !== 'stopping'">
              <div (click)="exploratoryAction(env, 'run')" [ngClass]="{'not-allowed': isResourcesInProgress(env) || env.status.toLowerCase() === 'stopping' }">
                <i class="material-icons">play_circle_outline</i>
                <span>Run</span>
              </div>
            </li>
            <li *ngIf="env.status.toLowerCase() === 'running' || env.status.toLowerCase() === 'stopped'"
                matTooltip="Unable to terminate notebook because at least one computational resource is in progress"
                matTooltipPosition="above"
                [matTooltipDisabled]="!isResourcesInProgress(env)">
              <div (click)="exploratoryAction(env, 'terminate')" [ngClass]="{'not-allowed': isResourcesInProgress(env) }">
                <i class="material-icons">phonelink_off</i>
                <span>Terminate</span>
              </div>
            </li>
            <li (click)="exploratoryAction(env, 'deploy')"
                *ngIf="env.status != 'stopping'
                && env.status !== 'stopped'
                && env.status !== 'starting'
                && env.status !== 'creating image'">
              <i class="material-icons">memory</i>
              <span>Add compute</span>
            </li>
            <li (click)="exploratoryAction(env, 'schedule')"
                *ngIf="env.status.toLowerCase() === 'running'
                || env.status.toLowerCase() === 'stopped'">
                <i class="material-icons">schedule</i>
              <span>Scheduler</span>
            </li>
          </div>
          <li (click)="exploratoryAction(env, 'ami')"
              *ngIf="env.status === 'running' && DICTIONARY.cloud_provider !== 'gcp'">
            <i class="material-icons">view_module</i>
            <span>Create {{ DICTIONARY.image }}</span>
          </li>
          <li (click)="exploratoryAction(env, 'install')">
            <i class="material-icons">developer_board</i>
            <span>Manage libraries</span>
          </li>
          <li>
            <a target="_blank" [routerLink]="['/terminal',  env.ip]" class="navigate">
              <i class="material-icons">laptop</i>
              <span>Open terminal</span>
            </a>
          </li>
        </ul>
      </bubble-up>
    </td>
  </tr>
</table>

<computational-resource-create-dialog #computationalResourceModal (buildGrid)="buildGrid()"></computational-resource-create-dialog>
<confirmation-dialog #confirmationDialog (buildGrid)="buildGrid()"></confirmation-dialog>
<detail-dialog #detailDialog (buildGrid)="buildGrid()"></detail-dialog>
<cost-details-dialog #costDetailsDialog></cost-details-dialog>
<install-libraries #installLibs (buildGrid)="buildGrid()"></install-libraries>
<dlab-scheduler #envScheduler (buildGrid)="buildGrid()"></dlab-scheduler>
<dlab-ami-create-dialog #createAmi (buildGrid)="buildGrid()"></dlab-ami-create-dialog>