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

Dashboard usability changes #2093

Merged
merged 4 commits into from Apr 21, 2016

Conversation

Projects
None yet
4 participants
@edmundoa
Member

edmundoa commented Apr 15, 2016

These changes address some issues with dashboards:

  • It is hard to move widgets to a new empty row when there is not enough height for a new widget
  • Action buttons look odd on md screen sizes
  • Resizing the window may hide some widgets, putting them out of reach

One of the biggest changes is that these changes are removing the broken responsive widget positioning we were trying to use in previous versions.

The reason for this is that Gridster doesn't really support that, so it was working in a random way, and changing the ordering as it pleased. Integrating Gridster into React made this even a worse problem, as now it is quite hard to know who is changing the DOM in which way.

So, instead of trying to unsuccessfully do that, I have changed the behaviour to always respect the positioning users set, regardless of the resolution. It is still possible to see all widgets in a small screen by scrolling, but we won't try to be smart about resizes and re-arrange all widgets in a random way.

That is not the ideal way I would like to have, but I think it's at least consistent, and fixes some issues while we use Gridster and React together.

@edmundoa edmundoa added this to the 2.0.0 milestone Apr 15, 2016

@dennisoelkers dennisoelkers self-assigned this Apr 19, 2016

edmundoa added some commits Apr 15, 2016

Allow to create rows at the bottom of a dashboard
Add clearfix so it is possible moving widgets to a new row at the bottom
of the dashboard.
Style changes to dashboards
- Set min-width
- Merge widget styles
- Fix gridster style selector
Use a constant layout for dashboards
So far we tried to make the dashboard layout to be responsive with the
screen. This was never really working, as widgets were dancing around
inconsistently. Trying to manage gridster from react made this even
worse, as now it is harder to reset gridster or to make sense when the
DOM is changing.

Instead of trying to unsuccessfully do that, these changes are going in
the opposite direction: Users can unlock the dashboard and arrange
widgets as desired, and that arrangement will be keep in the future,
regardless on the screen size. Users can still scroll through the widgets
or re-arrange them if they want to, but we won't try to be smart about
it.

@edmundoa edmundoa force-pushed the dashboard-resize branch from 6d26c3c to 9dc3a37 Apr 21, 2016

});
this.props.onPositionsChange(positions);
},
render() {
const children = (this.state.grid && React.Children.map(this.props.children, (child) => {
const position = this.props.positions[child.props.id] || {row: 0, col: 0, width: 1, height: 1};
const position = this.props.positions[child.props.id];

This comment has been minimized.

@dennisoelkers

dennisoelkers Apr 21, 2016

Member

Why are you doing this? What happens when there is no position for the widget (for some reason)?

This comment has been minimized.

@edmundoa

edmundoa Apr 21, 2016

Member

They always get them from ShowDashboardPage, but still you are right, and we shouldn't remove it from here.

@dennisoelkers dennisoelkers merged commit ccca35c into master Apr 21, 2016

4 checks passed

ci-server-integration Jenkins build graylog2-server-integration-pr 853 has succeeded
Details
ci-web-linter Jenkins build graylog-pr-linter-check 341 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

@dennisoelkers dennisoelkers deleted the dashboard-resize branch Apr 21, 2016

@STRML

This comment has been minimized.

STRML commented May 23, 2016

By the way, I have a project that may handle this more gracefully and is built for responsive layouts: https://github.com/STRML/react-grid-layout

Its behavior is very similar to what you have now. In fact, at my first time using it, I thought you were using RGL. Would be happy to help support if you want to use it and have any integration issues.

@edmundoa

This comment has been minimized.

Member

edmundoa commented May 24, 2016

@STRML Thank you for the suggestion! I think I was looking into it some months ago, and there was something missing to completely replace Gridster. We will take a look again, as Gridster is quite hard to work with once you use React.

@gruselglatz

This comment has been minimized.

gruselglatz commented Aug 25, 2016

@STRML would love to see such a good widget placement in graylog. Since there is so much space lost on the right side, even on widely used resolutions like 1080...

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