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

Add scheduled query browser #472

Merged

n-riesco merged 34 commits into plotly:master from jakedex:scheduler-fe-state-1

Jul 3, 2018

Contributor

briandennis commented Jun 29, 2018

Adds a tab to display the existing scheduled queries in a table. The queries can be searched and when clicked, display the full query string as well as a link to the grid.

Note, this first step only allows query viewing. Creation, deletion, and updating will come in later PRs.

mfix22 and others added 19 commits

June 29, 2018 14:25


          Add scheduler

adf348d


          Add sort fns

5f338ad


          Move info to props and use defaultProps for mock

a7591a4


          Create scheduled query button

72f6fc8


          Number bug fix

0608d45


          Fix search and sort

3ddfde1


          Use rowGetter

5aa210e


          Use selectors

c666552


          Remove stage 2 and 3 code

29d7f0a


          fetch scheduled queries and add to store

a2fd188


          Add PropTypes

9bc1a55


          Fix column resize issue

d96e543


          save all queries in the store and filter by connection in Settings co…

108793b

…mponent


          Use react-click-outside, preview modal

96ff033


          Create modal factory, lint

664f395


          Extract Modal, Row, Column components to own files

c106d88


          add SQL syntax highlighting in schedule tab

0d73275


          misc style fixes, add modal close button

5b73177


          add tests for Scheduler, update Scheduler/Modal with fixes found testing

453f04e

Contributor

n-riesco commented Jun 29, 2018

Thanks for the PR. I'll review it on Monday.

@shannonlal I guess you may want to have a look at this PR, as this touches the UI.

n-riesco reviewed

View reviewed changes

app/components/Layout.react.js Outdated

		@@ -0,0 +1,31 @@
		import React from 'react';
		import PropTypes from 'prop-types';

Contributor

n-riesco Jul 2, 2018

Add comment with a description. Something like "this module contains a collection of helper components for layout purposes" would be enough, unless there is something about the usage of <Row> and <Column> that developers should know.

n-riesco reviewed

View reviewed changes

app/components/Modal.react.js Outdated

