4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
21 import React
from 'react'
22 import messages
from './messages'
23 import ClassNames
from 'classnames'
24 import PureRenderMixin
from 'react-addons-pure-render-mixin'
25 import Button
from './Button'
26 import CatalogItemsActions
from '../actions/CatalogItemsActions'
27 import CanvasEditorActions
from '../actions/CanvasEditorActions'
28 import ComposerAppActions
from '../actions/ComposerAppActions'
29 import SelectionManager
from '../libraries/SelectionManager'
30 import DeletionManager
from '../libraries/DeletionManager'
32 import '../styles/ComposerAppToolbar.scss'
34 import imgSave
from '../../../node_modules/open-iconic/svg/data-transfer-upload.svg'
35 import imgCancel
from '../../../node_modules/open-iconic/svg/circle-x.svg'
36 import imgLayout
from '../../../node_modules/open-iconic/svg/grid-three-up.svg'
37 import imgVLD
from '../../../node_modules/open-iconic/svg/link-intact.svg'
38 import imgJSONViewer
from '../../../node_modules/open-iconic/svg/code.svg'
39 import imgFG
from '../../../node_modules/open-iconic/svg/infinity.svg'
40 import imgDelete
from '../../../node_modules/open-iconic/svg/trash.svg'
41 import imgVDU
from '../../../node_modules/open-iconic/svg/laptop.svg'
43 const ComposerAppToolbar
= React
.createClass({
44 mixins
: [PureRenderMixin
],
56 showJSONViewer
: false,
60 componentWillMount() {
64 componentDidUpdate() {
66 componentWillUnmount() {
69 event
.preventDefault();
70 event
.stopPropagation();
71 CatalogItemsActions
.saveCatalogItem();
73 onClickCancel(event
) {
74 event
.preventDefault();
75 event
.stopPropagation();
76 CatalogItemsActions
.cancelCatalogItemChanges();
78 onClickToggleShowMoreInfo(event
) {
79 event
.preventDefault();
80 event
.stopPropagation();
81 CanvasEditorActions
.toggleShowMoreInfo();
83 onClickAutoLayout(event
) {
84 event
.preventDefault();
85 event
.stopPropagation();
86 CanvasEditorActions
.applyDefaultLayout();
88 onClickAddVld(event
) {
89 event
.preventDefault();
90 event
.stopPropagation();
91 CanvasEditorActions
.addVirtualLinkDescriptor();
93 onClickAddVnffg(event
) {
94 event
.preventDefault();
95 event
.stopPropagation();
96 CanvasEditorActions
.addForwardingGraphDescriptor();
98 onClickAddVdu(event
) {
99 event
.preventDefault();
100 event
.stopPropagation();
101 CanvasEditorActions
.addVirtualDeploymentDescriptor();
103 onDragStartAddVdu(event
) {
104 const data
= {type
: 'action', action
: 'add-vdu'};
105 event
.dataTransfer
.effectAllowed
= 'copy';
106 event
.dataTransfer
.setData('text', JSON
.stringify(data
));
107 ComposerAppActions
.setDragState(data
);
109 onDragStartAddVld(event
) {
110 const data
= {type
: 'action', action
: 'add-vld'};
111 event
.dataTransfer
.effectAllowed
= 'copy';
112 event
.dataTransfer
.setData('text', JSON
.stringify(data
));
113 ComposerAppActions
.setDragState(data
);
115 onDragStartAddVnffg(event
) {
116 const data
= {type
: 'action', action
: 'add-vnffgd'};
117 event
.dataTransfer
.effectAllowed
= 'copy';
118 event
.dataTransfer
.setData('text', JSON
.stringify(data
));
119 ComposerAppActions
.setDragState(data
);
121 onClickDeleteSelected(event
) {
122 event
.preventDefault();
123 event
.stopPropagation();
124 DeletionManager
.deleteSelected(event
);
126 toggleJSONViewer(event
) {
127 event
.preventDefault();
128 if (this.props
.showJSONViewer
) {
129 ComposerAppActions
.closeJsonViewer();
131 ComposerAppActions
.closeJsonViewer();
132 ComposerAppActions
.showJsonViewer
.defer();
136 const style
= {left
: this.props
.layout
.left
};
137 const saveClasses
= ClassNames('ComposerAppSave', {'primary-action': this.props
.isModified
|| this.props
.isNew
});
138 const cancelClasses
= ClassNames('ComposerAppCancel', {'secondary-action': this.props
.isModified
});
139 if (this.props
.disabled
) {
141 <div className
="ComposerAppToolbar" style
={style
}></div
>
144 const hasSelection
= SelectionManager
.getSelections().length
> 0;
145 if(this.props
.panelTabShown
!= 'descriptor') {
146 style
.pointerEvents
= 'none';
149 <div className
="ComposerAppToolbar" style
={style
}>
151 (this.props
.panelTabShown
!= 'descriptor') ?
152 <div className
="disableOverlay"></div
>
156 if (this.props
.isEditingNSD
|| this.props
.isEditingVNFD
) {
158 <div className
="FileActions">
159 <Button className
={saveClasses
} onClick
={this.onClickSave
} label
={messages
.getSaveActionLabel(this.props
.isNew
)} src
={imgSave
} />
160 <Button className
={cancelClasses
} onClick
={this.onClickCancel
} label
="Cancel" src
={imgCancel
} />
161 <Button className
="ComposerAppToggleJSONViewerAction" onClick
={this.toggleJSONViewer
} label
="YAML Viewer" src
={imgJSONViewer
} />
166 <div className
="LayoutActions">
167 <Button className
="action-auto-layout" onClick
={this.onClickAutoLayout
} label
="Auto Layout" src
={imgLayout
} />
168 {this.props
.isEditingNSD
||
169 this.props
.isEditingVNFD
? <Button className
="action-add-vld"
171 label
={this.props
.isEditingNSD
? 'Add VLD' : 'Add IVLD'}
173 onDragStart
={this.onDragStartAddVld
}
174 onClick
={this.onClickAddVld
} /> : null}
175 {this.props
.isEditingNSD
? <Button className
="action-add-vnffg"
179 onDragStart
={this.onDragStartAddVnffg
}
180 onClick
={this.onClickAddVnffg
} /> : null}
181 {this.props
.isEditingVNFD
? <Button className
="action-add-vdu"
185 onDragStart
={this.onDragStartAddVdu
}
186 onClick
={this.onClickAddVdu
} /> : null}
187 <Button type
="image" title
="Delete selected items" className
="action-delete-selected-items" disabled
={!hasSelection
} onClick
= {this.onClickDeleteSelected
} src
={imgDelete
} label
="Delete" />
194 export default ComposerAppToolbar
;