skyquake/plugins/composer/src/src/components/EditorForwardingGraph/mapRecordServicePath.js

   1 /**
   2  * Created by onvelocity on 3/2/16.
   3  */
   4
   5 'use strict';
   6
   7 import d3 from 'd3'
   8 import React from 'react'
   9 import Button from '../Button'
  10 import LayoutRow from '../LayoutRow'
  11 import ContentEditableDiv from '../ContentEditableDiv'
  12 import EditableProperty from './EditableProperty'
  13 import changeCase from 'change-case'
  14 import ClassNames from 'classnames'
  15 import DescriptorModelFactory from '../../libraries/model/DescriptorModelFactory'
  16 import DescriptorModelMetaFactory from '../../libraries/model/DescriptorModelMetaFactory'
  17 import HighlightRecordServicePaths from '../../libraries/graph/HighlightRecordServicePaths'
  18 import ComposerAppActions from '../../actions/ComposerAppActions'
  19 import CatalogItemsActions from '../../actions/CatalogItemsActions'
  20 import SelectionManager from '../../libraries/SelectionManager'
  21 import DeletionManager from '../../libraries/DeletionManager'
  22 import TooltipManager from '../../libraries/TooltipManager'
  23 import mapConnectionPoint from './mapConnectionPoint'
  24 import ConnectionPointSelector from './ConnectionPointSelector'
  25 import onCutDelegateToRemove from './onCutDelegateToRemove'
  26 import onClickSelectAndShowInDetailsPanel from './onClickSelectAndShowInDetailsPanel'
  27 import onFormInputChangedModifyContainerAndNotify from './onFormInputChangedModifyContainerAndNotify'
  28 import onHoverHighlightConnectionPoint from './onHoverHighlightConnectionPoint'
  29
  30 import imgNSD from '../../images/default-catalog-icon.svg'
  31 import imgFG from '../../../../node_modules/open-iconic/svg/infinity.svg'
  32 import imgRemove from '../../../../node_modules/open-iconic/svg/trash.svg'
  33 import imgAdd from '../../../../node_modules/open-iconic/svg/plus.svg'
  34 import imgConnection from '../../../../node_modules/open-iconic/svg/random.svg'
  35 import imgClassifier from '../../../../node_modules/open-iconic/svg/spreadsheet.svg'
  36 import imgReorder from '../../../../node_modules/open-iconic/svg/menu.svg'
  37
  38 export default function mapRecordServicePath (context, rsp, i) {
  39
  40         rsp.uiState.showPath = rsp.uiState.hasOwnProperty('showPath') ? rsp.uiState.showPath : true;
  41
  42         function removeHighlighting() {
  43                 HighlightRecordServicePaths.removeHighlighting();
  44         }
  45
  46         function highlightPath(rsp) {
  47                 HighlightRecordServicePaths.highlightPaths(rsp);
  48         }
  49
  50         function onClickRemoveRecordServicePath(rsp, event) {
  51                 event.preventDefault();
  52                 const root = rsp.getRoot();
  53                 rsp.remove();
  54                 CatalogItemsActions.catalogItemDescriptorChanged(root);
  55         }
  56
  57         function onClickEnterPathEdithMode(component, rspUid, event) {
  58                 event.preventDefault();
  59                 component.setState({editPathsMode: rspUid});
  60         }
  61
  62         function onClickToggleRSPShowPath(rsp, event) {
  63                 // warn preventing default will undo the user's action
  64                 //event.preventDefault();
  65                 event.stopPropagation();
  66                 rsp.uiState.showPath = event.target.checked;
  67                 rsp.parent.uiState.showPaths = rsp.parent.rsp.filter(rsp => rsp.uiState.showPath === true).length === rsp.parent.rsp.length;
  68                 CatalogItemsActions.catalogItemMetaDataChanged(rsp.getRoot().model);
  69         }
  70
  71         function onClickExitPathEdithMode(component, event) {
  72                 event.preventDefault();
  73                 component.setState({editPathsMode: false});
  74         }
  75
  76         function onClickAddConnectionPointRef(component, rsp, connector, event) {
  77                 event.preventDefault();
  78                 if (rsp.isFactory) {
  79                         const newRsp = rsp.createVnfdConnectionPointRef(connector);
  80                         component.setState({editPathsMode: newRsp.uid});
  81                 } else {
  82                         rsp.createVnfdConnectionPointRef(connector);
  83                 }
  84                 CatalogItemsActions.catalogItemDescriptorChanged(rsp.getRoot());
  85         }
  86
  87         const isEditPathsMode = context.component.state.editPathsMode === rsp.uid;
  88
  89         const toggleSelectionOrCreateNewPath = (
  90                 <div>
  91                         {!rsp.isFactory ? <input type="checkbox" id={'show-path-' + rsp.uid} checked={rsp.uiState.showPath} onChange={() => {}} onClick={onClickToggleRSPShowPath.bind(null, rsp)} /> : ' '}
  92                 </div>
  93         );
  94
  95         const editRspName = (
  96                 <EditableProperty title="name">
  97                         <ContentEditableDiv name="name" value={rsp.name} autoPadRight="true" onChange={onFormInputChangedModifyContainerAndNotify.bind(null, rsp)} />
  98                 </EditableProperty>
  99         );
 100
 101         const hasServiceFunctionVNFDs = context.containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, 'SF')).length > 0;
 102
 103         if (!hasServiceFunctionVNFDs && rsp.isFactory) {
 104                 return null;
 105         }
 106
 107         let cpRefMapped = rsp.connectionPoints.map((cpRef, i) => {
 108                 return {
 109                         index: i,
 110                         value: cpRef
 111                 }
 112         });
 113
 114         cpRefMapped.sort((a, b) => {
 115                 return a.value.order - b.value.order;
 116         });
 117
 118         let connectionPointsSorted = cpRefMapped.map((cpRef) => {
 119                 return rsp.connectionPoints[cpRef.index];
 120         });
 121
 122
 123         return (
 124                 <div key={i} data-offset-width="table.fg-classifier" data-uid={rsp.uid}
 125                          onClick={onClickSelectAndShowInDetailsPanel.bind(null, rsp)}
 126                          onMouseOver={highlightPath.bind(null, rsp)}
 127                          onMouseOut={removeHighlighting.bind(null, rsp)}
 128                          onMouseLeave={removeHighlighting.bind(null, rsp)}
 129                          onCut={onCutDelegateToRemove.bind(null, rsp)}>
 130                         <div className={ClassNames(rsp.className, {'-is-factory': rsp.isFactory, '-is-edit-paths-mode': isEditPathsMode})}>
 131                                 <LayoutRow primaryActionColumn={toggleSelectionOrCreateNewPath} secondaryActionColumn={null}>
 132                                         {editRspName}
 133                                         <div className="connection-points">
 134                                                 {connectionPointsSorted.map(mapConnectionPoint.bind(null, context.stylePrimary, true))}
 135                                                 {hasServiceFunctionVNFDs ? <div className="rsp-create-new-connection-point-line rsp-line" style={context.styleSecondary}></div> : null}
 136                                                 {hasServiceFunctionVNFDs ? <div className="enter-path-edit-mode connection-point" style={context.styleSecondary}
 137                                                          onClick={onClickEnterPathEdithMode.bind(null, context.component, rsp.uid)}>
 138                                                         <small>+CP</small>
 139                                                 </div> : null}
 140                                                 {hasServiceFunctionVNFDs ? <ConnectionPointSelector containers={context.containers}
 141                                                                                                  style={context.styleSecondary}
 142                                                                                                  serviceChain="SF"
 143                                                                                                  onExitEditPathMode={onClickExitPathEdithMode.bind(null, context.component)}
 144                                                                                                  onAddConnectionPointRef={onClickAddConnectionPointRef.bind(null, context.component, rsp)}
 145                                                 /> : null}
 146                                                 {!hasServiceFunctionVNFDs && !rsp.isFactory ? <small className="hint">A VNFD with the chain SF is required to build Rendered Service Paths.</small> : null}
 147                                                 {rsp.isFactory && !isEditPathsMode? <small className="enter-path-edit-mode-hint hint">Tap to start creating a new path.</small> : null}
 148                                         </div>
 149                                 </LayoutRow>
 150                         </div>
 151                 </div>
 152         );
 153
 154 }