| <!-- |
| ~ 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="data"> |
| <table class="detail-header"> |
| <tr> |
| <td>{{notebook.template_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 class="scroll-box" id="scrolling"> |
| <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 |
| {{upTimeSince || "not specified."}}</p> |
| <p>Open following URL(s) in your browser to access this box:</p> |
| <div class="links_block"> |
| <p *ngFor="let item of notebook.url"> |
| <ng-container *ngIf="!(item.description === 'Ungit' && notebook.template_name.indexOf('Apache Zeppelin') !== -1)"> |
| <span class="description">{{item.description}}: </span> |
| <a class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}" |
| target="_blank"> |
| {{item.url}} |
| </a> |
| </ng-container> |
| </p> |
| </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">{{ DICTIONARY[PROVIDER].personal_storage }}: </p> |
| <div class="links_block"> |
| <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY[PROVIDER].account }} |
| <span class="bucket-info">{{ notebook.account_name}}</span></p> |
| <p *ngIf="notebook.bucket_name">{{ DICTIONARY[PROVIDER].container }} <span |
| class="bucket-info">{{ notebook.bucket_name }}</span></p> |
| </div> |
| <p>Shared endpoint bucket: </p> |
| <div class="links_block"> |
| <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }} |
| <span class="bucket-info">{{ notebook.shared_account_name}}</span></p> |
| <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY[PROVIDER].container }} |
| <span class="bucket-info">{{ notebook.shared_bucket_name }}</span></p> |
| </div> |
| <br /> |
| |
| <div *ngIf="DICTIONARY[PROVIDER].cloud_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.dlab-zeppelin'; else not_support" |
| [hidden]="notebook.status !== 'running' || notebook.image === 'docker.dlab-superset' || notebook.image === 'docker.dlab-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 DLab 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> |