Implement Attributes/Outputs FE

Change-Id: I014bb0ebc07f3fea4266a4f295172eadee546705
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3448

7 files changed, 244 insertions, 8 deletions

diff --git a/catalog-ui/src/app/ng2/services/attributes.service.ts b/catalog-ui/src/app/ng2/services/attributes.service.ts
new file mode 100644
index 0000000000..5086fbfec5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/attributes.service.ts
@@ -0,0 +1,92 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2021 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * Licensed 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.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Injectable} from '@angular/core';
+import {AttributeFEModel} from "../../models/attributes-outputs/attribute-fe-model";
+import {AttributeBEModel} from "app/models/attributes-outputs/attribute-be-model";
+import {DerivedFEAttribute} from "../../models/attributes-outputs/derived-fe-attribute";
+import {AttributeDeclareAPIModel} from "app/models/attributes-outputs/attribute-declare-api-model";
+
+@Injectable()
+export class AttributesService {
+
+  constructor() {
+  }
+
+  public getParentAttributeFEModelFromPath = (attributes: Array<AttributeFEModel>, path: string) => {
+    let parent: AttributeFEModel = attributes.find((property: AttributeFEModel): boolean => {
+      return property.name === path.substring(0, path.indexOf('#'));
+    });
+    return parent;
+  }
+
+  //undo disabling of parent and child props=
+  public undoDisableRelatedAttributes = (property: AttributeFEModel, childPath?: string): void => {
+    property.isDisabled = false;
+    if (!childPath) {
+      property.isSelected = false;
+      property.flattenedChildren && property.flattenedChildren.map(child => child.isDisabled = false);
+    } else { //QND - unselect everything and then re-do the disabling of declared props. TODO: put a flag on propertyFEModel instead to indicate who's causing them to be disabled instead
+      property.flattenedChildren.filter(child => child.isDisabled && !child.isDeclared).forEach(child => child.isDisabled = false);
+      property.flattenedChildren.filter(child => child.isDeclared || child.isSelected).forEach((childProp) => { //handle brothers who are selected - redo their disabled relatives as well
+        this.disableRelatedAttributes(property, childProp.attributesName);
+      });
+    }
+  }
+
+  //disable parents and children of prop
+  public disableRelatedAttributes = (property: AttributeFEModel, childPath?: string): void => {
+    if (!childPath) { //selecting the parent property
+      property.isSelected = true;
+      property.flattenedChildren && property.flattenedChildren.map(child => {
+        child.isSelected = false;
+        child.isDisabled = true;
+      });
+    } else {
+      property.isSelected = false;
+      property.isDisabled = true;
+      property.flattenedChildren.filter((childProp: DerivedFEAttribute) => {
+        return (childProp.attributesName.indexOf(childPath + "#") === 0 //is child of prop to disable
+            || childPath.indexOf(childProp.attributesName + "#") === 0); //is parent of prop to disable
+      }).forEach((child: DerivedFEAttribute) => {
+        child.isSelected = false;
+        child.isDisabled = true;
+      });
+    }
+  }
+
+  public getCheckedAttributes = (attributes: Array<AttributeFEModel>): Array<AttributeBEModel> => {
+    let selectedProps: Array<AttributeDeclareAPIModel> = [];
+    attributes.forEach(attrib => {
+      if (attrib.isSelected && !attrib.isDeclared && !attrib.isDisabled) {
+        selectedProps.push(new AttributeDeclareAPIModel(attrib));
+      } else if (attrib.flattenedChildren) {
+        attrib.flattenedChildren.forEach((child) => {
+          if (child.isSelected && !child.isDeclared && !child.isDisabled) {
+            let childProp = new AttributeDeclareAPIModel(attrib, child); //create it from the parent
+            selectedProps.push(childProp);
+          }
+        })
+      }
+    });
+    return selectedProps;
+  }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
index 74ced7d4bf..5ae2918805 100644
--- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
@@ -27,6 +27,8 @@ import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { InputBEModel } from '../../../models/properties-inputs/input-be-model';
 import { HttpHelperService } from '../http-hepler.service';
+import {AttributeBEModel} from "../../../models/attributes-outputs/attribute-be-model";
+import {OutputBEModel} from "../../../models/attributes-outputs/output-be-model";
 
 @Injectable()
 export class ComponentInstanceServiceNg2 {
@@ -52,6 +54,13 @@ export class ComponentInstanceServiceNg2 {
         })
     }
 
