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/07/29 14:02:13 UTC
[submarine] branch master updated: SUBMARINE-582. [WEB] Implement
frontend of environment page in workbench
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 de55582 SUBMARINE-582. [WEB] Implement frontend of environment page in workbench
de55582 is described below
commit de555829b6c46e52fbc6eba7f518b19c1fed8ecb
Author: pingsutw <pi...@gmail.com>
AuthorDate: Tue Jul 28 02:22:11 2020 +0800
SUBMARINE-582. [WEB] Implement frontend of environment page in workbench
### What is this PR for?
Init environment page in workbench
- Add environment in the sidebar
- Add environment table (use mock data)
- Add tests (environmentIT.java)
### What type of PR is it?
[Feature]
### Todos
* [ ] - Task
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-582
### How should this be tested?
https://travis-ci.org/github/pingsutw/hadoop-submarine/builds/712301554
### 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: pingsutw <pi...@gmail.com>
Closes #364 from pingsutw/SUBMARINE-582 and squashes the following commits:
fc1e2cd [pingsutw] Fix test error
91ddbaa [pingsutw] remove unused css
7637835 [pingsutw] Add test
7457e87 [pingsutw] SUBMARINE-582. [WEB] Implement frontend of environment page in workbench
---
.../submarine/integration/environmentIT.java | 64 +++++++++++++
.../environment/environment.component.html | 102 +++++++++++++++++++++
.../environment/environment.component.scss | 98 ++++++++++++++++++++
.../workbench/environment/environment.component.ts | 49 ++++++++++
.../workbench/experiment/experiment.component.ts | 8 +-
.../pages/workbench/workbench-routing.module.ts | 5 +
.../src/app/pages/workbench/workbench.component.ts | 5 +
.../src/app/pages/workbench/workbench.module.ts | 4 +-
8 files changed, 330 insertions(+), 5 deletions(-)
diff --git a/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/environmentIT.java b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/environmentIT.java
new file mode 100644
index 0000000..faa26dc
--- /dev/null
+++ b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/environmentIT.java
@@ -0,0 +1,64 @@
+/*
+ * 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.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 environmentIT extends AbstractSubmarineIT {
+
+ public final static Logger LOG = LoggerFactory.getLogger(experimentIT.class);
+
+ @BeforeClass
+ public static void startUp(){
+ LOG.info("[Testcase]: environmentIT");
+ driver = WebDriverManager.getWebDriver();
+ }
+
+ @AfterClass
+ public static void tearDown(){
+ driver.quit();
+ }
+
+ @Test
+ public void experimentNavigation() 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 workspace
+ LOG.info("url");
+ pollingWait(By.xpath("//span[contains(text(), \"Environment\")]"), MAX_BROWSER_TIMEOUT_SEC).click();
+ Assert.assertEquals(driver.getCurrentUrl(), "http://localhost:8080/workbench/environment");
+
+ // Test create new environment
+ LOG.info("Create new environment");
+ pollingWait(By.xpath("//button[@id='createEnvironment']"), MAX_BROWSER_TIMEOUT_SEC).click();
+ }
+}
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
new file mode 100644
index 0000000..77fe6af
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.html
@@ -0,0 +1,102 @@
+<!--
+ ~ 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.
+ -->
+
+<nz-layout style="margin: -24px -24px 16px;">
+ <nz-layout class="inner-layout">
+ <div id="environmentOuter">
+ <nz-breadcrumb>
+ <nz-breadcrumb-item>
+ <a [routerLink]="['/', 'workbench', 'home']">Home</a>
+ </nz-breadcrumb-item>
+ <nz-breadcrumb-item>
+ <a [routerLink]="['/', 'workbench', 'environment']">environment</a>
+ </nz-breadcrumb-item>
+ </nz-breadcrumb>
+ <div>
+ <br />
+ <h2>Environment</h2>
+ <nz-content>
+ Environment profiles defines a set of libraries and when Docker is being used, a Docker image in order to run
+ an experiment or a notebook.
+ </nz-content>
+ </div>
+ <br />
+ </div>
+ </nz-layout>
+ <div id="environmentData">
+ <div>
+ <div align="right">
+ <nz-input-group
+ nzSearch
+ style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px;"
+ [nzAddOnAfter]="suffixIconButton"
+ >
+ <input type="text" nz-input placeholder="input search text" />
+ </nz-input-group>
+ <ng-template #suffixIconButton>
+ <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
+ </ng-template>
+
+ <button
+ nz-button
+ id="createEnvironment"
+ nzType="primary"
+ style="margin-right: 30px; margin-bottom: 15px; margin-top: 15px;"
+ >
+ <i nz-icon nzType="plus"></i>
+ New Environment
+ </button>
+ </div>
+ <nz-table
+ id="releaseTable"
+ nzBordered
+ #basicTable
+ [nzData]="environmentList"
+ [nzNoResult]="'No data'"
+ nzSize="small"
+ >
+ <thead>
+ <tr>
+ <th>Environment Name</th>
+ <th>Environment ID</th>
+ <th>Docker image</th>
+ <th>Kernel name</th>
+ <th>Kernel channel</th>
+ <th>Kernel dependencies</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of basicTable.data">
+ <td>{{ data.environmentName }}</td>
+ <td>{{ data.environmentId }}</td>
+ <td>{{ data.dockerImage }}</td>
+ <td>{{ data.kernelName }}</td>
+ <td>{{ data.kernelChannels }}</td>
+ <td>
+ <dl *ngFor="let Dependency of data.kernelDependencies">
+ <dt>{{ Dependency }}</dt>
+ </dl>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ <router-outlet></router-outlet>
+ </div>
+</nz-layout>
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.scss b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.scss
new file mode 100644
index 0000000..4972c5c
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.scss
@@ -0,0 +1,98 @@
+/*!
+ * 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.
+ */
+
+#environmentOuter{
+ background-color: white;
+ padding-left: 30px;
+ padding-top: 20px;
+}
+
+#environmentData{
+ margin-top: 16px;
+ margin-left: 25px;
+ margin-right: 25px;
+ background-color:white;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+input.ng-invalid.ng-touched {
+ border: 1px solid red;
+}
+
+textarea.ng-invalid.ng-touched {
+ border: 1px solid red;
+}
+
+.red-star {
+ margin-top: 20px;
+ color: red;
+}
+
+.list-container {
+ padding: 0;
+ margin: 1rem 0;
+}
+
+.input-group {
+ display: flex;
+ align-items: center;
+ &:not(:first-child) {
+ margin-top: 1rem;
+ }
+
+ & input {
+ flex: 0 2 20%;
+ &:not(:last-child) {
+ margin-right: .5rem;
+ }
+ }
+
+ & i {
+ cursor: pointer;
+ font-size: 1.2rem;
+ }
+}
+
+/* utility */
+.single-field-group {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ & label {
+ flex: 0 0 25%;
+ text-align: right;
+ font-weight: 500;
+ &:not(:last-child) {
+ margin-right: 1.5rem;
+ }
+ }
+ & input {
+ flex: 0 0 48%;
+ }
+ & textarea {
+ flex: 0 0 55%;
+ }
+}
+
+.alert-message {
+ color: red;
+ margin-top: .3rem;
+ margin-left: .5rem;
+}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.ts
new file mode 100644
index 0000000..f836eb3
--- /dev/null
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.ts
@@ -0,0 +1,49 @@
+/*!
+ * 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';
+
+@Component({
+ selector: 'submarine-environment',
+ templateUrl: './environment.component.html',
+ styleUrls: ['./environment.component.scss']
+})
+export class EnvironmentComponent implements OnInit {
+ constructor() {}
+ environmentList = [
+ {
+ environmentName: 'my-submarine-env',
+ environmentId: 'environment_1586156073228_0001',
+ dockerImage: 'continuumio/anaconda3',
+ kernelName: 'team_default_python_3.7',
+ kernelChannels: 'defaults',
+ kernelDependencies: ['_ipyw_jlab_nb_ext_conf=0.1.0=py37_0', 'alabaster=0.7.12=py37_0']
+ },
+ {
+ environmentName: 'my-submarine-env-2',
+ environmentId: 'environment_1586156073228_0002',
+ dockerImage: 'continuumio/miniconda',
+ kernelName: 'team_default_python_3.8',
+ kernelChannels: 'defaults',
+ kernelDependencies: ['_ipyw_jlab_nb_ext_conf=0.1.0=py38_0']
+ }
+ ];
+
+ ngOnInit() {}
+}
diff --git a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
index 7765f8c..980b3fb 100644
--- a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
+++ b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts
@@ -18,7 +18,7 @@
*/
import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
import { ExperimentService } from '@submarine/services/experiment.service';
@@ -128,7 +128,7 @@ export class ExperimentComponent implements OnInit {
*
*/
checkStatus() {
- if (this.current == 0) {
+ if (this.current === 0) {
return (
this.experimentName.invalid ||
this.description.invalid ||
@@ -137,9 +137,9 @@ export class ExperimentComponent implements OnInit {
this.cmd.invalid ||
this.image.invalid
);
- } else if (this.current == 1) {
+ } else if (this.current === 1) {
return this.envs.invalid;
- } else if (this.current == 2) {
+ } else if (this.current === 2) {
return this.specs.invalid;
}
}
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 4426341..c9fdded 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
@@ -19,6 +19,7 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
+import { EnvironmentComponent } from '@submarine/pages/workbench/environment/environment.component';
import { ExperimentComponent } from '@submarine/pages/workbench/experiment/experiment.component';
import { WorkbenchComponent } from '@submarine/pages/workbench/workbench.component';
import { DataComponent } from './data/data.component';
@@ -61,6 +62,10 @@ const routes: Routes = [
]
},
{
+ path: 'environment',
+ component: EnvironmentComponent
+ },
+ {
path: 'data',
component: DataComponent
},
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 86aeef0..23d6d9c 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
@@ -70,6 +70,11 @@ export class WorkbenchComponent implements OnInit {
routerLink: '/workbench/experiment'
},
{
+ title: 'Environment',
+ iconType: 'codepen',
+ routerLink: '/workbench/environment'
+ },
+ {
title: 'Data',
iconType: 'bar-chart',
routerLink: '/workbench/data'
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 84ebbe0..a652add 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
@@ -34,6 +34,7 @@ import { ModelComponent } from './model/model.component';
import { WorkbenchComponent } from './workbench.component';
import { WorkspaceComponent } from './workspace/workspace.component';
import { WorkspaceModule } from './workspace/workspace.module';
+import { EnvironmentComponent } from './environment/environment.component';
@NgModule({
declarations: [
@@ -42,7 +43,8 @@ import { WorkspaceModule } from './workspace/workspace.module';
WorkspaceComponent,
ExperimentComponent,
DataComponent,
- ModelComponent
+ ModelComponent,
+ EnvironmentComponent
],
imports: [
CommonModule,
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@submarine.apache.org
For additional commands, e-mail: dev-help@submarine.apache.org