osm.etsi.org Git - osm/riftware.git/blob

   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/iconmonstr-network-6-icon.svg'
  31 import imgFG from '../../images/iconmonstr-infinity-4-icon.svg'
  32 import imgRemove from '../../images/recycle69.svg'
  33 import imgAdd from '../../images/iconmonstr-plus-5-icon-256.png'
  34 import imgConnection from '../../images/connection.svg'
  35 import imgClassifier from '../../images/iconmonstr-control-panel-4.svg'
  36 import imgReorder from '../../images/menu51.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
 108         return (
 109                 <div key={i} data-offset-width="table.fg-classifier" data-uid={rsp.uid}
 110                          onClick={onClickSelectAndShowInDetailsPanel.bind(null, rsp)}
 111                          onMouseOver={highlightPath.bind(null, rsp)}
 112                          onMouseOut={removeHighlighting.bind(null, rsp)}
 113                          onMouseLeave={removeHighlighting.bind(null, rsp)}
 114                          onCut={onCutDelegateToRemove.bind(null, rsp)}>
 115                         <div className={ClassNames(rsp.className, {'-is-factory': rsp.isFactory, '-is-edit-paths-mode': isEditPathsMode})}>
 116                                 <LayoutRow primaryActionColumn={toggleSelectionOrCreateNewPath} secondaryActionColumn={null}>
 117                                         {editRspName}
 118                                         <div className="connection-points">
 119                                                 {rsp.connectionPoints.map(mapConnectionPoint.bind(null, context.stylePrimary, true))}
 120                                                 {hasServiceFunctionVNFDs ? <div className="rsp-create-new-connection-point-line rsp-line" style={context.styleSecondary}></div> : null}
 121                                                 {hasServiceFunctionVNFDs ? <div className="enter-path-edit-mode connection-point" style={context.styleSecondary}
 122                                                          onClick={onClickEnterPathEdithMode.bind(null, context.component, rsp.uid)}>
 123                                                         <small>+CP</small>
 124                                                 </div> : null}
 125                                                 {hasServiceFunctionVNFDs ? <ConnectionPointSelector containers={context.containers}
 126                                                                                                  style={context.styleSecondary}
 127                                                                                                  serviceChain="SF"
 128                                                                                                  onExitEditPathMode={onClickExitPathEdithMode.bind(null, context.component)}
 129                                                                                                  onAddConnectionPointRef={onClickAddConnectionPointRef.bind(null, context.component, rsp)}
 130                                                 /> : null}
 131                                                 {!hasServiceFunctionVNFDs && !rsp.isFactory ? <small className="hint">A VNFD with the chain SF is required to build Record Service Paths.</small> : null}
 132                                                 {rsp.isFactory && !isEditPathsMode? <small className="enter-path-edit-mode-hint hint">Tap to start creating a new path.</small> : null}
 133                                         </div>
 134                                 </LayoutRow>
 135                         </div>
 136                 </div>
 137         );
 138
 139 }