Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

4 files changed, 215 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.html
new file mode 100644
index 0000000000..e1a4f68a9b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.html
@@ -0,0 +1,27 @@
+<!--
+ ~ Copyright (C) 2018 AT&T Intellectual Property. 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.
+  -->
+  
+<div class="service-path-selector">
+	<label>Service Flows:</label>
+	<ui-element-dropdown
+		class="path-dropdown"
+		data-tests-id="service-path-selector"
+		[readonly]="dropdownOptions.length < 3"
+		[(value)]="selectedPathId"
+		[values]="dropdownOptions"
+		(valueChange)="onSelectPath()">
+	</ui-element-dropdown>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.less
new file mode 100644
index 0000000000..f618d6b6f4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.less
@@ -0,0 +1,24 @@
+@import './../../../../../../assets/styles/variables.less';
+.service-path-selector {
+	margin: 10px 35px 10px 0;
+	display: flex;
+	font-size: 12px;
+
+	/deep/ .path-dropdown {
+		width: 150px;
+		select {
+			font-size: 14px;
+			font-family: @font-opensans-regular;
+			padding: 4px 10px;
+		}
+	}
+
+	label {
+		margin-right: 10px;
+		align-self: center;
+		font-size: 14px;
+		font-family: @font-opensans-regular;
+		font-weight: normal;
+		margin-bottom: initial;
+	}
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.ts
new file mode 100644
index 0000000000..0dba906f64
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.component.ts
@@ -0,0 +1,142 @@
+import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core';
+import {Service} from "app/models/components/service";
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {ForwardingPath} from "app/models/forwarding-path";
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {CompositionService} from "app/ng2/pages/composition/composition.service";
+import {EventListenerService} from "app/services/event-listener-service";
+import {GRAPH_EVENTS} from "app/utils/constants";
+
+@Component({
+    selector: 'service-path-selector',
+    templateUrl: './service-path-selector.component.html',
+    styleUrls: ['service-path-selector.component.less']
+})
+
+export class ServicePathSelectorComponent {
+
+    defaultSelectedId: string;
+    hideAllValue: string;
+    hideAllId: string = '0';
+    showAllValue: string;
+    showAllId: string = '1';
+
+    paths: Array<ForwardingPath> = [];
+    dropdownOptions: Array<DropdownValue>;
+    differ: KeyValueDiffer<string, ForwardingPath>;
+
+    @Input() drawPath: Function;
+    @Input() deletePaths: Function;
+    @Input() selectedPathId: string;
+
+    constructor(private differs: KeyValueDiffers,
+                private translateService: TranslateService,
+                private compositionService: CompositionService,
+                private eventListenerService: EventListenerService
+    ) {
+
+        this.defaultSelectedId = this.hideAllId;
+        this.convertPathsToDropdownOptions();
+
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE");
+            this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE");
+            this.convertPathsToDropdownOptions();
+        });
+
+    }
+
+    ngOnInit(): void {
+
+        this.selectedPathId = this.defaultSelectedId;
+        this.differ = this.differs.find(this.compositionService.forwardingPaths).create();
+        this.updatePaths();
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_SERVICE_PATH_CREATED, (createdId) => {
+            this.selectedPathId = createdId;
+            this.updatePaths();
+        } )
+
+    }
+
+    updatePaths(): void {
+
+        const pathsChanged = this.differ.diff(this.compositionService.forwardingPaths);
+
+        if (pathsChanged) {
+            let oldPaths = _.cloneDeep(this.paths);
+            this.populatePathsFromService();
+
+            if (!(_.isEqual(oldPaths, this.paths))) {
+                this.convertPathsToDropdownOptions();
+
+                let temp = this.selectedPathId;
+                this.selectedPathId = '-1';
+
+                setTimeout(() => {
+                    this.selectedPathId = temp;
+                    this.onSelectPath();
+                }, 0);
+            }
+        }
+
+    }
+
+    populatePathsFromService(): void {
+
+        this.paths = [];
+
+        _.forEach(this.compositionService.forwardingPaths, path => {
+            this.paths.push(path);
+        });
+        this.paths.sort((a: ForwardingPath, b: ForwardingPath) => {
+            return a.name.localeCompare(b.name);
+        });
+
+    }
+
+    convertPathsToDropdownOptions(): void {
+
+        let result = [
+            new DropdownValue(this.hideAllId, this.hideAllValue),
+            new DropdownValue(this.showAllId, this.showAllValue)
+        ];
+
+        _.forEach(this.paths, (value: ForwardingPath) => {
+            result[result.length] = new DropdownValue(value.uniqueId, value.name);
+        });
+
+        this.dropdownOptions = result;
+
+    }
+
+    onSelectPath = (): void => {
+
+        if (this.selectedPathId !== '-1') {
+            this.deletePaths();
+
+            switch (this.selectedPathId) {
+                case this.hideAllId:
+                    break;
+
+                case this.showAllId:
+                    _.forEach(this.paths, path =>
+                        this.drawPath(path)
+                    );
+                    break;
+
+                default:
+                    let path = this.paths.find(path =>
+                        path.uniqueId === this.selectedPathId
+                    );
+                    if (!path) {
+                        this.selectedPathId = this.defaultSelectedId;
+                        this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly.
+                        break;
+                    }
+                    this.drawPath(path);
+                    break;
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module.ts
new file mode 100644
index 0000000000..6782c88b76
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/service-path-selector/service-path-selector.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ServicePathSelectorComponent} from "./service-path-selector.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {CompositionService} from "app/ng2/pages/composition/composition.service";
+
+@NgModule({
+    declarations: [
+        ServicePathSelectorComponent
+    ],
+    imports: [
+    	CommonModule,
+    	UiElementsModule
+    ],
+    exports: [ServicePathSelectorComponent],
+    entryComponents: [
+        ServicePathSelectorComponent
+    ],
+    providers: [CompositionService]
+})
+export class ServicePathSelectorModule {
+}
\ No newline at end of file