+    getComponentInstanceAttributes(component: Component, componentInstanceId: string): Observable<Array<AttributeBEModel>> {
+        return this.http.get<Array<AttributeBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/attributes')
+            .map(res => {
+                return CommonUtils.initBeAttributes(res);
+        })
+    }
+
     getComponentInstanceInputs(component: Component, componentInstance: ComponentInstance): Observable<Array<PropertyBEModel>> {
         return this.http.get<Array<InputBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
             .map(res => {
@@ -59,6 +68,13 @@ export class ComponentInstanceServiceNg2 {
             })
     }
 
+    getComponentInstanceOutputs(component: Component, componentInstance: ComponentInstance): Observable<Array<AttributeBEModel>> {
+        return this.http.get<Array<OutputBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/outputs')
+            .map(res => {
+                return CommonUtils.initOutputs(res);
+            })
+    }
+
     getComponentInstanceArtifactsByGroupType = (componentType:string, componentId:string, componentInstanceId:string, artifactGroupType:string):Observable<ArtifactGroupModel> => {
 
         return this.http.get<ArtifactGroupModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstances/" + componentInstanceId + "/artifactsByType/" + artifactGroupType)
@@ -68,7 +84,7 @@ export class ComponentInstanceServiceNg2 {
     };
 
     getArtifactByGroupType = (componentType:string, componentId:string, artifactGroupType:string):Observable<ArtifactGroupModel> => {
-        
+
         return this.http.get<ArtifactGroupModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/artifactsByType/" + artifactGroupType)
             .map(response => new ArtifactGroupModel(response));
     };
@@ -99,6 +115,18 @@ export class ComponentInstanceServiceNg2 {
             });
     }
 
+    updateInstanceAttributes(componentType:string, componentId:string, componentInstanceId: string, attributes: AttributeBEModel[]) {
+
+        return this.http.post<Array<AttributeModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId + '/attributes', attributes)
+            .map((res) => {
+                return res.map((resAttribute) => {
+                    let newAttrib = new AttributeModel(resAttribute);
+                    newAttrib.resourceInstanceUniqueId = componentInstanceId;
+                    return newAttrib;
+                });
+            });
+    }
+
     getInstanceCapabilityProperties(componentType: string, componentId: string, componentInstanceId: string, capability: Capability): Observable<Array<PropertyModel>> {
 
         return this.http.get<Array<PropertyModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/componentInstances/' + componentInstanceId + '/capability/' + capability.type +
@@ -138,6 +166,14 @@ export class ComponentInstanceServiceNg2 {
             });
     }
 
