Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix: Add database search in available charts on dashboard. #19244

Merged
merged 10 commits into from
Jul 7, 2022
Merged

fix: Add database search in available charts on dashboard. #19244

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
930a600
add database search
codemaster08240328 Mar 17, 2022
44e68a7
resolve lint issue
codemaster08240328 Mar 18, 2022
db1e822
Merge branch 'master' into fix/availablt-charts-limit-dashboard
codemaster08240328 May 2, 2022
def0b32
add test for sliceEntities actions
codemaster08240328 May 4, 2022
c3474a1
fix lint issue
codemaster08240328 May 5, 2022
622528a
add licence into test
codemaster08240328 May 5, 2022
2ba3b0d
fix pipeline broken
codemaster08240328 May 12, 2022
008f163
fast forward
codemaster08240328 Jun 6, 2022
1b2e8f4
fix sort by recent
codemaster08240328 Jun 28, 2022
1bd4105
resolve comment
codemaster08240328 Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 141 additions & 79 deletions superset-frontend/src/dashboard/actions/sliceEntities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,92 +39,154 @@ export function fetchAllSlicesFailed(error) {
return { type: FETCH_ALL_SLICES_FAILED, payload: { error } };
}

function fetchSlices(
userId,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we send these as an Option object? So we don't have to worry about the order we send it and we avoid sending undefined when calling it? So we just send what options we need and we destructure here to get them?

excludeFilterBox,
dispatch,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could transform this to an action creator function (like the ones below) to avoid passing this param around

filter_value,
sortColumn = 'changed_on_delta_humanized',
slices = {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you need the current slices? aren't we fetching here and need to replace the existing ones?

) {
const additional_filters = filter_value ? [
{ col: 'slice_name', opr: 'sw', value: filter_value },
{ col: 'viz_type', opr: 'sw', value: filter_value },
{ col: 'datasource_name', opr: 'sw', value: filter_value },
] : [];

return SupersetClient.get({
endpoint: `/api/v1/chart/?q=${rison.encode({
columns: [
'changed_on_delta_humanized',
'changed_on_utc',
'datasource_id',
'datasource_type',
'datasource_url',
'datasource_name_text',
'description_markeddown',
'description',
'id',
'params',
'slice_name',
'url',
'viz_type',
],
filters: [
{ col: 'owners', opr: 'rel_m_m', value: userId },
...additional_filters
],
page_size: FETCH_SLICES_PAGE_SIZE,
order_column: sortColumn == 'changed_on' ? 'changed_on_delta_humanized' : sortColumn,
order_direction: sortColumn == 'changed_on' ? 'desc' : 'asc',
})}`,
})
.then(({ json }) => {
let { result } = json;
// disable add filter_box viz to dashboard
if (excludeFilterBox) {
result = result.filter(slice => slice.viz_type !== 'filter_box');
}
result.forEach(slice => {
let form_data = JSON.parse(slice.params);
form_data = {
...form_data,
// force using datasource stored in relational table prop
datasource:
getDatasourceParameter(
slice.datasource_id,
slice.datasource_type,
) || form_data.datasource,
};
slices[slice.id] = {
slice_id: slice.id,
slice_url: slice.url,
slice_name: slice.slice_name,
form_data,
datasource_name: slice.datasource_name_text,
datasource_url: slice.datasource_url,
datasource_id: slice.datasource_id,
datasource_type: slice.datasource_type,
changed_on: new Date(slice.changed_on_utc).getTime(),
description: slice.description,
description_markdown: slice.description_markeddown,
viz_type: slice.viz_type,
modified: slice.changed_on_delta_humanized,
changed_on_humanized: slice.changed_on_delta_humanized,
};
});

return dispatch(setAllSlices(slices));
})
.catch(
errorResponse =>
console.log(errorResponse) ||
getClientErrorObject(errorResponse).then(({ error }) => {
dispatch(
fetchAllSlicesFailed(
error || t('Could not fetch all saved charts'),
),
);
dispatch(
addDangerToast(
t('Sorry there was an error fetching saved charts: ') + error,
),
);
}),
);
}

const FETCH_SLICES_PAGE_SIZE = 200;
export function fetchAllSlices(userId, excludeFilterBox = false) {
export function fetchAllSlices(
userId,
excludeFilterBox = false
) {
return (dispatch, getState) => {
const { sliceEntities } = getState();
if (sliceEntities.lastUpdated === 0) {
dispatch(fetchAllSlicesStarted());

return SupersetClient.get({
endpoint: `/api/v1/chart/?q=${rison.encode({
columns: [
'changed_on_delta_humanized',
'changed_on_utc',
'datasource_id',
'datasource_type',
'datasource_url',
'datasource_name_text',
'description_markeddown',
'description',
'id',
'params',
'slice_name',
'url',
'viz_type',
],
filters: [{ col: 'owners', opr: 'rel_m_m', value: userId }],
page_size: FETCH_SLICES_PAGE_SIZE,
order_column: 'changed_on_delta_humanized',
order_direction: 'desc',
})}`,
})
.then(({ json }) => {
const slices = {};
let { result } = json;
// disable add filter_box viz to dashboard
if (excludeFilterBox) {
result = result.filter(slice => slice.viz_type !== 'filter_box');
}
result.forEach(slice => {
let form_data = JSON.parse(slice.params);
form_data = {
...form_data,
// force using datasource stored in relational table prop
datasource:
getDatasourceParameter(
slice.datasource_id,
slice.datasource_type,
) || form_data.datasource,
};
slices[slice.id] = {
slice_id: slice.id,
slice_url: slice.url,
slice_name: slice.slice_name,
form_data,
datasource_name: slice.datasource_name_text,
datasource_url: slice.datasource_url,
datasource_id: slice.datasource_id,
datasource_type: slice.datasource_type,
changed_on: new Date(slice.changed_on_utc).getTime(),
description: slice.description,
description_markdown: slice.description_markeddown,
viz_type: slice.viz_type,
modified: slice.changed_on_delta_humanized,
changed_on_humanized: slice.changed_on_delta_humanized,
};
});

return dispatch(setAllSlices(slices));
})
.catch(
errorResponse =>
console.log(errorResponse) ||
getClientErrorObject(errorResponse).then(({ error }) => {
dispatch(
fetchAllSlicesFailed(
error || t('Could not fetch all saved charts'),
),
);
dispatch(
addDangerToast(
t('Sorry there was an error fetching saved charts: ') + error,
),
);
}),
);
return fetchSlices(
userId,
excludeFilterBox,
dispatch,
undefined
);
}

return dispatch(setAllSlices(sliceEntities.slices));
};
}

export function fetchSortedSlices(
userId,
excludeFilterBox = false,
order_column
) {
return dispatch => {
dispatch(fetchAllSlicesStarted());
return fetchSlices(
userId,
excludeFilterBox,
dispatch,
undefined,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If passed as an Option object there's no need to worry about order or sending undefined.

order_column
);
}
}

export function fetchFilteredSlices(
userId,
excludeFilterBox = false,
filter_value
) {
return (dispatch, getState) => {
dispatch(fetchAllSlicesStarted());
const { sliceEntities } = getState();
return fetchSlices(
userId,
excludeFilterBox,
dispatch,
filter_value,
undefined,
sliceEntities.slices
);
}
}
26 changes: 21 additions & 5 deletions superset-frontend/src/dashboard/components/SliceAdder.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import { FILTER_BOX_MIGRATION_STATES } from 'src/explore/constants';
import AddSliceCard from './AddSliceCard';
import AddSliceDragPreview from './dnd/AddSliceDragPreview';
import DragDroppable from './dnd/DragDroppable';
import _ from 'lodash';

const propTypes = {
fetchAllSlices: PropTypes.func.isRequired,
Expand Down Expand Up @@ -112,7 +113,6 @@ class SliceAdder extends React.Component {
this.rowRenderer = this.rowRenderer.bind(this);
this.searchUpdated = this.searchUpdated.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSelect = this.handleSelect.bind(this);
}

Expand Down Expand Up @@ -162,9 +162,17 @@ class SliceAdder extends React.Component {
}
}

handleChange(ev) {
this.searchUpdated(ev.target.value);
}
handleChange = _.debounce((value) => {
this.searchUpdated(value);

const { userId, filterboxMigrationState } = this.props;
this.slicesRequest = this.props.fetchFilteredSlices(
userId,
isFeatureEnabled(FeatureFlag.ENABLE_FILTER_BOX_MIGRATION) &&
filterboxMigrationState !== FILTER_BOX_MIGRATION_STATES.SNOOZED,
value,
);
}, 300)

searchUpdated(searchTerm) {
this.setState(prevState => ({
Expand All @@ -184,6 +192,14 @@ class SliceAdder extends React.Component {
sortBy,
),
}));

const { userId, filterboxMigrationState } = this.props;
this.slicesRequest = this.props.fetchSortedSlices(
userId,
isFeatureEnabled(FeatureFlag.ENABLE_FILTER_BOX_MIGRATION) &&
filterboxMigrationState !== FILTER_BOX_MIGRATION_STATES.SNOOZED,
sortBy,
);
}

rowRenderer({ key, index, style }) {
Expand Down Expand Up @@ -244,7 +260,7 @@ class SliceAdder extends React.Component {
<Input
placeholder={t('Filter your charts')}
className="search-input"
onChange={this.handleChange}
onChange={(ev) => this.handleChange(ev.target.value)}
onKeyPress={this.handleKeyPress}
data-test="dashboard-charts-filter-search-input"
/>
Expand Down
4 changes: 3 additions & 1 deletion superset-frontend/src/dashboard/containers/SliceAdder.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchAllSlices } from '../actions/sliceEntities';
import { fetchAllSlices, fetchSortedSlices, fetchFilteredSlices } from '../actions/sliceEntities';
import SliceAdder from '../components/SliceAdder';

function mapStateToProps(
Expand All @@ -43,6 +43,8 @@ function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
fetchAllSlices,
fetchSortedSlices,
fetchFilteredSlices,
},
dispatch,
);
Expand Down