summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2
diff options
context:
space:
mode:
authoraribeiro <anderson.ribeiro@est.tech>2020-05-13 13:49:31 +0100
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-06-14 14:49:56 +0000
commit71d758215e0ae619968d46b85427f60bc3b1736e (patch)
treede450a3c2d105da9537a1faa8af1b88da4c2f05d /catalog-ui/src/app/ng2
parent8d72481341ac6be40c380352a2a7ef5cc536692d (diff)
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>
Diffstat (limited to 'catalog-ui/src/app/ng2')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/directive-option.ts15
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html67
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less6
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts92
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts1
-rw-r--r--catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts1
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts2
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/common/style/component-instances-nodes-style.ts15
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/service-paths-list/service-paths-list.component.ts2
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap1
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html23
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.less1
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts8
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tabs.less2
-rw-r--r--catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts4
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[]> {