New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React grid layout #3575

Merged
merged 12 commits into from Mar 8, 2017

Conversation

Projects
None yet
3 participants
@edmundoa
Member

edmundoa commented Mar 6, 2017

This PR replaces gridster.js with React-Grid-Layout.

The main advantage is that React-Grid-Layout works more smoothly, with less surprises, and lets us do nicer things than gridster.js, like having responsive dashboards or fitting the widgets properly on the screen. In the development front, React-Grid-Layout is much easier to understand, and it integrates better with React and our current application.

This PR takes care of implementing all current functionalities using React-Grid-Layout. As a new addition, I made the number of columns available variable, and depending on the user's screen size. This will allow users with large screens to fit more widgets into the dashboard, while still being able to see them when using a smaller device.

edmundoa added some commits Feb 28, 2017

Style dragging widgets
- Use move cursor when hovering over widgets that can be dragged
- Change target color to blue, like we had before
Use responsive layout
This allows us to adjust the number of columns displayed in the
dashboard using the screen width.

When dashboards are created on large screens, react-grid-layout will
take care of displaying out of bound widgets somewhere visible.
Avoid re-rendering all graphs on lock/unlock
Use some CSS trickery and the `draggableHandle` property to avoid
re-rendering all widgets when the dashboard lock status changes.
See: STRML/react-grid-layout#371
Fix visualization redraw when window is resized
- We use jQuery to listen to those events to ensure all widget elements
are being called to handle the event
- Also throttle those events, to avoid redrawing the widgets too often

@edmundoa edmundoa added this to the 2.3.0 milestone Mar 6, 2017

@dennisoelkers dennisoelkers self-assigned this Mar 6, 2017

@STRML

This comment has been minimized.

STRML commented Mar 6, 2017

Excellent! I am happy to help if there are questions, bug reports, or feature requests in the future for RGL. Glad to see it in Graylog!

@dennisoelkers

LGTM! Thank you for this!

@dennisoelkers dennisoelkers merged commit 34f150b into master Mar 8, 2017

4 checks passed

ci-web-linter Jenkins build graylog-pr-linter-check 1414 has succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
licence/cla Contributor License Agreement is signed.
Details

@dennisoelkers dennisoelkers deleted the react-grid-layout branch Mar 8, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment