Add scheduled query browser

app/actions/sessions.js

@@ -9,6 +9,7 @@ export const mergeTabMap = createAction('MERGE_TAB_MAP');
 export const setTab = createAction('SET_TAB');
 export const setTable = createAction('SET_TABLE');
 export const setIndex = createAction('SET_INDEX');
+export const setScheduledQueries = createAction('SET_SCHEDULED_QUERIES');
 export const mergeConnections = createAction('MERGE_CONNECTIONS');
 export const updateConnection = createAction('UPDATE_CREDENTIAL');
 export const deleteConnection = createAction('DELETE_CREDENTIAL');
@@ -137,6 +138,19 @@ export function editConnections(connectionObject, connectionId) {
     );
 }
 
+export function getScheduledQueries() {
+    return dispatch => {
+        return dispatch(apiThunk(
+            'queries',
+            'GET',
+            'scheduledQueriesRequest'
+        )).then((json => {
+            dispatch(setScheduledQueries(json));
+            return json;
+        }));
+    };
+}
+
 export function connect(connectionId) {
     return apiThunk(
         `connections/${connectionId}/connect`,

app/components/Settings/Settings.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {contains, dissoc, flip, head, hasIn, isEmpty, keys, merge, propOr, reduce} from 'ramda';
+import {contains, dissoc, flip, head, hasIn, isEmpty, keys, merge, propEq, propOr, reduce} from 'ramda';
 import {connect} from 'react-redux';
 import ReactToolTip from 'react-tooltip';
 import classnames from 'classnames';
@@ -13,10 +13,10 @@ import DialectSelector from './DialectSelector/DialectSelector.react';
 import ConnectButton from './ConnectButton/ConnectButton.react';
 import Preview from './Preview/Preview.react';
 import {Link} from '../Link.react';
+import Scheduler from './scheduler.jsx';
 import {DIALECTS, FAQ, PREVIEW_QUERY, SQL_DIALECTS_USING_EDITOR} from '../../constants/constants.js';
 import {isElectron, isOnPrem} from '../../utils/utils';
 
-
 class Settings extends Component {
     constructor(props) {
         super(props);
@@ -169,6 +169,7 @@ class Settings extends Component {
             getApacheDrillS3Keys,
             getElasticsearchMappings,
             getTables,
+            getScheduledQueries,
             getS3Keys,
             getSettings,
             initialize,
@@ -181,7 +182,8 @@ class Settings extends Component {
             s3KeysRequest,
             selectedTab,
             selectedIndex,
-            tablesRequest
+            tablesRequest,
+            scheduledQueriesRequest
         } = this.props;
         if (connectionsRequest && !connectionsRequest.status) {
             initialize();
@@ -199,6 +201,10 @@ class Settings extends Component {
             getSettings();
         }
 
+        if (connectRequest.status === 200 && !scheduledQueriesRequest.status) {
+          getScheduledQueries();
+        }
+
         const connectionObject = connections[selectedTab] || {};
         if (contains(connectionObject.dialect, SQL_DIALECTS_USING_EDITOR)) {
             if (connectRequest.status === 200 && !tablesRequest.status) {
@@ -268,6 +274,8 @@ class Settings extends Component {
             setIndex,
             setTable,
             selectedTable,
+            selectedScheduledQueries,
+            getScheduledQueries,
             selectedIndex,
             setTab,
             tablesRequest,
@@ -327,6 +335,7 @@ class Settings extends Component {
                         <TabList>
                             <Tab>Connection</Tab>
                             <Tab disabled={queryPanelDisabled}>Query</Tab>
+                            <Tab>Schedule</Tab>
                             {isOnPrem() || <Tab
                                 className="test-ssl-tab react-tabs__tab"
                             >
@@ -378,6 +387,10 @@ class Settings extends Component {
                             )}
                         </TabPanel>
 
+                        <TabPanel>
+                            <Scheduler queries={selectedScheduledQueries} refreshQueries={getScheduledQueries} />
+                        </TabPanel>
+
                         {isOnPrem() || <TabPanel>
                             {this.props.connectRequest.status === 200 ? (
                                 <div className="big-whitespace-tab">
@@ -497,6 +510,8 @@ function mapStateToProps(state) {
         deleteConnectionsRequests,
         previewTableRequests,
         tablesRequests,
+        scheduledQueries,
+        scheduledQueriesRequest,
         elasticsearchMappingsRequests,
         selectedTables,
         selectedIndecies,
@@ -513,6 +528,7 @@ function mapStateToProps(state) {
     const connectionsHaveBeenSaved = Boolean(selectedConnectionId);
     const selectedTable = selectedTables[selectedConnectionId] || null;
     const selectedIndex = selectedIndecies[selectedConnectionId] || null;
+    const selectedScheduledQueries = scheduledQueries.filter(propEq('connectionId', selectedConnectionId));
 
     let previewTableRequest = {};
     if (previewTableRequests[selectedConnectionId] &&
@@ -533,6 +549,7 @@ function mapStateToProps(state) {
         deleteConnectionsRequest: deleteConnectionsRequests[selectedConnectionId] || {},
         previewTableRequest,
         tablesRequest: tablesRequests[selectedConnectionId] || {},
+        scheduledQueriesRequest: scheduledQueriesRequest || {},
         elasticsearchMappingsRequest: elasticsearchMappingsRequests[selectedConnectionId] || {},
         s3KeysRequest: s3KeysRequests[selectedConnectionId] || {},
         apacheDrillStorageRequest: apacheDrillStorageRequests[selectedConnectionId] || {},
@@ -546,6 +563,7 @@ function mapStateToProps(state) {
         schemaRequest: schemaRequests[selectedConnectionId],
         queryRequest: queryRequests[selectedConnectionId],
         selectedTable,
+        selectedScheduledQueries,
         selectedIndex,
         selectedConnectionId,
         settingsRequest,
@@ -586,6 +604,9 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     function boundGetTables() {
         return dispatch(Actions.getTables(selectedConnectionId));
     }
+    function boundGetScheduledQueries() {
+        return dispatch(Actions.getScheduledQueries(selectedConnectionId));
+    }
     function boundGetElasticsearchMappings() {
         return dispatch(Actions.getElasticsearchMappings(selectedConnectionId));
     }
@@ -679,6 +700,7 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
             setConnectionNeedToBeSaved: boundSetConnectionNeedToBeSaved,
             updateConnection: boundUpdateConnection,
             getTables: boundGetTables,
+            getScheduledQueries: boundGetScheduledQueries,
             getElasticsearchMappings: boundGetElasticsearchMappings,
             setTable: boundSetTable,
             setIndex: boundSetIndex,
@@ -733,6 +755,12 @@ Settings.propTypes = {
     s3KeysRequest: PropTypes.object,
     selectedTab: PropTypes.string,
     selectedIndex: PropTypes.any,
+    selectedScheduledQueries: PropTypes.arrayOf(PropTypes.shape({
+        query: PropTypes.string,
+        refreshInterval: PropTypes.number
+    })),
+    scheduledQueriesRequest: PropTypes.object,
+    getScheduledQueries: PropTypes.func,
     tablesRequest: PropTypes.object,
     deleteTab: PropTypes.func,
     getSqlSchema: PropTypes.func,

app/components/Settings/scheduler.css

@@ -0,0 +1,52 @@
+/* SQL token highlighting */
+.default .hljs-keyword,
+.default .hljs-selector-tag {
+    color: #ab63fa;
+}
+
+.default .hljs-number,
+.default .hljs-meta,
+.default .hljs-built_in,
+.default .hljs-builtin-name,
+.default .hljs-literal,
+.default .hljs-type,
+.default .hljs-params {
+    color: #00cc96;
+}
+
+.default .hljs-string,
+.default .hljs-symbol,
+.default .hljs-bullet {
+    color: #119DFF;
+}
+
+.default .hljs {
+    color: #585260;
+}
+
+.bold .hljs-keyword,
+.bold .hljs-selector-tag {
+    font-weight: bold;
+}
+
+/* custom ReactDataGrid styles for scheduled queries table */
+.scheduler-table .react-grid-Row--odd .react-grid-Cell {
+    background: #fff;
+}
+
+.scheduler-table .react-grid-Row--odd:hover .react-grid-Cell {
+    background-color: #f9f9f9;
+}
+
+.scheduler-table .react-grid-Row {
+    border-top: 1px solid #c8d4e3;
+    cursor: pointer;
+}
+
+.scheduler-table .react-grid-Row:first-child {
+    border-top: none;
+}
+
+.sql-preview pre {
+    white-space: pre-wrap;
+}