ux: initial react grid poc

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 {