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 b00e5aa SUBMARINE-498. [WEB] Add notebook module to workbench with
Angular
b00e5aa is described below
commit b00e5aae4544536aca8f4fbcbbd1634499e58c8e
Author: kobe860219 <[email protected]>
AuthorDate: Wed May 20 11:59:32 2020 +0800
SUBMARINE-498. [WEB] Add notebook module to workbench with Angular
### What is this PR for?
Add notebook module into workbench with angular by importing
ngx-monaco-editor.
Currently is functional presentation.
### What type of PR is it?
[Feature]
### Todos
* [ ] - Task
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-498
### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine
### 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 <[email protected]>
Closes #291 from kobe860219/SUBMARINE-498 and squashes the following
commits:
ff623e6 [kobe860219] Fix code style
31d57ab [kobe860219] Rename testcase in notebookIT file
44e6512 [kobe860219] SUBMARINE-498. [WEB] Add notebook module to workbench
with Angular
---
.../apache/submarine/integration/notebookIT.java | 60 ++++++++++++++
submarine-workbench/workbench-web-ng/angular.json | 5 +-
submarine-workbench/workbench-web-ng/package.json | 1 +
.../workbench-web-ng/src/app/app.module.ts | 4 +-
.../workbench/notebook/notebook-routing.module.ts | 35 ++++++++
.../workbench/notebook/notebook.component.html | 93 ++++++++++++++++++++++
.../workbench/notebook/notebook.component.scss | 30 +++++++
.../pages/workbench/notebook/notebook.component.ts | 75 +++++++++++++++++
.../pages/workbench/notebook/notebook.module.ts | 39 +++++++++
.../pages/workbench/workbench-routing.module.ts | 4 +
.../src/app/pages/workbench/workbench.component.ts | 5 ++
11 files changed, 349 insertions(+), 2 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
new file mode 100644
index 0000000..2c8b52e
--- /dev/null
+++
b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/notebookIT.java
@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+package org.apache.submarine.integration;
+
+import org.apache.submarine.AbstractSubmarineIT;
+import org.apache.submarine.WebDriverManager;
+import org.apache.submarine.SubmarineITUtils;
+import org.openqa.selenium.By;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.testng.annotations.AfterClass;
+import org.testng.annotations.BeforeClass;
+import org.testng.annotations.Test;
+import org.testng.Assert;
+
+public class notebookIT extends AbstractSubmarineIT {
+
+ public final static Logger LOG = LoggerFactory.getLogger(notebookIT.class);
+
+ @BeforeClass
+ public static void startUp(){
+ LOG.info("[Testcase]: notebookIT");
+ driver = WebDriverManager.getWebDriver();
+ }
+
+ @AfterClass
+ public static void tearDown(){
+ driver.quit();
+ }
+
+ @Test
+ public void notebookNavigation() throws Exception {
+ // Login
+ LOG.info("Login");
+ pollingWait(By.cssSelector("input[ng-reflect-name='userName']"),
MAX_BROWSER_TIMEOUT_SEC).sendKeys("admin");
+ pollingWait(By.cssSelector("input[ng-reflect-name='password']"),
MAX_BROWSER_TIMEOUT_SEC).sendKeys("admin");
+ clickAndWait(By.cssSelector("button[class='login-form-button ant-btn
ant-btn-primary']"));
+ pollingWait(By.cssSelector("a[routerlink='/workbench/dashboard']"),
MAX_BROWSER_TIMEOUT_SEC);
+
+ // Routing to Notebook
+ pollingWait(By.xpath("//span[contains(text(), \"Notebook\")]"),
MAX_BROWSER_TIMEOUT_SEC).click();
+ Assert.assertEquals(driver.getCurrentUrl(),
"http://localhost:8080/workbench/notebook";);
+
+ }
+}
diff --git a/submarine-workbench/workbench-web-ng/angular.json
b/submarine-workbench/workbench-web-ng/angular.json
index b8ea29d..a1dab11 100644
--- a/submarine-workbench/workbench-web-ng/angular.json
+++ b/submarine-workbench/workbench-web-ng/angular.json
@@ -30,7 +30,10 @@
"glob": "**/*",
"input":
"./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
- }
+ },
+ { "glob": "**/*",
+ "input": "./node_modules/ngx-monaco-editor/assets/monaco",
+ "output": "/assets/monaco/" }
],
"styles": [
"src/theme.less",
diff --git a/submarine-workbench/workbench-web-ng/package.json
b/submarine-workbench/workbench-web-ng/package.json
index 7e944dd..138098d 100644
--- a/submarine-workbench/workbench-web-ng/package.json
+++ b/submarine-workbench/workbench-web-ng/package.json
@@ -26,6 +26,7 @@
"lodash": "^4.17.15",
"md5": "^2.2.1",
"ng-zorro-antd": "8.1.2",
+ "ngx-monaco-editor": "^8.0.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
diff --git a/submarine-workbench/workbench-web-ng/src/app/app.module.ts
b/submarine-workbench/workbench-web-ng/src/app/app.module.ts
index 64acdb4..ef596da 100644
--- a/submarine-workbench/workbench-web-ng/src/app/app.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { zh_CN, NgZorroAntdModule, NZ_I18N } from
'ng-zorro-antd';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IconsProviderModule } from './icons-provider.module';
+import { MonacoEditorModule } from 'ngx-monaco-editor';
registerLocaleData(zh);
@@ -42,7 +43,8 @@ registerLocaleData(zh);
NgZorroAntdModule,
FormsModule,
HttpClientModule,
- BrowserAnimationsModule
+ BrowserAnimationsModule,
+ MonacoEditorModule.forRoot()
],
providers: [{ provide: NZ_I18N, useValue: zh_CN }, LocalStorageService],
bootstrap: [AppComponent]
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook-routing.module.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook-routing.module.ts
new file mode 100644
index 0000000..a4a15a0
--- /dev/null
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook-routing.module.ts
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NotebookComponent } from './notebook.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: NotebookComponent
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class NotebookRoutingModule {}
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
new file mode 100644
index 0000000..edd8276
--- /dev/null
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.html
@@ -0,0 +1,93 @@
+<!--
+ ~ 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 id="notebookDiv" *ngIf="!isEditing">
+ <div id="searchRegin" align="right">
+ <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
+ <nz-form-item>
+ <nz-form-label>Notebook Name</nz-form-label>
+ <nz-form-control>
+ <input nz-input placeholder="Notebook name..."
formControlName="notebookName" />
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-control>
+ <button id="searchBtn" nz-button nzType="primary">
+ <i nz-icon nzType="search"></i>
+ Query
+ </button>
+ <button id="newBtn" nz-button nzType="primary" style="margin-left:
8px;">
+ <i nz-icon nzType="plus"></i>
+ New Notebook
+ </button>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+ </div>
+ <div id="notebookTable">
+ <nz-table #notebookListTable [nzData]="notebookList">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Creator</th>
+ <th>Create Time</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let notebook of notebookListTable.data; let i; of: index">
+ <td>{{ notebook.name }}</td>
+ <td>{{ notebook.createBy }}</td>
+ <td>{{ notebook.createTime }}</td>
+ <td>
+ <a id="edit{{ i }}" (click)="edit(notebook)">
+ <i nz-icon nzType="edit" nzTheme="outline"></i>
+ Edit
+ </a>
+ <nz-divider nzType="vertical"></nz-divider>
+ <a id="delete{{ i }}">
+ <i nz-icon nzType="delete" nzTheme="outline"></i>
+ Delete
+ </a>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+</div>
+
+<div *ngIf="isEditing">
+ <div style="background-color: white;">
+ <button id="btnRun" class="actionBar" nz-button nzType="primary">
+ <i nz-icon nzType="caret-right" nzTheme="outline"></i>
+ Run
+ </button>
+ <button id="btnSave" class="actionBar" nz-button nzType="primary"
(click)="saveNotebook()">
+ <i nz-icon nzType="save" nzTheme="outline"></i>
+ Save
+ </button>
+ <button id="btnDelete" class="actionBar" nz-button nzType="danger">
+ <i nz-icon nzType="delete" nzTheme="outline"></i>
+ Delete
+ </button>
+ </div>
+ <div style="margin-top: 5px; background-color: white; height: 500px;">
+ <ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"
style="height: 500px;"></ngx-monaco-editor>
+ </div>
+</div>
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.scss
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.scss
new file mode 100644
index 0000000..1c7e06c
--- /dev/null
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.scss
@@ -0,0 +1,30 @@
+/*!
+ * 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.
+ */
+
+#searchRegin {
+ background-color: white;
+}
+
+#notebookTable {
+ background-color: white;
+}
+
+.actionBar {
+ margin: 10px;
+}
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
new file mode 100644
index 0000000..ba3cf1a
--- /dev/null
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.component.ts
@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+ selector: 'submarine-notebook',
+ templateUrl: './notebook.component.html',
+ styleUrls: ['./notebook.component.scss']
+})
+export class NotebookComponent implements OnInit {
+ isEditing = false;
+ notebookList = [{ name: 'Notebook', createTime: '2020-05-16 20:00:00',
createBy: 'Someone' }];
+
+ //search
+ notebookName: string = '';
+ searchForm: FormGroup;
+
+ //editor
+ editorOptions = { theme: 'vs-dark', language: 'python' };
+ code: string = `from tensorflow.examples.tutorials.mnist import input_data
+ import numpy as np
+
+ mnist = input_data.read_data_sets("MNIST_data/", one_hot = True)
+ x_train = mnist.train.images
+ y_train = mnist.train.labels
+ x_test = mnist.test.images
+ y_test = mnist.test.labels
+
+ print(x_train.shape)
+ print(y_train.shape)
+ print(x_test.shape)
+ print(y_test.shape)
+ print("---")
+
+ #print(x_train[1, :])
+ print(np.argmax(y_train[1, :]))`;
+
+ constructor(private fb: FormBuilder, private message: NzMessageService) {}
+
+ ngOnInit() {
+ this.message.warning('Notebook is in developing', { nzDuration: 5000 });
+
+ this.searchForm = this.fb.group({
+ notebookName: [this.notebookName]
+ });
+ }
+
+ edit(notebook) {
+ this.isEditing = true;
+ }
+
+ saveNotebook() {
+ this.isEditing = false;
+ this.message.success('Save notebook success!');
+ }
+}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.module.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.module.ts
new file mode 100644
index 0000000..a16ba05
--- /dev/null
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/notebook/notebook.module.ts
@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NotebookComponent } from './notebook.component';
+import { NotebookRoutingModule } from './notebook-routing.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MonacoEditorModule } from 'ngx-monaco-editor';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+
+@NgModule({
+ declarations: [NotebookComponent],
+ imports: [
+ CommonModule,
+ NotebookRoutingModule,
+ MonacoEditorModule,
+ FormsModule,
+ ReactiveFormsModule,
+ NgZorroAntdModule
+ ]
+})
+export class NotebookModule {}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench-routing.module.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench-routing.module.ts
index de8591c..2f72ef1 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench-routing.module.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench-routing.module.ts
@@ -64,6 +64,10 @@ const routes: Routes = [
{
path: 'manager',
loadChildren: () => import('./manager/manager.module').then((m) =>
m.ManagerModule)
+ },
+ {
+ path: 'notebook',
+ loadChildren: () => import('./notebook/notebook.module').then((m) =>
m.NotebookModule)
}
]
}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.ts
index 70e1b99..86aeef0 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.ts
@@ -55,6 +55,11 @@ export class WorkbenchComponent implements OnInit {
routerLink: '/workbench/workspace'
},
{
+ title: 'Notebook',
+ iconType: 'book',
+ routerLink: '/workbench/notebook'
+ },
+ {
title: 'Interpreter',
iconType: 'api',
routerLink: '/workbench/interpreter'
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