+    updateInstanceOutputs(component: Component, componentInstanceId: string, outputs: AttributeBEModel[]): Observable<AttributeBEModel[]> {
+
+        return this.http.post<Array<AttributeModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/outputs', outputs)
+            .map((res) => {
+                return res.map((resOutput) => new AttributeBEModel(resOutput));
+            });
+    }
+
     getComponentGroupInstanceProperties(component: Component, groupInstanceId: string): Observable<Array<PropertyBEModel>> {
         return this.http.get<Array<PropertyBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties')
             .map((res) => {
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index 3093e632fc..d406cf05f6 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -43,6 +43,7 @@ import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
 import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
 import { Requirement } from "../../../models/requirement";
 import { Capability } from "../../../models/capability";
+import { OutputBEModel } from "app/models/attributes-outputs/output-be-model";
 
 /*
 PLEASE DO NOT USE THIS SERVICE IN ANGULAR2! Use the topology-template.service instead
@@ -59,7 +60,7 @@ export class ComponentServiceNg2 {
     protected getComponentDataByFieldsName(componentType:string, componentId:string, fields:Array<string>):Observable<ComponentGenericResponse> {
 
         let params: HttpParams = new HttpParams();
-        _.forEach(fields, (field:string):void => {
+        fields.forEach((field:string):void => {
             params = params.append(API_QUERY_PARAMS.INCLUDE, field);
         });
 
@@ -109,6 +110,10 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
     }
 
+    getComponentResourceAttributesData(component:Component):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
+    }
+
     getComponentResourceInstances(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES]);
     }
@@ -208,8 +213,15 @@ export class ComponentServiceNg2 {
         return this.http.get<any>(this.baseUrl + 'interfaceLifecycleTypes')
             .map((res: any) => {
                 const interfaceMap = {};
-                _.forEach(res, (interf: any) => {
-                    interfaceMap[interf.toscaPresentation.type] = _.keys(interf.toscaPresentation.operations);
+                if (!res) {
+                    return interfaceMap;
+                }
+                Object.keys(res).forEach(interfaceName => {
+                    const interface1 = res[interfaceName];
+                    if (!interface1.toscaPresentation.operations) {
+                        return;
+                    }
+                    interfaceMap[interface1.toscaPresentation.type] = Object.keys(interface1.toscaPresentation.operations);
                 });
                 return interfaceMap;
             });
@@ -297,7 +309,6 @@ export class ComponentServiceNg2 {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {})
     }
 
-
     deleteInput(component:Component, input:InputBEModel):Observable<InputBEModel> {
 
         return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
@@ -306,6 +317,14 @@ export class ComponentServiceNg2 {
             })
     }
 
+    deleteOutput(component:Component, output:OutputBEModel):Observable<OutputBEModel> {
+
+        return this.http.delete<OutputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + output.uniqueId + '/output')
+            .map((res) => {
+                return new OutputBEModel(res);
+            })
+    }
+
     updateComponentInputs(component:Component, inputs:InputBEModel[]):Observable<InputBEModel[]> {
 
         return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
@@ -314,9 +333,26 @@ export class ComponentServiceNg2 {
             })
     }
 
+    updateComponentOutputs(component:Component, outputs:OutputBEModel[]):Observable<OutputBEModel[]> {
+
+        return this.http.post<OutputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/outputs', outputs)
+            .map((res) => {
+                return res.map((output) => new OutputBEModel(output));
+            })
+    }
+
     filterComponentInstanceProperties(component:Component, filterData:FilterPropertiesAssignmentData):Observable<InstanceBePropertiesMap> {//instance-property-be-map
         let params: HttpParams = new HttpParams();
-        _.forEach(filterData.selectedTypes, (type:string) => {
+        filterData.selectedTypes.forEach((type:string) => {
+            params = params.append('resourceType', type);
+        });
+
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
+    }
+
+    filterComponentInstanceAttributes(component:Component, filterData:FilterPropertiesAssignmentData):Observable<InstanceBePropertiesMap> {//instance-property-be-map
+        let params: HttpParams = new HttpParams();
+        filterData.selectedTypes.forEach((type:string) => {
             params = params.append('resourceType', type);
         });
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
index 9460a32323..05384c9eec 100644
--- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -89,7 +89,9 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
             COMPONENT_FIELDS.COMPONENT_INSTANCES_INTERFACES,
             COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES,
             COMPONENT_FIELDS.COMPONENT_INSTANCES_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES_OUTPUTS,
             COMPONENT_FIELDS.COMPONENT_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_OUTPUTS,
             COMPONENT_FIELDS.COMPONENT_INSTANCES,
             COMPONENT_FIELDS.COMPONENT_CAPABILITIES
         ]);
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
index 953f0a1960..0249912862 100644
--- a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -70,6 +70,8 @@ import {
     ComponentInstanceInterfaceModel,
     InterfaceOperationModel
 } from "../../../models/interfaceOperation";
+import {AttributeBEModel} from "../../../models/attributes-outputs/attribute-be-model";
+import {InstanceAttributesAPIMap} from "../../../models/attributes-outputs/attribute-fe-map";
 
 /* we need to use this service from now, we will remove component.service when we finish remove the angular1.
  The service is duplicated since we can not use downgrades service with NGXS*/
@@ -126,6 +128,11 @@ export class TopologyTemplateService {
             [COMPONENT_FIELDS.COMPONENT_INPUTS, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
+    getComponentOutputsWithAttributes(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_OUTPUTS, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES, COMPONENT_FIELDS.COMPONENT_ATTRIBUTES,COMPONENT_FIELDS.COMPONENT_INSTANCES_OUTPUTS]);
+    }
+
     getComponentDeploymentArtifacts(component: Component): Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS]);
     }
@@ -164,6 +171,11 @@ export class TopologyTemplateService {
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
     }
 
+    createOutput(component: Component, outputsToCreate: InstanceAttributesAPIMap, isSelf: boolean): Observable<any> {
+        const outputs = isSelf ? { serviceProperties: outputsToCreate.componentInstanceAttributes } : outputsToCreate;
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/outputs', outputs);
+    }
+
     restoreComponent(componentType: string, componentId: string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {});
     }
@@ -206,6 +218,16 @@ export class TopologyTemplateService {
             });
     }
 
