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

<modal-dialog #bindDialog modalClass="install-libraries modal-xl">
  <modal-header>
    <h4 class="modal-title" id="myModalLabel">Manage
      <b>{{ notebook?.name }}</b> Libraries</h4>
  </modal-header>
  <modal-content>
   <div class="aligner">
    <div class="info" *ngIf="notebook?.status !== 'running'">
      <p class=" message">Cannot install libraries: Exploratory
        <strong>{{ notebook?.name }}</strong> is not running</p>
    </div>
    <div class="loading-block" *ngIf="!libs_uploaded && uploading && notebook?.status === 'running'">
      <div class="uploading">
        <p>Please wait until DLab loads full list of available libraries for you...</p>
        <img src="assets/img/gif-spinner.gif" alt="loading">
      </div>
    </div>
    <div *ngIf="notebook?.status === 'running' && !uploading" class="lib-view-wrap">
      <div class="search-box">
        <div class="search-form">
          <div>
            <div class="control-group constol-select">
              <label class="label">Select resource</label>
              <div class="control">
                <dropdown-list #resourceSelect (selectedItem)="onUpdate($event)"></dropdown-list>
              </div>
            </div>
            <div class="control-group control-select">
              <label class="label">Select group</label>
              <div class="control">
                <dropdown-list #groupSelect (selectedItem)="onUpdate($event)"></dropdown-list>
              </div>
            </div>
          </div>
          <div class="search">
            <mat-form-field class="chip-list">
              <input type="text" [placeholder]="group === 'java' ? 'Enter library name in <groupId>:<artifactId>:<versionId> format' : 'Enter library name'" matInput [formControl]="libSearch" [value]="query" [matAutocomplete]="auto">
              <mat-icon matSuffix>search</mat-icon>
              <mat-autocomplete #auto="matAutocomplete" class="suggestions">
                <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index">
                  <mat-option [ngClass]="{ 'not-allowed': isDuplicated(item) }">
                    <div class="option" (click)="selectLibrary(item)">
                      <a *ngIf="!isDuplicated(item)">
                        <span [innerHTML]="item.name | highlight:query"></span>
                        <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>
                      </a>
                      <span *ngIf="isInSelectedList || isInstalled">{{ item.name }}
                        <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>
                      </span>

                      <strong *ngIf="isInSelectedList">selected
                        <i class="material-icons">done</i>
                      </strong>
                      <strong *ngIf="isInstalled">installed
                        <i class="material-icons">done</i>
                      </strong>
                    </div>
                  </mat-option>
                </ng-template>
                <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format">
                  <span class="configuring">No matches found</span>
                </mat-option>
                <mat-option *ngIf="validity_format?.length > 0">
                  <span class="configuring">{{ validity_format }}</span>
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
            <div class="list-selected list-container" id="scrolling">
              <mat-chip-list *ngIf="model.selectedLibs.length && libs_uploaded">
                <mat-chip *ngFor="let item of model.selectedLibs">
                  {{ item.name }}
                  <span *ngIf="item.version && item.version !== 'N/A'">&nbsp;{{ item.version }}</span>
                  <strong>&nbsp;({{ groupsListMap[item.group] }})&nbsp;</strong>
                  <a class="material-icons" (click)="removeSelectedLibrary(item)">clear</a>
                </mat-chip>
              </mat-chip-list>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="libs-info">
      <mat-list>
        <mat-list-item class="list-header">
          <div class="lib-name">Name</div>
          <div class="lib-group">Group</div>
          <div class="lib-destination">Destination</div>
          <div class="lib-resource-type">Resource type</div>
          <div class="lib-status">Status</div>
        </mat-list-item>

        <div class="scrollingList" id="scrolling" *ngIf="notebookLibs?.length">
          <div *ngIf="notebook?.status !== 'running' && notebookFailedLibs.length > 0" class="info message">
            <p>Cannot retry to reinstall failed libraries: Exploratory {{ notebook?.name }} is not running</p>
          </div>

          <mat-list-item *ngFor="let lib of notebookLibs">
            <div class="lib-name">
              <strong>{{ lib.name }}</strong>&nbsp;
              <span *ngIf="lib.version  && lib.version !== 'N/A'">v.{{ lib.version }}</span>
            </div>
            <div class="lib-group">{{ groupsListMap[lib.group] }}</div>
            <div class="st-group">
              <ng-template let-item ngFor [ngForOf]="lib.status">
                <div class="wrap-col">
                  <div class="lib-destination-col">{{ item.resource }}</div>
                  <div class="lib-resource-type-col">{{ item.resourceType }}</div>
                  <div class="lib-status-col" ngClass="{{ item.status.toLowerCase() || '' }}">{{ item.status }}
                    <div class="warn-action" *ngIf="item.status === 'failed' && notebook?.status === 'running'">
                      <div>
                        <span *ngIf="!installingInProgress" (click)="reinstallLibrary(item, lib)" matTooltip="Retry installation" matTooltipPosition="above">
                          <i class="material-icons">replay</i>
                        </span>
                        <span class="not-allowed" *ngIf="installingInProgress" matTooltip="You can't reinstall library until previous process will be completed"
                          matTooltipPosition="above">
                          <i class="material-icons">replay</i>
                        </span>
                      </div>
                      <div *ngIf="item.status === 'failed' && item.error" class="lib-error" (click)="showErrorMessage(item)">
                        <i class="material-icons">error_outline</i>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-template>
            </div>
          </mat-list-item>
        </div>
        <div *ngIf="!notebookLibs?.length" class="scrollingList info message">
          <p>You have no libraries installed</p>
        </div>
      </mat-list>
    </div>
    <div class="m-top-15 actions" *ngIf="!uploading && notebook?.status === 'running'">
      <button mat-raised-button type="button" class="butt action" (click)="close()">Close</button>
      <button mat-raised-button type="submit" class="butt butt-success action" (click)="model.confirmAction()" [disabled]="!model.selectedLibs.length || installingInProgress || !destination">Install</button>
    </div>
   </div>
  </modal-content>
</modal-dialog>