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_r180876866
Advertising
##########
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>
+ <span>{duration}</span>
+ </div>
+ <div className="item">
+ <label>Viz type: </label>
Review comment:
Please use `visualization` not `viz`
----------------------------------------------------------------
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
