"Add Slices" modal on dashboard page (#678)

* Add slice modal

* use datatables, filter by slice creator

* tests & landscaping

* code review + react-bootstrap-table + modularity

caravel/assets/javascripts/dashboard/components/GridLayout.jsx

@@ -0,0 +1,186 @@
+import React, { PropTypes } from 'react';
+import { Responsive, WidthProvider } from 'react-grid-layout';
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
+
+require('../../../node_modules/react-grid-layout/css/styles.css');
+require('../../../node_modules/react-resizable/css/styles.css');
+
+const sliceCellPropTypes = {
+  slice: PropTypes.object.isRequired,
+  removeSlice: PropTypes.func.isRequired,
+  expandedSlices: PropTypes.object
+};
+
+const gridLayoutPropTypes = {
+  dashboard: PropTypes.object.isRequired,
+  slices: PropTypes.arrayOf(PropTypes.object).isRequired,
+  posDict: PropTypes.object.isRequired
+};
+
+class SliceCell extends React.Component {
+  render() {
+    const slice = this.props.slice,
+          createMarkup = function () {
+            return { __html: slice.description_markeddown };
+          };
+
+    return (
+      <div>
+        <div className="chart-header">
+          <div className="row">
+            <div className="col-md-12 text-center header">
+              {slice.slice_name}
+            </div>
+            <div className="col-md-12 chart-controls">
+              <div className="pull-left">
+                <a title="Move chart" data-toggle="tooltip">
+                  <i className="fa fa-arrows drag"/>
+                </a>
+                <a className="refresh" title="Force refresh data" data-toggle="tooltip">
+                  <i className="fa fa-repeat"/>
+                </a>
+              </div>
+              <div className="pull-right">
+                {slice.description ?
+                  <a title="Toggle chart description">
+                    <i className="fa fa-info-circle slice_info" title={slice.description} data-toggle="tooltip"/>
+                  </a>
+                : ""}
+                <a href={slice.edit_url} title="Edit chart" data-toggle="tooltip">
+                  <i className="fa fa-pencil"/>
+                </a>
+                <a href={slice.slice_url} title="Explore chart" data-toggle="tooltip">
+                  <i className="fa fa-share"/>
+                </a>
+                <a className="remove-chart" title="Remove chart from dashboard" data-toggle="tooltip">
+                  <i className="fa fa-close" onClick={this.props.removeSlice.bind(null, slice.slice_id)}/>
+                </a>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div
+          className="slice_description bs-callout bs-callout-default"
+          style={this.props.expandedSlices && this.props.expandedSlices[String(slice.slice_id)] ? {} : { display: "none" }}
+          dangerouslySetInnerHTML={createMarkup()}>
+        </div>
+        <div className="row chart-container">
+          <input type="hidden" value="false"/>
+          <div id={slice.token} className="token col-md-12">
+            <img src="/static/assets/images/loading.gif" className="loading" alt="loading"/>
+            <div className="slice_container" id={slice.token + "_con"}></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class GridLayout extends React.Component {
+  removeSlice(sliceId) {
+    $('[data-toggle="tooltip"]').tooltip("hide");
+    this.setState({
+      layout: this.state.layout.filter(function (reactPos) {
+        return reactPos.i !== String(sliceId);
+      }),
+      slices: this.state.slices.filter(function (slice) {
+        return slice.slice_id !== sliceId;
+      })
+    });
+  }
+
+  onResizeStop(layout, oldItem, newItem) {
+    if (oldItem.w !== newItem.w || oldItem.h !== newItem.h) {
+      this.setState({
+        layout: layout
+      }, function () {
+        this.props.dashboard.getSlice(newItem.i).resize();
+      });
+    }
+  }
+
+  onDragStop(layout) {
+    this.setState({
+      layout: layout
+    });
+  }
+
+  serialize() {
+    return this.state.layout.map(function (reactPos) {
+      return {
+        slice_id: reactPos.i,
+        col: reactPos.x + 1,
+        row: reactPos.y,
+        size_x: reactPos.w,
+        size_y: reactPos.h
+      };
+    });
+  }
+
+  componentWillMount() {
+    var layout = [];
+
+    this.props.slices.forEach(function (slice, index) {
+      var pos = this.props.posDict[slice.slice_id];
+      if (!pos) {
+        pos = {
+          col: (index * 4 + 1) % 12,
+          row: Math.floor((index) / 3) * 4,
+          size_x: 4,
+          size_y: 4
+        };
+      }
+
+      layout.push({
+        i: String(slice.slice_id),
+        x: pos.col - 1,
+        y: pos.row,
+        w: pos.size_x,
+        minW: 2,
+        h: pos.size_y
+      });
+    }, this);
+
+    this.setState({
+      layout: layout,
+      slices: this.props.slices
+    });
+  }
+
+  render() {
+    return (
+      <ResponsiveReactGridLayout
+        className="layout"
+        layouts={{ lg: this.state.layout }}
+        onResizeStop={this.onResizeStop.bind(this)}
+        onDragStop={this.onDragStop.bind(this)}
+        cols={{ lg: 12, md: 12, sm: 10, xs: 8, xxs: 6 }}
+        rowHeight={100}
+        autoSize={true}
+        margin={[20, 20]}
+        useCSSTransforms={false}
+        draggableHandle=".drag">
+        {this.state.slices.map((slice) => {
+          return (
+            <div
+              id="slice_${slice.slice_id}"
+              key={slice.slice_id}
+              data-slice-id={slice.slice_id}
+              className={"widget " + slice.viz_name}>
+              <SliceCell
+                slice={slice}
+                removeSlice={this.removeSlice.bind(this)}
+                expandedSlices={this.props.dashboard.metadata.expanded_slices}/>
+            </div>
+          );
+        })}
+      </ResponsiveReactGridLayout>
+    );
+  }
+}
+
+SliceCell.propTypes = sliceCellPropTypes;
+GridLayout.propTypes = gridLayoutPropTypes;
+
+export default GridLayout;