ux: initial react grid poc

package.json

@@ -112,16 +112,18 @@
     "brace": "^0.10.0",
     "clipboard": "^1.7.1",
     "eventemitter3": "^2.0.2",
-    "gridstack": "https://github.com/grafana/gridstack.js#grafana",
-    "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
     "file-saver": "^1.3.3",
+    "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
     "ngreact": "^0.4.1",
+    "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-grid-layout": "^0.16.0",
+    "react-sizeme": "^2.3.6",
     "remarkable": "^1.7.1",
     "rxjs": "^5.4.3",
     "tether": "^1.4.0",

public/app/features/dashboard/all.js

@@ -23,7 +23,7 @@ define([
   './export_data/export_data_modal',
   './ad_hoc_filters',
   './repeat_option/repeat_option',
-  './dashgrid/dashgrid',
+  './dashgrid/DashboardGrid',
   './acl/acl',
   './folder_picker/picker',
   './folder_modal/folder'

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import coreModule from 'app/core/core_module';
+import ReactGridLayout from 'react-grid-layout';
+import {DashboardModel} from '../model';
+import sizeMe from 'react-sizeme';
+
+const COLUMN_COUNT = 24;
+const ROW_HEIGHT = 30;
+
+function GridWrapper({size, layout, onLayoutChange, children}) {
+  if (size.width === 0) {
+    console.log('size is zero!');
+  }
+
+  const gridWidth = size.width > 0 ? size.width : 1200;
+
+  return (
+    <ReactGridLayout
+      width={gridWidth}
+      className="layout"
+      isDraggable={true}
+      isResizable={true}
+      measureBeforeMount={false}
+      margin={[10, 10]}
+      cols={COLUMN_COUNT}
+      rowHeight={ROW_HEIGHT}
+      draggableHandle=".grid-drag-handle"
+      layout={layout}
+      onLayoutChange={onLayoutChange}>
+      {children}
+    </ReactGridLayout>
+  );
+}
+
+const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper);
+
+export interface DashboardGridProps {
+  dashboard: DashboardModel;
+}
+
+export class DashboardGrid extends React.Component<DashboardGridProps, any> {
+  gridToPanelMap: any;
+
+  constructor(props) {
+    super(props);
+    this.onLayoutChange = this.onLayoutChange.bind(this);
+  }
+
+  buildLayout() {
+    const layout = [];
+    for (let panel of this.props.dashboard.panels) {
+      layout.push({
+        i: panel.id.toString(),
+        x: panel.x,
+        y: panel.y,
+        w: panel.width,
+        h: panel.height,
+      });
+    }
+    console.log(layout);
+    return layout;
+  }
+
+  onLayoutChange() {}
+
+  renderPanels() {
+    const panelElements = [];
+    for (let panel of this.props.dashboard.panels) {
+      panelElements.push(
+        <div key={panel.id.toString()} className="panel">
+          <div className="panel-container">
+            <div className="panel-header grid-drag-handle">
+              <div className="panel-title-container">{panel.type}</div>
+            </div>
+            <div className="panel-content">
+              {panel.title} - {panel.type}
+            </div>
+          </div>
+        </div>,
+      );
+    }
+    return panelElements;
+  }
+
+  render() {
+    return (
+      <SizedReactLayoutGrid layout={this.buildLayout()} onLayoutChange={this.onLayoutChange}>
+        {this.renderPanels()}
+      </SizedReactLayoutGrid>
+    );
+  }
+}
+
+coreModule.directive('dashboardGrid', function(reactDirective) {
+  return reactDirective(DashboardGrid, [['dashboard', {watchDepth: 'reference'}]]);
+});

public/app/partials/dashboard.html

@@ -8,7 +8,8 @@
 
 				<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 
-        <dash-grid dashboard="dashboard"></dash-grid>
+        <!-- <dash&#45;grid dashboard="dashboard"></dash&#45;grid> -->
+				<dashboard-grid dashboard="dashboard"></dashboard-grid>
 
 			</div>
 		</div>

public/sass/_grafana.scss

@@ -77,11 +77,12 @@
 @import "components/tabbed_view";
 @import "components/query_part";
 @import "components/jsontree";
-@import "components/edit_sidemenu.scss";
+@import "components/edit_sidemenu";
 @import "components/row.scss";
-@import "components/gridstack.scss";
-@import "components/json_explorer.scss";
-@import "components/code_editor.scss";
+@import "components/json_explorer";
+@import "components/code_editor";
+@import "components/dashboard_grid";
+
 
 // PAGES
 @import "pages/login";

public/sass/components/_dashboard_grid.scss

@@ -0,0 +1,2 @@
+@import "~react-grid-layout/css/styles.css";
+@import "~react-resizable/css/styles.css";

public/sass/pages/_dashboard.scss

@@ -25,6 +25,7 @@ div.flot-text {
   background-color: $panel-bg;
   border: $panel-border;
   position: relative;
+  height: 100%;
 
   &.panel-transparent {
     background-color: transparent;
@@ -34,6 +35,7 @@ div.flot-text {
 
 .panel-content {
   padding: 0px 10px 5px 10px;
+  height: 100%;
 }
 
 .panel-title-container {

yarn.lock

@@ -1072,6 +1072,10 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
@@ -1509,6 +1513,10 @@ class-utils@^0.3.5:
     lazy-cache "^2.0.2"
     static-extend "^0.1.1"
 
+classnames@2.x, classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@3.4.x, clean-css@~3.4.2:
   version "3.4.28"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.28.tgz#bf1945e82fc808f55695e6ddeaec01400efd03ff"
@@ -2411,6 +2419,12 @@ elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
 
+element-resize-detector@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.12.tgz#8b3fd6eedda17f9c00b360a0ea2df9927ae80ba2"
+  dependencies:
+    batch-processor "^1.0.0"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -3445,14 +3459,6 @@ graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6,
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-"gridstack@https://github.com/grafana/gridstack.js#grafana":
-  version "1.0.0-dev"
-  resolved "https://github.com/grafana/gridstack.js#bd40b3fe4dafc99350145c7b4761d8693593f6fe"
-  dependencies:
-    jquery "^3.1.0"
-    jquery-ui "^1.12.0"
-    lodash "^4.14.2"
-
 growl@1.10.3:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.3.tgz#1926ba90cf3edfe2adb4927f5880bc22c66c790f"
@@ -4434,11 +4440,7 @@ jest-validate@^21.1.0:
     leven "^2.1.0"
     pretty-format "^21.2.1"
 
-jquery-ui@^1.12.0:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
-
-jquery@^3.1.0, jquery@^3.2.1:
+jquery@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
 
@@ -4975,6 +4977,10 @@ lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
+lodash.isequal@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.kebabcase@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
@@ -5011,7 +5017,7 @@ lodash@^3.10.1, lodash@^3.5.0, lodash@^3.6.0, lodash@^3.7.0, lodash@^3.8.0, loda
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.14.2, lodash@^4.15.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.7.0, lodash@^4.8.0, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.7.0, lodash@^4.8.0, lodash@~4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -6719,7 +6725,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.10, prop-types@^15.6.0:
+prop-types@15.x, prop-types@^15.5.10, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -6877,6 +6883,38 @@ react-dom@^16.0.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+"react-draggable@^2.2.6 || ^3.0.3", react-draggable@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.0.3.tgz#a6f9b3a7171981b76dadecf238316925cb9eacf4"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.10"
+
+react-grid-layout@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.0.tgz#f74363cd134b2f8a763224d7b6287cbb68e6de05"
+  dependencies:
+    classnames "2.x"
+    lodash.isequal "^4.0.0"
+    prop-types "15.x"
+    react-draggable "^3.0.3"
+    react-resizable "^1.7.5"
+
+react-resizable@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.7.5.tgz#83eb75bb3684da6989bbbf4f826e1470f0af902e"
+  dependencies:
+    prop-types "15.x"
+    react-draggable "^2.2.6 || ^3.0.3"
+
+react-sizeme@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.3.6.tgz#d60ea2634acc3fd827a3c7738d41eea0992fa678"
+  dependencies:
+    element-resize-detector "^1.1.12"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
 react-test-renderer@^16.0.0:
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"