| <!-- |
| ~ 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="detail-dialog" id="dialog-box"> |
| <header class="dialog-header header-white"> |
| <button type="button" class="close" (click)="dialogRef.close()">×</button> |
| </header> |
| <div class="dialog-content"> |
| <div *ngIf="resource"> |
| <table class="detail-header"> |
| <tr> |
| <td class="tooltip-wrap" (mouseover)="isEllipsisActive($event)"> |
| <div class="hint-title ellipsis">{{resource.computational_name}}</div> |
| <div class="tooltip" [style.visibility]="tooltip ? 'visible': 'hidden'">{{resource.computational_name}} |
| </div> |
| </td> |
| <td> |
| <span class="status" [ngClass]="resource.status || ''"> |
| {{resource.status}} |
| </span> |
| </td> |
| <td>{{ resource[DICTIONARY[PROVIDER][resource.image].master_node_shape] }}</td> |
| </tr> |
| </table> |
| <div class="detail-info content-box" *ngIf="!resource.error_message"> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Cluster type:</p> |
| </div> |
| <div class="col"><span>{{ resource.template_name }}</span></div> |
| </div> |
| <div class="row-wrap" *ngIf="resource.image === 'docker.datalab-dataengine-service'"> |
| <div class="col"> |
| <p>Cluster version:</p> |
| </div> |
| <div class="col"><span>{{ resource[DICTIONARY[PROVIDER].cluster_version] }}</span></div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Cluster alias:</p> |
| </div> |
| <div class="col" (mouseover)="isEllipsisActive($event)"> |
| <span>{{resource.computational_name}}</span> |
| <!-- <div class="tooltip" [style.visibility]="tooltip ? 'visible': 'hidden'">{{resource.computational_name}}</div> --> |
| </div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col" *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'; else inst"> |
| <p>Master instance number:</p> |
| </div> |
| <ng-template #inst> |
| <div class="col"> |
| <p>Total instance number:</p> |
| </div> |
| </ng-template> |
| <div class="col"> |
| <span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'aws'"> |
| {{ resource.totalInstanceCount > 0 ? resource.totalInstanceCount : resource.dataengine_instance_count}} |
| </span> |
| <span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure'">{{resource.dataengine_instance_count}}</span> |
| <span *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'">1</span> |
| </div> |
| </div> |
| <div class="row-wrap" *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'gcp'"> |
| <div class="col"> |
| <p>Slave instance number:</p> |
| </div> |
| <div class="col"><span>{{ resource.totalInstanceCount - 1}}</span></div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Master instance size:</p> |
| </div> |
| <div class="col"><span>{{ resource[DICTIONARY[PROVIDER][resource.image].master_node_shape] }}</span></div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Slave instance size:</p> |
| </div> |
| <div class="col"><span>{{ resource[DICTIONARY[PROVIDER][resource.image].slave_node_shape] }}</span></div> |
| </div> |
| <ng-template [ngIf]="resource?.enabledGPU"> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Master GPU type:</p> |
| </div> |
| <div class="col"><span>{{resource.master_gpu_type}}</span></div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Slave GPU type:</p> |
| </div> |
| <div class="col"><span>{{resource.slave_gpu_type}}</span></div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Master GPU count:</p> |
| </div> |
| <div class="col"><span>{{resource.master_gpu_count}}</span></div> |
| </div> |
| <div class="row-wrap"> |
| <div class="col"> |
| <p>Slave GPU count:</p> |
| </div> |
| <div class="col"><span>{{resource.slave_gpu_count}}</span></div> |
| </div> |
| </ng-template> |
| <div *ngIf="resource.status === 'running'"> |
| <div class="row-wrap"> |
| <p class="time_info"> |
| Up time {{upTimeInHours}} hour(s) since {{resource.up_time ? (resource.up_time | longDate) : "not specified."}} |
| </p> |
| </div> |
| <div class="m-top-10"> |
| <p *ngFor="let item of resource.computational_url" class="ellipsis flex" (mouseleave)="hideCopyIcon()"> |
| <span class="strong spark-url-desc">{{ item.description }}:</span> |
| <a |
| (click)="logAction(resource, environment, 'follow')" |
| href="{{item.url}}" |
| target="_blank" |
| matTooltip="{{item.url}}" |
| matTooltipPosition="above" |
| (mouseover)="showCopyIcon(item.description)" |
| class="spark-url ellipsis" |
| (contextmenu)="false" |
| > |
| {{ item.url }} |
| </a> |
| <span |
| (click)="logAction(resource, environment, 'copy');$event.stopPropagation()" |
| *ngIf="isCopyIconVissible[item.description]" |
| [matTooltip]="isCopied ? 'Copy ' + item.description + (item.description.indexOf('url') === -1 ? ' url' : ''): 'Copied'" |
| matTooltipPosition="above" |
| class="copy-icon-wrapper" |
| > |
| <span class="link-icon" (click)="copyLink(item.url)" > |
| <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span> |
| </span> |
| </span> |
| </p> |
| </div> |
| </div> |
| <div |
| class="checkbox-group" |
| *ngIf="resource.image === 'docker.datalab-dataengine' |
| && resource.status === 'running' |
| && environment.image !== 'docker.datalab-zeppelin' |
| && environment.image !== 'docker.datalab-superset' |
| && environment.image !== 'docker.datalab-jupyterlab'" |
| > |
| <label> |
| <input #configurationNode type="checkbox" (change)="selectConfiguration()"/> Cluster configurations |
| </label> |
| <div class="checkbox-group"> |
| <form [formGroup]="configurationForm" novalidate> |
| <div class="config-details" [ngClass]="{ show: configuration?.nativeElement['checked'] || false }"> |
| <textarea |
| formControlName="configuration_parameters" |
| placeholder="Cluster configuration template, JSON" |
| data-gramm_editor="false" |
| ></textarea> |
| <span class="danger_color" |
| *ngIf="!configurationForm.controls.configuration_parameters.valid |
| && configurationForm.controls['configuration_parameters'].dirty"> |
| Configuration parameters is not in a valid format |
| </span> |
| </div> |
| </form> |
| </div> |
| </div> |
| <div *ngIf="environment.image === 'docker.datalab-zeppelin' && resource.status === 'running'"> |
| <small>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" *ngIf="configuration?.nativeElement['checked'] || false"> |
| <button |
| mat-raised-button type="button" |
| (click)="dialogRef.close()" |
| class="butt action" |
| > |
| Cancel |
| </button> |
| <button |
| mat-raised-button type="submit" |
| [disabled]="!configurationForm.valid" |
| class="butt butt-success action" |
| [ngClass]="{'not-allowed': !configurationForm.valid}" |
| (click)="editClusterConfiguration(configurationForm.value)" |
| > |
| Update |
| </button> |
| </div> |
| </div> |
| |
| <div class="row-wrap detail-info content-box" *ngIf="resource.error_message"> |
| <p class="failed">{{resource.error_message}}</p> |
| </div> |
| </div> |
| </div> |
| </div> |