williaster commented on a change in pull request #4791: apply new Dashboard
builder to dashboard
URL:
https://github.com/apache/incubator-superset/pull/4791#discussion_r180876699
##########
File path: superset/assets/javascripts/dashboard/components/SliceAdder.jsx
##########
@@ -46,174 +59,157 @@ class SliceAdder extends React.Component {
}
}
- onEnterModal() {
- const uri =
`/sliceaddview/api/read?_flt_0_created_by=${this.props.userId}`;
- this.slicesRequest = $.ajax({
- url: uri,
- type: 'GET',
- success: (response) => {
- // Prepare slice data for table
- const slices = response.result.map(slice => ({
- id: slice.id,
- sliceName: slice.slice_name,
- vizType: slice.viz_type,
- datasourceLink: slice.datasource_link,
- modified: slice.modified,
- }));
-
- this.setState({
- slices,
- selectionMap: {},
- slicesLoaded: true,
- });
- },
- error: (error) => {
- this.errored = true;
- this.setState({
- errorMsg: t('Sorry, there was an error fetching slices to this
dashboard: ') +
- this.getAjaxErrorMsg(error),
- });
- },
- });
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.lastUpdated !== this.props.lastUpdated) {
+ this.setState({
+ filteredSlices: Object.values(nextProps.slices)
+ .filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
+ .sort(this.sortByComparator(KEYS_TO_SORT[this.state.sortBy].key)),
+ });
+ }
}
- getAjaxErrorMsg(error) {
- const respJSON = error.responseJSON;
- return (respJSON && respJSON.message) ? respJSON.message :
- error.responseText;
+ sortByComparator(attr) {
+ const desc = 'changedOn' === attr ? -1 : 1;
+
+ return (a, b) => {
+ if (a[attr] < b[attr]) {
+ return -1 * desc;
+ } else if (a[attr] > b[attr]) {
+ return 1 * desc;
+ } else {
+ return 0;
+ }
+ };
}
- addSlices() {
- const adder = this;
- this.props.addSlicesToDashboard(Object.keys(this.state.selectionMap))
- // if successful, page will be reloaded.
- .fail((error) => {
- adder.errored = true;
- adder.setState({
- errorMsg: t('Sorry, there was an error adding slices to this
dashboard: ') +
- this.getAjaxErrorMsg(error),
- });
- });
+ handleKeyPress(ev) {
+ if (ev.key === 'Enter') {
+ ev.preventDefault();
+
+ this.searchUpdated(ev.target.value);
+ }
}
- toggleSlice(slice) {
- const selectionMap = Object.assign({}, this.state.selectionMap);
- selectionMap[slice.id] = !selectionMap[slice.id];
- this.setState({ selectionMap });
+ getFilteredSortedSlices(searchTerm, sortBy) {
+ return Object.values(this.props.slices)
+ .filter(createFilter(searchTerm, KEYS_TO_FILTERS))
+ .sort(this.sortByComparator(KEYS_TO_SORT[sortBy].key));
}
- modifiedDateComparator(a, b, order) {
- if (order === 'desc') {
- if (a.changed_on > b.changed_on) {
- return -1;
- } else if (a.changed_on < b.changed_on) {
- return 1;
- }
- return 0;
- }
+ searchUpdated(searchTerm) {
+ this.setState({
+ searchTerm,
+ filteredSlices: this.getFilteredSortedSlices(searchTerm,
this.state.sortBy),
+ });
+ }
- if (a.changed_on < b.changed_on) {
- return -1;
- } else if (a.changed_on > b.changed_on) {
- return 1;
- }
- return 0;
+ handleSelect(sortBy) {
+ this.setState({
+ sortBy,
+ filteredSlices: this.getFilteredSortedSlices(this.state.searchTerm,
sortBy),
+ })
}
- render() {
- const hideLoad = this.state.slicesLoaded || this.errored;
- let enableAddSlice = this.state.selectionMap &&
Object.keys(this.state.selectionMap);
- if (enableAddSlice) {
- enableAddSlice = enableAddSlice.some(function (key) {
- return this.state.selectionMap[key];
- }, this);
- }
- const modalContent = (
- <div>
- <img
- src="/static/assets/images/loading.gif"
- className={'loading ' + (hideLoad ? 'hidden' : '')}
- alt={hideLoad ? '' : 'loading'}
- />
- <div className={this.errored ? '' : 'hidden'}>
- {this.state.errorMsg}
+ rowRenderer({ key, index, style }) {
+ const cellData = this.state.filteredSlices[index];
+ const duration = cellData.modified ? cellData.modified.replace(/<[^>]*>/g,
'') : '';
+ const isSelected = this.props.selectedSliceIds.has(cellData.slice_id);
+ const type = CHART_TYPE;
+ const id = NEW_CHART_ID;
+ const meta = {
+ chartKey: 'slice_' + cellData.slice_id,
+ };
+
+ return (
+ <DragDroppable
+ component={{ type, id, meta }}
+ parentComponent={{ id: NEW_COMPONENTS_SOURCE_ID, type:
NEW_COMPONENT_SOURCE_TYPE }}
+ index={0}
+ depth={0}
+ disableDragDrop={isSelected}
+ editMode={this.props.editMode}
+ >
+ {({ dragSourceRef }) => (
+ <div
+ ref={dragSourceRef}
+ className="chart-card-container"
+ key={key}
+ style={style}
+ >
+ <div className={cx('chart-card', { 'is-selected': isSelected })}>
+ <div className="card-title">{cellData.slice_name}</div>
+ <div className="card-body">
+ <div className="item">
+ <label>Modified: </label>
Review comment:
I think you can get rid of the `:` in all of these
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
