summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages
diff options
context:
space:
mode:
authoraribeiro <anderson.ribeiro@est.tech>2020-10-05 10:45:11 +0100
committerChristophe Closset <christophe.closset@intl.att.com>2020-11-16 12:08:35 +0000
commit1ae28c3a8b33e286331608e1c4a1e3cc483699eb (patch)
treee0862ec700300fd5a55e2cab01d5add631b3da1d /catalog-ui/src/app/ng2/pages
parent126df1ea8430799f1fd2db2ea5227543df17d699 (diff)
Fix node filter capability filters
Issue-ID: SDC-3335 Signed-off-by: aribeiro <anderson.ribeiro@est.tech> Change-Id: I6ffc1e0fb079ac0e33262f16a62deefda97f7616 Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages')
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html81
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less44
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts214
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts46
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html1
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts26
-rw-r--r--catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html9
7 files changed, 411 insertions, 10 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html
new file mode 100644
index 0000000000..1dcbc16c12
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.html
@@ -0,0 +1,81 @@
+<!--
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2020 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+-->
+
+<div class="app-capabilities-filter-properties-editor">
+ <form class="w-sdc-form">
+ <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+ <div class="i-sdc-form-content">
+ <div class="rule-builder-content">
+ <div class="i-sdc-form-item rule-input-field">
+ <label class="i-sdc-form-label required">{{currentServiceName}} Capabilities</label>
+ <ui-element-dropdown class="i-sdc-form-select" class="rule-assigned-value"
+ [(value)]="currentRule.capabilityName"
+ [values]="capabilitiesNames"
+ (elementChanged)="onCapabilityNameChanged($event.value)">
+ </ui-element-dropdown>
+ </div>
+
+ <div class="i-sdc-form-item rule-input-field">
+ <label class="i-sdc-form-label required">Capability Properties</label>
+ <ui-element-dropdown class="i-sdc-form-select" class="rule-assigned-value"
+ [(value)]="this.currentRule.servicePropertyName"
+ [values]="capabilityProperties"
+ (change)="onServicePropertyChanged()">
+ </ui-element-dropdown>
+ </div>
+
+ <div class="i-sdc-form-item rule-input-field operator">
+ <ui-element-dropdown class="i-sdc-form-select"
+ [values]="operatorTypes"
+ [(value)]="currentRule.constraintOperator">
+ </ui-element-dropdown>
+ </div>
+
+ <div class="i-sdc-form-item rule-input-field">
+ <label class="i-sdc-form-label required" >Source</label>
+ <ui-element-dropdown class="i-sdc-form-select"
+ [values]="sourceTypes"
+ [(value)]="currentRule.sourceName"
+ (change)="onSelectSourceType()">
+ </ui-element-dropdown>
+ </div>
+
+ <div class="rule-input-field assigned-value-field">
+ <label class="i-sdc-form-label required" >{{assignedValueLabel}}</label>
+ <dynamic-element
+ *ngIf="currentRule.sourceType === SOURCE_TYPES.STATIC.value"
+ [(value)]="currentRule.value"
+ class="rule-assigned-value"
+ data-tests-id="ruleAssignedValue"
+ (elementChanged)="onValueChange($event.isValid)"
+ [type]="selectedCapabilitiesPropertyObject ? selectedCapabilitiesPropertyObject.type : 'string'">
+ </dynamic-element>
+ <ui-element-dropdown *ngIf="currentRule.sourceType !== SOURCE_TYPES.STATIC.value"
+ class="rule-assigned-value"
+ data-tests-id="ruleAssignedValue"
+ [(value)]="currentRule.value"
+ [values]="listOfValuesToAssign">
+ </ui-element-dropdown>
+ </div>
+ </div>
+ </div>
+ </form>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
new file mode 100644
index 0000000000..188fb7b5ef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.less
@@ -0,0 +1,44 @@
+@import './../../../../../assets/styles/variables.less';
+
+
+.sdc-modal-top-bar {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.i-sdc-form-content {
+ display: flex;
+ flex-direction: column;
+ margin-top: 10px;
+ padding-bottom: 20px;
+
+ .i-sdc-form-item {
+ width: 250px;
+ &.operation {
+ width: 60px;
+ }
+ }
+
+ .rule-builder-content {
+ display: flex;
+ align-items: flex-end;
+ .rule-input-field {
+ flex: 1;
+ &:not(:last-of-type) {
+ margin-right: 20px;
+ }
+ &.operator{
+ width: 55px;
+ flex: 0 1 auto;
+ }
+ &.assigned-value-field {
+ margin-bottom: 10px;
+ }
+ /deep/ ui-element-dropdown select,
+ /deep/ ui-element-input input {
+ height: 30px;
+ }
+ }
+
+ }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts
new file mode 100644
index 0000000000..1205556ee0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.component.ts
@@ -0,0 +1,214 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+* Copyright (C) 2020 Nordix Foundation. All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*
+* SPDX-License-Identifier: Apache-2.0
+* ============LICENSE_END=========================================================
+*/
+
+import { Component } from '@angular/core';
+import {InputBEModel, PropertyBEModel, PropertyModel} from 'app/models';
+import { OPERATOR_TYPES } from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
+import { DropdownValue } from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
+import { PROPERTY_DATA } from 'app/utils';
+import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces';
+import {CapabilitiesConstraintObjectUI} from "../../../components/logic/capabilities-constraint/capabilities-constraint.component";
+
+export class UIDropDownSourceTypesElement extends DropdownValue {
+ options: any[];
+ assignedLabel: string;
+ type: string;
+ constructor(input?: any) {
+ if (input) {
+ const value = input.value || '';
+ const label = input.label || '';
+ super(value, label);
+ this.options = input.options;
+ this.assignedLabel = input.assignedLabel;
+ this.type = input.type;
+ }
+ }
+}
+
+@Component({
+ selector: 'app-capabilities-filter-properties-editor',
+ templateUrl: './capabilities-filter-properties-editor.component.html',
+ styleUrls: ['./capabilities-filter-properties-editor.component.less'],
+ providers: [ServiceServiceNg2]
+})
+export class CapabilitiesFilterPropertiesEditorComponent {
+
+ constructor() {
+ }
+
+ input: {
+ serviceRuleIndex: number,
+ serviceRules: CapabilitiesConstraintObjectUI[],
+ compositeServiceName: string,
+ currentServiceName: string,
+ parentServiceInputs: InputBEModel[],
+ selectedInstanceProperties: PropertyBEModel[],
+ operatorTypes: DropdownValue[],
+ selectedInstanceSiblings: ServiceInstanceObject[],
+ componentInstanceCapabilitiesMap: Map<string, PropertyModel[]>,
+ };
+ currentServiceName: string;
+ selectedServiceProperties: PropertyBEModel[];
+ operatorTypes: DropdownValue[];
+ sourceTypes: UIDropDownSourceTypesElement[] = [];
+ currentRule: CapabilitiesConstraintObjectUI;
+ currentIndex: number;
+ listOfValuesToAssign: DropdownValue[];
+ listOfSourceOptions: PropertyBEModel[];
+ assignedValueLabel: string;
+ serviceRulesList: CapabilitiesConstraintObjectUI[];
+
+ capabilitiesNames: string[];
+ selectedPropertiesByCapabilityName: Array<PropertyModel>;
+ selectedCapabilityName: string;
+ capabilityProperties: DropdownValue[];
+
+ selectedCapabilitiesPropertyObject: PropertyBEModel;
+
+ SOURCE_TYPES = {
+ STATIC: {label: 'Static', value: 'static'},
+ SERVICE_PROPERTY: {label: 'Service Property', value: 'property'},
+ CAPABILITY_NAME: {label: 'Name', value: 'name'}
+ };
+
+ ngOnInit() {
+ this.capabilitiesNames = Array.from(this.input.componentInstanceCapabilitiesMap.keys());
+ this.currentIndex = this.input.serviceRuleIndex;
+ this.serviceRulesList = this.input.serviceRules;
+ this.currentRule = this.serviceRulesList && this.input.serviceRuleIndex >= 0 ?
+ this.serviceRulesList[this.input.serviceRuleIndex] :
+ new CapabilitiesConstraintObjectUI({
+ capabilityName: this.SOURCE_TYPES.CAPABILITY_NAME.value,
+ sourceName: this.SOURCE_TYPES.STATIC.value,
+ sourceType: this.SOURCE_TYPES.STATIC.value, value: '',
+ constraintOperator: OPERATOR_TYPES.EQUAL});
+ this.currentServiceName = this.input.currentServiceName;
+ this.operatorTypes = this.input.operatorTypes;
+
+ this.initSourceTypes();
+ this.syncRuleData();
+ this.updateSourceTypesRelatedValues();
+ this.onCapabilityNameChanged(this.currentRule.capabilityName)
+ }
+
+ initSourceTypes() {
+ this.sourceTypes.push({label: this.SOURCE_TYPES.STATIC.label, value: this.SOURCE_TYPES.STATIC.value,
+ options: [], assignedLabel: this.SOURCE_TYPES.STATIC.label, type: this.SOURCE_TYPES.STATIC.value});
+ this.sourceTypes.push({
+ label: this.input.compositeServiceName,
+ value: this.input.compositeServiceName,
+ assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
+ type: this.SOURCE_TYPES.SERVICE_PROPERTY.value,
+ options: this.input.parentServiceInputs
+ });
+ _.forEach(this.input.selectedInstanceSiblings, (sib) =>
+ this.sourceTypes.push({
+ label: sib.name,
+ value: sib.name,
+ options: sib.properties || [],
+ assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
+ type: this.SOURCE_TYPES.SERVICE_PROPERTY.value
+ })
+ );
+ }
+
+ syncRuleData() {
+ if (!this.currentRule.sourceName && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value) {
+ this.currentRule.sourceName = this.SOURCE_TYPES.STATIC.value;
+ }
+ this.selectedCapabilitiesPropertyObject = Array.from(this.input.componentInstanceCapabilitiesMap
+ .get(this.currentRule.capabilityName))
+ .find(property => property.name == this.currentRule.servicePropertyName);
+ this.updateOperatorTypesList();
+ this.updateSourceTypesRelatedValues();
+ }
+
+ updateOperatorTypesList() {
+ if (this.selectedCapabilitiesPropertyObject && PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedCapabilitiesPropertyObject.type) === -1) {
+ this.operatorTypes = [{label: '=', value: OPERATOR_TYPES.EQUAL}];
+ this.currentRule.constraintOperator = OPERATOR_TYPES.EQUAL;
+ } else {
+ this.operatorTypes = this.input.operatorTypes;
+ }
+ }
+
+ updateSourceTypesRelatedValues() {
+ if (this.currentRule.sourceName) {
+ const selectedSourceType: UIDropDownSourceTypesElement = this.sourceTypes.find(
+ (t) => t.value === this.currentRule.sourceName && t.type === this.currentRule.sourceType
+ );
+ if(selectedSourceType) {
+ this.listOfSourceOptions = selectedSourceType.options || [];
+ this.assignedValueLabel = selectedSourceType.assignedLabel || this.SOURCE_TYPES.STATIC.label;
+ this.filterOptionsByType();
+ }
+ }
+ }
+
+ onCapabilityNameChanged= (value: any): void => {
+ this.selectedPropertiesByCapabilityName = this.input.componentInstanceCapabilitiesMap.get(value);
+ this.capabilityProperties = _.map(this.selectedPropertiesByCapabilityName, (prop) => new DropdownValue(prop.name, prop.name));
+ this.selectedCapabilityName = value;
+ this.updateOperatorTypesList();
+ this.filterOptionsByType();
+ }
+
+ onServicePropertyChanged() {
+ this.updateOperatorTypesList();
+ this.filterOptionsByType();
+ this.currentRule.value = '';
+ }
+
+ onSelectSourceType() {
+ this.currentRule.sourceType = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value ?
+ this.SOURCE_TYPES.STATIC.value :
+ this.SOURCE_TYPES.SERVICE_PROPERTY.value;
+ this.updateSourceTypesRelatedValues();
+ this.currentRule.value = '';
+ }
+
+ filterOptionsByType() {
+ if (!this.selectedCapabilitiesPropertyObject) {
+ this.listOfValuesToAssign = [];
+ return;
+ }
+ this.listOfValuesToAssign = this.listOfSourceOptions.reduce((result, op: PropertyModel) => {
+ if (op.type === this.selectedCapabilitiesPropertyObject.type && (!op.schemaType || op.schemaType === this.selectedCapabilitiesPropertyObject.schemaType)) {
+ result.push(new DropdownValue(op.name, op.name));
+ }
+ return result;
+ }, []);
+ }
+
+ onValueChange(isValidValue) {
+ this.currentRule.updateValidity(isValidValue);
+ }
+
+ checkFormValidForSubmit() {
+ if (!this.serviceRulesList) {
+ const isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
+ return this.currentRule.isValidRule(isStatic);
+ }
+ return this.serviceRulesList.every((rule) => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts
new file mode 100644
index 0000000000..27bcb8a4e0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module.ts
@@ -0,0 +1,46 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+* Copyright (C) 2020 Nordix Foundation. All rights reserved.
+* ================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*
+* SPDX-License-Identifier: Apache-2.0
+* ============LICENSE_END=========================================================
+*/
+
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module';
+import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module';
+import {CapabilitiesFilterPropertiesEditorComponent} from "./capabilities-filter-properties-editor.component";
+
+@NgModule({
+ declarations: [
+ CapabilitiesFilterPropertiesEditorComponent
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ FormElementsModule,
+ UiElementsModule
+ ],
+ exports: [],
+ entryComponents: [
+ CapabilitiesFilterPropertiesEditorComponent
+ ],
+ providers: []
+})
+export class CapabilitiesFilterPropertiesEditorComponentModule {
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
index 508584d486..588ac8359b 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.html
@@ -6,6 +6,7 @@
[compositeService]="metaData"
[currentServiceInstance]="component"
[selectedInstanceProperties]="selectedInstanceProperties"
+ [componentInstanceCapabilitiesMap]="componentInstanceCapabilitiesMap"
[selectedInstanceSiblings]="selectedInstanceSiblings"
[selectedInstanceConstraints]="selectedInstanceConstraints"
[readonly]="isViewOnly"
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
index 43c38b58b0..f844dfae4c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/service-dependencies-tab/service-dependencies-tab.component.ts
@@ -1,10 +1,11 @@
import {Component, Input} from '@angular/core';
import {Store} from '@ngxs/store';
import {
+ CapabilitiesGroup, Capability,
Component as TopologyTemplate,
FullComponentInstance,
PropertiesGroup,
- PropertyBEModel,
+ PropertyBEModel, PropertyModel,
} from 'app/models';
import {DEPENDENCY_EVENTS} from 'app/utils/constants';
import {ComponentMetadata} from '../../../../../../models/component-metadata';
@@ -16,6 +17,7 @@ import {ComponentGenericResponse} from '../../../../../services/responses/compon
import {WorkspaceService} from '../../../../workspace/workspace.service';
import {SelectedComponentType} from '../../../common/store/graph.actions';
import {CompositionService} from '../../../composition.service';
+import {CapabilitiesConstraintObject} from "../../../../../components/logic/capabilities-constraint/capabilities-constraint.component";
@Component({
selector: 'service-dependencies-tab',
@@ -30,7 +32,10 @@ export class ServiceDependenciesTabComponent {
selectedInstanceConstraints: ConstraintObject[];
selectedInstanceProperties: PropertyBEModel[];
componentInstanceProperties: PropertiesGroup;
+ componentInstanceCapabilityProperties: CapabilitiesGroup;
metaData: ComponentMetadata;
+ componentInstanceCapabilitiesMap : Map<string, PropertyModel[]> = new Map();
+ componentInstanceCapabilitiesNames: string[];
@Input() isViewOnly: boolean;
@Input() componentType: SelectedComponentType;
@@ -50,6 +55,7 @@ export class ServiceDependenciesTabComponent {
this.initInstancesWithProperties();
this.loadConstraints();
this.initInstancesWithProperties();
+ this.initInstancesWithCapabilityProperties()
}
public loadConstraints = (): void => {
@@ -67,7 +73,7 @@ export class ServiceDependenciesTabComponent {
this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].properties;
}
- public updateSelectedInstanceCapabilitiesConstraints = (constraintsList:Array<ConstraintObject>):void => {
+ public updateSelectedInstanceCapabilitiesConstraints = (constraintsList:Array<CapabilitiesConstraintObject>):void => {
this.componentInstancesConstraints[this.component.uniqueId].capabilities = constraintsList;
this.selectedInstanceConstraints = this.componentInstancesConstraints[this.component.uniqueId].capabilities;
}
@@ -90,4 +96,20 @@ export class ServiceDependenciesTabComponent {
this.selectedInstanceSiblings = instancesMappedList.filter((coInstance) => coInstance.id !== this.component.uniqueId);
}
}
+
+ private initInstancesWithCapabilityProperties = (): void => {
+ this.componentInstanceCapabilityProperties = this.component.capabilities;
+ this.updateComponentInstanceCapabilities();
+ }
+
+ private updateComponentInstanceCapabilities = (): void => {
+ if (this.isComponentInstanceSelected && this.componentInstanceCapabilityProperties) {
+ _.forEach(_.flatten(_.values(this.componentInstanceCapabilityProperties)), (capability: Capability) => {
+ if (capability.properties) {
+ this.componentInstanceCapabilitiesMap.set(capability.name, capability.properties);
+ }
+ });
+ }
+ }
+
}
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
index f22e454332..4b23568a06 100644
--- a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
@@ -1,13 +1,6 @@
<div class="service-dependencies-editor">
<form class="w-sdc-form">
- <div class="sdc-modal-top-bar">
- <div class="sdc-modal-top-bar-buttons" *ngIf="currentIndex >= 0">
- <span (click)="onChangePage(currentIndex - 1)" [ngClass]="{'disabled' : currentIndex === 0}" class="sprite-new left-arrow" data-tests-id="get-prev-rule" tooltip="Previous"></span>
- <span (click)="onChangePage(currentIndex + 1)" [ngClass]="{'disabled' : currentIndex === input.serviceRules.length - 1}" class="sprite-new right-arrow" data-tests-id="get-next-rule" tooltip="Next"></span>
- </div>
- </div>
-
<loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
<div class="i-sdc-form-content">
@@ -53,4 +46,4 @@
</div>
</form>
-</div> \ No newline at end of file
+</div>