From 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 Mon Sep 17 00:00:00 2001 From: ys9693 Date: Sun, 19 Jan 2020 13:50:02 +0200 Subject: Catalog alignment Issue-ID: SDC-2724 Signed-off-by: ys9693 Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe --- .../composition/common/store/graph.actions.ts | 33 ++++ .../pages/composition/common/store/graph.state.ts | 170 +++++++++++++++++++++ 2 files changed, 203 insertions(+) create mode 100644 catalog-ui/src/app/ng2/pages/composition/common/store/graph.actions.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts (limited to 'catalog-ui/src/app/ng2/pages/composition/common/store') 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({ + 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, 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, 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) { + const state:CompositionStateModel = getState(); + + setState({ + ...state, + withSidebar: !state.withSidebar + }); + } + + @Action(TogglePanelLoadingAction) + TogglePanelLoading({patchState}:StateContext, action: TogglePanelLoadingAction) { + + patchState({ + panelLoading: action.payload.isLoading + }); + } + + @Selector() static withSidebar(state):boolean { + return state.withSidebar; + } + +} \ No newline at end of file -- cgit 1.2.3-korg