diff options
17 files changed, 341 insertions, 21 deletions
diff --git a/sdc-workflow-designer-ui/package-lock.json b/sdc-workflow-designer-ui/package-lock.json index 5cfcfbfa..8a9931ba 100644 --- a/sdc-workflow-designer-ui/package-lock.json +++ b/sdc-workflow-designer-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "workflow-designer", - "version": "0.0.0", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -352,6 +352,11 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "angular-in-memory-web-api": { + "version": "0.3.2", + "resolved": "http://10.75.8.148/repository/npm-pub/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz", + "integrity": "sha1-iDbZ4lNNN7co88taHK9v4ef7vs0=" + }, "ansi-escapes": { "version": "2.0.0", "resolved": "http://registry.npm.taobao.org/ansi-escapes/download/ansi-escapes-2.0.0.tgz", diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json index 07b68ffa..1489a8cc 100644 --- a/sdc-workflow-designer-ui/package.json +++ b/sdc-workflow-designer-ui/package.json @@ -21,6 +21,7 @@ "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", + "angular-in-memory-web-api": "^0.3.2", "core-js": "^2.4.1", "jsplumb": "2.5.0", "rxjs": "^5.4.2", diff --git a/sdc-workflow-designer-ui/src/app/app.component.html b/sdc-workflow-designer-ui/src/app/app.component.html index f09e0a73..f666c1b7 100644 --- a/sdc-workflow-designer-ui/src/app/app.component.html +++ b/sdc-workflow-designer-ui/src/app/app.component.html @@ -17,6 +17,6 @@ <b4t-toolbar></b4t-toolbar> <div id="container" class="container"> - <b4t-node *ngFor="let node of getNodes(); let last = last;" [node]="node" [last]="last"></b4t-node> + <b4t-node *ngFor="let node of getWorkflow()?.nodes; let last = last;" [node]="node" [last]="last"></b4t-node> </div> diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts index b02ce675..59b457f9 100644 --- a/sdc-workflow-designer-ui/src/app/app.component.ts +++ b/sdc-workflow-designer-ui/src/app/app.component.ts @@ -10,21 +10,31 @@ * ZTE - initial API and implementation and/or initial documentation */ -import { Component, AfterViewInit } from '@angular/core'; +import { Component, AfterViewInit, OnInit } from '@angular/core'; import { JsPlumbService } from "./services/jsplumb.service"; import { WorkflowService } from "./services/workflow.service"; import { WorkflowNode } from "./model/workflow-node"; +import { Workflow } from "./model/workflow"; +import { DataAccessService } from "./services/data-access/data-access.service"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent implements AfterViewInit { - constructor(private jsplumbService: JsPlumbService, private workflowService: WorkflowService) {} +export class AppComponent implements AfterViewInit, OnInit { + constructor(private jsplumbService: JsPlumbService, + private dataAccessService: DataAccessService, + private workflowService: WorkflowService) {} - public getNodes(): WorkflowNode[] { - return this.workflowService.getNodes(); + ngOnInit(): void { + this.dataAccessService.catalogService.loadWorkflow('workflow1').subscribe(workflow => { + this.workflowService.workflow = workflow; + }); + } + + public getWorkflow(): Workflow { + return this.workflowService.workflow; } ngAfterViewInit(): void { diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts index 3d57ce19..616db2dd 100644 --- a/sdc-workflow-designer-ui/src/app/app.module.ts +++ b/sdc-workflow-designer-ui/src/app/app.module.ts @@ -18,6 +18,12 @@ import { JsPlumbService } from "./services/jsplumb.service"; import { NodeComponent } from "./components/node/node.component"; import { ToolbarComponent } from "./components/toolbar/toolbar.component"; import { WorkflowService } from "./services/workflow.service"; +import { DataAccessService } from "./services/data-access/data-access.service"; +import { HttpService } from "./util/http.service"; +import { SharedModule } from "./shared/shared.module"; +import { InMemoryWebApiModule } from "angular-in-memory-web-api"; +import { InMemoryDataService } from "./services/data-access/in-memory-data.service"; +import { HttpModule } from "@angular/http"; @NgModule({ declarations: [ @@ -26,9 +32,17 @@ import { WorkflowService } from "./services/workflow.service"; ToolbarComponent, ], imports: [ - BrowserModule + BrowserModule, + HttpModule, + InMemoryWebApiModule.forRoot(InMemoryDataService), + SharedModule, + ], + providers: [ + DataAccessService, + HttpService, + JsPlumbService, + WorkflowService ], - providers: [JsPlumbService, WorkflowService], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html index 5d028b90..91b935e9 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html @@ -19,5 +19,7 @@ <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'endEvent'">
<span>endEvent</span>
</button>
+
+ <button type="button" class="btn btn-success" (click)="save()">Save</button>
</div>
</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts index 5fdb6ce5..1e1de191 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts @@ -13,6 +13,7 @@ import { AfterViewInit, Component } from '@angular/core';
import { JsPlumbService } from '../../services/jsplumb.service';
+import { WorkflowService } from "../../services/workflow.service";
/**
* toolbar component contains some basic operations(save) and all of the supported workflow nodes.
@@ -25,11 +26,21 @@ import { JsPlumbService } from '../../services/jsplumb.service'; })
export class ToolbarComponent implements AfterViewInit {
- constructor(private jsPlumbService: JsPlumbService) {
+ constructor(private jsPlumbService: JsPlumbService, private workflowService: WorkflowService) {
}
public ngAfterViewInit() {
this.jsPlumbService.buttonDraggable();
}
+ public save() {
+ this.workflowService.save().subscribe(success => {
+ if(success) {
+ console.log(`save workflow success`);
+ } else {
+ console.log(`save workflow failed`);
+ }
+ });
+ }
+
}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow.ts b/sdc-workflow-designer-ui/src/app/model/workflow.ts new file mode 100644 index 00000000..672396cf --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/model/workflow.ts @@ -0,0 +1,21 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Injectable } from '@angular/core';
+import { WorkflowNode } from "./workflow-node";
+
+/**
+ * Workflow
+ */
+export class Workflow {
+ constructor(public id: string, public name: string, public nodes: WorkflowNode[]) {}
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts new file mode 100644 index 00000000..5eaf6351 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts @@ -0,0 +1,31 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Injectable } from '@angular/core';
+import { WorkflowNode } from "../../model/workflow-node";
+import { Observable } from "rxjs/Observable";
+import { HttpService } from "../../util/http.service";
+import { Workflow } from "../../model/workflow";
+
+/**
+ * CatalogService
+ * provides data access from backend
+ */
+@Injectable()
+export abstract class CatalogService {
+
+ constructor(protected httpService: HttpService) {}
+
+ public abstract loadWorkflow(workflowId: string): Observable<Workflow>;
+
+ public abstract saveWorkflow(workflow: Workflow): Observable<boolean>;
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts new file mode 100644 index 00000000..451d7a2b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts @@ -0,0 +1,27 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Injectable } from '@angular/core';
+import { CatalogService } from "./catalog.service";
+import { SdcService } from "./sdc.service";
+import { HttpService } from "../../util/http.service";
+
+/**
+ * DataAccessService
+ * provides data access from backend
+ */
+@Injectable()
+export class DataAccessService {
+ constructor(private httpService: HttpService) {}
+
+ public catalogService: CatalogService = new SdcService(this.httpService);
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts new file mode 100644 index 00000000..1609c948 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts @@ -0,0 +1,33 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Injectable } from '@angular/core';
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+/**
+ * InMemeoryDataService
+ * Mock backend data
+ */
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ const workflows = [{
+ id: 'workflow1',
+ name:'workflow1',
+ nodes: []
+ },{
+ id:'workflow2',
+ name: 'workflow2',
+ nodes: []
+ }
+ ];
+ return {workflows};
+ }
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts new file mode 100644 index 00000000..cec6ae25 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts @@ -0,0 +1,49 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Injectable } from '@angular/core';
+import { CatalogService } from "./catalog.service";
+import { Observable } from "rxjs/Observable";
+import { WorkflowNode } from "../../model/workflow-node";
+import { HttpService } from "../../util/http.service";
+import { Workflow } from "../../model/workflow";
+
+/**
+ * SdcService
+ * provides data access from sdc
+ */
+@Injectable()
+export class SdcService extends CatalogService {
+
+ constructor(protected httpService: HttpService) {
+ super(httpService);
+ }
+
+ public loadWorkflows(): Observable<WorkflowNode[]> {
+ // TODO load data from sdc
+ const url = 'api/workflows';
+ return this.httpService.get(url);
+ }
+
+ public loadWorkflow(workflowId: string): Observable<Workflow> {
+ // TODO load data from sdc
+ const url = `api/workflows/${workflowId}`;
+ return this.httpService.get(url).map(response => response.data);
+ }
+
+ public saveWorkflow(workflow: Workflow): Observable<boolean> {
+ // TODO save workflow design to sdc
+ const url = `api/workflows/${workflow.id}`;
+ return this.httpService.put(url, JSON.stringify(workflow)).map(() => true);
+ }
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts index 59e1fd54..d9a949ea 100644 --- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts @@ -12,6 +12,9 @@ import { Injectable } from '@angular/core';
import { WorkflowNode } from "../model/workflow-node";
+import { DataAccessService } from "./data-access/data-access.service";
+import { Observable } from "rxjs/Observable";
+import { Workflow } from "../model/workflow";
/**
* WorkflowService
@@ -19,34 +22,41 @@ import { WorkflowNode } from "../model/workflow-node"; */
@Injectable()
export class WorkflowService {
- public nodes: WorkflowNode[] = [];
- public getNodes(): WorkflowNode[] {
- return this.nodes;
+ public workflow: Workflow;
+
+ constructor(private dataAccessService: DataAccessService) {
+
+ }
+
+ public save(): Observable<boolean> {
+ return this.dataAccessService.catalogService.saveWorkflow(this.workflow);
}
- public addNode(name: string, type: string, top: number, left: number) {
- this.nodes.push(new WorkflowNode(this.createId(), name, type, top, left));
+ public addNode(name: string, type: string, top: number, left: number): WorkflowNode {
+ const node = new WorkflowNode(this.createId(), name, type, top, left);
+ this.workflow.nodes.push(node);
+ return node;
}
public deleteNode(nodeId: string): WorkflowNode {
// delete current node
- const index = this.nodes.findIndex(node => node.id === nodeId);
+ const index = this.workflow.nodes.findIndex(node => node.id === nodeId);
if (index !== -1) {
- const node = this.nodes.splice(index, 1)[0];
+ const node = this.workflow.nodes.splice(index, 1)[0];
return node;
}
return undefined;
}
- public getNode(sourceId: string): WorkflowNode {
- return this.nodes.find(node => node.id === sourceId);
+ public getNodeById(sourceId: string): WorkflowNode {
+ return this.workflow.nodes.find(node => node.id === sourceId);
}
private createId() {
const idSet = new Set();
- this.nodes.forEach(node => idSet.add(node.id));
+ this.workflow.nodes.forEach(node => idSet.add(node.id));
for (let i = 0; i < idSet.size; i++) {
if (!idSet.has('node' + i)) {
diff --git a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts new file mode 100644 index 00000000..baf1dba1 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts @@ -0,0 +1,30 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; +import { RouterModule } from '@angular/router'; + +const module = [ + CommonModule, + FormsModule, + RouterModule, +]; + +@NgModule({ + imports: module, + exports: module, +}) + +export class SharedModule { +} diff --git a/sdc-workflow-designer-ui/src/app/util/http.service.ts b/sdc-workflow-designer-ui/src/app/util/http.service.ts new file mode 100644 index 00000000..32669555 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/util/http.service.ts @@ -0,0 +1,58 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +import { Injectable } from '@angular/core'; +import { Http, RequestOptionsArgs } from '@angular/http'; +import { Observable } from 'rxjs/Rx'; +import './rxjs-operators'; + +@Injectable() +export class HttpService { + constructor(private http: Http) {} + + public get(uri: string): Observable<any> { + return this.getHttp('get', uri); + } + + public post(uri: string, data: any): Observable<any> { + return this.getHttp('post', uri, data); + } + + public put(uri: string, data: any, options?: RequestOptionsArgs): Observable<any> { + return this.getHttp('put', uri, data, options); + } + + public delete(uri: string): Observable<any> { + return this.getHttp('delete', uri); + } + + public getHttp(type: string, uri: string, data?: any, options?: RequestOptionsArgs): Observable<any> { + if (data) { + return this.http[type](uri, data, options) + .map(response => + response.json() + ) + .catch(this.handleError); + } else { + return this.http[type](uri, options) + .map(response => + response.json() + ) + .catch(this.handleError); + } + } + + private handleError(error: any) { + const errMsg = (error.message) ? error.message : + error.status ? `${error.status}-${error.statusText}` : 'Server error'; + return Observable.throw(errMsg); + } +} diff --git a/sdc-workflow-designer-ui/src/app/util/rxjs-operators.ts b/sdc-workflow-designer-ui/src/app/util/rxjs-operators.ts new file mode 100644 index 00000000..00fa50b8 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/util/rxjs-operators.ts @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ +import 'rxjs/add/observable/throw'; +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/switchMap'; +import 'rxjs/add/operator/toPromise'; diff --git a/sdc-workflow-designer-ui/src/index.html b/sdc-workflow-designer-ui/src/index.html index 1eab7e58..e876fc8c 100644 --- a/sdc-workflow-designer-ui/src/index.html +++ b/sdc-workflow-designer-ui/src/index.html @@ -16,7 +16,7 @@ <head> <meta charset="utf-8"> <title>Workflow Designer</title> - <base href="/lvbo"> + <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> |