| <!-- |
| ~ 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. |
| --> |
| |
| <script src="detail-dialog.component.ts"></script> |
| <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="data "> |
| <table class="detail-header"> |
| <tr> |
| <td>{{notebook.template_name || notebook.name}}</td> |
| <td> |
| <span class="status" ngClass="{{notebook.status || ''}}"> |
| {{notebook.status}} |
| </span> |
| </td> |
| <td>{{notebook.shape}}</td> |
| </tr> |
| </table> |
| |
| <div class="content-box"> |
| <div class="detail-info" *ngIf="notebook.error_message"> |
| <p class="failed">{{ notebook.error_message }}</p> |
| </div> |
| <div *ngIf="data.type === 'environment'" class="detail-info"> |
| <p>Open following URL(s) in your browser to access this box:</p> |
| <div class="links_block"> |
| <!-- <p *ngFor="let item of notebook.exploratory_urls">--> |
| <!-- <span class="description">{{item.description}}: </span>--> |
| <!-- <a class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}"--> |
| <!-- target="_blank" (click)="logAction(notebook.name, item.description)">--> |
| <!-- {{item.url}}{{notebook.name}}--> |
| <!-- </a>--> |
| <!-- </p>--> |
| <ng-container *ngFor="let item of notebook.exploratory_urls"> |
| <span class="d-none" *ngIf="item.description.toLowerCase() === 'ungit' && notebook.exploratory_urls[0].description.toLowerCase().indexOf('zeppelin') !== -1; else ungit"> |
| </span> |
| <ng-template #ungit> |
| <p (mouseleave)="hideCopyIcon()"> |
| <span class="description">{{item.description}}: </span> |
| <a (mouseover)="showCopyIcon(item.description)" |
| (click)="logAction(notebook.name, item.description)" |
| class="ellipsis none-select" matTooltip="{{item.url}}" |
| matTooltipPosition="above" |
| href="{{item.url}}" |
| target="_blank" |
| (contextmenu)="false" |
| > |
| {{item.url}} |
| </a> |
| <span (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()" *ngIf="isCopyIconVissible[item.description]" [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'" matTooltipPosition="above" class="copy-icon-wrapper"> |
| <span class="link-icon" (click)="copyBucketName(item.url)" > |
| <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span> |
| </span> |
| </span> |
| </p> |
| </ng-template> |
| </ng-container> |
| </div> |
| </div> |
| <div class="scroll-box" id="scrolling" *ngIf="data.type === 'resource'"> |
| <div class="detail-info" *ngIf="!notebook.error_message"> |
| <p>Edge Node IP Address {{notebook.node_ip}}</p> |
| <p *ngIf="notebook.status === 'running'">Up time {{upTimeInHours}} hour(s) since |
| {{notebook.time ? (notebook.time | longDate ) : "not specified."}}</p> |
| <p *ngIf="notebook.url?.length">Open following URL(s) in your browser to access this box:</p> |
| <div class="links_block"> |
| <ng-container *ngFor="let item of notebook.url"> |
| <span class="d-none" *ngIf="item.description.toLowerCase() === 'ungit' && notebook.template_name.toLowerCase().indexOf('zeppelin ') !== -1; else ungit"> |
| </span> |
| <ng-template #ungit> |
| <p (mouseleave)="hideCopyIcon()"> |
| <span class="description">{{item.description}}: </span> |
| <a (mouseover)="showCopyIcon(item.description)" |
| (click)="logAction(notebook.name, item.description)" |
| class="ellipsis none-select" matTooltip="{{item.url}}" |
| matTooltipPosition="above" |
| href="{{item.url}}" |
| target="_blank" |
| (contextmenu)="false" |
| > |
| {{item.url}} |
| </a> |
| <span (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()" *ngIf="isCopyIconVissible[item.description]" [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'" matTooltipPosition="above" class="copy-icon-wrapper"> |
| <span class="link-icon" (click)="copyBucketName(item.url)" > |
| <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span> |
| </span> |
| </span> |
| </p> |
| </ng-template> |
| </ng-container> |
| </div> |
| <p class="flex" *ngIf="notebook.username">Node User: <span |
| class="strong">{{ notebook.username }}</span></p> |
| <p class="flex" *ngIf="notebook.password">Password: <span |
| class="strong">{{ notebook.password }}</span></p> |
| |
| <p class="m-top-30">{{ 'Project bucket' }}: </p> |
| <!-- (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view)"--> |
| <div class="links_block" (mouseleave)="hideCopyIcon()"> |
| <p *ngIf="PROVIDER === 'azure' && notebook.account_name"> |
| <span |
| class="bucket-info" |
| (mouseover)="showCopyIcon('bucket')" |
| [matTooltip]="notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'" |
| matTooltipPosition="above" |
| [matTooltipClass]="'bucket-item-tooltip'" |
| > |
| {{notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'}} |
| <!-- rc-22-projecta-conteiner@1ebobsvx7t.blob.core.windows.net--> |
| </span> |
| |
| <span *ngIf="isCopyIconVissible.bucket" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above"> |
| <span class="link-icon" (click)="copyBucketName(notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net');$event.stopPropagation()" > |
| <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span> |
| </span> |
| </span> |
| </p> |
| <p *ngIf="notebook.bucket_name && PROVIDER !== 'azure'">{{ DICTIONARY[PROVIDER].container }} |
| <span |
| class="bucket-info" |
| (mouseover)="showCopyIcon('bucket')" |
| > |
| {{ notebook.bucket_name }} |
| </span> |
| <span *ngIf="isCopyIconVissible.bucket" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above"> |
| <span class="link-icon" (click)="copyBucketName(notebook.bucket_name);$event.stopPropagation()" > |
| <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span> |
| </span> |
| </span> |
| </p> |
| </div> |
| <div class="bucket-info bucket-link"> |
| <span></span> |
| <!-- <button--> |
| <!-- type="button"--> |
| <!-- class="butt"--> |
| <!-- mat-raised-button--> |
| <!-- >--> |
| <!-- Open bucket browser--> |
| <!-- </button>--> |
| <!-- <span class="description open-bucket"--> |
| <!-- [ngClass]="{'not-allow': !this.bucketStatus.view || !thisdata.buckets.length}"--> |
| <!-- (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view && thisdata.buckets.length)"--> |
| <!-- >--> |
| <span class="description open-bucket" |
| [matTooltip]="!this.bucketStatus.view |
| ? 'You have not permission to open bucket' |
| : 'You have not any bucket'" |
| matTooltipDisabled="{{this.bucketStatus.view && this.data.buckets.length}}" |
| matTooltipPosition="above" |
| [matTooltipClass]="'bucket-item-tooltip'" |
| [ngClass]="{'not-allow': !this.bucketStatus.view || !this.data.buckets.length}" |
| (click)="bucketBrowser(notebook.cloud_provider !== 'azure' ? notebook.bucket_name : notebook.account_name + '.' + notebook.bucket_name, notebook.endpoint, this.bucketStatus.view && this.data.buckets.length)" |
| > |
| Open bucket browser |
| </span> |
| </div> |
| <!-- <p>Shared endpoint bucket: </p>--> |
| <!-- <div class="links_block" (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus.view)"--> |
| <!-- [matTooltip]="'You have not permission to open bucket'"--> |
| <!-- matTooltipDisabled="{{this.bucketStatus.view}}"--> |
| <!-- matTooltipPosition="above"--> |
| <!-- [matTooltipClass]="'bucket-item-tooltip'"--> |
| <!-- >--> |
| <!-- <p *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}--> |
| <!-- <span class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus.view}" (mouseover)="showCopyIcon('shared')">{{ notebook.shared_account_name}}</span>--> |
| <!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_account_name)">--> |
| <!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>--> |
| <!-- </span>--> |
| <!-- </p>--> |
| <!-- <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY[PROVIDER].container }}--> |
| <!-- <span--> |
| <!-- class="bucket-info bucket-link"--> |
| <!-- [ngClass]="{'not-allow': !this.bucketStatus.view}"--> |
| <!-- (mouseover)="showCopyIcon('shared')"--> |
| <!-- (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus.view)"--> |
| <!-- >--> |
| <!-- {{ notebook.shared_bucket_name }}--> |
| <!-- </span>--> |
| <!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_bucket_name)">--> |
| <!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>--> |
| <!-- </span>--> |
| <!-- </p>--> |
| <!-- </div>--> |
| <!-- <br />--> |
| |
| <!-- <div *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.datalake_name">--> |
| <!-- <p>Data Lake Store: </p>--> |
| <!-- <div class="links_block">--> |
| <!-- <p>Data Lake Store Account: <span class="bucket-info">{{ notebook.datalake_name }}</span></p>--> |
| <!-- <p>Personal folder: <span class="bucket-info">{{ notebook.datalake_directory }}</span></p>--> |
| <!-- <p>Collaboration folder: <span class="bucket-info">{{ notebook.datalake_shared_directory }}</span>--> |
| <!-- </p>--> |
| <!-- </div>--> |
| <!-- </div>--> |
| |
| <!-- <p> |
| <a href="#/help/accessnotebookguide" target="_blank"> |
| <small class="helper_instruction"> |
| <i class="material-icons">help_outline</i> |
| Read instruction how to create the tunnel</small> |
| </a> |
| </p> --> |
| </div> |
| |
| <div class="checkbox-group" *ngIf="notebook.image !== 'docker.datalab-zeppelin'; else not_support" |
| [hidden]="notebook.status !== 'running' || notebook.image === 'docker.datalab-superset' || notebook.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" *ngIf="configuration?.nativeElement['checked'] || false"> |
| <textarea formControlName="configuration_parameters" id="config" |
| 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> |
| <ng-template #not_support> |
| <small [hidden]="notebook.status !== 'running'">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> |
| </ng-template> |
| <div [scrollTo]="configuration?.nativeElement['checked'] || false" class="text-center m-top-20 m-bott-10" |
| *ngIf="(configuration?.nativeElement['checked'] || false) && notebook.status === 'running'"> |
| <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> |
| </div> |
| |
| </div> |
| </div> |
