You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by bh...@apache.org on 2019/07/25 11:31:26 UTC

[incubator-dlab] 04/12: [DLAB-4]: redirect to terminal with new tab by notebook ip

This is an automated email from the ASF dual-hosted git repository.

bhliva pushed a commit to branch v2.1.1
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit ad18801246d64cb7cbccf029a91f8f7b9bf36f71
Author: Andriana Kovalyshyn <an...@epam.com>
AuthorDate: Tue May 7 17:13:02 2019 +0300

    [DLAB-4]: redirect to terminal with new tab by notebook ip
---
 .../detail-dialog/detail-dialog.component.html     | 168 +++++++++++----------
 .../resources/exploratory/detail-dialog/index.ts   |   3 +-
 2 files changed, 92 insertions(+), 79 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index 1b2ac38..8e9373e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -18,100 +18,112 @@
   -->
 
 <modal-dialog #bindDialog modalClass="detail-dialog modal-lg header-white">
-    <modal-header></modal-header>
-    <modal-content>
-        <div *ngIf="notebook">
-            <table class="detail-header">
-                <tr>
-                    <td>{{notebook.template_name}}</td>
-                    <td>
-                        <span class="status" ngClass="{{notebook.status || ''}}">
+  <modal-header></modal-header>
+  <modal-content>
+    <div *ngIf="notebook">
+      <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>
+          </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.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">
-                                <strong class="description">{{item.description}}: &#32;</strong>
-                                <a class="ellipsis" href="{{item.url}}" target="_blank">&#32;{{item.url}}</a>
-                            </p>
-                        </div>
-                        <p *ngIf="notebook.username">Node User: &#32;<strong>{{ notebook.username }}</strong></p>
-                        <p *ngIf="notebook.password">Password: &#32;<strong>{{ notebook.password }}</strong></p>
+        <div class="scroll-box" id="scrolling">
+          <div class="detail-info" *ngIf="!notebook.error_message">
+            <p>Edge Node IP Address {{notebook.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">
+                <strong class="description">{{item.description}}: &#32;</strong>
+                <a class="ellipsis" href="{{item.url}}" target="_blank">&#32;{{item.url}}</a>
+              </p>
+            </div>
+            <p *ngIf="notebook.username">Node User: &#32;<strong>{{ notebook.username }}</strong></p>
+            <p *ngIf="notebook.password">Password: &#32;<strong>{{ notebook.password }}</strong></p>
 
-                        <p class="m-top-30">{{ DICTIONARY.personal_storage }}: &#32;</p>
-                        <div class="links_block">
-                            <p *ngIf="DICTIONARY.cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY.account }}
-                                <strong>{{ notebook.account_name}}</strong></p>
-                            <p *ngIf="notebook.bucket_name">{{ DICTIONARY.container }} <strong>{{ notebook.bucket_name }}</strong></p>
-                        </div>
-                        <p>{{ DICTIONARY.collaboration_storage }}: &#32;</p>
-                        <div class="links_block">
-                            <p *ngIf="DICTIONARY.cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY.account }}
-                                <strong>{{ notebook.shared_account_name}}</strong></p>
-                            <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY.container }}
-                                <strong>{{ notebook.shared_bucket_name }}</strong></p>
-                        </div>
-                        <br />
+            <p class="m-top-30">{{ DICTIONARY.personal_storage }}: &#32;</p>
+            <div class="links_block">
+              <p *ngIf="DICTIONARY.cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY.account }}
+                <strong>{{ notebook.account_name}}</strong></p>
+              <p *ngIf="notebook.bucket_name">{{ DICTIONARY.container }} <strong>{{ notebook.bucket_name }}</strong></p>
+            </div>
+            <p>{{ DICTIONARY.collaboration_storage }}: &#32;</p>
+            <div class="links_block">
+              <p *ngIf="DICTIONARY.cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY.account }}
+                <strong>{{ notebook.shared_account_name}}</strong></p>
+              <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY.container }}
+                <strong>{{ notebook.shared_bucket_name }}</strong></p>
+            </div>
+            <br />
 
-                        <div *ngIf="DICTIONARY.cloud_provider === 'azure' && notebook.datalake_name">
-                            <p>Data Lake Store: &#32;</p>
-                            <div class="links_block">
-                                <p>Data Lake Store Account: &#32;<strong>{{ notebook.datalake_name }}</strong></p>
-                                <p>Personal folder: &#32;<strong>{{ notebook.datalake_directory }}</strong></p>
-                                <p>Collaboration folder: &#32;<strong>{{ notebook.datalake_shared_directory }}</strong></p>
-                            </div>
-                        </div>
+            <div *ngIf="DICTIONARY.cloud_provider === 'azure' && notebook.datalake_name">
+              <p>Data Lake Store: &#32;</p>
+              <div class="links_block">
+                <p>Data Lake Store Account: &#32;<strong>{{ notebook.datalake_name }}</strong></p>
+                <p>Personal folder: &#32;<strong>{{ notebook.datalake_directory }}</strong></p>
+                <p>Collaboration folder: &#32;<strong>{{ notebook.datalake_shared_directory }}</strong></p>
+              </div>
+            </div>
 
-                        <p>
-                            <a href="#/help/accessnotebookguide" target="_blank">
-                                <small class="helper_instruction">
+            <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>
+              </a>
+            </p>
+          </div>
 
-                    <div class="checkbox-group" *ngIf="notebook.image !== 'docker.dlab-zeppelin'; else not_support" [hidden]="notebook.status !== 'running'">
-                        <label>
+          <div class="checkbox-group" *ngIf="notebook.image !== 'docker.dlab-zeppelin'; else not_support"
+            [hidden]="notebook.status !== 'running'">
+            <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
+            <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
+                </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)="bindDialog.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>
+          </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)="bindDialog.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>
+          <label>Terminal: </label>
+          <a target="_blank" [routerLink]="['/terminal',  notebook.ip]" mat-raised-button type="button" class="butt action">Open terminal</a>
         </div>
-    </modal-content>
+      </div>
+    </div>
+  </modal-content>
 </modal-dialog>
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts
index 12fecee..0a7bcac 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/index.ts
@@ -20,7 +20,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
+import { RouterModule } from '@angular/router';
 import { ModalModule } from '../../../shared';
 import { MaterialModule } from '../../../shared/material.module';
 import { DetailDialogComponent } from './detail-dialog.component';
@@ -34,6 +34,7 @@ export * from './detail-dialog.component';
     ModalModule,
     FormsModule,
     ReactiveFormsModule,
+    RouterModule,
     MaterialModule,
     DirectivesModule
   ],


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org