skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   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
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  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.
  17  *
  18  */
  19 'use strict';
  20
  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'
  31
  32 import '../styles/ComposerAppToolbar.scss'
  33
  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'
  42
  43 const ComposerAppToolbar = React.createClass({
  44         mixins: [PureRenderMixin],
  45         getInitialState() {
  46                 return {};
  47         },
  48         getDefaultProps() {
  49                 return {
  50                         disabled: true,
  51                         showMore: false,
  52                         layout: {left: 300},
  53                         isModified: false,
  54                         isEditingNSD: false,
  55                         isEditingVNFD: false,
  56                         showJSONViewer: false,
  57                         isNew: false
  58                 };
  59         },
  60         componentWillMount() {
  61         },
  62         componentDidMount() {
  63         },
  64         componentDidUpdate() {
  65         },
  66         componentWillUnmount() {
  67         },
  68         onClickSave(event) {
  69                 event.preventDefault();
  70                 event.stopPropagation();
  71                 CatalogItemsActions.saveCatalogItem();
  72         },
  73         onClickCancel(event) {
  74                 event.preventDefault();
  75                 event.stopPropagation();
  76                 CatalogItemsActions.cancelCatalogItemChanges();
  77         },
  78         onClickToggleShowMoreInfo(event) {
  79                 event.preventDefault();
  80                 event.stopPropagation();
  81                 CanvasEditorActions.toggleShowMoreInfo();
  82         },
  83         onClickAutoLayout(event) {
  84                 event.preventDefault();
  85                 event.stopPropagation();
  86                 CanvasEditorActions.applyDefaultLayout();
  87         },
  88         onClickAddVld(event) {
  89                 event.preventDefault();
  90                 event.stopPropagation();
  91                 CanvasEditorActions.addVirtualLinkDescriptor();
  92         },
  93         onClickAddVnffg(event) {
  94                 event.preventDefault();
  95                 event.stopPropagation();
  96                 CanvasEditorActions.addForwardingGraphDescriptor();
  97         },
  98         onClickAddVdu(event) {
  99                 event.preventDefault();
 100                 event.stopPropagation();
 101                 CanvasEditorActions.addVirtualDeploymentDescriptor();
 102         },
 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);
 108         },
 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);
 114         },
 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);
 120         },
 121         onClickDeleteSelected(event) {
 122                 event.preventDefault();
 123                 event.stopPropagation();
 124                 DeletionManager.deleteSelected(event);
 125         },
 126         toggleJSONViewer(event) {
 127                 event.preventDefault();
 128                 if (this.props.showJSONViewer) {
 129                         ComposerAppActions.closeJsonViewer();
 130                 } else {
 131                         ComposerAppActions.closeJsonViewer();
 132                         ComposerAppActions.showJsonViewer.defer();
 133                 }
 134         },
 135         render() {
 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) {
 140                         return (
 141                                 <div className="ComposerAppToolbar" style={style}></div>
 142                         );
 143                 }
 144                 const hasSelection = SelectionManager.getSelections().length > 0;
 145                 if(this.props.panelTabShown != 'descriptor') {
 146                         style.pointerEvents = 'none';
 147                 }
 148                 return (
 149                         <div className="ComposerAppToolbar" style={style}>
 150                         {
 151                                 (this.props.panelTabShown != 'descriptor') ?
 152                                         <div className="disableOverlay"></div>
 153                                 : null
 154                         }
 155                                 {(()=>{
 156                                         if (this.props.isEditingNSD || this.props.isEditingVNFD) {
 157                                                 return (
 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} />
 162                                                         </div>
 163                                                 );
 164                                         }
 165                                 })()}
 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"
 170                                                                                                                    draggable="true"
 171                                                                                                                    label={this.props.isEditingNSD ? 'Add VLD' : 'Add IVLD'}
 172                                                                                                                    src={imgVLD}
 173                                                                                                                    onDragStart={this.onDragStartAddVld}
 174                                                                                                                    onClick={this.onClickAddVld} /> : null}
 175                                         {this.props.isEditingNSD ? <Button className="action-add-vnffg"
 176                                                                                                            draggable="true"
 177                                                                                                            label="Add VNFFG"
 178                                                                                                            src={imgFG}
 179                                                                                                            onDragStart={this.onDragStartAddVnffg}
 180                                                                                                            onClick={this.onClickAddVnffg} /> : null}
 181                                         {this.props.isEditingVNFD ? <Button className="action-add-vdu"
 182                                                                                                                 draggable="true"
 183                                                                                                                 label="Add VDU"
 184                                                                                                                 src={imgVDU}
 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" />
 188                                 </div>
 189                         </div>
 190                 );
 191         }
 192 });
 193
 194 export default ComposerAppToolbar;