From: Lvbo163 Date: Fri, 1 Sep 2017 06:31:04 +0000 (+0800) Subject: support setting microservice info X-Git-Tag: v1.0.0~61 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=b45d377a6114b2e3f6bcfbbaee1ce9668b91e0aa;p=sdc%2Fsdc-workflow-designer.git support setting microservice info support setting microservice info for workflow Issue-ID: SDC-266 Change-Id: I8c6ad2a95f63a86db0789f9c400be38131404b66 Signed-off-by: Lvbo163 --- diff --git a/sdc-workflow-designer-ui/.angular-cli.json b/sdc-workflow-designer-ui/.angular-cli.json index 7154dc18..fb634b70 100644 --- a/sdc-workflow-designer-ui/.angular-cli.json +++ b/sdc-workflow-designer-ui/.angular-cli.json @@ -19,8 +19,10 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "./../node_modules/bootstrap/dist/css/bootstrap.min.css", - "./../node_modules/font-awesome/css/font-awesome.min.css", + "../node_modules/bootstrap/dist/css/bootstrap.min.css", + "../node_modules/font-awesome/css/font-awesome.min.css", + "../node_modules/primeng/resources/primeng.min.css", + "../node_modules/primeng/resources/themes/bootstrap/theme.css", "styles.css" ], "scripts": [], diff --git a/sdc-workflow-designer-ui/package-lock.json b/sdc-workflow-designer-ui/package-lock.json index e667b96c..56922e31 100644 --- a/sdc-workflow-designer-ui/package-lock.json +++ b/sdc-workflow-designer-ui/package-lock.json @@ -4935,6 +4935,11 @@ "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=", "dev": true }, + "ngx-bootstrap": { + "version": "1.9.1", + "resolved": "http://10.75.8.148/repository/npm-pub/ngx-bootstrap/-/ngx-bootstrap-1.9.1.tgz", + "integrity": "sha1-Ce0G2Qj187sj+CGg+0UumhfXZls=" + }, "no-case": { "version": "2.3.1", "resolved": "http://registry.npm.taobao.org/no-case/download/no-case-2.3.1.tgz", @@ -6144,6 +6149,11 @@ "utila": "0.4.0" } }, + "primeng": { + "version": "4.2.0-rc.1", + "resolved": "http://10.75.8.148/repository/npm-pub/primeng/-/primeng-4.2.0-rc.1.tgz", + "integrity": "sha1-Vzo8fvKbx6v3ywconsOa6xpTE28=" + }, "process": { "version": "0.11.10", "resolved": "http://registry.npm.taobao.org/process/download/process-0.11.10.tgz", diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json index c9760fc8..2b8cf2bd 100644 --- a/sdc-workflow-designer-ui/package.json +++ b/sdc-workflow-designer-ui/package.json @@ -26,6 +26,8 @@ "core-js": "^2.4.1", "font-awesome": "^4.7.0", "jsplumb": "2.5.0", + "ngx-bootstrap": "^1.9.1", + "primeng": "^4.2.0-rc.1", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts index 297cbce4..19b7b055 100644 --- a/sdc-workflow-designer-ui/src/app/app.module.ts +++ b/sdc-workflow-designer-ui/src/app/app.module.ts @@ -30,13 +30,21 @@ import { PropertiesComponent } from "./components/property/properties.component" import { CanvasComponent } from "./components/canvas/canvas.component"; import { StartEventParametersComponent } from "./components/property/start-event-parameters/start-event-parameters.component"; import { ParameterComponent } from "./components/parameter/parameter.component"; -import { MenuComponent } from "./components/menus/menu.component"; +import { MenuComponent } from "./components/menu/menu.component"; +import { MicroserviceDetailComponent } from "./components/menu/microservice/microservice-detail/microservice-detail.component"; +import { MicroserviceComponent } from "./components/menu/microservice/microservice.component"; +import { MicroserviceListComponent } from "./components/menu/microservice/microservice-list/microservice-list.component"; +import { ModalModule } from "ngx-bootstrap/modal"; +import { WorkflowConfigService } from "./services/workflow-config.service"; @NgModule({ declarations: [ AppComponent, CanvasComponent, MenuComponent, + MicroserviceComponent, + MicroserviceDetailComponent, + MicroserviceListComponent, NodeComponent, ParameterComponent, PropertiesComponent, @@ -47,6 +55,7 @@ import { MenuComponent } from "./components/menus/menu.component"; BrowserModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), + ModalModule.forRoot(), RouterModule.forRoot([]), SharedModule, ], @@ -55,6 +64,7 @@ import { MenuComponent } from "./components/menus/menu.component"; DataAccessService, HttpService, JsPlumbService, + WorkflowConfigService, WorkflowService ], bootstrap: [AppComponent] diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.css b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.css similarity index 100% rename from sdc-workflow-designer-ui/src/app/components/menus/menu.component.css rename to sdc-workflow-designer-ui/src/app/components/menu/menu.component.css diff --git a/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html new file mode 100644 index 00000000..16234898 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html @@ -0,0 +1,24 @@ + + +
+ + + +
+ diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.spec.ts b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.spec.ts similarity index 55% rename from sdc-workflow-designer-ui/src/app/components/menus/menu.component.spec.ts rename to sdc-workflow-designer-ui/src/app/components/menu/menu.component.spec.ts index 52f2c772..b80edce7 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.spec.ts +++ b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.spec.ts @@ -14,23 +14,23 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MenuComponent } from './menu.component'; describe('MenuComponent', () => { - let component: MenuComponent; - let fixture: ComponentFixture; + let component: MenuComponent; + let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ MenuComponent ] - }) - .compileComponents(); - })); + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [MenuComponent] + }) + .compileComponents(); + })); - beforeEach(() => { - fixture = TestBed.createComponent(MenuComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(MenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should be created', () => { - expect(component).toBeTruthy(); - }); + it('should be created', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts similarity index 55% rename from sdc-workflow-designer-ui/src/app/components/menus/menu.component.ts rename to sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts index 347f1a24..2c03cbfc 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts @@ -12,22 +12,26 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { WorkflowService } from '../../services/workflow.service'; +import { MicroserviceComponent } from "./microservice/microservice.component"; @Component({ - selector: 'b4t-menu', - templateUrl: './menu.component.html', - styleUrls: ['./menu.component.css'] + selector: 'b4t-menu', + templateUrl: './menu.component.html', + styleUrls: ['./menu.component.css'] }) export class MenuComponent { + @ViewChild(MicroserviceComponent) public microserviceComponent: MicroserviceComponent; - public canSave = true; + constructor(private workflowService: WorkflowService) { } - constructor(private workflowService: WorkflowService) { } + public save(): void { + this.workflowService.save(); + } - public save(): void { - this.workflowService.save(); - } + public showMicroserviceModal(): void { + this.microserviceComponent.show(); + } - public test() { - } + public test() { + } } diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.html b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.html new file mode 100644 index 00000000..12228f24 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.html @@ -0,0 +1,33 @@ + +
+ +
+ +
+
+
+ +
+ +
+
+ +
+ +
+ +
+
diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts new file mode 100644 index 00000000..924b40f5 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts @@ -0,0 +1,60 @@ +/** + * 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 { Component, Input, OnChanges, ViewChild } from '@angular/core'; +import { ModalDirective } from 'ngx-bootstrap/modal'; + +import { Microservice } from '../../../../model/workflow/microservice'; +import { WorkflowConfigService } from '../../../../services/workflow-config.service'; + +/** + * toolbar component contains some basic operations(save) and all of the supported workflow nodes. + * The supported nodes can be dragged to container component. which will add a new node to the workflow. + */ +@Component({ + selector: 'b4t-microservice-detail', + templateUrl: 'microservice-detail.component.html', +}) +export class MicroserviceDetailComponent implements OnChanges { + @Input() microservice: Microservice; + + public detail: string; + + constructor() { + } + + public ngOnChanges() { + if(this.microservice == null) { + this.microservice = new Microservice('', '', {}); + } + this.parseSwagger2String(); + } + + private parseSwagger2String() { + if (this.microservice.swagger) { + this.detail = JSON.stringify(this.microservice.swagger); + } else { + this.detail = ''; + } + } + + public onDetailChanged(detail: string) { + try { + const swagger = JSON.parse(detail); + this.detail = detail; + console.log(swagger); + this.microservice.swagger = swagger; + } catch (e) { + // if detail is not a json object, then not change the swagger + } + } +} diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.html b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.css similarity index 65% rename from sdc-workflow-designer-ui/src/app/components/menus/menu.component.html rename to sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.css index edee3618..f403890e 100644 --- a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.css @@ -1,4 +1,3 @@ - -
- - -
+ .swagger-list{ + overflow: auto; + } \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.html b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.html new file mode 100644 index 00000000..ce4730f7 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.html @@ -0,0 +1,32 @@ + +
+
+
+ Config List + +
+ +
    +
  • +
    {{microservice.name}}
    +
    + +
    +
    • +
+
+
+ diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.ts new file mode 100644 index 00000000..2e22699d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-list/microservice-list.component.ts @@ -0,0 +1,64 @@ +/** + * 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 { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { ModalDirective } from 'ngx-bootstrap/modal'; + +import { Microservice } from '../../../../model/workflow/microservice'; + +/** + * toolbar component contains some basic operations(save) and all of the supported workflow nodes. + * The supported nodes can be dragged to container component. which will add a new node to the workflow. + */ +@Component({ + selector: 'b4t-microservice-list', + templateUrl: 'microservice-list.component.html', +}) +export class MicroserviceListComponent { + @Input() microservices: Microservice[]; + @Output() microserviceSelected = new EventEmitter(); + + public onMicroserviceSelected(microservice: Microservice) { + this.microserviceSelected.emit(microservice); + } + + public addMicroservice() { + const microservice = new Microservice('new microservice', '', {}); + this.microservices.push(microservice); + + this.onMicroserviceSelected(microservice); + } + + public deleteMicroservice(index: number, microservice: Microservice) { + this.deleteMicroService(microservice.name, microservice.version); + + // set the next microservice selected + let selectedMicroservice; + if (this.microservices.length > 0) { + if (this.microservices[index]) { + selectedMicroservice = this.microservices[index]; + } else { + selectedMicroservice = this.microservices[index - 1]; + } + } + this.onMicroserviceSelected(selectedMicroservice); + } + + private deleteMicroService(name: string, version: string) { + const index = this.microservices.findIndex(service => (service.name === name && service.version === version)); + if(index !== -1) { + return this.microservices.splice(index, 1)[0]; + } + + return undefined; + } +} diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice.component.html b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice.component.html new file mode 100644 index 00000000..e8483c22 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice.component.html @@ -0,0 +1,39 @@ + + diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice.component.ts new file mode 100644 index 00000000..4591eef4 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice.component.ts @@ -0,0 +1,46 @@ +/** + * 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 { AfterViewInit, Component, ViewChild } from '@angular/core'; +import { ModalDirective } from 'ngx-bootstrap/modal'; + +import { MicroserviceListComponent } from './microservice-list/microservice-list.component'; +import { Microservice } from "../../../model/workflow/microservice"; +import { WorkflowConfigService } from "../../../services/workflow-config.service"; + +/** + * microservice component + * open a model to set microservice info + */ +@Component({ + selector: 'b4t-microservice', + templateUrl: 'microservice.component.html', +}) +export class MicroserviceComponent { + @ViewChild('microserviceModal') public microserviceModal: ModalDirective; + + public microservices: Microservice[]; + public currentMicroservice: Microservice; + + constructor(private workflowConfigService: WorkflowConfigService) { + } + + public microserviceSelected(microservice: any) { + this.currentMicroservice = microservice; + } + + public show() { + this.microservices = this.workflowConfigService.getMicroservices(); + this.microserviceModal.show(); + } + +} diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/configs.ts b/sdc-workflow-designer-ui/src/app/model/workflow/configs.ts new file mode 100644 index 00000000..9a5a08f2 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/model/workflow/configs.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 { Microservice } from "./microservice"; + +/** + * Configs + */ +export class Configs { + constructor(public microservices:Microservice[]) {} +} diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts b/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts new file mode 100644 index 00000000..c4d4b395 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts @@ -0,0 +1,20 @@ +/** + * 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'; + +/** + * Microservice + */ +export class Microservice { + constructor(public name: string, public version: string, public swagger: any) {} +} diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/workflow.ts b/sdc-workflow-designer-ui/src/app/model/workflow/workflow.ts index 672396cf..4ab15446 100644 --- a/sdc-workflow-designer-ui/src/app/model/workflow/workflow.ts +++ b/sdc-workflow-designer-ui/src/app/model/workflow/workflow.ts @@ -12,10 +12,11 @@ import { Injectable } from '@angular/core'; import { WorkflowNode } from "./workflow-node"; +import { Configs } from "./configs"; /** * Workflow */ export class Workflow { - constructor(public id: string, public name: string, public nodes: WorkflowNode[]) {} + constructor(public id: string, public name: string, public nodes: WorkflowNode[], public configs: Configs) {} } 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 index 1609c948..c9b803bb 100644 --- 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 @@ -21,11 +21,17 @@ export class InMemoryDataService implements InMemoryDbService { const workflows = [{ id: 'workflow1', name:'workflow1', - nodes: [] + nodes: [], + configs:{ + microservices:[] + } },{ id:'workflow2', name: 'workflow2', - nodes: [] + nodes: [], + configs:{ + microservices:[] + } } ]; 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 index 74fc8c3b..02ade955 100644 --- 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 @@ -37,7 +37,7 @@ export class SdcService extends CatalogService { public loadWorkflow(workflowId: string): Observable { // TODO load data from sdc const url = `api/workflows/${workflowId}`; - return this.httpService.get(url).map(response => response.data); + return this.httpService.get(url).map(response => response.data as Workflow); } public saveWorkflow(workflow: Workflow): Observable { diff --git a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts index 0863fb5d..ffd00c6a 100644 --- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts @@ -107,7 +107,6 @@ export class JsPlumbService { } public buttonDroppable() { - console.log('buttonDroppable'); const selector = this.jsplumbInstance.getSelector('.canvas'); this.jsplumbInstance.droppable(selector, { scope: 'btn', diff --git a/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts new file mode 100644 index 00000000..d645ebc2 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts @@ -0,0 +1,28 @@ +/** + * 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 { WorkflowService } from "./workflow.service"; +import { Microservice } from "../model/workflow/microservice"; + +/** + * WorkflowConfigService + * provides all of the operations about workflow configs. + */ +@Injectable() +export class WorkflowConfigService { + constructor(private workflowService: WorkflowService) {} + + public getMicroservices(): Microservice[] { + return this.workflowService.workflow.configs.microservices; + } +} diff --git a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts index baf1dba1..1591a13f 100644 --- a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts +++ b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts @@ -13,11 +13,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; +import { RadioButtonModule } from 'primeng/primeng'; import { RouterModule } from '@angular/router'; const module = [ CommonModule, FormsModule, + RadioButtonModule, RouterModule, ]; diff --git a/sdc-workflow-designer-ui/src/index.html b/sdc-workflow-designer-ui/src/index.html index e876fc8c..2c5ee42b 100644 --- a/sdc-workflow-designer-ui/src/index.html +++ b/sdc-workflow-designer-ui/src/index.html @@ -13,14 +13,20 @@ --> + - - Workflow Designer - + + Workflow Designer + - + + - + + +