2 * Created by onvelocity on 3/2/16.
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'
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'
38 export default function mapRecordServicePath (context
, rsp
, i
) {
40 rsp
.uiState
.showPath
= rsp
.uiState
.hasOwnProperty('showPath') ? rsp
.uiState
.showPath
: true;
42 function removeHighlighting() {
43 HighlightRecordServicePaths
.removeHighlighting();
46 function highlightPath(rsp
) {
47 HighlightRecordServicePaths
.highlightPaths(rsp
);
50 function onClickRemoveRecordServicePath(rsp
, event
) {
51 event
.preventDefault();
52 const root
= rsp
.getRoot();
54 CatalogItemsActions
.catalogItemDescriptorChanged(root
);
57 function onClickEnterPathEdithMode(component
, rspUid
, event
) {
58 event
.preventDefault();
59 component
.setState({editPathsMode
: rspUid
});
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
);
71 function onClickExitPathEdithMode(component
, event
) {
72 event
.preventDefault();
73 component
.setState({editPathsMode
: false});
76 function onClickAddConnectionPointRef(component
, rsp
, connector
, event
) {
77 event
.preventDefault();
79 const newRsp
= rsp
.createVnfdConnectionPointRef(connector
);
80 component
.setState({editPathsMode
: newRsp
.uid
});
82 rsp
.createVnfdConnectionPointRef(connector
);
84 CatalogItemsActions
.catalogItemDescriptorChanged(rsp
.getRoot());
87 const isEditPathsMode
= context
.component
.state
.editPathsMode
=== rsp
.uid
;
89 const toggleSelectionOrCreateNewPath
= (
91 {!rsp
.isFactory
? <input type
="checkbox" id
={'show-path-' + rsp
.uid
} checked
={rsp
.uiState
.showPath
} onChange
={() => {}} onClick
={onClickToggleRSPShowPath
.bind(null, rsp
)} /> : ' '}
96 <EditableProperty title
="name">
97 <ContentEditableDiv name
="name" value
={rsp
.name
} autoPadRight
="true" onChange
={onFormInputChangedModifyContainerAndNotify
.bind(null, rsp
)} />
101 const hasServiceFunctionVNFDs
= context
.containers
.filter(d
=> DescriptorModelFactory
.isConstituentVnfdWithServiceChain(d
, 'SF')).length
> 0;
103 if (!hasServiceFunctionVNFDs
&& rsp
.isFactory
) {
107 let cpRefMapped
= rsp
.connectionPoints
.map((cpRef
, i
) => {
114 cpRefMapped
.sort((a
, b
) => {
115 return a
.value
.order
- b
.value
.order
;
118 let connectionPointsSorted
= cpRefMapped
.map((cpRef
) => {
119 return rsp
.connectionPoints
[cpRef
.index
];
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}>
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
)}>
140 {hasServiceFunctionVNFDs
? <ConnectionPointSelector containers
={context
.containers
}
141 style
={context
.styleSecondary
}
143 onExitEditPathMode
={onClickExitPathEdithMode
.bind(null, context
.component
)}
144 onAddConnectionPointRef
={onClickAddConnectionPointRef
.bind(null, context
.component
, rsp
)}
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}