You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@submarine.apache.org by li...@apache.org on 2020/09/25 02:24:36 UTC
[submarine] branch master updated: SUBMARINE-631. [WEB] Fix
workbench notebook page
This is an automated email from the ASF dual-hosted git repository.
liuxun pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/submarine.git
The following commit(s) were added to refs/heads/master by this push:
new 1cfc0b1 SUBMARINE-631. [WEB] Fix workbench notebook page
1cfc0b1 is described below
commit 1cfc0b1b375060fdf814ff1e517a2834d7df1ba6
Author: kobe860219 <ko...@gmail.com>
AuthorDate: Thu Sep 24 10:39:46 2020 +0800
SUBMARINE-631. [WEB] Fix workbench notebook page
### What is this PR for?
Current submarine not support multi-user. So fix workbench notebook page to just use "default" namespace.
### What type of PR is it?
[Improvement]
### Todos
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-631
### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine/builds/729541287
### Screenshots (if appropriate)
### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Author: kobe860219 <ko...@gmail.com>
Closes #409 from kobe860219/SUBMARINE-631 and squashes the following commits:
80e4b01 [kobe860219] SUBMARINE-631. [WEB] Fix workbench notebook page
4786cb6 [kobe860219] SUBMARINE-631. [WEB] Fix workbench notebook page
bb3e125 [kobe860219] SUBMARINE-631. [WEB] Fix workbench notebook page
0fa827e [kobe860219] SUBMARINE-631. [WEB] Fix workbench notebook page
e9fc616 [kobe860219] SUBMARINE-631. [WEB] Fix workbench notebook page
---
.../apache/submarine/integration/notebookIT.java | 2 +-
.../environment/environment.component.html | 22 +++++------
.../experiment-customized-form.component.html | 19 ++++-----
.../experiment-customized-form.component.ts | 2 +-
.../experiment-info/experiment-info.component.html | 4 +-
.../experiment-info/outputs/outputs.component.html | 2 +-
.../workbench/experiment/experiment.component.html | 10 ++---
.../workbench/notebook/notebook.component.html | 46 +++++++++++-----------
.../pages/workbench/notebook/notebook.component.ts | 28 ++++---------
9 files changed, 60 insertions(+), 75 deletions(-)
diff --git a/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/notebookIT.java b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/notebookIT.java
index af24ae6..ff5290a 100644
--- a/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/notebookIT.java
+++ b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/notebookIT.java
@@ -68,7 +68,7 @@ public class notebookIT extends AbstractSubmarineIT {
pollingWait(By.xpath("//button[@id='envVar-btn']"), MAX_BROWSER_TIMEOUT_SEC).click();
pollingWait(By.xpath("//input[@name='key0']"), MAX_BROWSER_TIMEOUT_SEC).sendKeys("testKey0");
pollingWait(By.xpath("//input[@name='value0']"), MAX_BROWSER_TIMEOUT_SEC).sendKeys("testValue0");
- pollingWait(By.xpath("//button[@id='go']"), MAX_BROWSER_TIMEOUT_SEC).click();
+ pollingWait(By.xpath("//button[@id='create-btn']"), MAX_BROWSER_TIMEOUT_SEC).click();
/*
Future add k8s test.
Assert.assertEquals(pollingWait(By.xpath("//td[contains(., 'test-nb')]"), MAX_BROWSER_TIMEOUT_SEC).isDisplayed(), true);
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.html
index f750614..b61942c 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.html
@@ -17,7 +17,7 @@
~ under the License.
-->
-<nz-layout style="margin: -24px -24px 16px">
+<nz-layout style="margin: -24px -24px 16px;">
<nz-layout class="inner-layout">
<div id="environmentOuter">
<nz-breadcrumb>
@@ -44,7 +44,7 @@
<div align="right">
<nz-input-group
nzSearch
- style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px"
+ style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px;"
[nzAddOnAfter]="suffixIconButton"
>
<input type="text" nz-input placeholder="input search text" />
@@ -57,7 +57,7 @@
nz-button
id="createEnvironment"
nzType="primary"
- style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px"
+ style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px;"
(click)="initEnvForm()"
>
<i nz-icon nzType="plus"></i>
@@ -67,7 +67,7 @@
nz-button
id="deleteEnvironment"
nzType="primary"
- style="margin-bottom: 15px; margin-top: 15px"
+ style="margin-bottom: 15px; margin-top: 15px;"
nz-popconfirm
nzTitle="Confirm to delete?"
nzCancelText="Cancel"
@@ -161,7 +161,7 @@
<input required nz-input type="text" name="channel{{ i }}" id="channel{{ i }}" [formControlName]="i" />
<i
nz-icon
- style="margin-left: 5px"
+ style="margin-left: 5px;"
nzType="close-circle"
nzTheme="fill"
(click)="deleteItem(channels, i)"
@@ -169,10 +169,10 @@
</div>
</div>
</div>
- <div style="margin: 10px">
+ <div style="margin: 10px;">
<button
nz-button
- style="display: block; margin: auto"
+ style="display: block; margin: auto;"
id="addChannel-btn"
type="default"
(click)="addChannel()"
@@ -194,7 +194,7 @@
/>
<i
nz-icon
- style="margin-left: 5px"
+ style="margin-left: 5px;"
nzType="close-circle"
nzTheme="fill"
(click)="deleteItem(dependencies, i)"
@@ -202,11 +202,11 @@
</div>
</div>
</div>
- <div style="margin: 10px">
+ <div style="margin: 10px;">
<button
- style="margin-top: 10px"
+ style="margin-top: 10px;"
nz-button
- style="display: block; margin: auto"
+ style="display: block; margin: auto;"
id="addDep-btn"
type="default"
(click)="addDependencies()"
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.html
index 8b2b58e..5d85b7a 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.html
@@ -26,7 +26,7 @@
</div>
<div>
<form [formGroup]="experiment">
- <div [ngSwitch]="step" style="margin-top: 30px">
+ <div [ngSwitch]="step" style="margin-top: 30px;">
<div *ngSwitchCase="0" id="firstStep">
<div class="single-field-group">
<label for="experimentName">
@@ -64,12 +64,7 @@
<span class="red-star">*</span>
Image
</label>
- <nz-select
- nzShowSearch
- [nzDropdownRender]="renderTemplate"
- formControlName="image"
- id="image"
- >
+ <nz-select nzShowSearch [nzDropdownRender]="renderTemplate" formControlName="image" id="image">
<nz-option *ngFor="let image of imageList" [nzValue]="image" [nzLabel]="image"></nz-option>
</nz-select>
<ng-template #renderTemplate>
@@ -83,10 +78,10 @@
</div>
</ng-template>
</div>
- <div style="margin-bottom: 10px">
+ <div style="margin-bottom: 10px;">
<button
nz-button
- style="display: block; margin: auto"
+ style="display: block; margin: auto;"
id="advancedBtn"
nzType="default"
(click)="ADVANCED = !ADVANCED"
@@ -108,11 +103,11 @@
<ul formArrayName="envs" class="list-container">
<ng-container *ngFor="let env of envs.controls; index as i">
<li [formGroupName]="i" class="input-group">
- <div style="margin-left: 30%">
+ <div style="margin-left: 30%;">
<label for="key{{ i }}">Key</label>
<input nz-input name="key{{ i }}" placeholder="Key" formControlName="key" id="key{{ i }}" />
</div>
- <div style="margin-left: 0">
+ <div style="margin-left: 0;">
<label for="value{{ i }}">Value</label>
<input nz-input name="value{{ i }}" placeholder="Value" formControlName="value" id="value{{ i }}" />
</div>
@@ -132,7 +127,7 @@
</div>
</ng-container>
</ul>
- <button nz-button id="env-btn" style="display: block; margin: auto" nzType="primary" (click)="onCreateEnv()">
+ <button nz-button id="env-btn" style="display: block; margin: auto;" nzType="primary" (click)="onCreateEnv()">
Add new environment variable
</button>
</div>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.ts
index 2a8b8a4..80440fa 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-customized-form/experiment-customized-form.component.ts
@@ -47,7 +47,7 @@ export class ExperimentCustomizedFormComponent implements OnInit, OnDestroy {
// TODO: Fetch all images from submarine server
imageIndex = 0;
- defaultImage = 'gcr.io/kubeflow-ci/tf-mnist-with-summaries:1.0'
+ defaultImage = 'gcr.io/kubeflow-ci/tf-mnist-with-summaries:1.0';
imageList = [this.defaultImage];
// Constants
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
index 699523a..781ca67 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/experiment-info.component.html
@@ -19,7 +19,7 @@
<nz-table
*ngIf="!isLoading"
- style="margin-top: 10px"
+ style="margin-top: 10px;"
id="experimentTable"
#basicTable
[nzData]="[experimentInfo]"
@@ -77,7 +77,7 @@
</tbody>
</nz-table>
<nz-spin *ngIf="isLoading"></nz-spin>
-<div style="background-color: white">
+<div style="background-color: white;">
<nz-select id="nzSelect_selectPod" [(ngModel)]="selectedPod">
<nz-option *ngFor="let pod of podNameArr" [nzValue]="pod" [nzLabel]="pod"></nz-option>
</nz-select>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
index 81889d8..4ee4d33 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment-info/outputs/outputs.component.html
@@ -18,5 +18,5 @@
-->
<div id="showLogDiv">
- <p style="white-space: nowrap" *ngFor="let log of podLog; let j = index">[{{ j }}] {{ log }}</p>
+ <p style="white-space: nowrap;" *ngFor="let log of podLog; let j = index">[{{ j }}] {{ log }}</p>
</div>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
index b23e2c4..21b11a4 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.html
@@ -17,7 +17,7 @@
~ under the License.
-->
-<nz-layout style="margin: -24px -24px 16px">
+<nz-layout style="margin: -24px -24px 16px;">
<nz-layout class="inner-layout">
<div id="experimentOuter">
<nz-breadcrumb>
@@ -49,7 +49,7 @@
</nz-radio-group>
<nz-input-group
nzSearch
- style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px"
+ style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px;"
[nzAddOnAfter]="suffixIconButton"
>
<input type="text" nz-input placeholder="input search text" />
@@ -62,7 +62,7 @@
nz-button
id="openExperiment"
nzType="primary"
- style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px"
+ style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px;"
(click)="initModal('create')"
>
<i nz-icon nzType="plus"></i>
@@ -71,7 +71,7 @@
<button
nz-button
nzType="primary"
- style="margin-bottom: 15px; margin-top: 15px"
+ style="margin-bottom: 15px; margin-top: 15px;"
nz-popconfirm
nzTitle="Confirm to delete?"
nzCancelText="Cancel"
@@ -170,7 +170,7 @@
>
{{ modalProps.okText }}
</button>
- <button *ngIf="modalProps.currentStep > 0" nz-button nzType="default" style="float: left" (click)="prevForm()">
+ <button *ngIf="modalProps.currentStep > 0" nz-button nzType="default" style="float: left;" (click)="prevForm()">
Prev Step
</button>
</div>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.html
index 795e286..906ae47 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.html
@@ -39,14 +39,17 @@
<div id="notebookDiv">
<div nz-row>
<div nz-col nzSpan="12">
+ <h2>Notebook List</h2>
+ <!--
<label style="font-size: large; color: black;">Namespaces :</label>
- <nz-select style="margin-left: 5px; width: 240px;" [(ngModel)]="currentNamespace">
+ <nz-select disabled="disabled" style="margin-left: 5px; width: 240px;" [(ngModel)]="currentNamespace">
<nz-option [nzValue]="currentNamespace" [nzLabel]="currentNamespace"></nz-option>
</nz-select>
+ -->
</div>
<div nz-col nzSpan="12" align="right">
<nz-input-group nzSearch style="width: 300px; margin-right: 5px;" [nzAddOnAfter]="suffixIconButton">
- <input type="text" nz-input placeholder="input search text" />
+ <input type="text" nz-input id="searchInput" placeholder="input search text" />
</nz-input-group>
<ng-template #suffixIconButton>
<button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
@@ -64,7 +67,7 @@
</div>
</div>
<div>
- <nz-table style="padding-top: 5px;" #basicTable [nzData]="notebookTable">
+ <nz-table id="notebookListTable" style="padding-top: 5px;" #basicTable [nzData]="allNotebookList">
<thead>
<tr>
<th>Name</th>
@@ -86,7 +89,7 @@
{{ data.spec.spec.resources }}
</td>
<td>{{ data.status }}</td>
- <td><a (click)="deleteNotebook(data.notebookId)">Delete</a></td>
+ <td><a id="delete{{ i }}" (click)="deleteNotebook(data.notebookId)">Delete</a></td>
</tr>
</tbody>
</nz-table>
@@ -104,7 +107,7 @@
<form [formGroup]="notebookForm">
<div *nzModalFooter>
<button nz-button nzType="default" (click)="isVisible = false">Cancel</button>
- <button id="go" nz-button nzType="primary" [disabled]="checkStatus()" (click)="handleOk()">
+ <button id="create-btn" nz-button nzType="primary" [disabled]="checkStatus()" (click)="handleOk()">
Create
</button>
</div>
@@ -117,26 +120,17 @@
<input nz-input required type="text" name="notebookName" id="notebookName" formControlName="notebookName" />
</div>
<div class="newNotebookForm">
- <label for="namespace">
- <span class="red-star">*</span>
- Namespace
- </label>
- <input
- nz-input
- [(ngModel)]="currentNamespace"
- disabled="disabled"
- name="namespace"
- id="namespace"
- formControlName="namespace"
- />
- </div>
- <div class="newNotebookForm">
<label for="environment">
<span class="red-star">*</span>
Environment
</label>
<nz-select required name="select-envName" formControlName="envName">
- <nz-option *ngFor="let env of envNameList" [nzValue]="env" [nzLabel]="env"></nz-option>
+ <nz-option
+ *ngFor="let env of envNameList; let i; of: index"
+ id="env{{ i }}"
+ [nzValue]="env"
+ [nzLabel]="env"
+ ></nz-option>
</nz-select>
</div>
<div class="newNotebookForm">
@@ -158,7 +152,7 @@
Memory
</label>
<div class="memory-input-group">
- <input nz-input required name="memoryNum" formControlName="memoryNum" />
+ <input nz-input required name="memoryNum" placeholder="EX:1024" formControlName="memoryNum" />
<nz-select formControlName="unit">
<nz-option *ngFor="let unit of MEMORY_UNITS" [nzValue]="unit" [nzLabel]="unit"></nz-option>
</nz-select>
@@ -169,10 +163,18 @@
<div [formGroupName]="i" class="newNotebookForm">
<label for="envVar{{ i }}">EnvVar {{ i + 1 }}</label>
<div>
- <input style="width: 30%;" nz-input name="key{{ i }}" placeholder="Key" formControlName="key" />
+ <input
+ style="width: 30%;"
+ nz-input
+ id="key{{ i }}"
+ name="key{{ i }}"
+ placeholder="Key"
+ formControlName="key"
+ />
<input
style="width: 50%; margin-left: 10px;"
nz-input
+ id="value{{ i }}"
name="value{{ i }}"
placeholder="Value"
formControlName="value"
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.ts
index 6c4d5ca..8c65912 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.ts
@@ -57,7 +57,6 @@ export class NotebookComponent implements OnInit {
ngOnInit() {
this.notebookForm = new FormGroup({
notebookName: new FormControl(null, Validators.required),
- namespace: new FormControl(this.currentNamespace),
envName: new FormControl(null, Validators.required), // Environment
envVars: new FormArray([], [this.experimentValidatorService.nameValidatorFactory('key')]),
cpus: new FormControl(null, [Validators.min(1), Validators.required]),
@@ -85,23 +84,10 @@ export class NotebookComponent implements OnInit {
fetchNotebookList() {
this.notebookService.fetchNotebookList().subscribe((list) => {
this.allNotebookList = list;
- this.currentNamespace = 'default';
- this.notebookTable = [];
- this.allNotebookList.forEach((item) => {
- if (item.spec.meta.namespace == this.currentNamespace) {
- this.notebookTable.push(item);
- }
- });
-
- // Get namespaces
- //this.getAllNamespaces();
-
- // Set default namespace and table
- //this.setDefaultTable();
});
}
- // Future work. If we need a api for get all namespaces.
+ /* (Future work. If we need a api for get all namespaces.)
getAllNamespaces() {
this.allNotebookList.forEach((element) => {
if (this.allNamespaceList.indexOf(element.spec.meta.namespace) < 0) {
@@ -109,8 +95,10 @@ export class NotebookComponent implements OnInit {
}
});
}
+ */
// Future work. If we have a api for get all namespaces.
+ /*
setDefaultTable() {
this.currentNamespace = this.allNamespaceList[0];
this.notebookTable = [];
@@ -120,6 +108,7 @@ export class NotebookComponent implements OnInit {
}
});
}
+ */
// Future work. If we have a api for get all namespaces.
switchNamespace(namespace: string) {
@@ -160,9 +149,6 @@ export class NotebookComponent implements OnInit {
get notebookName() {
return this.notebookForm.get('notebookName');
}
- get namespace() {
- return this.notebookForm.get('namespace');
- }
get envName() {
return this.notebookForm.get('envName');
}
@@ -252,7 +238,7 @@ export class NotebookComponent implements OnInit {
const newNotebookSpec = {
meta: {
name: this.notebookForm.get('notebookName').value,
- namespace: this.notebookForm.get('namespace').value
+ namespace: 'default'
},
environment: {
name: this.notebookForm.get('envName').value
@@ -269,10 +255,12 @@ export class NotebookComponent implements OnInit {
}
}
+ // console.log(newNotebookSpec);
+
// Post
this.notebookService.createNotebook(newNotebookSpec).subscribe({
next: (result) => {
- this.updateNotebookTable();
+ this.fetchNotebookList();
},
error: (msg) => {
this.nzMessageService.error(`${msg}, please try again`, {
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@submarine.apache.org
For additional commands, e-mail: dev-help@submarine.apache.org