public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: initial react grid poc

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-10-09 17:24:10 +02:00
parent 647a3cc5ae
commit 6cd2624caf
8 changed files with 165 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+4 -2
View File
@@ -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
+1 -1
View File
@@ -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
+96
View File
@@ -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
+2 -1
View File
@@ -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
+5 -4
View File
@@ -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
+2
View File
@@ -0,0 +1,2 @@
@import "~react-grid-layout/css/styles.css";
@import "~react-resizable/css/styles.css";
public/sass/pages/_dashboard.scss
+2
View File
@@ -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
+53 -15
View File
@@ -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"