Catalog alignment

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

3 files changed, 267 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/common/common-graph-data.service.ts b/catalog-ui/src/app/ng2/pages/composition/common/common-graph-data.service.ts
new file mode 100644
index 0000000000..d4caa5e9ed
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/common/common-graph-data.service.ts
@@ -0,0 +1,64 @@
+import {Injectable} from "@angular/core";
+import 'rxjs/add/observable/forkJoin';
+import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import {SelectedComponentType} from "./store/graph.actions";
+import {RelationshipModel} from "../../../../models/graph/relationship";
+
+@Injectable()
+export class CommonGraphDataService {
+
+    public componentInstances: Array<ComponentInstance>;
+    public componentInstancesRelations: RelationshipModel[];
+    public selectedComponentType: SelectedComponentType;
+
+    constructor() {
+    }
+
+    //------------------------ RELATIONS ---------------------------------//
+    public setRelations = (componentInstancesRelations: RelationshipModel[]) => {
+        this.componentInstancesRelations = this.componentInstancesRelations;
+    }
+
+    public getRelations = (): RelationshipModel[] => {
+        return this.componentInstancesRelations;
+    }
+
+    public addRelation = (componentInstancesRelations: RelationshipModel) => {
+        this.componentInstancesRelations.push(componentInstancesRelations);
+    }
+
+    public deleteRelation(relationToDelete: RelationshipModel) {
+        this.componentInstancesRelations = _.filter(this.componentInstancesRelations, (relationship: RelationshipModel) => {
+            return relationship.relationships[0].relation.id !== relationToDelete.relationships[0].relation.id;
+        });
+    }
+
+    //---------------------------- COMPONENT INSTANCES ------------------------------------//
+    public getComponentInstances = (): Array<ComponentInstance> => {
+        return this.componentInstances;
+    }
+
+    public addComponentInstance = (instance: ComponentInstance) => {
+        return this.componentInstances.push(instance);
+    }
+
+    public updateComponentInstances = (componentInstances: ComponentInstance[]) => {
+        _.unionBy(this.componentInstances, componentInstances, 'uniqueId');
+    }
+
+    public updateInstance = (instance: ComponentInstance) => {
+        this.componentInstances = this.componentInstances.map(componentInstance => instance.uniqueId === componentInstance.uniqueId? instance : componentInstance);
+    }
+
+    public deleteComponentInstance(instanceToDelete: string) {
+        this.componentInstances = _.filter(this.componentInstances, (instance: ComponentInstance) => {
+            return instance.uniqueId !== instanceToDelete;
+        });
+    }
+
+    //----------------------------SELECTED COMPONENT -----------------------//
+
+    public setSelectedComponentType = (selectedType: SelectedComponentType) => {
+        this.selectedComponentType = selectedType;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts
new file mode 100644
index 0000000000..9bd5d0db62
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts
@@ -0,0 +1,33 @@
+export enum SelectedComponentType {
+    COMPONENT_INSTANCE = "COMPONENT_INSTANCE",
+    GROUP = "GROUP",
+    POLICY = "POLICY",
+    TOPOLOGY_TEMPLATE = "TOPOLOGY_TEMPLATE"
+}
+
+export class UpdateSelectedComponentAction {
+    static readonly type = '[COMPOSITION] UpdateSelectedComponent';
+
+        constructor(public payload: {uniqueId?: string, type?: string}) {
+    }
+}
+    
+export class SetSelectedComponentAction {
+    static readonly type = '[COMPOSITION] SetSelectedComponent';
+
+    constructor(public payload: {component?: any, type?: SelectedComponentType}) {
+        }
+}
+
+export class OnSidebarOpenOrCloseAction {
+    static readonly type = '[COMPOSITION] OnSidebarOpenOrCloseAction';
+
+    constructor() {
+    }
+}
+
+export class TogglePanelLoadingAction {
+    static readonly type = '[COMPOSITION] TogglePanelLoading';
+    constructor(public payload: { isLoading: boolean}) {
+    }
+}
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
new file mode 100644
index 0000000000..d58bb446df
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts
@@ -0,0 +1,170 @@
+import { Action, Selector, State, StateContext} from '@ngxs/store';
+import {
+    OnSidebarOpenOrCloseAction,
+    SelectedComponentType,
+    SetSelectedComponentAction,
+    TogglePanelLoadingAction
+} from "./graph.actions";
+import { PolicyInstance, GroupInstance, Component as TopologyTemplate, ComponentInstance, LeftPaletteComponent, FullComponentInstance} from "app/models";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { tap } from "rxjs/operators";
+import { CompositionService } from "app/ng2/pages/composition/composition.service";
+import {GroupsService} from "../../../../services/groups.service";
+import {PoliciesService} from "../../../../services/policies.service";
+import {WorkspaceService} from "../../../workspace/workspace.service";
+
+export class CompositionStateModel {
+
+    isViewOnly?: boolean;
+    panelLoading?: boolean;
+    selectedComponentType?: SelectedComponentType;
+    selectedComponent?: PolicyInstance | GroupInstance | TopologyTemplate | ComponentInstance;
+    withSidebar?: boolean;
+}
+
+@State<CompositionStateModel>({
+    name: 'composition',
+    defaults: {
+         withSidebar: true
+    }
+})
+export class GraphState {
+
+    constructor(private topologyTemplateService: TopologyTemplateService,
+                private compositionService: CompositionService,
+         private policiesService:PoliciesService, private groupsService:GroupsService,
+                 private workspaceService: WorkspaceService) {}
+
+    @Action(SetSelectedComponentAction)
+    setSelectedComponent({dispatch, getState, patchState}:StateContext<CompositionStateModel>, action: SetSelectedComponentAction) {
+        
+        const state:CompositionStateModel = getState();
+        
+        patchState({ panelLoading: true });
+
+        if(action.payload.component instanceof ComponentInstance){
+            let originComponent = this.compositionService.getOriginComponentById(action.payload.component.getComponentUid());
+            if(!originComponent) {
+                return this.topologyTemplateService.getFullComponent(action.payload.component.originType, action.payload.component.getComponentUid())
+                .pipe(tap(resp => {
+                    this.compositionService.addOriginComponent(resp);
+                    this.compositionService.setSelectedComponentType(SelectedComponentType.COMPONENT_INSTANCE);
+                    patchState({
+                        selectedComponent: new FullComponentInstance(action.payload.component, resp), 
+                        selectedComponentType: action.payload.type,
+                        panelLoading: false
+                    });
+                    }, err => {
+                        patchState({
+                            panelLoading: false
+                        })
+                    }
+                ));
+            } else {
+                patchState({
+                    selectedComponent: new FullComponentInstance(action.payload.component, originComponent), 
+                    selectedComponentType: action.payload.type,
+                    panelLoading: false
+                });
+            }
+        } else if (action.payload.component instanceof PolicyInstance) {
+            let topologyTemplate = this.workspaceService.metadata;
+            return this.policiesService.getSpecificPolicy(topologyTemplate.componentType, topologyTemplate.uniqueId, action.payload.component.uniqueId).pipe(tap(resp => 
+                {
+                    this.compositionService.updatePolicy(resp);
+                    patchState({
+                        selectedComponent: resp, 
+                        selectedComponentType: action.payload.type,
+                        panelLoading: false
+                    })
+                }, err => {
+                    patchState({
+                        panelLoading: false
+                    })
+                 }
+            ));
+        
+        } else if (action.payload.component instanceof GroupInstance) {
+            let topologyTemplate = this.workspaceService.metadata;
+            return this.groupsService.getSpecificGroup(topologyTemplate.componentType, topologyTemplate.uniqueId, action.payload.component.uniqueId).pipe(tap(resp => {
+                this.compositionService.updateGroup(resp);
+                patchState({
+                    selectedComponent: resp,
+                    selectedComponentType: action.payload.type,
+                    panelLoading: false
+                });
+            }, err => {
+                patchState({
+                    panelLoading: false
+                })
+             }
+            ));
+        } else { //TopologyTemplate
+            patchState({
+                selectedComponent: action.payload.component,
+                selectedComponentType: action.payload.type,
+                panelLoading: false
+            })
+        }
+    }
+
+
+    // @Action(UpdateSelectedComponentNameAction)
+    // UpdateSelectedComponentNameAction({patchState}:StateContext<CompositionStateModel>, action: UpdateSelectedComponentNameAction) {
+
+    //     switch(action.payload.type){
+    //         case SelectedComponentType.COMPONENT_INSTANCE:
+    //             this.store.dispatch(new UpdateComponentInstancesAction([action.payload.component]));
+    //             break;
+    //         case SelectedComponentType.POLICY:
+    //             this.store.dispatch(new UpdatePolicyNameAction(action.payload.uniqueId, action.payload.newName));
+    //             break;
+    //         case SelectedComponentType.GROUP:
+    //             this.store.dispatch(new UpdateGroupInstancesAction)
+
+    //     }
+    //     if(action.payload.type === SelectedComponentType.COMPONENT_INSTANCE){
+            
+    //     } 
+    
+    // }
+
+    @Selector() 
+    static getSelectedComponent(state:CompositionStateModel) {
+        return state.selectedComponent;
+    }
+
+    @Selector() 
+    static getSelectedComponentId(state:CompositionStateModel) {
+        return state.selectedComponent.uniqueId;
+    }
+
+    @Selector() 
+    static getSelectedComponentType(state:CompositionStateModel) {
+        return state.selectedComponentType;
+    }
+
+
+    @Action(OnSidebarOpenOrCloseAction)
+    onSidebarOpenOrCloseAction({getState, setState}:StateContext<CompositionStateModel>) {
+        const state:CompositionStateModel = getState();
+
+        setState({
+            ...state,
+            withSidebar: !state.withSidebar
+        });
+    }
+    
+    @Action(TogglePanelLoadingAction)
+    TogglePanelLoading({patchState}:StateContext<CompositionStateModel>, action: TogglePanelLoadingAction) {
+
+        patchState({
+            panelLoading: action.payload.isLoading
+        });
+    }
+
+    @Selector() static withSidebar(state):boolean {
+        return state.withSidebar;
+    }
+
+}
\ No newline at end of file