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

<table class="dashboard_table" *ngIf="isAdmin; else users">
  <tr>
    <th class="th_user">User</th>
    <th class="th_name">Name</th>
    <th class="th_status">Status</th>
    <th class="th_shape">Shape / Resource id</th>
    <th class="th_resources">Computational resources</th>
    <th class="th_actions">Action</th>
  </tr>

  <tr *ngFor="let env of allEnvironmentData" class="dashboard_table_body">
    <td>{{ env.user }}</td>
    <td [ngClass]="{'capitalize': env.name === 'edge node'}">{{ env.name }}</td>
    <td class="status" ngClass="{{env.status || ''}}">{{env.status}}</td>
    <td>{{ env.shape || env.ip }}</td>
    <td>
      <div class="source" *ngIf="env.resources">
        <div *ngIf="!env.resources?.length">
          <span *ngIf="!env.resources.length" class="no-details">no details</span>
        </div>
        <div *ngIf="env.resources?.length">
          <div *ngFor="let resource of env.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(env, 'stop', resource)"
                  [ngClass]="{'not-allowed' : resource.status !== 'running' || env.user.toLowerCase() === currentUser && healthStatus !== 'ok' }">pause_circle_outline</i>
              </a>

              <a class="remove_butt" (click)="toggleResourceAction(env, 'terminate', resource)"
                  [ngClass]="{ 'disabled' : env.status !== 'running' || resource.status !== 'running'
                              && resource.status !== 'stopped' || env.user.toLowerCase() === currentUser && healthStatus !== 'ok' }">
                <i class="material-icons">highlight_off</i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="settings">
      <span #settings class="actions" (click)="actions.toggle($event, settings)" [ngClass]="{ 'disabled'
            : (!uploadKey && env.type === 'notebook' && env.user.toLowerCase() === currentUser)
            || (env.status !== 'running' && env.status !== 'stopped' && env.status !== 'stopping' && env.status !== 'failed' )
            || (env.type === 'edge node' && env.user.toLowerCase() === currentUser && env.status === 'stopping')
            || env.type === 'edge node' && env.user.toLowerCase() !== currentUser && env.status !== 'running'
            || env.user.toLowerCase() === currentUser && healthStatus !== 'ok' && env.type !== 'edge node' }"></span>
      <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
        <ul class="list-unstyled">
          <li
            matTooltip="{{ env.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(env)"
            [hidden]="env.name === 'edge node' && env.status === 'stopped'">
            <div (click)="toggleResourceAction(env, 'stop')"
              [ngClass]="{'not-allowed' : env.status === 'stopped' || env.status === 'stopping' || env.status === 'starting' || env.status === 'creating image' || env.status === 'failed' || isResourcesInProgress(env)}">
              <i class="material-icons">pause_circle_outline</i>
              <span>Stop</span>
            </div>
          </li>
          <li *ngIf="env.name !== 'edge node'"
            matTooltip="Unable to terminate notebook because at least one computational resource is in progress"
            matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(env)">
            <div (click)="toggleResourceAction(env, 'terminate')"
              [ngClass]="{'not-allowed' : env.status !== 'running' && env.status !== 'stopped' || isResourcesInProgress(env)}">
              <i class="material-icons">phonelink_off</i>
              <span>Terminate</span>
            </div>
          </li>

          <div *ngIf="env.name === 'edge node' && env.user.toLowerCase() === currentUser">
            <li (click)="toggleResourceAction(env, 'run')" *ngIf="env.status === 'stopped'">
              <i class="material-icons">play_circle_outline</i>
              <span>Start</span>
            </li>
            <li (click)="toggleResourceAction(env, 'recreate')" *ngIf="env.status === 'terminated'">
              <i class="material-icons">refresh</i>
              <span>Recreate</span>
            </li>
            <li *ngIf="!isResourcesInProgress(env)" (click)="showReuploaKeydDialog()">
              <i class="material-icons">sync_problem</i>
              <span>Reupload key</span>
            </li>
          </div>
        </ul>
      </bubble-up>
    </td>
  </tr>
</table>

<ng-template #users>
  <table class="dashboard_table">
    <tr>
      <th class="th_name">Type</th>
      <th>Resource id</th>
      <th class="th_status">Status</th>
      <th class="th_actions">Action</th>
    </tr>
    <tr *ngFor="let env of environmentsHealthStatuses" class="dashboard_table_body">
      <td>{{env.type}}</td>
      <td>{{env.resource_id}}</td>
      <td class="status" ngClass="{{env.status || ''}}">{{env.status}}</td>
      <td class="settings">
        <span #settings (click)="actions.toggle($event, settings)" class="actions" [ngClass]="{'disabled': env.status !== 'running'
              && env.status !== 'stopped'
              && env.status !== 'terminated'
              || notebookInProgress
              || !uploadKey && env.status !== 'failed' }">
        </span>

        <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
          <ul class="list-unstyled">
            <li (click)="toggleResourceAction(env, 'stop')" *ngIf="env.status === 'running'">
              <i class="material-icons">pause_circle_outline</i>
              <span>Stop</span>
            </li>
            <li (click)="toggleResourceAction(env, 'run')" *ngIf="env.status === 'stopped'">
              <i class="material-icons">play_circle_outline</i>
              <span>Start</span>
            </li>
            <li (click)="toggleResourceAction(env, 'recreate')" *ngIf="env.status === 'terminated'">
              <i class="material-icons">refresh</i>
              <span>Recreate</span>
            </li>
            <li *ngIf="!anyEnvInProgress" (click)="showReuploaKeydDialog()">
              <i class="material-icons">sync_problem</i>
              <span>Reupload key</span>
            </li>
          </ul>
        </bubble-up>
      </td>
    </tr>
  </table>
</ng-template>

<confirmation-dialog #confirmationDialog [manageAction]="isAdmin" (buildGrid)="buildGrid()"></confirmation-dialog>
<key-upload-dialog #keyReuploadDialog [primaryUploading]="false" (checkInfrastructureCreationProgress)="buildGrid()"
  (generateUserKey)="generateUserKey()">
</key-upload-dialog>