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 7b2bcb7 SUBMARINE-454. Implement frontend of team page in workbench
with Angular
7b2bcb7 is described below
commit 7b2bcb79697e761e2fbcb07382d8236d345d38de
Author: kobe860219 <[email protected]>
AuthorDate: Mon Apr 6 15:25:45 2020 +0800
SUBMARINE-454. Implement frontend of team page in workbench with Angular
### What is this PR for?
Implement frontend of team page in workbench with Angular
### What type of PR is it?
Feature
### Todos
### What is the Jira issue?
https://issues.apache.org/jira/browse/SUBMARINE-454
### How should this be tested?
https://travis-ci.org/github/kobe860219/submarine
### Screenshots (if appropriate)
<img width="1436" alt="teamDemo"
src="https://user-images.githubusercontent.com/48027290/78390800-c59dcd00-7617-11ea-820e-c16f7c8d9b83.png";>
https://imgur.com/84kc6WV
### 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 #255 from kobe860219/SUBMARINE-454 and squashes the following
commits:
fea0709 [kobe860219] Add license in teamIT.java e2e test file.
452a5e0 [kobe860219] Fix the problem in comment and add teamIT.java e2e
test file.
6240107 [kobe860219] SUBMARINE-454. Implement frontend of team page in
workbench with Angular
---
.../org/apache/submarine/integration/teamIT.java | 71 +++++++++
.../workbench/workspace/team/team.component.html | 175 ++++++++++++++++++++-
.../workbench/workspace/team/team.component.scss | 7 +-
.../workbench/workspace/team/team.component.ts | 155 +++++++++++++++++-
4 files changed, 401 insertions(+), 7 deletions(-)
diff --git
a/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/teamIT.java
b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/teamIT.java
new file mode 100644
index 0000000..80e8a7b
--- /dev/null
+++
b/submarine-test/test-e2e/src/test/java/org/apache/submarine/integration/teamIT.java
@@ -0,0 +1,71 @@
+/*
+ * 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 teamIT extends AbstractSubmarineIT {
+
+ public final static Logger LOG = LoggerFactory.getLogger(teamIT.class);
+
+ @BeforeClass
+ public static void startUp(){
+ LOG.info("[Testcase]: teamIT");
+ driver = WebDriverManager.getWebDriver();
+ }
+
+ @AfterClass
+ public static void tearDown(){
+ driver.quit();
+ }
+
+ @Test
+ public void teamTest() 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
+ pollingWait(By.xpath("//span[contains(text(), \"Workspace\")]"),
MAX_BROWSER_TIMEOUT_SEC).click();
+ Assert.assertEquals(driver.getCurrentUrl(),
"http://localhost:8080/workbench/workspace";);
+
+ //Test team part
+ pollingWait(By.xpath("//li[contains(text(), \"Team\")]"),
MAX_BROWSER_TIMEOUT_SEC).click();
+ Assert.assertEquals(pollingWait(By.xpath("//div[@id='teamDiv']"),
MAX_BROWSER_TIMEOUT_SEC).isDisplayed(), true);
+
+ clickAndWait(By.cssSelector("button[id='createTeamBtn']"));
+ pollingWait(By.xpath("//input[@id='inputNewTeamName']"),
MAX_BROWSER_TIMEOUT_SEC).sendKeys("NewTeamTest");
+ pollingWait(By.xpath("//textarea[@id='textareaNewTeamDescription']"),
MAX_BROWSER_TIMEOUT_SEC).sendKeys("NewTeamTest");
+ clickAndWait(By.cssSelector("button[id='summitCreateTeam']"));
+ Assert.assertEquals(pollingWait(By.xpath("//button[@id='createTeamBtn']"),
MAX_BROWSER_TIMEOUT_SEC).isDisplayed(), true);
+
+ Thread.sleep(1500);
+ }
+}
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.html
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.html
index 81aea24..1698227 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.html
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.html
@@ -17,7 +17,176 @@
~ under the License.
-->
-<div id="teamDiv">
- <nz-spin [nzSpinning]="isSpinning">
- </nz-spin>
+<!--TeamHome-->
+<div id="teamDiv" *ngIf="!isEntering">
+ <div id="searchRegion" align="right">
+ <nz-input-group nzSearch [nzAddOnAfter]="searchIconBtn"
style="width:300px;margin: 10px;">
+ <input type="text" nz-input placeholder="Search...">
+ </nz-input-group>
+ <ng-template #searchIconBtn>
+ <button nz-button nzType="primary" nzSearch>
+ <i nz-icon nzType="search"></i>
+ </button>
+ </ng-template>
+ <button id="createTeamBtn" nz-button nzType="primary"
(click)="startCreateTeam()" style="margin: 10px;">
+ <i nz-icon nzType="usergroup-add" nzTheme="outline"></i>Create Team
+ </button>
+ </div>
+ <div id="teamList" style="margin: 20px;">
+ <div nz-row [nzGutter]="12" nzType="flex" nzJustify="start">
+ <div *ngFor="let team of existTeams; let i = index" nz-col [nzSpan]="8">
+ <nz-card id="{{ 'team'+i }}" [nzTitle]="team.name"
[nzExtra]="team.department" [nzActions]="[actionEnter]">
+ {{ team.description }}
+ <br>
+ <br>
+ <label>
+ <i nz-icon nzType="project" nzTheme="outline"></i> {{
team.projectNum }}
+ <nz-divider nzType="vertical"></nz-divider>
+ <i nz-icon nzType="user" nzTheme="outline"></i> {{ team.memberNum
}}
+ <nz-divider nzType="vertical"></nz-divider>
+ <i nz-icon nzType="idcard" nzTheme="outline"></i> {{ team.role }}
+ </label>
+ </nz-card>
+ <ng-template #actionEnter>
+ <a (click)="enter(team)"><i nz-icon nzType="arrow-right"
nzTheme="outline"></i> Enter</a>
+ </ng-template>
+ </div>
+ </div>
+ </div>
</div>
+
+<!--Creating Team-->
+<nz-modal
+ [(nzVisible)]="createTeamModalIsVisible"
+ nzTitle="Create New Team"
+ (nzOnCancel)="createTeamModalIsVisible=false;"
+ >
+ <form nz-form>
+ <div *nzModalFooter>
+ <button id="cancelCreateTeam" nz-button nzType="default"
(click)="createTeamModalIsVisible=false;"> Cancel </button>
+ <button id="summitCreateTeam" nz-button nzType="primary"
(click)="createTeamOk()">Create</button>
+ </div>
+ <nz-form-item>
+ <nz-form-label nzRequired [nzSpan]="6">Team Name</nz-form-label>
+ <nz-form-control [nzSpan]="14">
+ <input id="inputNewTeamName" nz-input id="inputNewTeamName"
placeholder="Team Name" style="width: 150px;">
+ </nz-form-control>
+ </nz-form-item >
+ <nz-form-item>
+ <nz-form-label nzRequired [nzSpan]="6">Description</nz-form-label>
+ <nz-form-control [nzSpan]="14">
+ <textarea id="textareaNewTeamDescription" rows="4" nz-input
placeholder="Describe this team ..."></textarea>
+ </nz-form-control>
+ </nz-form-item >
+ </form>
+</nz-modal>
+
+<!--Enter a team-->
+<div *ngIf="isEntering" style="margin: 20px;background-color: white;">
+ <nz-card [nzTitle]="currentTeamName" [nzExtra]=cardExtra>
+ <ng-template #cardExtra>
+ {{ currentTeamDepartment }}
+ <button nz-button nzType="primary" nzSize="small"
(click)="isEntering=false" style="margin-left: 10px;">
+ <i nz-icon nzType="rollback" nzTheme="outline"></i>Go Back
+ </button>
+ </ng-template>
+ <nz-tabset>
+ <!--Profile-->
+ <nz-tab [nzTitle]="tab1">
+ <div style="text-align: center;">
+ <nz-spin [nzSize]="'large'" nzSimple></nz-spin>
+ </div>
+ </nz-tab>
+ <!--Projects-->
+ <nz-tab [nzTitle]="tab2">
+ <div style="text-align: center;">
+ <nz-spin [nzSize]="'large'" nzSimple></nz-spin>
+ </div>
+ </nz-tab>
+ <!--Members-->
+ <nz-tab [nzTitle]="tab3">
+ <div style="margin: 15px;" align="right">
+ <button nz-button nzType="primary" style="margin-right: 10px;"
(click)="startAddUser()"[disabled]="!currentTeamSettingPermission"><i nz-icon
nzType="plus"></i>Add</button>
+ <button nz-button nzType="primary" style="margin-right: 10px;"
(click)="startEditMember()" [disabled]="!currentTeamSettingPermission"><i
nz-icon nzType="edit"></i>Edit</button>
+ <button nz-button nzType="primary" style="margin-right: 10px;"
(click)="saveEditMember()" [disabled]="!isEditingMember"><i nz-icon
nzType="check"></i>Save</button>
+ </div>
+ <div>
+ <nz-table #basicTable [nzData]="member">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">Email</th>
+ <th style="width: 100px;">Role</th>
+ <th *ngIf="isEditingMember" style="width: 200px;">Edit</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of basicTable.data">
+ <td>{{ data.name }}</td>
+ <td>{{ data.email }}</td>
+ <td>{{ data.permission }}</td>
+ <td *ngIf="isEditingMember">
+ <nz-select [(ngModel)]="data.permission" style="width:
150px;">
+ <nz-option nzValue="admin" nzLabel="admin"></nz-option>
+ <nz-option nzValue="contributer"
nzLabel="contributer"></nz-option>
+ <nz-option nzValue="viwer" nzLabel="viwer"></nz-option>
+ </nz-select>
+ <nz-divider nzType="vertical"></nz-divider>
+ <a
+ nz-popconfirm
+ nzTitle="Are you sure to delete this user ?"
+ nzOkText="Ok"
+ nzCancelText="Cancel"
+ (nzOnConfirm)="confirm()"
+ (nzOnCancel)="cancel()"
+ >Delete</a>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ </nz-tab>
+ <!--Cluster-->
+ <nz-tab [nzTitle]="tab4">
+ <div style="text-align: center;">
+ <nz-spin [nzSize]="'large'" nzSimple></nz-spin>
+ </div>
+ </nz-tab>
+ <!--Setting-->
+ <nz-tab [nzTitle]="tab5" [nzDisabled]="!currentTeamSettingPermission">
+ <div style="text-align: center;">
+ <nz-spin [nzSize]="'large'" nzSimple></nz-spin>
+ </div>
+ </nz-tab>
+ </nz-tabset>
+ </nz-card>
+ <!--Template for Title of Tabs-->
+ <ng-template #tab1>
+ <i nz-icon nzType="profile" nzTheme="outline"></i>Profile
+ </ng-template>
+ <ng-template #tab2>
+ <i nz-icon nzType="project" nzTheme="outline"></i>Projects
+ </ng-template>
+ <ng-template #tab3>
+ <i nz-icon nzType="team" nzTheme="outline"></i>Members
+ </ng-template>
+ <ng-template #tab4>
+ <i nz-icon nzType="cluster" nzTheme="outline"></i>Cluster
+ </ng-template>
+ <ng-template #tab5>
+ <i nz-icon nzType="setting" nzTheme="outline"></i>Setting
+ </ng-template>
+</div>
+
+<!--Add User Modal-->
+<nz-modal
+ id="addUserModal"
+ [(nzVisible)]="addUserModalIsVisible"
+ nzTitle="Invite new member"
+ (nzOnCancel)="addUserCancel()"
+ (nzOnOk)="addUserOk()"
+ [nzOkLoading]="addUserIsOkLoading"
+>
+ <p>Use E-mail to add member!</p>
+
+</nz-modal>
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.scss
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.scss
index aca80fa..21ecd17 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.scss
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.scss
@@ -17,7 +17,12 @@
* under the License.
*/
- #teamDiv{
+ #searchRegion{
margin:20px;
+ background-color: white;
+ }
+
+ #teamList {
+ margin: 20;
}
\ No newline at end of file
diff --git
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.ts
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.ts
index 7caf093..f3fa01c 100644
---
a/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.ts
+++
b/submarine-workbench/workbench-web-ng/src/app/pages/workbench/workspace/team/team.component.ts
@@ -18,17 +18,166 @@
*/
import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
@Component({
selector: 'app-team',
templateUrl: './team.component.html',
styleUrls: ['./team.component.scss']
})
-export class TeamComponent implements OnInit {
- isSpinning = true;
- constructor() { }
+export class TeamComponent implements OnInit {
+
+ // Get into a Team or not
+ isEntering = false;
+
+ //Get Current Team Data (Now Use Simulated Data)
+ currentTeamName: string;
+ currentTeamDepartment: string;
+ currentTeamDescription: string;
+ currentTeamProjectNum: Number;
+ currentTeamMemberNum: Number;
+ currentTeamSettingPermission: boolean;
+
+ // Is Editging Members or not
+ isEditingMember = false;
+
+ // For CreateTeamModal
+ createTeamModalIsVisible = false;
+
+ // For AddUserModal
+ addUserModalIsVisible = false;
+ addUserIsOkLoading = false;
+
+ // Simulated Data for Members
+ member = [
+ {
+ name: 'Anna',
+ email: '[email protected]',
+ permission: 'admin'
+ },
+ {
+ name: 'James',
+ email: '[email protected]',
+ permission: 'admin'
+ },
+ {
+ name: 'Jack',
+ email: '[email protected]',
+ permission: 'contributer'
+ },
+ {
+ name: 'Ken',
+ email: '[email protected]',
+ permission: 'viwer'
+ }
+ ]
+
+ // Simulated Data for Teams
+ existTeams = [
+ {
+ name: "Submarine",
+ department: "Apache",
+ description: "Something about this team...",
+ projectNum: 3,
+ memberNum: 3,
+ role: 'admin',
+ settingPermission: true
+ },
+ {
+ name: "Team2",
+ department: "Apple",
+ description: "Something about this team...",
+ projectNum: 3,
+ memberNum: 3,
+ role: 'viwer',
+ settingPermission: false
+ },
+ ]
+ constructor(
+ private nzMessageService: NzMessageService,
+ private notification: NzNotificationService,
+ ) { }
ngOnInit() {
}
+ enter(team) {
+ this.isEntering = true;
+ this.currentTeamName = team.name;
+ this.currentTeamDepartment = team.department;
+ this.currentTeamDescription = team.description;
+ this.currentTeamProjectNum = team.projectNum;
+ this.currentTeamMemberNum = team.memberNum;
+ this.currentTeamSettingPermission = team.settingPermission;
+ }
+
+ startCreateTeam() {
+ this.createTeamModalIsVisible = true;
+ }
+
+ startEditMember() {
+ this.isEditingMember=true;
+ }
+
+ saveEditMember() {
+ this.isEditingMember=false;
+ }
+
+ cancel(): void {
+ }
+
+ confirm(): void {
+ this.nzMessageService.info('Delete Successful!');
+ }
+
+ // For CreateTeamModal
+ createTeamOk() {
+ this.createTeamModalIsVisible = false;
+ console.log("Create Seuccessful!");
+ }
+
+
+ // For AddUserModal
+ startAddUser(): void {
+ this.addUserModalIsVisible = true;
+ }
+
+ // Add Success
+ createNotification(type: string): void {
+ this.notification.create(
+ type,
+ 'Add Successful!',
+ 'Make sure that user check invitation!'
+ );
+ }
+
+ // For AddUserModal
+ addUserOk(): void {
+ this.addUserIsOkLoading = true;
+ setTimeout(() => {
+ this.addUserModalIsVisible = false;
+ this.addUserIsOkLoading = false;
+ this.createNotification("success");
+ }, 1000);
+ }
+
+ // For AddUserModal
+ addUserCancel(): void {
+ this.addUserModalIsVisible = false;
+ }
+
+ //TODO(kobe860219) : Get Team From DataBase
+ getTeamDataFromDB() {
+
+ }
+
+ //TODO(kobe860219) : Get User From DataBase
+ getUserDataFromDB() {
+ }
+
+ //TODO(kobe860219) : Update Data to DataBase
+ updateTeamData() {
+
+ }
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/48027290/78390800-c59dcd00-7617-11ea-820e-c16f7c8d9b83.png"](https://user-images.githubusercontent.com/48027290/78390800-c59dcd00-7617-11ea-820e-c16f7c8d9b83.png"){kind=link}