You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@submarine.apache.org by zh...@apache.org on 2020/02/05 07:23:53 UTC

[submarine] branch master updated: Submarine-368. [WEB] Add items to the sidebar with Angular

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

zhouquan 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 b92e829  Submarine-368. [WEB] Add items to the sidebar with Angular
b92e829 is described below

commit b92e8297d7fbb4acff2c55a6c7a303b6f4e7b5f5
Author: kevin85421 <b0...@ntu.edu.tw>
AuthorDate: Tue Feb 4 16:05:37 2020 +0800

    Submarine-368. [WEB] Add items to the sidebar with Angular
    
    ### What is this PR for?
    1. The attachment is the sidebar of the version Vue. Our target is implementing a similar sidebar with Angular.
    ![截圖 2020-01-31 下午3 01 00](https://user-images.githubusercontent.com/20109646/73662286-82d27e00-46d6-11ea-980f-136018eaa014.png)
    2. Add E2E unit test cases of the navigation of the sidebar.
    3. Update the E2E test framework to avoid some compilation errors.
    ### What type of PR is it?
    Feature
    
    ### Todos
    
    ### What is the Jira issue?
    https://issues.apache.org/jira/browse/SUBMARINE-368
    
    ### How should this be tested?
    https://travis-ci.org/apache/submarine/builds/645786845?utm_source=github_status&utm_medium=notification
    
    ### Screenshots (if appropriate)
    ![截圖 2020-02-03 下午10 46 39](https://user-images.githubusercontent.com/20109646/73662603-11df9600-46d7-11ea-8ed6-a8a0a0013601.png)
    
    ### Questions:
    * Does the licenses files need an update? No
    * Are there breaking changes for older versions? No
    * Does this needs documentation? No
    
    Author: kevin85421 <b0...@ntu.edu.tw>
    
    Closes #171 from kevin85421/SUBMARINE-368 and squashes the following commits:
    
    122fd26 [kevin85421] SUBMARINE-368. Add Licences
    8b2f894 [kevin85421] SUBMARINE-368. Add E2E unit testcases
    d50761d [kevin85421] SUBMARINE-368. Add items to the sidebar with Angular
---
 .../apache/submarine/FirefoxWebDriverProvider.java |  2 +-
 .../apache/submarine/integration/sidebarIT.java    | 75 ++++++++++++++++++++++
 .../app/pages/workbench/data/data.component.html   | 20 ++++++
 .../data.component.scss}                           | 16 +----
 .../data.component.ts}                             | 24 +++----
 .../app/pages/workbench/home/home.component.html   | 20 ++++++
 .../home.component.scss}                           | 16 +----
 .../home.component.ts}                             | 24 +++----
 .../interpreter/interpreter.component.html         | 20 ++++++
 .../interpreter.component.scss}                    | 16 +----
 .../interpreter.component.ts}                      | 24 +++----
 .../src/app/pages/workbench/job/job.component.html | 20 ++++++
 .../job.component.scss}                            | 16 +----
 .../{workbench.module.ts => job/job.component.ts}  | 24 +++----
 .../app/pages/workbench/model/model.component.html | 20 ++++++
 .../model.component.scss}                          | 16 +----
 .../model.component.ts}                            | 24 +++----
 .../pages/workbench/workbench-routing.module.ts    | 32 ++++++++-
 .../app/pages/workbench/workbench.component.html   | 10 ++-
 .../src/app/pages/workbench/workbench.component.ts | 31 +++++++++
 .../src/app/pages/workbench/workbench.module.ts    | 23 ++++++-
 .../workbench/workspace/workspace.component.html   | 20 ++++++
 .../workspace.component.scss}                      | 16 +----
 .../workspace.component.ts}                        | 24 +++----
 24 files changed, 367 insertions(+), 166 deletions(-)

