From 71d758215e0ae619968d46b85427f60bc3b1736e Mon Sep 17 00:00:00 2001 From: aribeiro Date: Wed, 13 May 2020 13:49:31 +0100 Subject: 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 --- .../pages/composition/common/store/graph.state.ts | 2 +- .../style/component-instances-nodes-style.ts | 15 ++++++++++++++ .../service-paths-list.component.ts | 2 +- .../composition-panel.component.spec.ts.snap | 1 + .../panel/composition-panel.component.html | 23 +++++++++++++++------- .../panel/composition-panel.component.less | 1 + .../panel/composition-panel.component.ts | 8 +++++++- .../composition/panel/panel-tabs/panel-tabs.less | 2 +- 8 files changed, 43 insertions(+), 11 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/composition') 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, 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 @@ -134,6 +134,21 @@ export class ComponentInstanceNodesStyle { 'overlay-opacity': 0 } }, + { + 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: { 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 @@ - + +
- - + + + +
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; -- cgit 1.2.3-korg