Rewrite grid updating functionality

app/actions/sessions.js

@@ -203,7 +203,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
       if (!res.error) {
         dispatch({
           type: 'UPDATE_SCHEDULED_QUERY',
-          payload: body
+          payload: res
         });
       }
       return res;

app/components/Settings/scheduler/create-modal.jsx

@@ -6,12 +6,14 @@ import cronstrue from 'cronstrue';
 
 import {Row, Column} from '../../layout.jsx';
 import Modal from '../../modal.jsx';
+import {Link} from '../../Link.react';
 import SuccessMessage from '../../success.jsx';
 import RequestError from './request-error.jsx';
 import TimedMessage from './timed-message.jsx';
 import CronPicker from '../cron-picker/cron-picker.jsx';
 import SQL from './sql.jsx';
 
+import {datasetUrl as getDatasetURL} from '../../../utils/utils';
 import {getHighlightMode, WAITING_MESSAGE, SAVE_WARNING} from '../../../constants/constants.js';
 
 import './create-modal.css';
@@ -62,7 +64,8 @@ class CreateModal extends Component {
             name: props.initialName,
             interval: '*/5 * * * *',
             error: null,
-            saving: false
+            saving: false,
+            datasetUrl: null
         };
         this.options = {
             lineWrapping: true,
@@ -108,8 +111,12 @@ class CreateModal extends Component {
                 cronInterval: this.state.interval,
                 name: this.state.name ? this.state.name.trim() : ''
             })
