Order targets in policy target modal alphabetically

Issue-ID: SDC-4441
Signed-off-by: eschcam <cameron.scholes@est.tech>
Change-Id: If85c77281add34a08e9cbcedb7adc194a0d8c25b

1 files 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<PolicyInstance>;
     public policy: PolicyInstance;
+    public targets: TargetUiObject[]; // UI object to hold all targets with names.
     private subscription;
-    
-    private addModalInstance: SdcUiComponents.ModalComponent;
-    public targets: Array<TargetUiObject>; // 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(<ComponentInstance[]>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<TargetUiObject> = 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<TargetUiObject> = _.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<TargetUiObject> {
-        let optionalsTargetsToAdd:Array<TargetUiObject> = [];
+    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'
         });
     }
 }