diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/property')
12 files changed, 226 insertions, 43 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html index d6aaafd8..45abdd0f 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html @@ -12,14 +12,4 @@ *******************************************************************************/ --> -<div class="form-group row"> - <div class="col-md-10"></div> - <div class="col-md-2"> - <button (click)="create();" type="button" class="btn blue1 pull-right"> - <i class="fa fa-plus"></i> - </button> - </div> -</div> - -<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true" - [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file +<b4t-parameter [param]="node.parameter" [valueSource]="sources"></b4t-parameter>
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts index 65838792..f8a63a15 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts @@ -9,27 +9,17 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation *******************************************************************************/ -import { Component, Input, ViewChild } from '@angular/core'; -import { Subscription } from 'rxjs/Subscription'; +import { Component, Input } from '@angular/core'; import { ValueSource } from '../../../model/value-source.enum'; import { Parameter } from '../../../model/workflow/parameter'; -import { StartEvent } from '../../../model/workflow/start-event'; -import { BroadcastService } from '../../../services/broadcast.service'; +import { ErrorEvent } from '../../../model/workflow/error-event'; @Component({ - selector: 'b4t-start-event-parameters', - templateUrl: 'start-event-parameters.component.html', + selector: 'b4t-error-event', + templateUrl: 'error-event.component.html', }) -export class StartEventParametersComponent { - @Input() public node: StartEvent; +export class ErrorEventComponent { + @Input() public node: ErrorEvent; public sources: ValueSource[] = [ValueSource.String]; - - public create(): void { - this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String])); - } - - public delete(index: number): void { - this.node.parameters.splice(index, 1); - } } diff --git a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html index f615d9f2..3395a6ee 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html @@ -13,7 +13,7 @@ --> <div class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Timer Type</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_TYPE' | translate}}</label> <div class="col-md-9"> <p-radioButton name="timeType" label="Duration" value="timeDuration" [ngModel]="node.timerEventDefinition.type" (ngModelChange)="timerTypeChange($event)">Duration</p-radioButton> <p-radioButton name="timeType" label="Date" value="timeDate" [(ngModel)]="node.timerEventDefinition.type">Date</p-radioButton> @@ -22,7 +22,7 @@ </div> <div *ngIf="node.timerEventDefinition.type === 'timeDuration'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Duration</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DURATION' | translate}}</label> <div class="col-md-9"> <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDuration"> <label>eg: P1Y3M5DT6H7M30S</label> @@ -30,16 +30,20 @@ </div> <div *ngIf="node.timerEventDefinition.type === 'timeDate'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Date</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DATE' | translate}}</label> <div class="col-md-9"> <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDate"> - <label>eg: 10/10/2099 00:00:03</label> + <label>eg: 2007-04-05T12:30-02:00</label> + <!-- + <p-calendar [(ngModel)]="node.timerEventDefinition.timeDate" [showIcon]="true" [showTime]="true" [showSeconds]="true"></p-calendar> + --> </div> </div> <div *ngIf="node.timerEventDefinition.type === 'timeCycle'" class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Cycle</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_CYCLE' | translate}}</label> <div class="col-md-9"> <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeCycle"> + <label>eg: R5/P1Y2M10DT2H30M</label> </div> </div> diff --git a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html new file mode 100644 index 00000000..5768c0b5 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html @@ -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 + */ +--> + +<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_NODE' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" [ngModel]="node.template.id" + (ngModelChange)="node.template.id=$event; nodeTemplateChanged();"> + <option *ngFor="let template of nodeTemplates" value="{{template.id}}">{{template.name}}</option> + </select> + </div> +</div> + +<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_INTERFACE' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" [ngModel]="node.nodeInterface" + (ngModelChange)="nodeInterfaceChanged($event);"> + <option *ngFor="let interface of nodeInterfaces" value="{{interface}}">{{interface}}</option> + </select> + </div> +</div> + +<div class="form-group row"> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_OPERATION' | translate}}</label> + <div class="col-md-9"> + <select class="form-control" [ngModel]="node.operation" + (ngModelChange)="nodeOperationChanged($event)"> + <option *ngFor="let operation of nodeOperations" value="{{operation}}">{{operation}}</option> + </select> + </div> +</div> +<hr> + +<b4t-parameter *ngFor="let input of node.input" [param]="input" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter> +<hr *ngIf="0 < node.input.length"> +<b4t-parameter *ngFor="let output of node.output" [param]="output" [valueSource]= "outputSources" [planItems]="planItems"></b4t-parameter> + diff --git a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts new file mode 100644 index 00000000..5d7339d0 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts @@ -0,0 +1,132 @@ +/** + * 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, Input } from '@angular/core'; +import { Subscription } from '../../../../../node_modules/rxjs/Subscription.d'; + +import { PlanTreeviewItem } from '../../../model/plan-treeview-item'; +import { NodeTemplate } from '../../../model/topology/node-template'; +import { ValueSource } from '../../../model/value-source.enum'; +import { Parameter } from '../../../model/workflow/parameter'; +import { ToscaNodeTask } from '../../../model/workflow/tosca-node-task'; +import { BroadcastService } from '../../../services/broadcast.service'; +import { DataService } from '../../../services/data/data.service'; + +/** + * node template component provides operations about tosca modules which saved in winery. + * This component will be used in the property component while the corresponding workflow node is calling the node template's operation + */ +@Component({ + selector: 'b4t-node-template', + templateUrl: 'node-template.component.html', +}) +export class NodeTemplateComponent implements AfterViewInit { + @Input() public node: ToscaNodeTask; + @Input() public planItems: PlanTreeviewItem[]; + + public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan]; + public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan]; + public nodeInterfaces: string[] = []; + public nodeOperations: any[] = []; + public nodeTemplates: NodeTemplate[] = []; + + constructor(private dataService: DataService) { + } + + public ngAfterViewInit() { + this.dataService.loadNodeTemplates() + .subscribe(nodeTemplates => this.nodeTemplates = nodeTemplates); + + this.loadInterfaces(); + this.loadOperations(); + } + + public nodeTemplateChanged() { + this.setTemplateNamespace(); + + this.nodeInterfaceChanged(''); + + this.loadInterfaces(); + } + + public nodeInterfaceChanged(newInterface: string) { + this.node.nodeInterface = newInterface; + + this.nodeOperationChanged(''); + + this.loadOperations(); + } + + public nodeOperationChanged(operation: string) { + this.node.operation = operation; + + this.node.input = []; + this.node.output = []; + + this.loadParameters(); + } + + private setTemplateNamespace() { + const nodeTemplate = this.nodeTemplates.find( + tmpNodeTemplate => tmpNodeTemplate.id === this.node.template.id); + + if (nodeTemplate) { + this.node.template.namespace = nodeTemplate.namespace; + this.node.template.type = nodeTemplate.type; + } + } + + private loadInterfaces() { + if (this.node.template.id) { + this.dataService.loadNodeTemplateInterfaces(this.node.template) + .subscribe(interfaces => { + this.nodeInterfaces = interfaces; + }); + } else { + this.nodeInterfaces = []; + } + } + + private loadOperations() { + if (this.node.nodeInterface) { + this.nodeOperations = []; + this.dataService.loadNodeTemplateOperations( + this.node.template, + this.node.nodeInterface) + .subscribe(operations => this.nodeOperations = operations); + } else { + this.nodeOperations = []; + } + } + + private loadParameters() { + if (this.node.operation) { + this.dataService.loadNodeTemplateOperationParameter( + this.node.template, + this.node.nodeInterface, + this.node.operation) + .subscribe(params => { + this.node.input = []; + this.node.output = []; + + params.input.forEach(param => { + const p = new Parameter(param, '', ValueSource[ValueSource.String]); + this.node.input.push(p); + }); + + params.output.forEach(param => { + const p = new Parameter(param, '', ValueSource[ValueSource.Definition]); + this.node.output.push(p); + }); + }); + } + } +} diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.css b/sdc-workflow-designer-ui/src/app/components/property/properties.component.css index 4487e0b3..6c8c67d3 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.css +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.css @@ -10,7 +10,7 @@ * ZTE - initial API and implementation and/or initial documentation */ - .wm-properties-wrapper { +.wm-properties-wrapper { background-color: white; position: fixed; width: 500px; diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html index 99f14b56..8aa912d7 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html @@ -12,7 +12,7 @@ */ --> - <div class="wm-properties-wrapper" *ngIf="show"> +<div class="wm-properties-wrapper" *ngIf="show"> <div class="form-group row"> <b4t-editable-property class="col-md-10" [(name)]="node.name"></b4t-editable-property> <div class="col-md-2"> @@ -34,6 +34,9 @@ <hr> <div [ngSwitch]="node.type"> <b4t-start-event *ngSwitchCase="nodeType[nodeType.startEvent]" [node]="node"></b4t-start-event> + <b4t-error-event *ngSwitchCase="nodeType[nodeType.errorStartEvent]" [node]="node"></b4t-error-event> + <b4t-error-event *ngSwitchCase="nodeType[nodeType.errorEndEvent]" [node]="node"></b4t-error-event> + <b4t-node-template *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]" [node]="node" [planItems]="planTreeviewItems"></b4t-node-template> <b4t-rest-task *ngSwitchCase="nodeType[nodeType.restTask]" [node]="node" [planItems]="planTreeviewItems"></b4t-rest-task> <b4t-intermediate-catch-event *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]" [node]="node"></b4t-intermediate-catch-event> <b4t-script-task *ngSwitchCase="nodeType[nodeType.scriptTask]" [node]="node"></b4t-script-task> diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts index c49b4661..56db6583 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts @@ -12,6 +12,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/primeng'; +import { TranslateService } from '@ngx-translate/core'; import { PlanTreeviewItem } from '../../model/plan-treeview-item'; import { ValueSource } from '../../model/value-source.enum'; @@ -21,6 +22,7 @@ import { WorkflowNode } from '../../model/workflow/workflow-node'; import { BroadcastService } from '../../services/broadcast.service'; import { JsPlumbService } from '../../services/jsplumb.service'; import { ModelService } from '../../services/model.service'; +import { NoticeService } from '../../services/notice.service'; /** * property component presents information of a workflow node. @@ -43,6 +45,8 @@ export class PropertiesComponent implements OnInit { constructor(private broadcastService: BroadcastService, private modelService: ModelService, + private translate: TranslateService, + private noticeService: NoticeService, private jsPlumbService: JsPlumbService) { } @@ -59,7 +63,9 @@ export class PropertiesComponent implements OnInit { this.show = true; } catch (error) { this.show = false; - console.log(error); + this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => { + this.noticeService.error(res); + }); } } else { this.show = false; diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html index 99b8a0f4..089d242d 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html @@ -13,7 +13,7 @@ --> <div class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Service</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_SERVICE' | translate}}</label> <div class="col-md-9"> <select class="form-control" [ngModel]="node.restConfigId" (ngModelChange)="serviceChanged($event)"> <option *ngFor="let restConfig of restService.getRestConfigs()" value="{{restConfig.id}}">{{restConfig.id}}</option> @@ -22,7 +22,7 @@ </div> <div class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Path</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_PATH' | translate}}</label> <div class="col-md-9"> <select class="form-control" [ngModel]="node.path" (ngModelChange)="pathChanged($event)"> <option *ngFor="let interface of restInterfaces" value="{{interface}}">{{interface}}</option> @@ -31,7 +31,7 @@ </div> <div class="form-group row"> - <label class="col-md-3 form-control-label text-md-right">Method</label> + <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_METHOD' | translate}}</label> <div class="col-md-9"> <select class="form-control" [ngModel]="node.method" (ngModelChange)="methodChanged($event)"> <option *ngFor="let operation of restOperations" value="{{operation}}">{{operation}}</option> diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts index dfb2f0f3..0dccee1e 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts @@ -11,6 +11,7 @@ *******************************************************************************/ import { Component, Input, OnInit } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; +import { TranslateService } from '@ngx-translate/core'; import { PlanTreeviewItem } from '../../../model/plan-treeview-item'; import { Swagger, SwaggerMethod, SwaggerParameter, SwaggerResponse } from '../../../model/swagger'; @@ -19,6 +20,7 @@ import { ValueType } from '../../../model/value-type.enum'; import { RestParameter } from '../../../model/workflow/rest-parameter'; import { RestTask } from '../../../model/workflow/rest-task'; import { BroadcastService } from '../../../services/broadcast.service'; +import { NoticeService } from '../../../services/notice.service'; import { RestService } from '../../../services/rest.service'; import { WorkflowUtil } from '../../../util/workflow-util'; @@ -34,7 +36,8 @@ export class RestTaskComponent implements OnInit { public restOperations: any = []; private swagger: Swagger; - constructor(private broadcastService: BroadcastService, public restService: RestService) { } + constructor(private broadcastService: BroadcastService, public restService: RestService, + private noticeService: NoticeService, private translate: TranslateService) { } public ngOnInit() { this.loadInterfaces(); @@ -72,7 +75,9 @@ export class RestTaskComponent implements OnInit { } this.loadOperations(); } else { - console.log('swagger not exist'); + this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => { + this.noticeService.error(res); + }); } } } diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html index 6d2bf1ac..53e253e2 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html @@ -13,14 +13,16 @@ -->
<div class="form-group row">
- <label class="col-md-3 form-control-label text-md-right">Script Format</label>
+ <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT_FORMAT' | translate}}</label>
<div class="col-md-9">
- <input class="form-control" type="text" [(ngModel)]="node.scriptFormate">
+ <select class="form-control" [(ngModel)]="node.scriptFormat">
+ <option *ngFor="let script of scriptOperations" value="{{script}}">{{script}}</option>
+ </select>
</div>
</div>
<div class="form-group row">
- <label class="col-md-3 form-control-label text-md-right">Script</label>
+ <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT' | translate}}</label>
<div class="col-md-9">
<textarea class="form-control" type="text" rows="20" [(ngModel)]="node.script"></textarea>
</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts index 9e55ed49..1dd3b7a6 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts @@ -19,4 +19,6 @@ import { ScriptTask } from "../../../model/workflow/script-task"; })
export class ScriptTaskComponent {
@Input() public node: ScriptTask;
+
+ public scriptOperations = ['JavaScript'];
}
|