Migrate Dashboard and Public Dashboard to React #4228

gabrieldutra · 2019-10-08T19:42:06Z

What type of PR is this? (check all applicable)

Refactor

Description

Migration of the Dashboard to React

Refresh and Refresh rate
Same presets kept, now updates URL accordingly with refresh=[refreshRate].
No button on the Public Dashboard, but can be updated through the URL (as it was before).

Fullscreen
Now updates URL accordingly.
The button is still only visible for Published queries, lmk if you want that changed.

Publish/Unpublish

Mobile

Dashboard Header is no longer Sticky for Mobile (there was an issue with it now that the Navbar is fixed). Only con I see is in case you want to refresh the dashboard you'll have to go all the way up.
Refresh is now the only Button that appears in mobile (previously the "Publish" button would appear too)

Edit Mode

Public Dashboard

Features

Should it be possible to unarchive a dashboard? (Add an "unarchive" button on archived dashboards #982 + Feature: Add an unarchive dashboard button #2180 😅)

Bugs Found

Bug 🪲: Dashboard Level Filters not updating when it's changed.

Related Tickets & Documents

Closes #2076
Closes #4204
Closes #4341

- initial rendering - some actions - temporary updated less file

ranbena · 2019-10-10T05:49:24Z

client/app/pages/dashboards/useDashboard.js

+}
+
+function useRefreshRateHandler(refreshDashboard, updateUrlSearch) {
+  const [refreshRate, setRefreshRate] = useState(getRefreshRateFromUrl());


I like that this now allows custom refresh rates 🕺

kravets-levko · 2019-11-14T09:56:19Z

@gabrieldutra prepareWidgetsForDashboard was needed for very old dashboards (in versions prior to 4 they were implemented as Bootstrap grid) - since there are no migration that updates dashboard grid between v3 and v4 - prepareWidgetsForDashboard was doing that job. Without it, users that will decide to upgrade from Redash v3 to latest (not sure if there are a lot of them) will get all their dashboards broken.

I know that it was an attempt to fix the issue with unnecessary API calls, but IMHO the solution should be different: there is a dirty-check mechanism for auto-save layout feature - this mechanism should be disabled in non-edit mode (as it was prior to Dashboard grid migration to React).

arikfr · 2019-11-14T10:04:07Z

I agree with @kravets-levko -- we should keep the migration mechanism and implement the solution only for saves during non edits.

This reverts commit b434f03.

gabrieldutra · 2019-11-14T10:41:45Z

Thanks @kravets-levko, I didn't know about that. Moved to option B to be closer to how this was done prior to the autosave: disabled layout saving when not in edit mode.

susodapop · 2019-11-19T12:37:03Z

This passes the sanity check from my end-user perspective. I like the new button look.

gabrieldutra · 2019-11-19T17:28:41Z

Thanks, @susodapop 🙂

arikfr · 2019-12-05T09:34:30Z

client/app/pages/dashboards/DashboardPage.jsx

+
+function RefreshButton({ dashboardOptions }) {
+  const { refreshRate, setRefreshRate, refreshing, refreshDashboard } = dashboardOptions;
+  const refreshRateOptions = clientConfig.dashboardRefreshIntervals;


It seems to be missing the use of a policy to define allowed refresh intervals:

redash/client/app/pages/dashboards/dashboard.js

Lines 116 to 121 in 2633052

const allowedIntervals = policy.getDashboardRefreshIntervals();

if (_.isArray(allowedIntervals)) {

_.each(this.refreshRates, (rate) => {

rate.enabled = allowedIntervals.indexOf(rate.rate) >= 0;

});

}

🤔, currently it's still possible to put any interval you want through the url, should it be reflected in there?

I think it was possible before as well, but we can also make sure that the value in the url is not lower than the minimum value the policy allows. Something like:

const refreshRate = max(urlValue, lowestPolicyValue);

Yeah, my currently was meant to be master version, but cool, will go with it 👍

…act-dashboard

kravets-levko · 2019-12-17T13:21:29Z

client/app/pages/dashboards/useDashboard.js

+
+  useEffect(() => {
+    document.title = dashboard.name;
+  }, [dashboard.name]);


arikfr · 2019-12-24T08:20:49Z

👍

gabrieldutra added 11 commits October 1, 2019 14:24

Initial React Rendering with useDashboard

2771fbe

Make sure widgets refresh + useCallback

aa66aff

Rename collectFilters and add refreshRate

49dffba

Fix error updates not being rendered

2516635

Only render widget bottom when queryResults exists

6cc5091

Cleanup

7796161

Add useCallback to refreshDashboard

ecd55f4

Make sure Promise.all have all promises done

bce0d97

Merge branch 'master' into react-public-dashboard

8aee2ad

Merge branch 'master' into react-public-dashboard

2c31510

Start migrating Dashoard to React

d55cbff

- initial rendering - some actions - temporary updated less file

gabrieldutra self-assigned this Oct 8, 2019

gabrieldutra added 10 commits October 8, 2019 23:33

Fullscreen handler added

e10998c

Separate refreshRateHandler hook

e3c2401

Add a few tooltips

a1637c2

Separate DashboardControl and normalize btn width

7b80a69

Share Button

ab8794a

Fix serach params not updating

2ee69f7

Enumerate More Options

a95d866

Toggle Publish options

a024b24

Archive Dashboard

fed179d

Parameters + Filters

50f99c6

ranbena reviewed Oct 10, 2019

View reviewed changes

arikfr mentioned this pull request Oct 11, 2019

React migration #3071

Closed

weekly-digest bot mentioned this pull request Oct 14, 2019

Weekly Digest (7 October, 2019 - 14 October, 2019) #4241

Closed

weekly-digest bot mentioned this pull request Oct 21, 2019

Weekly Digest (14 October, 2019 - 21 October, 2019) #4271

Closed

kravets-levko mentioned this pull request Oct 24, 2019

Refactoring: merge dashboard and public-dashboard #2076

Closed

gabrieldutra added 3 commits October 26, 2019 14:20

Merge branch 'master' into react-public-dashboard

77b5ccd

Prepare Manage Permissions

508bceb

Merge branch 'react-public-dashboard' into react-dashboard

636f85f

Merge branch 'master' into react-dashboard

b64ccd5

gabrieldutra mentioned this pull request Nov 14, 2019

Widgets API is called when loading a dashboard #4341

Closed

gabrieldutra added 2 commits November 14, 2019 07:33

Revert "Remove prepareWidgetsForDashboard"

b5db0ee

This reverts commit b434f03.

Avoid saving layout changes out of editing mode

f5ee64a

weekly-digest bot mentioned this pull request Nov 18, 2019

Weekly Digest (11 November, 2019 - 18 November, 2019) #4368

Closed

Merge branch 'master' into react-dashboard

b050252

weekly-digest bot mentioned this pull request Nov 25, 2019

Weekly Digest (18 November, 2019 - 25 November, 2019) #4398

Closed

Merge branch 'master' into react-dashboard

821810b

arikfr requested changes Dec 5, 2019

View reviewed changes

Apply policy for enabled refresh rates

42a9f3d

weekly-digest bot mentioned this pull request Dec 9, 2019

Weekly Digest (2 December, 2019 - 9 December, 2019) #4427

Closed

gabrieldutra mentioned this pull request Dec 17, 2019

Migrate Query page to React: Visualization Tabs #4453

Merged

1 task

Merge branch 'master' into react-dashboard

e14e8e8

restyled-io bot mentioned this pull request Dec 17, 2019

Restyle Migrate Dashboard and Public Dashboard to React #4459

Merged

Disable loadDashboard deps

93ed21a

gabrieldutra force-pushed the react-dashboard branch from 2286325 to 93ed21a Compare December 17, 2019 12:51

restyled-io bot and others added 3 commits December 17, 2019 09:52

Restyled by prettier (#4459)

cc309ca

Update title when dashboard name updates

2a2bfb8

Merge branch 'react-dashboard' of github.com:getredash/redash into re…

56bbdaf

…act-dashboard

kravets-levko reviewed Dec 17, 2019

View reviewed changes

weekly-digest bot mentioned this pull request Dec 23, 2019

Weekly Digest (16 December, 2019 - 23 December, 2019) #4474

Closed

arikfr merged commit 38b6b47 into master Dec 24, 2019

arikfr deleted the react-dashboard branch December 24, 2019 08:20

weekly-digest bot mentioned this pull request Dec 30, 2019

Weekly Digest (23 December, 2019 - 30 December, 2019) #4508

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate Dashboard and Public Dashboard to React #4228

Migrate Dashboard and Public Dashboard to React #4228

gabrieldutra commented Oct 8, 2019 •

edited

Loading

ranbena Oct 10, 2019

kravets-levko commented Nov 14, 2019

arikfr commented Nov 14, 2019

gabrieldutra commented Nov 14, 2019

susodapop commented Nov 19, 2019

gabrieldutra commented Nov 19, 2019

arikfr Dec 5, 2019

gabrieldutra Dec 5, 2019

arikfr Dec 5, 2019

gabrieldutra Dec 5, 2019

kravets-levko Dec 17, 2019

arikfr commented Dec 24, 2019

	const allowedIntervals = policy.getDashboardRefreshIntervals();
	if (_.isArray(allowedIntervals)) {
	_.each(this.refreshRates, (rate) => {
	rate.enabled = allowedIntervals.indexOf(rate.rate) >= 0;
	});
	}

Migrate Dashboard and Public Dashboard to React #4228

Migrate Dashboard and Public Dashboard to React #4228

Conversation

gabrieldutra commented Oct 8, 2019 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

ranbena Oct 10, 2019

Choose a reason for hiding this comment

kravets-levko commented Nov 14, 2019

arikfr commented Nov 14, 2019

gabrieldutra commented Nov 14, 2019

susodapop commented Nov 19, 2019

gabrieldutra commented Nov 19, 2019

arikfr Dec 5, 2019

Choose a reason for hiding this comment

gabrieldutra Dec 5, 2019

Choose a reason for hiding this comment

arikfr Dec 5, 2019

Choose a reason for hiding this comment

gabrieldutra Dec 5, 2019

Choose a reason for hiding this comment

kravets-levko Dec 17, 2019

Choose a reason for hiding this comment

arikfr commented Dec 24, 2019

gabrieldutra commented Oct 8, 2019 •

edited

Loading