| <!-- |
| ~ 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="create-environment" id="dialog-box"> |
| <header class="dialog-header"> |
| <h4 class="modal-title">Create analytical tool</h4> |
| <button type="button" class="close" (click)="dialogRef.close()">×</button> |
| </header> |
| <div class="dialog-content selection"> |
| <div id="scrolling" class="content-box mat-reset scrolling-content"> |
| <form [formGroup]="createExploratoryForm" *ngIf="createExploratoryForm" novalidate> |
| <div class="control-group"> |
| <label class="label">Select project</label> |
| <div class="control selector-wrapper"> |
| <mat-form-field> |
| <mat-select |
| formControlName="project" |
| disableOptionCentering |
| panelClass="create-resources-dialog scrolling" |
| placeholder="Select project" |
| > |
| <mat-option *ngFor="let project of projects" [value]="project.name" (click)="setEndpoints(project)"> |
| {{ project.name }} |
| </mat-option> |
| <mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled> |
| Projects list is empty |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </div> |
| </div> |
| |
| <div class="control-group"> |
| <label class="label">Select endpoint</label> |
| <div class="control selector-wrapper" [ngClass]="{ 'not-active' : !endpoints.length }"> |
| <mat-form-field> |
| <mat-select |
| formControlName="endpoint" |
| disableOptionCentering |
| [disabled]="!endpoints.length" |
| panelClass="create-resources-dialog scrolling" |
| placeholder="Select endpoint" |
| > |
| <mat-option |
| *ngFor="let endpoint of endpoints" |
| [value]="endpoint" |
| (click)="getTemplates(createExploratoryForm?.controls['project'].value, endpoint)" |
| > |
| {{ endpoint }} |
| </mat-option> |
| <mat-option *ngIf="!endpoints.length" class="multiple-select ml-10" disabled> |
| Endpoints list is empty |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </div> |
| </div> |
| |
| <div class="control-group"> |
| <label class="label">Select template</label> |
| <div |
| class="control selector-wrapper" |
| [matTooltip]="'Notebook creations are not available. Please, check your permissions.'" |
| matTooltipPosition="above" |
| [matTooltipClass]="'full-size-tooltip'" |
| [matTooltipDisabled]="!(templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)" |
| > |
| <span class="form-field-wrapper" [ngClass]="{ 'not-active' : !templates.length || (templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)}"> |
| <mat-form-field> |
| <mat-select |
| formControlName="version" |
| disableOptionCentering |
| [disabled]="!templates.length || (templates.length === 0 && this.createExploratoryForm.controls.endpoint.value)" |
| panelClass="create-resources-dialog scrolling" |
| placeholder="Select template" |
| > |
| <mat-option |
| *ngFor="let template of templates" |
| [value]="template.exploratory_environment_versions[0].version" |
| (click)="getShapes(template)" |
| > |
| {{ template.exploratory_environment_versions[0].template_name }} |
| </mat-option> |
| <mat-option *ngIf="!templates.length" class="multiple-select ml-10" disabled> |
| Templates list is empty |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </span> |
| </div> |
| </div> |
| |
| <div |
| class="image-description control-group" |
| *ngIf="selectedCloud !== 'gcp' && currentTemplate?.image === 'docker.datalab-deeplearning'" |
| > |
| <label class="label"></label> |
| <div class="control"> |
| <i class="material-icons" >info</i> |
| {{currentTemplate?.exploratory_environment_versions[0]?.description}} |
| </div> |
| </div> |
| |
| <div class="control-group" *ngIf="images && images.length > 0"> |
| <label class="label">Select image</label> |
| <div class="control selector-wrapper"> |
| <mat-form-field> |
| <mat-label>Select image</mat-label> |
| <mat-select formControlName="notebook_image_name" panelClass="create-resources-dialog scrolling" disableOptionCentering> |
| <mat-option |
| *ngIf="currentTemplate?.image !== 'docker.datalab-deeplearning'" |
| [value]="null" |
| (click)="setImage(null)" |
| > |
| None |
| </mat-option> |
| <mat-option |
| *ngFor="let image of images" |
| [value]="image?.name" |
| (click)="setImage(image)" |
| > |
| {{ image?.status ? image?.name + ' (custom image)' : image?.name }} |
| </mat-option> |
| <mat-option *ngIf="!images?.length" class="multiple-select ml-10" disabled> |
| Images list is empty |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </div> |
| </div> |
| |
| <div |
| class="image-description control-group" |
| *ngIf="selectedImage?.description" |
| > |
| <label class="label"></label> |
| <div class="control"> |
| <i class="material-icons" >info</i> |
| {{selectedImage?.description}} |
| </div> |
| </div> |
| |
| <div class="control-group name-control"> |
| <label class="label">Name</label> |
| <div class="control"> |
| <input |
| [class.danger_field]=" !createExploratoryForm?.controls['name'].valid |
| && createExploratoryForm?.controls['name'].dirty |
| && createExploratoryForm?.controls['name'].hasError('duplication')" |
| type="text" |
| class="form-control" |
| placeholder="Enter Name" |
| formControlName="name" |
| /> |
| <span class="error" *ngIf="createExploratoryForm?.controls['name'].hasError('duplication')">This name already exists in current project.</span> |
| <span |
| class="error" |
| *ngIf="createExploratoryForm?.controls['name'].hasError('maxlength') |
| && !createExploratoryForm?.controls['name'].hasError('pattern')" |
| > |
| Name cannot be longer than {{maxNotebookLength}} characters. |
| </span> |
| <span class="error" *ngIf="createExploratoryForm?.controls['name'].hasError('pattern')"> |
| Name can only contain letters, numbers, hyphens and '_' but can not end with special characters. |
| </span> |
| </div> |
| </div> |
| |
| <div class="control-group"> |
| <label class="label">Instance size</label> |
| <div |
| class="control selector-wrapper" |
| [matTooltip]="'Instance size are not available. Please, check your permissions.'" |
| matTooltipPosition="above" |
| [matTooltipClass]="'full-size-tooltip'" |
| [matTooltipDisabled]="!(!areShapes && currentTemplate)" |
| > |
| <span class="form-field-wrapper" [ngClass]="{ 'not-active': !currentTemplate || !areShapes && currentTemplate}"> |
| <mat-form-field> |
| <mat-label>Select instance size</mat-label> |
| <mat-select |
| formControlName="shape" |
| disableOptionCentering |
| [disabled]="!currentTemplate || !areShapes && currentTemplate" |
| panelClass="create-resources-shapes scrolling" |
| placeholder="Instance size" |
| > |
| <mat-optgroup *ngFor="let item of (shapes | keys)" [label]="item.key | underscoreless"> |
| <mat-option *ngFor="let list_item of item.value" [value]="list_item.Type" (click)="setInstanceSize()"> |
| <strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }} |
| </mat-option> |
| </mat-optgroup> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </span> |
| </div> |
| </div> |
| |
| <div |
| class="control-group m-bott-10" |
| [ngClass]="{'m-bott-20': createExploratoryForm?.controls['custom_tag'].hasError('pattern')}" |
| > |
| <label class="label">Custom tag</label> |
| <div class="control"> |
| <input type="text" class="form-control" placeholder="Enter custom tag" formControlName="custom_tag"> |
| </div> |
| <span |
| class="error" |
| *ngIf="createExploratoryForm?.controls['custom_tag'].hasError('maxlength') && |
| !createExploratoryForm?.controls['custom_tag'].hasError('pattern')" |
| > |
| Custom tag name cannot be longer than {{maxCustomTagLength}} characters. |
| </span> |
| <span |
| class="error" |
| *ngIf="createExploratoryForm?.controls['custom_tag'].hasError('pattern')" |
| > |
| Custom tag can only contain letters, numbers, hyphens and '_' but can not end with special characters.</span> |
| </div> |
| |
| <div *ngIf="currentTemplate"> |
| <ng-template |
| [ngIf]="selectedCloud === 'gcp' |
| && (currentTemplate?.image === 'docker.datalab-jupyter' |
| || currentTemplate?.image === 'docker.datalab-deeplearning' |
| || currentTemplate?.image === 'docker.datalab-tensor')" |
| > |
| <div class="checkbox-group"> |
| <div |
| class="d-flex cursor-pointer label m-bott-20" |
| *ngIf="currentTemplate?.image === 'docker.datalab-jupyter'" |
| (click)="addGpuFields()" |
| > |
| <div class="empty-checkbox" [ngClass]="{'checked': this.additionalParams.gpu}"> |
| <span class="checked-checkbox" *ngIf="this.additionalParams.gpu"></span> |
| </div> |
| <span class=" pl-5">GPU</span> |
| </div> |
| <ng-template |
| [ngIf]="this.additionalParams.gpu || |
| currentTemplate?.image === 'docker.datalab-deeplearning' || |
| currentTemplate?.image === 'docker.datalab-tensor'" |
| > |
| <div class="control-group"> |
| <label class="label">GPU type</label> |
| <div |
| class="control selector-wrapper" |
| [matTooltip]="'Please, select instance size.'" |
| matTooltipPosition="above" |
| [matTooltipClass]="'full-size-tooltip'" |
| [matTooltipDisabled]="!!createExploratoryForm.controls['shape'].value" |
| > |
| <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['shape'].value}"> |
| <mat-form-field> |
| <mat-label>Select GPU type</mat-label> |
| <mat-select |
| formControlName="gpu_type" |
| disableOptionCentering |
| [disabled]="!createExploratoryForm.controls['shape'].value" |
| panelClass="create-resources-dialog" |
| placeholder="GPU type" |
| > |
| <mat-option *ngFor="let list_item of gpuTypes; index as i" [value]="list_item" (click)="setCount('', list_item)"> |
| <strong class="highlight icon-label">{{ addSizeToGpuType(i) }}</strong> {{ list_item }} |
| </mat-option> |
| <mat-option *ngIf="!gpuTypes.length" class="multiple-select ml-10" disabled> |
| GPU list is empty |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </span> |
| </div> |
| </div> |
| <div class="control-group"> |
| <label class="label">GPU count</label> |
| <div |
| class="control selector-wrapper" |
| [matTooltip]="'Please, select GPU type.'" |
| matTooltipPosition="above" |
| [matTooltipClass]="'full-size-tooltip'" |
| [matTooltipDisabled]="!!createExploratoryForm.controls['gpu_type'].value" |
| > |
| <span class="form-field-wrapper" [ngClass]="{ 'not-active': !createExploratoryForm.controls['gpu_type'].value}"> |
| <mat-form-field> |
| <mat-label>Select GPU count</mat-label> |
| <mat-select |
| formControlName="gpu_count" |
| disableOptionCentering |
| [disabled]="!createExploratoryForm.controls['gpu_type'].value" |
| panelClass="create-resources-dialog" |
| placeholder="GPU count" |
| > |
| <mat-option *ngFor="let list_item of gpuCount" [value]="list_item"> |
| {{ list_item }} |
| </mat-option> |
| </mat-select> |
| <button class="caret"> |
| <i class="material-icons">keyboard_arrow_down</i> |
| </button> |
| </mat-form-field> |
| </span> |
| </div> |
| </div> |
| </ng-template> |
| </div> |
| </ng-template> |
| <div |
| class="checkbox-group" |
| *ngIf="currentTemplate?.image !== 'docker.datalab-zeppelin' |
| && currentTemplate?.image !== 'docker.datalab-superset' |
| && currentTemplate?.image !== 'docker.datalab-jupyterlab'" |
| > |
| <div class="d-flex cursor-pointer label m-bott-20" (click)="selectConfiguration()"> |
| <div class="empty-checkbox" [ngClass]="{'checked': this.additionalParams.configurationNode}"> |
| <span class="checked-checkbox" *ngIf="this.additionalParams.configurationNode"></span> |
| </div> |
| <span class=" pl-5">Spark configurations</span> |
| </div> |
| <div class="config-details" [ngClass]="{ show: this.additionalParams.configurationNode}"> |
| <textarea |
| formControlName="cluster_config" |
| placeholder="Cluster configuration template, JSON" |
| data-gramm_editor="false" |
| id="config" |
| ></textarea> |
| <span |
| class="error spark-config" |
| *ngIf="!createExploratoryForm?.controls.cluster_config.valid |
| && createExploratoryForm?.controls['cluster_config'].dirty" |
| > |
| Configuration parameters is not in a valid format. |
| </span> |
| </div> |
| </div> |
| <small *ngIf="currentTemplate?.image === 'docker.datalab-zeppelin'"> |
| Spark default configuration for Apache Zeppelin can not be changed from DataLab UI. Currently it can be |
| done directly through Apache Zeppelin interpreter menu. |
| For more details please refer for Apache Zeppelin <a |
| href="https://zeppelin.apache.org/docs/0.9.0/usage/interpreter/overview.html" target="_blank">official |
| documentation</a>. |
| </small> |
| </div> |
| |
| <div class="text-center m-top-30" id="buttons"> |
| <button |
| mat-raised-button |
| type="button" |
| class="butt action" |
| (click)="dialogRef.close()" |
| > |
| Cancel |
| </button> |
| <button |
| mat-raised-button |
| type="button" |
| class="butt butt-success action" |
| [disabled]="!createExploratoryForm?.valid" |
| (click)="createExploratoryEnvironment(createExploratoryForm.value)" |
| > |
| Create |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
