From ea500601492d9fcf5ad01d9bcc954c3525903e1b Mon Sep 17 00:00:00 2001 From: eschcam Date: Mon, 20 Mar 2023 10:59:44 +0000 Subject: [PATCH] Order targets in policy target modal alphabetically Issue-ID: SDC-4441 Signed-off-by: eschcam Change-Id: If85c77281add34a08e9cbcedb7adc194a0d8c25b --- .../policy-targets-tab.component.ts | 130 ++++++++++----------- 1 file changed, 65 insertions(+), 65 deletions(-) diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.ts index f117290397..92fcf707ce 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/policy-targets-tab/policy-targets-tab.component.ts @@ -18,104 +18,101 @@ * ============LICENSE_END========================================================= */ -import * as _ from "lodash"; -import { Component, Input, Output, EventEmitter, OnChanges, HostBinding, OnDestroy, OnInit } from "@angular/core"; -import { TranslateService } from './../../../../../shared/translator/translate.service'; -import { PoliciesService } from "../../../../../services/policies.service"; -import { PolicyInstance } from './../../../../../../models/graph/zones/policy-instance'; -import { SdcUiComponents, SdcUiCommon, SdcUiServices } from "onap-ui-angular"; -import { AddElementsComponent } from "../../../../../components/ui/modal/add-elements/add-elements.component"; -import { TargetUiObject } from "../../../../../../models/ui-models/ui-target-object"; -import { ComponentInstance } from "../../../../../../models/componentsInstances/componentInstance"; -import { TargetOrMemberType } from "../../../../../../utils/constants"; -import { GRAPH_EVENTS } from 'app/utils'; +import { Component, HostBinding, Input, OnInit } from '@angular/core'; +import { Select, Store } from '@ngxs/store'; +import { CompositionService } from 'app/ng2/pages/composition/composition.service'; +import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service'; import { EventListenerService } from 'app/services/event-listener-service'; -import { CompositionService } from "app/ng2/pages/composition/composition.service"; -import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service"; -import { Store } from "@ngxs/store"; -import { Select } from "@ngxs/store"; -import { Observable } from "rxjs"; -import { tap } from "rxjs/operators"; -import {GraphState} from "../../../common/store/graph.state"; +import { GRAPH_EVENTS } from 'app/utils'; +import * as _ from 'lodash'; +import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular'; +import { Observable } from 'rxjs'; +import { tap } from 'rxjs/operators'; +import { ComponentInstance } from '../../../../../../models/componentsInstances/componentInstance'; +import { PolicyInstance } from '../../../../../../models/graph/zones/policy-instance'; +import { TargetUiObject } from '../../../../../../models/ui-models/ui-target-object'; +import { TargetOrMemberType } from '../../../../../../utils/constants'; +import { AddElementsComponent } from '../../../../../components/ui/modal/add-elements/add-elements.component'; +import { PoliciesService } from '../../../../../services/policies.service'; +import { TranslateService } from '../../../../../shared/translator/translate.service'; +import { GraphState } from '../../../common/store/graph.state'; @Component({ selector: 'policy-targets-tab', templateUrl: './policy-targets-tab.component.html', styleUrls: ['policy-targets-tab.component.less'] }) - -export class PolicyTargetsTabComponent implements OnInit { - @Input() input:any; +export class PolicyTargetsTabComponent implements OnInit { + @Input() input: any; @Input() isViewOnly: boolean; @HostBinding('class') classes = 'component-details-panel-tab-policy-targets'; @Select(GraphState.getSelectedComponent) policy$: Observable; public policy: PolicyInstance; + public targets: TargetUiObject[]; // UI object to hold all targets with names. private subscription; - - private addModalInstance: SdcUiComponents.ModalComponent; - public targets: Array; // UI object to hold all targets with names. + private addModalInstance: SdcUiComponents.ModalComponent; constructor(private translateService: TranslateService, - private policiesService: PoliciesService, - private modalService: SdcUiServices.ModalService, - private eventListenerService: EventListenerService, - private compositionService: CompositionService, - private workspaceService: WorkspaceService, - private loaderService: SdcUiServices.LoaderService, - private store: Store + private policiesService: PoliciesService, + private modalService: SdcUiServices.ModalService, + private eventListenerService: EventListenerService, + private compositionService: CompositionService, + private workspaceService: WorkspaceService, + private loaderService: SdcUiServices.LoaderService, + private store: Store ) { } ngOnInit() { this.subscription = this.policy$.pipe( tap((policy) => { - if(policy instanceof PolicyInstance){ + if (policy instanceof PolicyInstance) { this.policy = policy; - this.targets = this.policy.getTargetsAsUiObject(this.compositionService.componentInstances, this.compositionService.groupInstances); + this.targets = this.policy.getTargetsAsUiObject(this.compositionService.componentInstances as ComponentInstance[], this.compositionService.groupInstances); } - })).subscribe(); + })).subscribe(); } - ngOnDestroy () { - if(this.subscription) + ngOnDestroy() { + if (this.subscription) { this.subscription.unsubscribe(); + } } deleteTarget(target: TargetUiObject): void { this.loaderService.activate(); this.policiesService.deletePolicyTarget(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.policy, target.uniqueId, target.type).subscribe( - (policyInstance:PolicyInstance) => { - this.targets = this.targets.filter(item => item.uniqueId !== target.uniqueId); + (policyInstance: PolicyInstance) => { + this.targets = this.targets.filter((item) => item.uniqueId !== target.uniqueId); this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, policyInstance); // this.store.dispatch(new UpdateSelectedComponentAction({uniqueId: policyInstance.uniqueId, type:ComponentType.})); }, - error => { - console.log("Error deleting target!"); + (error) => { + console.log('Error deleting target!'); this.loaderService.deactivate(); }, () => this.loaderService.deactivate() ); } - - addTargets = ():void => { - - var targetsToAdd:Array = this.addModalInstance.innerModalContent.instance.existingElements; //TODO refactor sdc-ui modal in order to return the data - if(targetsToAdd.length > 0) { + addTargets = (): void => { + + const targetsToAdd: TargetUiObject[] = this.addModalInstance.innerModalContent.instance.existingElements; // TODO refactor sdc-ui modal in order to return the data + if (targetsToAdd.length > 0) { this.addModalInstance.closeModal(); this.loaderService.activate(); - var updatedTargets: Array = _.union(this.targets, targetsToAdd); + const updatedTargets: TargetUiObject[] = _.union(this.targets, targetsToAdd); this.policiesService.updateTargets(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.policy.uniqueId, updatedTargets).subscribe( - (updatedPolicyInstance:PolicyInstance) => { + (updatedPolicyInstance: PolicyInstance) => { this.targets = updatedTargets; this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, updatedPolicyInstance); // this.store.dispatch(new UpdateSelectedComponentAction({component: updatedPolicyInstance})); }, - error => { - console.log("Error updating targets!"); + (error) => { + console.log('Error updating targets!'); this.loaderService.deactivate(); }, () => this.loaderService.deactivate() @@ -123,44 +120,47 @@ export class PolicyTargetsTabComponent implements OnInit { } } - getOptionalsTargetsToAdd():Array { - let optionalsTargetsToAdd:Array = []; + getOptionalsTargetsToAdd(): TargetUiObject[] { + const optionalsTargetsToAdd: TargetUiObject[] = []; // adding all instances as optional targets to add if not already exist - _.forEach(this.compositionService.componentInstances, (instance:ComponentInstance) => { - if (!_.some(this.targets, (target:TargetUiObject) => { - return target.uniqueId === instance.uniqueId + _.forEach(this.compositionService.componentInstances, (instance: ComponentInstance) => { + if (!_.some(this.targets, (target: TargetUiObject) => { + return target.uniqueId === instance.uniqueId; })) { optionalsTargetsToAdd.push(new TargetUiObject(instance.uniqueId, TargetOrMemberType.COMPONENT_INSTANCES, instance.name)); } }); // adding all groups as optional targets to add if not already exist - _.forEach(this.compositionService.groupInstances, (groupInstance:ComponentInstance) => { // adding all instances as optional targets to add if not already exist - if (!_.some(this.targets, (target:TargetUiObject) => { - return target.uniqueId === groupInstance.uniqueId + _.forEach(this.compositionService.groupInstances, (groupInstance: ComponentInstance) => { // adding all instances as optional targets to add if not already exist + if (!_.some(this.targets, (target: TargetUiObject) => { + return target.uniqueId === groupInstance.uniqueId; })) { optionalsTargetsToAdd.push(new TargetUiObject(groupInstance.uniqueId, TargetOrMemberType.GROUPS, groupInstance.name)); } }); + // Sort targets alphabetically + optionalsTargetsToAdd.sort((a, b) => (a.name < b.name ? -1 : 1)); + return optionalsTargetsToAdd; } openAddTargetModal(): void { - let addTargetModalConfig = { - title: this.policy.name + " ADD TARGETS", - size: "md", + const addTargetModalConfig = { + title: this.policy.name + ' ADD TARGETS', + size: 'md', type: SdcUiCommon.ModalType.custom, - testId: "addTargetsModal", + testId: 'addTargetsModal', buttons: [ - {text: "ADD TARGETS", size: 'xsm', callback: this.addTargets, closeModal: false}, - {text: 'CANCEL', size: 'sm', type: "secondary", closeModal: true} + {text: 'ADD TARGETS', size: 'xsm', callback: this.addTargets, closeModal: false}, + {text: 'CANCEL', size: 'sm', type: 'secondary', closeModal: true} ] } as SdcUiCommon.IModalConfig; - var optionalTargetsToAdd = this.getOptionalsTargetsToAdd(); + const optionalTargetsToAdd = this.getOptionalsTargetsToAdd(); this.addModalInstance = this.modalService.openCustomModal(addTargetModalConfig, AddElementsComponent, { elementsToAdd: optionalTargetsToAdd, - elementName: "target" + elementName: 'target' }); } } -- 2.16.6