Add support for directives on VFC

This change also updates the directives values according to Tosca 1.3 spec

Issue-ID: SDC-3074
Change-Id: Ia6a68c9a23a71a2c17ba2c006990342811aa7b4e
Signed-off-by: aribeiro <anderson.ribeiro@est.tech>

8 files changed, 43 insertions, 11 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts
index d58bb446df..7c352a61dc 100644
--- a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts
@@ -39,7 +39,7 @@ export class GraphState {
     setSelectedComponent({dispatch, getState, patchState}:StateContext<CompositionStateModel>, action: SetSelectedComponentAction) {
         
         const state:CompositionStateModel = getState();
-        
+
         patchState({ panelLoading: true });
 
         if(action.payload.component instanceof ComponentInstance){
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts
index cc9cac16e6..4a975dab77 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts
@@ -135,6 +135,21 @@ export class ComponentInstanceNodesStyle {
                 }
             },
             {
+                selector: '.vfc-node',
+                css: {
+                    'background-color': 'transparent',
+                    'label': 'data(displayName)',
+                    'background-image': 'data(img)',
+                    'width': 64,
+                    'height': 64,
+                    'text-valign': 'bottom',
+                    'text-halign': 'center',
+                    'background-opacity': 0,
+                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
+                    'overlay-opacity': 0
+                }
+            },
+            {
                 selector: '.ucpe-cp',
                 css: {
                     'background-color': GraphColors.NODE_UCPE_CP,
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts
index 81abe42cb3..fc31cd9dc3 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts
@@ -55,7 +55,7 @@ export class ServicePathsListComponent {
         });
         this.onAddServicePath = this.input.onCreateServicePath;
         this.onEditServicePath = this.input.onEditServicePath;
-        this.isViewOnly =  this.input.isViewOnly;
+        this.isViewOnly = this.input.isViewOnly;
     }
 
     deletePath = (id:string):void =>   {
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
index 5f10806315..fdede9d09e 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
@@ -9,6 +9,7 @@ exports[`composition-panel component should match current snapshot of compositio
   isConfiguration={[Function Function]}
   isPNF={[Function Function]}
   selectedComponentIsServiceProxyInstance={[Function Function]}
+  selectedComponentIsVfcInstance={[Function Function]}
   setActive={[Function Function]}
   store={[Function Store]}
   toggleSidebarDisplay={[Function Function]}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
index bd90b9a814..5511dc0ea8 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
@@ -1,17 +1,26 @@
 <panel-wrapper-component *ngIf="compositionState$ | async as state">   <!-- HEADER -->
 
-    <ng2-composition-panel-header [isViewOnly]="state.isViewOnly"
-                                    [selectedComponent]="state.selectedComponent"></ng2-composition-panel-header>
+    <ng2-composition-panel-header
+        [isViewOnly]="state.isViewOnly"
+        [selectedComponent]="state.selectedComponent">
+    </ng2-composition-panel-header>
 
     <!-- TABS -->
     <div class="component-details-panel-tabs">
         <sdc-loader [global]="false" name="panel" testId="panel-loader" [active]="state.panelLoading"></sdc-loader>
         <sdc-tabs (selectedTab)="setActive($event)" [iconsSize]="'large'">
-            <sdc-tab *ngFor="let tab of tabs" [titleIcon]="tab.titleIcon" [active]="tab.isActive"
-                        [tooltipText]="tab.tooltipText">
-                <panel-tab [isActive]="tab.isActive" [component]="selectedComponent"
-                            [componentType]="state.selectedComponentType" [isViewOnly]="isViewOnly$ | async"
-                            [input]="tab.input" [panelTabType]="tab.component"></panel-tab>
+            <sdc-tab *ngFor="let tab of tabs"
+                     [titleIcon]="tab.titleIcon"
+                     [active]="tab.isActive"
+                     [tooltipText]="tab.tooltipText">
+
+                <panel-tab [isActive]="tab.isActive"
+                           [component]="selectedComponent"
+                           [componentType]="state.selectedComponentType"
+                           [isViewOnly]="isViewOnly$ | async"
+                           [input]="tab.input"
+                           [panelTabType]="tab.component">
+                </panel-tab>
             </sdc-tab>
         </sdc-tabs>
     </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
index 776ef68944..124d606079 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less
@@ -14,6 +14,7 @@
 .component-details-panel-tabs /deep/ sdc-tabs {
     display:flex;
     flex-direction:column;
+    width: 100%;
 
     /deep/ sdc-tab {
         display: flex;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
index c5ea41bcd1..348dc9f8c1 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
@@ -53,7 +53,7 @@ const tabs = {
     inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
     settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
     consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'},
-    dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'SERVICE DEPENDENCIES'}, isActive: false, tooltipText: 'Service Dependencies'}
+    dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'}
 };
 
 @Component({
@@ -144,6 +144,8 @@ export class CompositionPanelComponent {
         if (component.isService() && this.selectedComponentIsServiceProxyInstance()) {
             this.tabs.push(tabs.consumption);
             this.tabs.push(tabs.dependencies);
+        } else if (component.isResource() && this.selectedComponentIsVfcInstance()) {
+            this.tabs.push(tabs.dependencies);
         }
 
     }
@@ -168,4 +170,8 @@ export class CompositionPanelComponent {
     private selectedComponentIsServiceProxyInstance = (): boolean => {
         return this.isComponentInstanceSelected() && this.selectedComponent.isServiceProxy();
     }
+
+    private selectedComponentIsVfcInstance = (): boolean => {
+        return this.isComponentInstanceSelected() && this.selectedComponent.isVFC();
+    }
 }
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less
index b3c03f85c5..16767c2211 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less
@@ -20,7 +20,7 @@
         border-left: none;
         border-bottom: none;
         height: 36px;
-        width: 60px;
+        width: 100%;
         display: flex;
         align-content: center;
         justify-content: center;