1 files changed, 49 insertions, 0 deletions
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>  
+