diff --git a/submarine-test/e2e/src/test/java/org/apache/submarine/FirefoxWebDriverProvider.java b/submarine-test/e2e/src/test/java/org/apache/submarine/FirefoxWebDriverProvider.java
index 5fc01f9..247c3ee 100644
--- a/submarine-test/e2e/src/test/java/org/apache/submarine/FirefoxWebDriverProvider.java
+++ b/submarine-test/e2e/src/test/java/org/apache/submarine/FirefoxWebDriverProvider.java
@@ -125,7 +125,7 @@ public class FirefoxWebDriverProvider implements WebDriverProvider {
     System.setProperty(
         GeckoDriverService.GECKO_DRIVER_EXE_PROPERTY, webDriverPath);
     System.setProperty(
-        FirefoxDriver.SystemProperty.DRIVER_USE_MARIONETTE, "false");
+        FirefoxDriver.SystemProperty.DRIVER_USE_MARIONETTE, "true");
 
     FirefoxOptions firefoxOptions = new FirefoxOptions();
     firefoxOptions.setBinary(ffox);
diff --git a/submarine-test/e2e/src/test/java/org/apache/submarine/integration/sidebarIT.java b/submarine-test/e2e/src/test/java/org/apache/submarine/integration/sidebarIT.java
new file mode 100644
index 0000000..daf44a3
--- /dev/null
+++ b/submarine-test/e2e/src/test/java/org/apache/submarine/integration/sidebarIT.java
@@ -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.
+ */
+
+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 sidebarIT extends AbstractSubmarineIT {
+
+  public final static Logger LOG = LoggerFactory.getLogger(sidebarIT.class);
+
+  @BeforeClass
+  public static void startUp(){
+    driver =  WebDriverManager.getWebDriver();
+  }
+
+  @AfterClass
+  public static void tearDown(){
+    driver.quit();
+  }
+
+  @Test
+  public void sidebarNavigation() 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);
+
+    // Start Routing & Navigation in sidebar 
+    LOG.info("Start Routing & Navigation in sidebar");
+    pollingWait(By.xpath("//span[contains(text(), \"Workspace\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/workspace");
+    pollingWait(By.xpath("//span[contains(text(), \"Interpreter\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/interpreter");
+    pollingWait(By.xpath("//span[contains(text(), \"Job\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/job");
+    pollingWait(By.xpath("//span[contains(text(), \"Data\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/data");
+    pollingWait(By.xpath("//span[contains(text(), \"Model\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/model");
+    pollingWait(By.xpath("//span[contains(text(), \"Manager\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    pollingWait(By.xpath("//a[@href='/workbench/manager/user']"), MAX_BROWSER_TIMEOUT_SEC).click();
+    SubmarineITUtils.sleep( 5000, true);
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/manager/user");
+    pollingWait(By.xpath("//a[@href='/workbench/manager/data-dict']"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/manager/data-dict");
+    pollingWait(By.xpath("//span[contains(text(), \"Home\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+    Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/home"); 
+  }
+}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.html
new file mode 100644
index 0000000..54de2cd
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ 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.
+  -->
+
+<p>data works!</p>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.scss
similarity index 60%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.scss
index c49faca..3d56d22 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -16,17 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
-
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
-})
-export class WorkbenchModule {
-}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.ts
similarity index 61%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.ts
index c49faca..9fa6250 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/data/data.component.ts
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
+import { Component, OnInit } from '@angular/core';
 
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+@Component({
+  selector: 'submarine-data',
+  templateUrl: './data.component.html',
+  styleUrls: ['./data.component.scss']
 })
-export class WorkbenchModule {
+export class DataComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.html
new file mode 100644
index 0000000..7146501
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ 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.
+  -->
+
+<p>home works!</p>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.scss
similarity index 60%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.scss
index c49faca..3d56d22 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -16,17 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
-
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
-})
-export class WorkbenchModule {
-}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.ts
similarity index 61%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.ts
index c49faca..6e69b43 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/home/home.component.ts
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
+import { Component, OnInit } from '@angular/core';
 
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+@Component({
+  selector: 'submarine-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
 })
-export class WorkbenchModule {
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.html
new file mode 100644
index 0000000..598b5fa
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ 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.
+  -->
+
+<p>interpreter works!</p>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.scss
similarity index 60%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.scss
index c49faca..3d56d22 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -16,17 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
-
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
-})
-export class WorkbenchModule {
-}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.ts
similarity index 61%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.ts
index c49faca..4a3ab30 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/interpreter/interpreter.component.ts
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
+import { Component, OnInit } from '@angular/core';
 
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+@Component({
+  selector: 'submarine-interpreter',
+  templateUrl: './interpreter.component.html',
+  styleUrls: ['./interpreter.component.scss']
 })
-export class WorkbenchModule {
+export class InterpreterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.html
new file mode 100644
index 0000000..fcc2676
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ 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.
+  -->
+
+<p>job works!</p>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.scss
similarity index 60%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.scss
index c49faca..3d56d22 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -16,17 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
-
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
-})
-export class WorkbenchModule {
-}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.ts
similarity index 61%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.ts
index c49faca..985fece 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/job/job.component.ts
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
+import { Component, OnInit } from '@angular/core';
 
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+@Component({
+  selector: 'submarine-job',
+  templateUrl: './job.component.html',
+  styleUrls: ['./job.component.scss']
 })
-export class WorkbenchModule {
+export class JobComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.html
new file mode 100644
index 0000000..d07e9c1
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ 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.
+  -->
+
+<p>model works!</p>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.scss
similarity index 60%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.scss
index c49faca..3d56d22 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -16,17 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
-
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
-})
-export class WorkbenchModule {
-}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.ts
similarity index 61%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.ts
index c49faca..2489c69 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/model/model.component.ts
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
+import { Component, OnInit } from '@angular/core';
 
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+@Component({
+  selector: 'submarine-model',
+  templateUrl: './model.component.html',
+  styleUrls: ['./model.component.scss']
 })
-export class WorkbenchModule {
+export class ModelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
 }
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 3c23d98..c9a5579 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
@@ -20,6 +20,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { WorkbenchComponent } from '@submarine/pages/workbench/workbench.component';
+import { DataComponent } from './data/data.component';
+import { HomeComponent } from './home/home.component';
+import { InterpreterComponent } from './interpreter/interpreter.component';
+import { JobComponent } from './job/job.component';
+import { ModelComponent } from './model/model.component';
+import { WorkspaceComponent } from './workspace/workspace.component';
 
 const routes: Routes = [
   {
@@ -29,7 +35,31 @@ const routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'manager'
+        redirectTo: 'home'
+      },
+      {
+        path: 'home',
+        component: HomeComponent
+      },
+      {
+        path: 'workspace',
+        component: WorkspaceComponent
+      },
+      {
+        path: 'interpreter',
+        component: InterpreterComponent
+      },
+      {
+        path: 'job',
+        component: JobComponent
+      },
+      {
+        path: 'data',
+        component: DataComponent
+      },
+      {
+        path: 'model',
+        component: ModelComponent
       },
       {
         path: 'manager',
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.html
index f5b21c1..59dd8bd 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.html
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.component.html
@@ -33,18 +33,16 @@
   </div>
   <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
     <ng-container *ngFor="let menu of menus">
-      <li *ngIf="menu.children" nz-submenu nzOpen [nzTitle]="menu.title" [nzIcon]="menu.iconType">
+      <li *ngIf="menu.children" nz-submenu [nzTitle]="menu.title" [nzIcon]="menu.iconType">
         <ul>
           <li nz-menu-item nzMatchRouter *ngFor="let subItem of menu.children">
             <a [routerLink]="subItem.routerLink">{{ subItem.title }}</a>
           </li>
         </ul>
       </li>
-      <li *ngIf="!menu.children" nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="menu.title" nzMatchRouter>
-        <i nz-icon [nzType]="menu.iconType"></i>
-        <span>
-          <a [routerLink]="menu.routerLink">{{ menu.title }}</a>
-        </span>
+      <li *ngIf="!menu.children" nz-menu-item nz-tooltip [nzTitle]="menu.title" nzPlacement="right" nzMatchRouter [routerLink]="menu.routerLink">
+          <i nz-icon [nzType]="menu.iconType"></i>
+          <span>{{ menu.title }}</span>
       </li>
     </ng-container>
   </ul>
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 62732e2..cd82b6e 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
@@ -42,8 +42,39 @@ interface SidebarMenu {
 })
 export class WorkbenchComponent implements OnInit {
   isCollapsed: boolean = false;
+  highlighted: boolean = true;
   menus: SidebarMenu[] = [
     {
+      title: 'Home',
+      iconType: 'home',
+      routerLink: '/workbench/home'
+    },
+    {
+      title: 'Workspace',
+      iconType: 'desktop',
+      routerLink: '/workbench/workspace'
+    },
+    {
+      title: 'Interpreter',
+      iconType: 'api',
+      routerLink: '/workbench/interpreter'
+    },
+    {
+      title: 'Job',
+      iconType: 'cluster',
+      routerLink: '/workbench/job'
+    },
+    {
+      title: 'Data',
+      iconType: 'bar-chart',
+      routerLink: '/workbench/data'
+    },
+    {
+      title: 'Model',
+      iconType: 'experiment',
+      routerLink: '/workbench/model'
+    },
+    {
       title: 'Manager',
       iconType: 'setting',
       children: [
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
index c49faca..801a07c 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
@@ -22,11 +22,30 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { DataComponent } from './data/data.component';
+import { HomeComponent } from './home/home.component';
+import { InterpreterComponent } from './interpreter/interpreter.component';
+import { JobComponent } from './job/job.component';
+import { ModelComponent } from './model/model.component';
 import { WorkbenchComponent } from './workbench.component';
+import { WorkspaceComponent } from './workspace/workspace.component';
 
 @NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+  declarations: [
+    WorkbenchComponent,
+    HomeComponent,
+    WorkspaceComponent,
+    InterpreterComponent,
+    JobComponent,
+    DataComponent,
+    ModelComponent
+  ],
+  imports: [
+    CommonModule,
+    WorkbenchRoutingModule,
+    NgZorroAntdModule,
+    RouterModule
+  ]
 })
 export class WorkbenchModule {
 }
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.html b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.html
new file mode 100644
index 0000000..a2d50dc
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ 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.
+  -->
+
+<p>workspace works!</p>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.scss
similarity index 60%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.scss
index c49faca..3d56d22 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -16,17 +16,3 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
-
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
-})
-export class WorkbenchModule {
-}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.ts
similarity index 61%
copy from submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
copy to submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.ts
index c49faca..6da6c40 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workbench.module.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/workspace.component.ts
@@ -1,4 +1,4 @@
-/*
+/*!
  * 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
@@ -17,16 +17,18 @@
  * under the License.
  */
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { WorkbenchRoutingModule } from '@submarine/pages/workbench/workbench-routing.module';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { WorkbenchComponent } from './workbench.component';
+import { Component, OnInit } from '@angular/core';
 
-@NgModule({
-  declarations: [WorkbenchComponent],
-  imports: [CommonModule, WorkbenchRoutingModule, NgZorroAntdModule, RouterModule]
+@Component({
+  selector: 'submarine-workspace',
+  templateUrl: './workspace.component.html',
+  styleUrls: ['./workspace.component.scss']
 })
-export class WorkbenchModule {
+export class WorkspaceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
 }


---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@submarine.apache.org
For additional commands, e-mail: dev-help@submarine.apache.org