| <!-- |
| ~ 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" panelClass="create-resources-dialog" 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" 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]="'bucket-item-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" 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="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" disableOptionCentering> |
| <mat-option [value]="null">None</mat-option> |
| <mat-option *ngFor="let image of images" [value]="image.name">{{ 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="control-group name-control"> |
| <label class="label">Name</label> |
| <div class="control"> |
| <input [class.danger_field]="notebookExist || !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.valid |
| && createExploratoryForm?.controls['name'].dirty |
| && !createExploratoryForm?.controls['name'].hasError('duplication')">Name |
| cannot be longer than {{maxNotebookLength}} characters and 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]="'bucket-item-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" 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"> |
| <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"> |
| <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.valid && createExploratoryForm?.controls.custom_tag.dirty"> |
| Custom tag can only contain letters, numbers, hyphens and '_' but can not end with special characters</span> |
| </div> |
| |
| <div *ngIf="currentTemplate"> |
| <div class="checkbox-group" |
| *ngIf="currentTemplate?.image !== 'docker.datalab-zeppelin' && currentTemplate?.image !== 'docker.datalab-superset' && currentTemplate?.image !== 'docker.datalab-jupyterlab'"> |
| <label> |
| <input #configurationNode type="checkbox" (change)="selectConfiguration()" /> Spark configurations |
| </label> |
| <div class="config-details" [ngClass]="{ show: configuration?.nativeElement['checked'] || false }"> |
| <textarea formControlName="cluster_config" placeholder="Cluster configuration template, JSON" |
| data-gramm_editor="false" id="config"></textarea> |
| <span class="error" |
| *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.8.0/usage/interpreter/overview.html" target="_blank">official |
| documentation</a>. |
| </small> |
| </div> |
| |
| <div class="text-center m-top-30"> |
| <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> |