+    createServiceAttribute(componentId: string, attributeModel: AttributeBEModel): Observable<AttributeBEModel> {
+        const serverObject = {};
+        serverObject[attributeModel.name] = attributeModel;
+        return this.http.post<AttributeBEModel>(this.baseUrl + 'services/' + componentId + '/attributes', serverObject)
+            .map((res) => {
+                const attribute: AttributeBEModel = new AttributeBEModel(res);
+                return attribute;
+            });
+    }
+
     getServiceProperties(componentId: string): Observable<PropertyBEModel[]> {
         return this.http.get<any>(this.baseUrl + 'services/' + componentId + '/properties')
             .map((res) => {
@@ -216,6 +238,16 @@ export class TopologyTemplateService {
             });
     }
 
+    getServiceAttributes(componentId: string): Observable<AttributeBEModel[]> {
+        return this.http.get<any>(this.baseUrl + 'services/' + componentId + '/attributes')
+            .map((res) => {
+                if (!res) {
+                    return new Array<AttributeBEModel>();
+                }
+                return CommonUtils.initAttributes(res);
+            });
+    }
+
     updateServiceProperties(componentId: string, properties: PropertyBEModel[]) {
         return this.http.put<any>( this.baseUrl + 'services/' + componentId + '/properties', properties)
             .map((res) => {
@@ -225,6 +257,15 @@ export class TopologyTemplateService {
             });
     }
 
+    updateServiceAttributes(componentId: string, attributes: AttributeBEModel[]) {
+        return this.http.put<any>( this.baseUrl + 'services/' + componentId + '/attributes', attributes)
+            .map((res) => {
+                const resJson = res;
+                return _.map(resJson,
+                    (resValue: AttributeBEModel) => new AttributeBEModel(resValue));
+            });
+    }
+
     deleteServiceProperty(componentId: string, property: PropertyBEModel): Observable<string> {
         return this.http.delete(this.baseUrl + 'services/' + componentId + '/properties/' + property.uniqueId )
             .map((res: Response) => {
@@ -242,6 +283,13 @@ export class TopologyTemplateService {
             });
     }
 
+    deleteServiceAttribute(componentId: string, attribute: AttributeBEModel): Observable<string> {
+        return this.http.delete(this.baseUrl + 'services/' + componentId + '/attributes/' + attribute.uniqueId )
+            .map((res: Response) => {
+                return attribute.uniqueId;
+            });
+    }
+
     getDependencies(componentType: string, componentId: string): Observable<IDependenciesServerResponse[]> {
         return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
     }
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index 0559f35ae2..30eb6f0c77 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -23,6 +23,7 @@ import { Injectable } from '@angular/core';
 import { DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty} from "app/models";
 import { DataTypesService } from "app/services/data-types-service";
 import { PROPERTY_DATA } from "app/utils";
+import {DerivedFEAttribute} from "../../models/attributes-outputs/derived-fe-attribute";
 
 /** This is a new service for NG2, to eventually replace app/services/data-types-service.ts
  *
@@ -57,7 +58,6 @@ export class DataTypeService {
         return null;
     }
 
-
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
         if (!dataTypeObj) return;
@@ -76,6 +76,24 @@ export class DataTypeService {
         }
     }
 
+    public getDerivedDataTypeAttributes(dataTypeObj: DataTypeModel, attributesArray: Array<DerivedFEAttribute>, parentName: string) {
+        //push all child properties to array
+        if (!dataTypeObj) return;
+        if (dataTypeObj.attributes) {
+            dataTypeObj.attributes.forEach((derivedAttribute) => {
+                if(dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedAttribute.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA){//The requirement is to not display the property supplemental_data
+                    attributesArray.push(new DerivedFEAttribute(derivedAttribute, parentName));
+                }
+                let derivedDataTypeObj: DataTypeModel = this.getDataTypeByTypeName(derivedAttribute.type);
+                this.getDerivedDataTypeAttributes(derivedDataTypeObj, attributesArray, parentName + "#" + derivedAttribute.name);
+            });
+        }
+        //recurse parent (derivedFrom), in case one of parents contains properties
+        if (dataTypeObj.derivedFrom && PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFrom.name) {
+            this.getDerivedDataTypeAttributes(dataTypeObj.derivedFrom, attributesArray, parentName);
+        }
+    }
+
     /**
      * Checks for custom behavior for a given data type by checking if a function exists within data-type.service with that name
      * Additional custom behavior can be added by adding a function with the given dataType name
diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
index c6be9c369a..09ace56965 100644
--- a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
+++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
@@ -26,11 +26,11 @@ import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, Att
     InputBEModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup} from "app/models";
 import {CommonUtils} from "app/utils";
 import {Serializable} from "../utils/serializable";
-import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
 import { PolicyInstance } from "app/models/graph/zones/policy-instance";
 import { GroupInstance } from "../../../models/graph/zones/group-instance";
 import { InputsGroup } from "../../../models/inputs";
 import { InterfaceModel } from "../../../models/operation";
+import { OutputBEModel } from "app/models/attributes-outputs/output-be-model";
 
 export class ComponentGenericResponse  implements Serializable<ComponentGenericResponse> {
 
@@ -45,6 +45,7 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
     public componentInstances:Array<ComponentInstance>;
     public componentInstancesInterfaces: Map<string, Array<InterfaceModel>>;
     public inputs:Array<InputBEModel>;
+    public outputs:Array<OutputBEModel>;
     public capabilities:CapabilitiesGroup;
     public requirements:RequirementsGroup;
     public properties:Array<PropertyModel>;
@@ -82,6 +83,9 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
         if(response.inputs) {
             this.inputs = CommonUtils.initInputs(response.inputs);
         }
+        if (response.outputs) {
+            this.outputs = CommonUtils.initOutputs(response.outputs);
+        }
         if(response.attributes) {
             this.attributes = CommonUtils.initAttributes(response.attributes);
         }