services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html

<!--

Copyright (c) 2016, EPAM SYSTEMS INC

Licensed 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="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'" class="lib-view-wrap">
      <div class="search-box" *ngIf="!uploading">
        <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>
              <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="text-center error" *ngIf="processError">
      <small>{{ errorMessage }}</small>
    </div>
    <div class="text-center m-top-15 m-bott-10 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>
  </modal-content>
</modal-dialog>