Add workpad export (elastic#233)

* Add export * Stringify
w33ble · Nov 14, 2017 · 02f025b · 02f025b
1 parent 482a563
commit 02f025b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "bootstrap": "^3.3.7",
     "chroma-js": "^1.3.4",
     "elasticsearch": "^13.0.0",
+    "file-saver": "^1.3.3",
     "gulp-zip": "^4.0.0",
     "handlebars": "^4.0.10",
     "inline-style": "^2.0.0",
@@ -107,4 +108,4 @@
     "through2": "^2.0.3",
     "yargs": "7.1.0"
   }
-}
+}
diff --git a/public/components/workpad_loader/index.js b/public/components/workpad_loader/index.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { compose, withState, withHandlers, lifecycle } from 'recompose';
 import { find as findWorkpads, remove } from '../../lib/workpad_service';
 import { getWorkpad } from '../../state/selectors/workpad';
-import { createWorkpad, loadWorkpad } from '../../state/actions/workpad';
+import { createWorkpad, loadWorkpad, downloadWorkpad } from '../../state/actions/workpad';
 import { WorkpadLoader as Component } from './workpad_loader';
 
 const mapStateToProps = (state) => ({
@@ -12,6 +12,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = ({
   createWorkpad,
   loadWorkpad,
+  downloadWorkpad,
 });
 
 export const WorkpadLoader = compose(

diff --git a/public/components/workpad_loader/workpad_loader.js b/public/components/workpad_loader/workpad_loader.js
@@ -17,6 +17,7 @@ export const WorkpadLoader = (props) => {
     findWorkpads,
     loadWorkpad,
     removeWorkpad,
+    downloadWorkpad,
     deleteWorkpad,
     setDeleteWorkpad,
     onClose,
@@ -101,11 +102,13 @@ export const WorkpadLoader = (props) => {
             <tr
               key={wp.id}
               className="canvas__workpad_loader--workpad"
-              onClick={() => load(wp.id)}
             >
-              <td width="97%" className="canvas__workpad_loader--name">{wp.name}</td>
-              <td width="1%" className="canvas__workpad_loader--created">{formatDate(wp['@created'])}</td>
-              <td width="1%" className="canvas__workpad_loader--updated">{formatDate(wp['@timestamp'])}</td>
+              <td width="97%" className="canvas__workpad_loader--name" onClick={() => load(wp.id)}>{wp.name}</td>
+              <td width="1%" className="canvas__workpad_loader--created" onClick={() => load(wp.id)}>{formatDate(wp['@created'])}</td>
+              <td width="1%" className="canvas__workpad_loader--updated" onClick={() => load(wp.id)}>{formatDate(wp['@timestamp'])}</td>
+              <td width="1%" className="canvas__workpad_loader--export">
+                <span onClick={() => downloadWorkpad(wp.id)} className="fa fa-download" />
+              </td>
               <td width="1%" className="canvas__workpad_loader--delete">
                 <span onClick={() => removeConfirm(wp)} className="fa fa-trash" />
               </td>
@@ -134,6 +137,7 @@ WorkpadLoader.propTypes = {
   createPending: PropTypes.bool.isRequired,
   setCreatePending: PropTypes.func.isRequired,
   createWorkpad: PropTypes.func.isRequired,
+  downloadWorkpad: PropTypes.func.isRequired,
   loadWorkpad: PropTypes.func.isRequired,
   findWorkpads: PropTypes.func.isRequired,
   removeWorkpad: PropTypes.func.isRequired,

diff --git a/public/components/workpad_loader/workpad_loader.less b/public/components/workpad_loader/workpad_loader.less
@@ -11,6 +11,10 @@
     color: @colorDanger;
   }
 
+  .canvas__workpad_loader--export:hover {
+    color: @colorSecondary;
+  }
+
   .canvas__workpad_loader--workpad {
     cursor: pointer;
 

diff --git a/public/state/actions/workpad.js b/public/state/actions/workpad.js
@@ -6,6 +6,7 @@ import { getWorkpadColors } from '../selectors/workpad';
 import { fetchAllRenderables } from './elements';
 import { setAssets, resetAssets } from './assets';
 import { getDefaultWorkpad } from '../defaults';
+import fileSaver from 'file-saver';
 
 export const sizeWorkpad = createAction('sizeWorkpad');
 export const setName = createAction('setName');
@@ -39,6 +40,14 @@ export const loadWorkpad = createThunk('loadWorkpad', ({ dispatch }, workpadId)
   });
 });
 
+export const downloadWorkpad = createThunk('downloadWorkpad', ({ dispatch }, workpadId) => {
+  // TODO: handle the failed loading state
+  workpadService.get(workpadId).then(resp => {
+    console.log(resp);
+    fileSaver.saveAs(new Blob([JSON.stringify(resp)], { type: 'application/json' }), `canvas-workpad-${resp.name}-${resp.id}.json`);
+  });
+});
+
 export const createWorkpad = createThunk('createWorkpad', ({ dispatch }) => {
   const newWorkpad = getDefaultWorkpad();