diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/panel')
5 files changed, 26 insertions, 9 deletions
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; |