catalog-ui/src/app/ng2/pages/composition/common/store/graph.state.ts

   1 import { Action, Selector, State, StateContext} from '@ngxs/store';
   2 import {
   3     OnSidebarOpenOrCloseAction,
   4     SelectedComponentType,
   5     SetSelectedComponentAction,
   6     TogglePanelLoadingAction
   7 } from "./graph.actions";
   8 import { PolicyInstance, GroupInstance, Component as TopologyTemplate, ComponentInstance, LeftPaletteComponent, FullComponentInstance} from "app/models";
   9 import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
  10 import { tap } from "rxjs/operators";
  11 import { CompositionService } from "app/ng2/pages/composition/composition.service";
  12 import {GroupsService} from "../../../../services/groups.service";
  13 import {PoliciesService} from "../../../../services/policies.service";
  14 import {WorkspaceService} from "../../../workspace/workspace.service";
  15
  16 export class CompositionStateModel {
  17
  18     isViewOnly?: boolean;
  19     panelLoading?: boolean;
  20     selectedComponentType?: SelectedComponentType;
  21     selectedComponent?: PolicyInstance | GroupInstance | TopologyTemplate | ComponentInstance;
  22     withSidebar?: boolean;
  23 }
  24
  25 @State<CompositionStateModel>({
  26     name: 'composition',
  27     defaults: {
  28          withSidebar: true
  29     }
  30 })
  31 export class GraphState {
  32
  33     constructor(private topologyTemplateService: TopologyTemplateService,
  34                 private compositionService: CompositionService,
  35          private policiesService:PoliciesService, private groupsService:GroupsService,
  36                  private workspaceService: WorkspaceService) {}
  37
  38     @Action(SetSelectedComponentAction)
  39     setSelectedComponent({dispatch, getState, patchState}:StateContext<CompositionStateModel>, action: SetSelectedComponentAction) {
  40
  41         const state:CompositionStateModel = getState();
  42
  43         patchState({ panelLoading: true });
  44
  45         if(action.payload.component instanceof ComponentInstance){
  46             let originComponent = this.compositionService.getOriginComponentById(action.payload.component.getComponentUid());
  47             if(!originComponent) {
  48                 return this.topologyTemplateService.getFullComponent(action.payload.component.originType, action.payload.component.getComponentUid())
  49                 .pipe(tap(resp => {
  50                     this.compositionService.addOriginComponent(resp);
  51                     this.compositionService.setSelectedComponentType(SelectedComponentType.COMPONENT_INSTANCE);
  52                     patchState({
  53                         selectedComponent: new FullComponentInstance(action.payload.component, resp),
  54                         selectedComponentType: action.payload.type,
  55                         panelLoading: false
  56                     });
  57                     }, err => {
  58                         patchState({
  59                             panelLoading: false
  60                         })
  61                     }
  62                 ));
  63             } else {
  64                 patchState({
  65                     selectedComponent: new FullComponentInstance(action.payload.component, originComponent),
  66                     selectedComponentType: action.payload.type,
  67                     panelLoading: false
  68                 });
  69             }
  70         } else if (action.payload.component instanceof PolicyInstance) {
  71             let topologyTemplate = this.workspaceService.metadata;
  72             return this.policiesService.getSpecificPolicy(topologyTemplate.componentType, topologyTemplate.uniqueId, action.payload.component.uniqueId).pipe(tap(resp =>
  73                 {
  74                     this.compositionService.updatePolicy(resp);
  75                     patchState({
  76                         selectedComponent: resp,
  77                         selectedComponentType: action.payload.type,
  78                         panelLoading: false
  79                     })
  80                 }, err => {
  81                     patchState({
  82                         panelLoading: false
  83                     })
  84                  }
  85             ));
  86
  87         } else if (action.payload.component instanceof GroupInstance) {
  88             let topologyTemplate = this.workspaceService.metadata;
  89             return this.groupsService.getSpecificGroup(topologyTemplate.componentType, topologyTemplate.uniqueId, action.payload.component.uniqueId).pipe(tap(resp => {
  90                 this.compositionService.updateGroup(resp);
  91                 patchState({
  92                     selectedComponent: resp,
  93                     selectedComponentType: action.payload.type,
  94                     panelLoading: false
  95                 });
  96             }, err => {
  97                 patchState({
  98                     panelLoading: false
  99                 })
 100              }
 101             ));
 102         } else { //TopologyTemplate
 103             patchState({
 104                 selectedComponent: action.payload.component,
 105                 selectedComponentType: action.payload.type,
 106                 panelLoading: false
 107             })
 108         }
 109     }
 110
 111
 112     // @Action(UpdateSelectedComponentNameAction)
 113     // UpdateSelectedComponentNameAction({patchState}:StateContext<CompositionStateModel>, action: UpdateSelectedComponentNameAction) {
 114
 115     //     switch(action.payload.type){
 116     //         case SelectedComponentType.COMPONENT_INSTANCE:
 117     //             this.store.dispatch(new UpdateComponentInstancesAction([action.payload.component]));
 118     //             break;
 119     //         case SelectedComponentType.POLICY:
 120     //             this.store.dispatch(new UpdatePolicyNameAction(action.payload.uniqueId, action.payload.newName));
 121     //             break;
 122     //         case SelectedComponentType.GROUP:
 123     //             this.store.dispatch(new UpdateGroupInstancesAction)
 124
 125     //     }
 126     //     if(action.payload.type === SelectedComponentType.COMPONENT_INSTANCE){
 127
 128     //     }
 129
 130     // }
 131
 132     @Selector()
 133     static getSelectedComponent(state:CompositionStateModel) {
 134         return state.selectedComponent;
 135     }
 136
 137     @Selector()
 138     static getSelectedComponentId(state:CompositionStateModel) {
 139         return state.selectedComponent.uniqueId;
 140     }
 141
 142     @Selector()
 143     static getSelectedComponentType(state:CompositionStateModel) {
 144         return state.selectedComponentType;
 145     }
 146
 147
 148     @Action(OnSidebarOpenOrCloseAction)
 149     onSidebarOpenOrCloseAction({getState, setState}:StateContext<CompositionStateModel>) {
 150         const state:CompositionStateModel = getState();
 151
 152         setState({
 153             ...state,
 154             withSidebar: !state.withSidebar
 155         });
 156     }
 157
 158     @Action(TogglePanelLoadingAction)
 159     TogglePanelLoading({patchState}:StateContext<CompositionStateModel>, action: TogglePanelLoadingAction) {
 160
 161         patchState({
 162             panelLoading: action.payload.isLoading
 163         });
 164     }
 165
 166     @Selector() static withSidebar(state):boolean {
 167         return state.withSidebar;
 168     }
 169
 170 }