+              const Modal = props => {
+                const EnhancedClass = enhanceWithClickOutside(class extends Component {
+                  handleClickOutside() {
+                    // eslint-disable-next-line

Contributor

n-riesco Jul 2, 2018

remove // eslint-disable-next-line

n-riesco reviewed

View reviewed changes

app/components/Modal.react.js Outdated

+                });
+                return props.open
+                  ? (

Contributor

n-riesco Jul 2, 2018 •

edited

format ternary expressions as:

return props.open ? (
    expressionIfTrue
) : (
    expressionIfFalse
);

n-riesco reviewed

View reviewed changes

app/components/Settings/Preview/code-editor.css Outdated

@@ @@ -15,3 +15,8 @@ @@
               .react-resizable-handle {
                   z-index: 9;
               }
+              /* TODO move this override */
+              .scheduler .CodeMirror {

Contributor

n-riesco Jul 2, 2018

remove this change (not needed for this PR)

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              import PropTypes from 'prop-types';
+              import ReactDataGrid from 'react-data-grid';
+              import ms from 'ms';

Contributor

n-riesco Jul 2, 2018

add ms to devDependencies

Falcon uses webpack to bundle most of if its dependencies and for this reason most of them are listed as devDependencies.

Only dependencies that webpack is unable to bundle (e.g. node native modules) should be added as dependencies.

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              import matchSorter from 'match-sorter';
+              import Highlight from 'react-highlight';
+              import { Link } from '../Link.react';

Contributor

n-riesco Jul 2, 2018

use extensions, i.e. import { Link } from '../Link.react.js';

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              import Highlight from 'react-highlight';
+              import { Link } from '../Link.react';
+              import { Row, Column } from '../Layout.react';

Contributor

n-riesco Jul 2, 2018

.js

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              import { Link } from '../Link.react';
+              import { Row, Column } from '../Layout.react';
+              import Modal from '../Modal.react';

Contributor

n-riesco Jul 2, 2018

.js

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              import { Link } from '../Link.react';
+              import { Row, Column } from '../Layout.react';
+              import Modal from '../Modal.react';
+              import { plotlyUrl } from '../../utils/utils';

Contributor

n-riesco Jul 2, 2018

.js


          Review Comments #1:

cfc1919

- Add comment
- Remove old code
- Add ms dev

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              class IntervalFormatter extends React.Component {
+                static propTypes = {
+                  value: PropTypes.object

Contributor

n-riesco Jul 2, 2018

similarly here: either rename value or add description.


          .js extensions

bf5f4c6

n-riesco reviewed

View reviewed changes

app/components/Settings/Scheduler.react.js Outdated

+              };
+              const boxStyle = { boxSizing: 'border-box', width: '50%' };
+              const MetaPreview = props => {

Contributor

n-riesco Jul 2, 2018

There is a styling issue with this component. See:

Contributor

n-riesco commented Jul 2, 2018 •

edited by mfix22

I'm not done writing the review but I've run out of time today. I'll continue tomorrow.

Here are some general code style changes (for new code):

new code should use lowercase filenames
if the file contains JSX use the extension .jsx (don't use the extension .react.js)
use CSS imports; see here for an example.
use 4-space indentation

To discuss:

backend should provide the UI with the grid's name. At the moment, it's hard for a user to know which grid is updated by a query. The user would have to open a link in the modal preview to know what grid is updated.

mfix22 added 7 commits

July 2, 2018 09:59


          Word wrap SQL preview

4c34df3


          Add Layout description comment

a7089ab


          Comment react-data-grid formatters

8c2ea91


          Rename .react.js -> .jsx, import css files

567d961


          Fix indentation

39686d1


          Better preview header spacing

97b206d


          Bold SQL preview header

95894eb

n-riesco reviewed

View reviewed changes

app/components/Settings/Settings.react.js Outdated

@@ @@ -327,6 +335,7 @@ class Settings extends Component { @@
                                       <TabList>
                                           <Tab>Connection</Tab>
                                           <Tab disabled={queryPanelDisabled}>Query</Tab>
+                                          <Tab disabled={false}>Schedule</Tab>

Contributor

n-riesco Jul 3, 2018

~~disabled={false}~~

n-riesco reviewed

View reviewed changes

package.json Outdated

@@ @@ -237,16 +238,20 @@ @@
                   "dtrace-provider": "^0.8.6",
                   "font-awesome": "^4.6.1",
                   "ibm_db": "^2.3.0",
+                  "match-sorter": "^2.2.3",

Contributor

n-riesco Jul 3, 2018

move to devDependencies

n-riesco reviewed

View reviewed changes

package.json Outdated

                   "mysql": "^2.15.0",
                   "oracledb": "https://github.com/oracle/node-oracledb/releases/download/v2.2.0/oracledb-src-2.2.0.tgz",
                   "papaparse": "^4.3.7",
                   "pg": "^4.5.5",
                   "pg-hstore": "^2.3.2",
+                  "react-click-outside": "^3.0.1",

Contributor

n-riesco Jul 3, 2018

move to devDependencies

n-riesco reviewed

View reviewed changes

package.json Outdated

                   "mysql": "^2.15.0",
                   "oracledb": "https://github.com/oracle/node-oracledb/releases/download/v2.2.0/oracledb-src-2.2.0.tgz",
                   "papaparse": "^4.3.7",
                   "pg": "^4.5.5",
                   "pg-hstore": "^2.3.2",
+                  "react-click-outside": "^3.0.1",
+                  "react-highlight": "^0.12.0",

Contributor

n-riesco Jul 3, 2018

move to devDependencies

n-riesco reviewed

View reviewed changes

package.json Outdated

                   "restify": "^4.3.2",
                   "sequelize": "^3.30.4",
                   "source-map-support": "^0.5.0",
                   "sqlite3": "^3.1.13",
-                  "tedious": "^2.1.4"
+                  "tedious": "^2.1.4",
+                  "tohash": "^1.0.2"

Contributor

n-riesco Jul 3, 2018

move to devDependencies

n-riesco reviewed

View reviewed changes

app/components/Settings/scheduler.jsx Outdated

+                  query: PropTypes.object
+              };
+              export const MetaPreviewModal = props => (

Contributor

n-riesco Jul 3, 2018

Is there any need for having two components: MetaPreview and MetaPreviewModal?

If possible, I'd like to have a single component with a name that doesn't require to document the purpose of these components (how about SchedulePreview?).

n-riesco mentioned this pull request

backend: provide grid names #474

Open

Contributor

n-riesco commented Jul 3, 2018

A few more styling issues (see screen capture below):

only first row gets highlighted on hover
the bottom borders of of the Schedule panel and the Schedules table overlap (add margin?)

nicolaskruchten changed the title ~~Add scheduled query visualization~~ Add scheduled query browser

mfix22 and others added 6 commits

July 3, 2018 08:55


          Move new deps to devDependencies

d8fb7b2


          Make SchedulerPreview

de9f645


           test/app/components/Settings/Scheduler/Scheduler.test.js -> test/app…

2ce012a

…/components/Settings/scheduler.test.jsx


          adapt scheduler test to additional sql element in query modal

9f8e97e


          Fix scheduler-table styling issues

10492dd


          add className prop type to SQL

428ef5f

Contributor Author

briandennis commented Jul 3, 2018

@n-riesco we've made all the fixes as per your latest feedback

Contributor

n-riesco commented Jul 3, 2018

I've tested it locally and it looks good. I'll merge it as soon as the tests in CircleCI succeed.

@briandennis Thanks! It's been a pleasure to read such a clean PR.

n-riesco merged commit 6233733 into plotly:master

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment