diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
15 files changed, 170 insertions, 70 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts new file mode 100644 index 0000000000..f2c4b1f895 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts @@ -0,0 +1,15 @@ +export enum DirectivesEnum { + SELECT = 'select', + SELECTABLE = 'selectable', + SUBSTITUTE = 'substitute', + SUBSTITUTABLE = 'substitutable', +} + +export namespace DirectiveValue { + + export function values() { + return Object.keys(DirectivesEnum).filter( + (type) => isNaN(<any>type) && type !== 'values' + ); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html index d71a4fbecb..833f6f3c62 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html @@ -1,35 +1,44 @@ <div class="service-dependencies"> - <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> - <div class="checkbox-label-mark-as-dependent"> - <checkbox - class="checkbox-label" - data-tests-id="checkbox-mark-as-dependent" - [label]="'Mark as Dependent'" - (checkedChange)="onMarkAsDependent()" - [(checked)]="isDependent" - [disabled]="readonly"> - </checkbox> - </div> - <div class="i-sdc-designer-sidebar-section-content-item-rules-section" *ngIf="isDependent"> + <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> + <div *ngIf="!isDependent" class="checkbox-label-mark-as-dependent"> + <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect" + (change)='onOptionsSelected($event)'> + <option>Select Directive</option> + <option *ngFor="let item of directiveValues.values()">{{item}}</option> + </select> + </div> - <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}" - *ngFor="let rule of rulesList; let i = index"> - <div class="rule-details" [ngClass]="{'readonly': readonly}"> - <div class="rule-desc" (click)="!readonly && onSelectRule(i)" tooltips tooltip="{{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}}"> - {{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}} - </div> - <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon" (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span> - </div> - </div> + <div *ngIf="isDependent" class="checkbox-label-mark-as-dependent"> + <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue().toUpperCase()}}</label> + <span class="sprite-new delete-btn delete-icon" + (click)="onRemoveDirective()" data-tests-id="delete-input-button"> + </span> + </div> + + <div class="i-sdc-designer-sidebar-section-content-item-rules-section" *ngIf="isDependent && isServiceProxy()"> - <div class="w-sdc-designer-sidebar-section-footer" > - <button - class="w-sdc-designer-sidebar-section-footer-action add-rule-btn tlv-btn blue" - data-tests-id="add-rule-button" - (click)="onAddRule()" - [disabled]="readonly"> - {{'SERVICE_DEPENDENCY_ADD_RULE' | translate}} - </button> + <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}" + *ngFor="let rule of rulesList; let i = index"> + <div class="rule-details" [ngClass]="{'readonly': readonly}"> + <div class="rule-desc" (click)="!readonly && onSelectRule(i)" tooltips + tooltip="{{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}}"> + {{rule.servicePropertyName + ' ' + getSymbol(rule.constraintOperator) + ' ' + + (rule.sourceName ? rule.sourceName + ':' : '') + rule.value}} </div> + <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon" + (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span> + </div> + </div> + + <div class="w-sdc-designer-sidebar-section-footer"> + <button + class="w-sdc-designer-sidebar-section-footer-action add-rule-btn tlv-btn blue" + data-tests-id="add-rule-button" + (click)="onAddRule()" + [disabled]="readonly"> + {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}} + </button> </div> + </div> </div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less index 2fccfb414b..21c2b3aadc 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -21,12 +21,18 @@ .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content { opacity: 0.5; } + .delete-btn { + background-position: -137px -415px; + width: 24px; + height: 24px + } loader { top: 20px; } } + .i-sdc-designer-sidebar-section-content-item-rules-section { .i-sdc-designer-sidebar-section-content-item-rule { border-bottom: 1px solid @main_color_o; diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts index fa75a275aa..f3fd36364a 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts @@ -29,6 +29,7 @@ import { TranslateService } from 'app/ng2/shared/translator/translate.service'; import { ComponentMetadata } from '../../../../models/component-metadata'; import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces'; import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; +import {DirectivesEnum, DirectiveValue} from "./directive-option"; export class ConstraintObject { servicePropertyName: string; @@ -78,30 +79,34 @@ export const OPERATOR_TYPES = { // tslint:disable-next-line:max-classes-per-file class I18nTexts { - static uncheckModalTitle: string; - static uncheckModalText: string; + static removeDirectiveModalTitle: string; + static removeDirectiveModalText: string; + static updateDirectiveModalTitle: string; + static updateDirectiveModalText: string; static modalApprove: string; static modalCancel: string; static modalCreate: string; static modalSave: string; static modalDelete: string; - static addRuleTxt: string; - static updateRuleTxt: string; - static deleteRuleTxt: string; - static deleteRuleMsg: string; + static addNodeFilterTxt: string; + static updateNodeFilterTxt: string; + static deleteNodeFilterTxt: string; + static deleteNodeFilterMsg: string; public static translateTexts(translateService) { - I18nTexts.uncheckModalTitle = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TITLE'); - I18nTexts.uncheckModalText = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TEXT'); + I18nTexts.removeDirectiveModalTitle = translateService.translate('DIRECTIVES_AND_NODE_FILTER_REMOVE_TITLE'); + I18nTexts.removeDirectiveModalText = translateService.translate('DIRECTIVES_AND_NODE_FILTER_REMOVE_TEXT'); + I18nTexts.updateDirectiveModalTitle = translateService.translate('DIRECTIVES_AND_NODE_FILTER_UPDATE_TITLE'); + I18nTexts.updateDirectiveModalText = translateService.translate('DIRECTIVES_AND_NODE_FILTER_UPDATE_TEXT'); I18nTexts.modalApprove = translateService.translate('MODAL_APPROVE'); I18nTexts.modalCancel = translateService.translate('MODAL_CANCEL'); I18nTexts.modalCreate = translateService.translate('MODAL_CREATE'); I18nTexts.modalSave = translateService.translate('MODAL_SAVE'); I18nTexts.modalDelete = translateService.translate('MODAL_DELETE'); - I18nTexts.addRuleTxt = translateService.translate('SERVICE_DEPENDENCY_ADD_RULE'); - I18nTexts.updateRuleTxt = translateService.translate('SERVICE_DEPENDENCY_UPDATE_RULE'); - I18nTexts.deleteRuleTxt = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE'); - I18nTexts.deleteRuleMsg = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE_MSG'); + I18nTexts.addNodeFilterTxt = translateService.translate('DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER'); + I18nTexts.updateNodeFilterTxt = translateService.translate('DIRECTIVES_AND_NODE_FILTER_UPDATE_NODE_FILTER'); + I18nTexts.deleteNodeFilterTxt = translateService.translate('DIRECTIVES_AND_NODE_FILTER_DELETE_NODE_FILTER'); + I18nTexts.deleteNodeFilterMsg = translateService.translate('DIRECTIVES_AND_NODE_FILTER_DELETE_NODE_FILTER_MSG'); } } @@ -127,6 +132,7 @@ export class ServiceDependenciesComponent { @Input() selectedInstanceSiblings: ServiceInstanceObject[]; @Input() selectedInstanceConstraints: ConstraintObject[] = []; @Input() selectedInstanceProperties: PropertyBEModel[] = []; + @Input() directiveValues: any = DirectiveValue; @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>(); @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter(); @Output() dependencyStatus = new EventEmitter<boolean>(); @@ -161,10 +167,27 @@ export class ServiceDependenciesComponent { } } + private getActualDirectiveValue = (): string => { + return this.currentServiceInstance.directives.length > 0 ? this.currentServiceInstance.directives[0] : ""; + } + + private isServiceProxy = (): boolean => { + return this.currentServiceInstance.isServiceProxy(); + } + public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => { const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); - const modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]); + const modalModel: ModalModel = new ModalModel('sm', I18nTexts.removeDirectiveModalTitle, + I18nTexts.removeDirectiveModalText, [actionButton, cancelButton]); + return this.modalServiceNg2.createCustomModal(modalModel); + } + + public openUpdateDependencyModal = (): ComponentRef<ModalComponent> => { + const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); + const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); + const modalModel: ModalModel = new ModalModel('sm', I18nTexts.updateDirectiveModalTitle, + I18nTexts.updateDirectiveModalText, [actionButton, cancelButton]); return this.modalServiceNg2.createCustomModal(modalModel); } @@ -183,7 +206,7 @@ export class ServiceDependenciesComponent { this.isLoading = true; const isDepOrig = this.isDependent; const rulesListOrig = this.rulesList; - this.currentServiceInstance.unmarkAsDependent(); + this.currentServiceInstance.unmarkAsDependent(this.getActualDirectiveValue()); this.updateComponentInstance(isDepOrig, rulesListOrig); } @@ -192,25 +215,39 @@ export class ServiceDependenciesComponent { this.modalServiceNg2.closeCurrentModal(); } - onCheckDependency = () => { - const isDepOrig = this.isDependent; - const rulesListOrig = this.rulesList; - this.currentServiceInstance.markAsDependent(); + onOptionsSelected(event: any) { + const newDirectiveValue = event.target.value; + if (newDirectiveValue.toLowerCase() !== this.getActualDirectiveValue()) { + const rulesListOrig = this.rulesList; + this.setDirectiveValue(newDirectiveValue); + this.rulesList = []; + this.updateComponentInstance(this.isDependent, rulesListOrig); + } + } + + private onRemoveDirective() { + this.openRemoveDependencyModal().instance.open(); this.rulesList = []; - this.updateComponentInstance(isDepOrig, rulesListOrig); } - onMarkAsDependent() { - if (!this.currentServiceInstance.isDependent()) { - this.onCheckDependency(); + private setDirectiveValue(newDirectiveValue: string) { + if (this.isDependent) { + this.openUpdateDependencyModal().instance.open(); + } + if (DirectivesEnum.SELECT == newDirectiveValue.toLowerCase() || + DirectivesEnum.SELECTABLE == newDirectiveValue.toLowerCase()) { + this.currentServiceInstance.markAsSelect(); } else { - this.openRemoveDependencyModal().instance.open(); + this.currentServiceInstance.markAsSubstitute(); } } updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) { this.isLoading = true; - this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => { + this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, + this.compositeService.componentType, + this.currentServiceInstance) + .subscribe((updatedServiceIns: ComponentInstance) => { this.currentServiceInstance = new ComponentInstance(updatedServiceIns); this.isDependent = this.currentServiceInstance.isDependent(); this.dependencyStatus.emit(this.isDependent); @@ -229,7 +266,7 @@ export class ServiceDependenciesComponent { onAddRule() { const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled); - const modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard'); + const modalModel: ModalModel = new ModalModel('l', I18nTexts.addNodeFilterTxt, '', [saveButton, cancelButton], 'standard'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, @@ -249,7 +286,7 @@ export class ServiceDependenciesComponent { onSelectRule(index: number) { const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled); - const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard'); + const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateNodeFilterTxt, '', [saveButton, cancelButton], 'standard'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, @@ -328,7 +365,8 @@ export class ServiceDependenciesComponent { } openDeleteModal = (index: number) => { - this.modalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg, + this.modalServiceNg2.createActionModal(I18nTexts.deleteNodeFilterTxt, I18nTexts.deleteNodeFilterMsg, I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open(); } + } diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts index 5e2d03d26c..10cd141a87 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts @@ -1,4 +1,3 @@ - import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts index baadbd8e02..dd48af2f89 100644 --- a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts @@ -51,6 +51,7 @@ export class SdcElementIconComponent { case SdcElementType.POLICY: this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle'); break; + case ResourceType.VFC: case ResourceType.CP: case ResourceType.VL: this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium'); 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; 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 0abb163404..6d19ed8bcc 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 @@ -233,8 +233,8 @@ export class TopologyTemplateService { return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade); } - updateComponentInstance(componentMetaDataId: string, componentInstance:ComponentInstance): Observable<ComponentInstance> { - return this.http.post<ComponentInstance>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance); + updateComponentInstance(componentMetaDataId: string, componentType: string, componentInstance:ComponentInstance): Observable<ComponentInstance> { + return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance); } updateMultipleComponentInstances(componentId: string, componentType: string, instances: ComponentInstance[]): Observable<ComponentInstance[]> { |