-            .then(() => {
-                this.setState({successMessage: 'Scheduled query saved successfully!', saving: false});
+            .then((res) => {
+                this.setState({
+                  successMessage: 'Scheduled query saved successfully!',
+                  saving: false,
+                  datasetUrl: getDatasetURL(res.fid)
+                });
             })
             .catch(error => this.setState({error: error.message, saving: false}));
     }
@@ -193,7 +200,11 @@ class CreateModal extends Component {
                     </Column>
                     <Row>
                         {this.state.successMessage ? (
-                            <SuccessMessage>{this.state.successMessage}</SuccessMessage>
+                            <Column style={{ padding: '0 32px 16px' }}>
+                              <SuccessMessage message={this.state.successMessage}>
+                                <Link href={this.state.datasetUrl}>View Live Dataset</Link>
+                              </SuccessMessage>
+                            </Column>
                         ) : (
                             <Column>
                                 <button type="submit" className="submit" onClick={this.submit}>

app/components/Settings/scheduler/preview-modal.jsx

@@ -12,7 +12,7 @@ import {Link} from '../../Link.react.js';
 import CronPicker from '../cron-picker/cron-picker.jsx';
 import {Row, Column} from '../../layout.jsx';
 import SQL from './sql.jsx';
-import {plotlyUrl} from '../../../utils/utils.js';
+import {datasetUrl} from '../../../utils/utils.js';
 import {getHighlightMode, WAITING_MESSAGE, SAVE_WARNING} from '../../../constants/constants.js';
 import {getInitialCronMode} from '../cron-picker/cron-helpers.js';
 
@@ -156,7 +156,11 @@ export class PreviewModal extends Component {
         }
 
         if (success) {
-            return <SuccessMessage>{this.state.successMessage}</SuccessMessage>;
+            return (
+              <Column>
+                <SuccessMessage>{this.state.successMessage}</SuccessMessage>
+              </Column>
+            );
         }
 
         if (editing) {
@@ -196,8 +200,7 @@ export class PreviewModal extends Component {
         if (!props.query) {
             content = null;
         } else {
-            const [account, gridId] = props.query.fid.split(':');
-            const link = `${plotlyUrl()}/~${account}/${gridId}`;
+            const link = datasetUrl(props.query.fid);
             const {editing, loading} = this.state;
 
             const initialModeId = getInitialCronMode(props.query);
@@ -308,7 +311,7 @@ export class PreviewModal extends Component {
                                 </div>
                             ) : (
                                 <em style={valueStyle}>
-                                    {props.query.cronInterval ? (
+                                    {this.state.cronInterval ? (
                                         <b>{cronstrue.toString(this.state.cronInterval)}</b>
                                     ) : (
                                         <React.Fragment>

app/components/success.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const style = {marginBottom: 16, fontSize: 16, color: '#00cc96'};
+const style = {fontSize: 16};
 const SuccessMessage = (props) => (
-  <em style={style}>
+  <div style={{ padding: '8px 16px', borderLeft: '4px solid #00cc96', background: 'white'}}>
+    <div style={style}>{props.message}</div>
     {props.children}
-  </em>
+  </div>
 );
 
 SuccessMessage.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  message: PropTypes.string
 };
 
 export default SuccessMessage;

app/utils/utils.js

@@ -59,6 +59,11 @@ export function homeUrl() {
         '';
 }
 
+export function datasetUrl(fid) {
+  const [account, gridId] = fid.split(':');
+  return `${plotlyUrl()}/~${account}/${gridId}`;
+}
+
 export function getPathNames(url) {
     const parser = document.createElement('a');
     parser.href = url;

backend/persistent/QueryScheduler.js

@@ -20,9 +20,12 @@ import {
     getGridMeta,
     newGrid,
     patchGrid,
-    updateGrid
+    updateGrid,
+    getGridColumn
 } from './plotly-api.js';
 
+const SUCCESS_CODES = [200, 201, 204];
+
 class QueryScheduler {
     constructor() {
         this.scheduleQuery = this.scheduleQuery.bind(this);
@@ -34,15 +37,14 @@ class QueryScheduler {
 
         // this.job wraps this.queryAndUpdateGrid to avoid concurrent runs of the same job
         this.runningJobs = {};
-        this.job = (fid, uids, query, connectionId, requestor) => {
+        this.job = (fid, query, connectionId, requestor, cronInterval, refreshInterval) => {
             try {
                 if (this.runningJobs[fid]) {
                     return;
                 }
 
                 this.runningJobs[fid] = true;
-
-                return this.queryAndUpdateGrid(fid, uids, query, connectionId, requestor)
+                return this.queryAndUpdateGrid(fid, query, connectionId, requestor, cronInterval, refreshInterval)
                     .catch(error => {
                         Logger.log(error, 0);
                     }).then(() => {
@@ -113,7 +115,7 @@ class QueryScheduler {
         saveQuery(queryParams);
 
         // Schedule
-        const job = () => this.job(fid, uids, query, connectionId, requestor);
+        const job = () => this.job(fid, query, connectionId, requestor, cronInterval, refreshInterval);
         let jobInterval = cronInterval;
         if (!jobInterval) {
             // convert refresh interval to cron representation
@@ -236,7 +238,7 @@ class QueryScheduler {
         });
     }
 
-    queryAndUpdateGrid(fid, uids, query, connectionId, requestor, cronInterval, refreshInterval) {
+    queryAndUpdateGrid(fid, query, connectionId, requestor, cronInterval, refreshInterval) {
         const requestedDBConnections = getConnectionById(connectionId);
         const formattedRefresh = refreshInterval || mapCronToRefresh(cronInterval);
         let startTime = process.hrtime();
@@ -281,8 +283,7 @@ class QueryScheduler {
                 */
                 throw new Error(`QueryExecutionError: ${e.message}`);
             });
-        }).then(({rows}) => {
-
+        }).then(({rows, columnnames}) => {
             Logger.log(`Query "${query}" took ${process.hrtime(startTime)[0]} seconds`, 2);
             Logger.log(`Updating grid ${fid} with new data`, 2);
             Logger.log(
@@ -294,8 +295,8 @@ class QueryScheduler {
 
             return updateGrid(
                 rows,
+                columnnames,
                 fid,
-                uids,
                 requestor
             ).catch((e) => {
                 /*
@@ -305,7 +306,7 @@ class QueryScheduler {
             });
         }).then(res => {
             Logger.log(`Request to Plotly for grid ${fid} took ${process.hrtime(startTime)[0]} seconds`, 2);
-            if (res.status !== 200) {
+            if (!SUCCESS_CODES.includes(res.status)) {
                 Logger.log(`Error ${res.status} while updating grid ${fid}.`, 2);
 
                 /*
@@ -357,6 +358,11 @@ class QueryScheduler {
                             this.clearQuery(fid);
                             return deleteQuery(fid);
                         }
+                            /*
+                            * Warning: The front end looks for "PlotlyApiError" in this error message. Don't change it!
+                            */
+                             throw new Error(`PlotlyApiError: non 200 grid update response code (got: ${res.status})`);
+
                     });
                 });
 
@@ -381,11 +387,27 @@ class QueryScheduler {
                 */
                 throw new Error(`MetadataError: ${e.message}`);
             });
-        }).then((res) => {
+        }).then(res => {
             Logger.log(`Request to Plotly for creating a grid took ${process.hrtime(startTime)[0]} seconds`, 2);
-            return res.json().then(() => {
-                Logger.log(`Grid ${fid} has been updated.`, 2);
-            });
+            Logger.log(`Grid ${fid} has been updated.`, 2);
+
+            // res is undefined if the `deleteQuery` is returned above
+            if (res && res.status && res.status !== 200) {
+              throw new Error(`MetadataError: error updating grid metadata (status: ${res.status})`);
+            }
+
+            startTime = process.hrtime();
+
+            // fetch updated grid column for returning
+            return getGridColumn(fid, requestor);
+        }).then(res => {
+            Logger.log(`Request to Plotly for fetching updated grid took ${process.hrtime(startTime)[0]} seconds`, 2);
+
+            if (res.status !== 200) {
+              throw new Error(`PlotlyApiError: error fetching updated columns (status: ${res.status})`);
+            }
+
+            return res.json();
         });
     }
 }

backend/persistent/plotly-api.js

@@ -6,6 +6,7 @@ import {
     getCredentials,
     getSetting
 } from '../settings.js';
+import {extractOrderedUids} from '../utils/gridUtils.js';
 
 
 // Module to access Plot.ly REST API
@@ -164,36 +165,103 @@ export function patchGrid(fid, requestor, body) {
     });
 }
 
-export function updateGrid(rows, fid, uids, requestor) {
+export function getGridColumn(fid, requestor) {
     const {username, apiKey, accessToken} = getCredentials(requestor);
 
-    // TODO - Test case where no rows are returned.
-    if (uids.length !== (rows[0] || []).length) {
-        Logger.log(`
-            A different number of columns was returned in the
-            query than what was initially saved in the grid.
-            ${rows[0].length} columns were queried,
-            ${uids.length} columns were originally saved.
-            The connector does not create columns (yet),
-            and so we will only update the first ${uids.length}
-            columns.
-        `);
-    }
+    return plotlyAPIRequest(`grids/${fid}/col`, {
+        method: 'GET',
+        username,
+        apiKey,
+        accessToken
+    });
+}
 
-    /*
-     * For now, only update up to the number of columns that are
-     * already saved. In the future, we should just create more
-     * columns. See error message above.
-     */
-    const columns = getColumns(rows, uids.length);
-
-    const url = `grids/${fid}/col?uid=${uids.join(',')}`;
-    const body = {
-        cols: JSON.stringify(columns.map(column => ({
-            data: column
-        })))
-    };
-    return plotlyAPIRequest(url, {body, username, apiKey, accessToken, method: 'PUT'});
+export function updateGrid(rows, columnnames, fid, requestor) {
+    const numColumns = columnnames.length;
+    const columns = getColumns(rows, numColumns);
+    const columnEntries = columns.map((column, columnIndex) => {
+        return { data: column, name: columnnames[columnIndex], order: columnIndex };
+    });
+
+    const {username, apiKey, accessToken} = getCredentials(requestor);
+    const baseUrl = `grids/${fid}/col`;
+    const baseParams = { username, apiKey, accessToken };
+
+    // fetch latest grid to get the source of truth
+    return getGridColumn(fid, requestor)
+        .then(res => {
+            if (res.status !== 200) {
+                return res;
+            }
+            return res.json();
+        }).then(data => {
+            if (data.status) {
+                // bad res was passed along, return it
+                return data;
+            }
+
+            const uids = extractOrderedUids(data);
+
+            if (numColumns > uids.length) {
+                // repopulate existing columns
+                const putUrl = `${baseUrl}?uid=${uids.join(',')}`;
+                const putBody = { cols: columnEntries.slice(0, uids.length) };
+
+                // append new columns
+                const postUrl = baseUrl;
+                const postBody = { cols: columnEntries.slice(uids.length) };
+
+                return plotlyAPIRequest(postUrl, {
+                    ...baseParams,
+                    body: postBody,
+                    method: 'POST'
+                }).then((res) => {
+                    if (res.status !== 200) {
+                        return res;
+                    }
+
+                    return plotlyAPIRequest(putUrl, {
+                        ...baseParams,
+                        body: putBody,
+                        method: 'PUT'
+                    });
+                });
+            } else if (numColumns < uids.length) {
+                // delete unused existing columns
+                const deleteUrl = `${baseUrl}?uid=${uids.slice(numColumns)}`;
+
+                // repopulate used existing columns
+                const putUrl = `${baseUrl}?uid=${uids.slice(0, numColumns).join(',')}`;
+                const putBody = { cols: columnEntries };
+
+
+
+                return plotlyAPIRequest(deleteUrl, {
+                    ...baseParams,
+                    method: 'DELETE'
+                }).then((res) => {
+                    if (res.status !== 204) {
+                        return res;
+                    }
+
+                    return plotlyAPIRequest(putUrl, {
+                        ...baseParams,
+                        body: putBody,
+                        method: 'PUT'
+                    });
+                });
+            }
+
+            // repopulate existing columns
+            const putUrl = `${baseUrl}?uid=${uids.join(',')}`;
+            const putBody = { cols: columnEntries };
+
+            return plotlyAPIRequest(putUrl, {
+                ...baseParams,
+                body: putBody,
+                method: 'PUT'
+            });
+    });
 }
 
 function getColumns(rows, maxColumns) {