Pretty good state

caravel/assets/.eslintrc

@@ -178,7 +178,6 @@
     "no-with": [2],
     "no-whitespace-before-property": [2],
     "object-curly-spacing": [2, "always"],
-    "object-shorthand": [2, "never"],
     "one-var": [0],
     "one-var-declaration-per-line": [2, "initializations"],
     "operator-assignment": [0, "always"],

caravel/assets/javascripts/SqlAnvil/TODO.md

@@ -0,0 +1,12 @@
+# TODO
+* plus query tab does what's expected
+* SqlEditor: add a section around table features
+* query tab autoselect
+* Overwrite workspace query
+* Async
+* Security per-database
+
+## Cosmetic
+* Make BootstrapTable align columns properly
+* SqlEditor buttons
+* use react-bootstrap-prompt for query title input

caravel/assets/javascripts/SqlAnvil/actions.js

@@ -1,10 +1,91 @@
-export const ADD_QUERY = 'ADD_QUERY'
-export const ADD_TABLE = 'ADD_TABLE'
+export const ADD_QUERY_EDITOR = 'ADD_QUERY_EDITOR';
+export const REMOVE_QUERY_EDITOR = 'REMOVE_QUERY_EDITOR';
+export const ADD_TABLE = 'ADD_TABLE';
+export const REMOVE_TABLE = 'REMOVE_TABLE';
+export const HIDE_TABLE_POPUP = 'HIDE_TABLE_POPUP';
+export const SHOW_TABLE_POPUP = 'SHOW_TABLE_POPUP';
+export const START_QUERY = 'START_QUERY';
+export const STOP_QUERY = 'STOP_QUERY';
+export const END_QUERY = 'END_QUERY';
+export const EXPAND_TABLE = 'EXPAND_TABLE';
+export const COLLAPSE_TABLE = 'COLLAPSE_TABLE';
+export const QUERY_SUCCESS = 'QUERY_SUCCESS';
+export const QUERY_FAILED = 'QUERY_FAILED';
+export const QUERY_EDITOR_SETDB = 'QUERY_EDITOR_SETDB';
+export const QUERY_EDITOR_SET_TITLE = 'QUERY_EDITOR_SET_TITLE';
+export const QUERY_EDITOR_SET_AUTORUN = 'QUERY_EDITOR_SET_AUTORUN';
+export const SET_WORKSPACE_DB = 'SET_WORKSPACE_DB';
+export const ADD_WORKSPACE_QUERY = 'ADD_WORKSPACE_QUERY';
+export const REMOVE_WORKSPACE_QUERY = 'REMOVE_WORKSPACE_QUERY';
 
-export function addQuery(title, sql) {
-  return { type: ADD_QUERY, title, sql }
+export function addQueryEditor(queryEditor) {
+  return { type: ADD_QUERY_EDITOR, queryEditor };
 }
 
-export function addTable(dbId, tableName) {
-  return { type: ADD_TABLE, dbId, tableName }
+export function removeQueryEditor(queryEditor) {
+  return { type: REMOVE_QUERY_EDITOR, queryEditor };
+}
+
+export function queryEditorSetDb(queryEditor, dbId) {
+  return { type: QUERY_EDITOR_SETDB, queryEditor, dbId };
+}
+
+export function queryEditorSetAutorun(queryEditor, autorun) {
+  return { type: QUERY_EDITOR_SET_AUTORUN, queryEditor, autorun };
+}
+
+export function queryEditorSetTitle(queryEditor, title) {
+  return { type: QUERY_EDITOR_SET_TITLE, queryEditor, title };
+}
+
+export function addTable(table) {
+  return { type: ADD_TABLE, table };
+}
+
+export function hideTablePopup(table) {
+  return { type: HIDE_TABLE_POPUP, table };
+}
+
+export function showTablePopup(table) {
+  return { type: SHOW_TABLE_POPUP, table };
+}
+
+export function expandTable(table) {
+  return { type: EXPAND_TABLE, table };
+}
+
+export function collapseTable(table) {
+  return { type: COLLAPSE_TABLE, table };
+}
+
+export function removeTable(table) {
+  return { type: REMOVE_TABLE, table };
+}
+
+export function startQuery(query) {
+  return { type: START_QUERY, query };
+}
+
+export function stopQuery(query) {
+  return { type: STOP_QUERY, query };
+}
+
+export function querySuccess(query, results) {
+  return { type: QUERY_SUCCESS, query, results };
+}
+
+export function queryFailed(query, msg) {
+  return { type: QUERY_FAILED, query, msg };
+}
+
+export function setWorkspaceDb(db) {
+  return { type: SET_WORKSPACE_DB, db };
+}
+
+export function addWorkspaceQuery(query) {
+  return { type: ADD_WORKSPACE_QUERY, query };
+}
+
+export function removeWorkspaceQuery(query) {
+  return { type: REMOVE_WORKSPACE_QUERY, query };
 }

caravel/assets/javascripts/SqlAnvil/components/ButtonWithTooltip.jsx

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react'
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'
+
+
+const ButtonWithTooltip = React.createClass({
+  render() {
+    let tooltip = (
+      <Tooltip id="tooltip">
+        {this.props.tooltip}
+      </Tooltip>
+    );
+    return (
+      <OverlayTrigger overlay={tooltip} delayShow={300} delayHide={150}>
+        <Button
+          onClick={this.props.onClick}
+          className={this.props.className}>
+            {this.props.children}
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+});
+
+export default ButtonWithTooltip

caravel/assets/javascripts/SqlAnvil/components/Link.jsx

@@ -11,8 +11,11 @@ const Link = React.createClass({
     );
     return (
       <OverlayTrigger overlay={tooltip} delayShow={300} delayHide={150}>
-        <a href={this.props.href} className={this.props.className}>
-          {this.props.children}
+        <a
+          href={this.props.href}
+          onClick={this.props.onClick}
+          className={"Link " + this.props.className}>
+            {this.props.children}
         </a>
       </OverlayTrigger>
     );

caravel/assets/javascripts/SqlAnvil/components/Mocks.jsx

@@ -1,84 +1,33 @@
 import React from 'react';
-import { Table } from 'reactable';
+import { BootstrapTable } from 'react-bootstrap-table';
 
 
 const ResultSet = React.createClass({
   render: function () {
     return (
-      <Table
-        className="table table-condensed table-striped small table-bordered"
-        sortable={true}
+      <BootstrapTable
+        condensed={true}
         data={[
-            {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},
-            {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},
-            {'State': 'Colorado',
+            {id: 1, 'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},
+            {id: 2, 'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},
+            {id: 3, 'State': 'Colorado',
              'Description': 'new description that shouldn\'t match filter',
              'Tag': 'old'},
-            {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},
-            {'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},
-            {'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},
-            {'State': 'Colorado',
+            {id: 4, 'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},
+            {id: 5, 'State': 'New York', 'Description': 'this is some text', 'Tag': 'new'},
+            {id: 6, 'State': 'New Mexico', 'Description': 'lorem ipsum', 'Tag': 'old'},
+            {id: 7, 'State': 'Colorado',
              'Description': 'new description that shouldn\'t match filter',
              'Tag': 'old'},
-            {'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},
-        ]}/>
+            {id: 8, 'State': 'Alaska', 'Description': 'bacon', 'Tag': 'renewed'},
+        ]}>
+        <TableHeaderColumn dataField="id" isKey={true}>id</TableHeaderColumn>
+        <TableHeaderColumn dataField="State">State</TableHeaderColumn>
+        <TableHeaderColumn dataField="Description">Description</TableHeaderColumn>
+        <TableHeaderColumn dataField="Tag">Tag</TableHeaderColumn>
+      </BootstrapTable>
     )
   }
 });
 
-
-const QueryLog = React.createClass({
-  render: function () {
-    return (
-      <Table
-        className="table table-condensed table-striped small table-bordered"
-        sortable={true}
-        data={[
-          {
-            'time': '2016-06-01 12:12:12',
-            'tables': 'fct_bookings',
-            'sql': "SELECT * FROM fct_bookings WHERE ds > '120923424'",
-            'state': <span className="label label-success">success</span>,
-            'controls': (
-              <div>
-                <i className="fa fa-save"/>
-                <i className="fa fa-play"/>
-                <i className="fa fa-share"/>
-              </div>
-            ),
-            'duration': '00:10:32'
-          },
-          {
-            'time': '2016-06-03 12:12:12',
-            'tables': 'fct_bookings',
-            'sql': "SELECT * FROM dim_user WHERE ds > '120924'",
-            'state': <span className="label label-danger">failed</span>,
-            'controls': (
-              <div>
-                <i className="fa fa-save"/>
-                <i className="fa fa-play"/>
-                <i className="fa fa-share"/>
-              </div>
-            ),
-            'duration': '00:01:22'
-          },
-          {
-            'time': '2016-06-04 12:12:12',
-            'tables': 'fct_bookings',
-            'sql': "SELECT * FROM fct_bookings_super WHERE ds > '120923424'",
-            'state': <span className="label label-success">success</span>,
-            'controls': (
-              <div>
-                <i className="fa fa-save"/>
-                <i className="fa fa-play"/>
-                <i className="fa fa-share"/>
-              </div>
-            ),
-            'duration': '01:15:42'
-          },
-        ]}/>
-    )
-  }
-});
-
-export { ResultSet, QueryLog }
+export { ResultSet } 

caravel/assets/javascripts/SqlAnvil/components/QueryLog.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import { BootstrapTable } from 'react-bootstrap-table';
+import moment from 'moment'
+
+const QueryLog = React.createClass({
+  render: function () {
+    var data = this.props.queries.map((q) => {
+      var q = Object.assign({}, q);
+      var since = (q.endDttm) ? q.endDttm : moment();
+      var duration = since.valueOf() - q.startDttm.valueOf();
+      console.log(duration);
+      duration = moment.utc(duration);
+      q['duration'] = duration.format('HH:mm:ss.ms');
+      return q;
+    }).reverse();
+    return (
+      <BootstrapTable
+        condensed={true}
+        data={data}>
+          <TableHeaderColumn dataField="id" isKey={true} hidden={true}></TableHeaderColumn>
+          <TableHeaderColumn dataField="state">state</TableHeaderColumn>
+          <TableHeaderColumn dataField="duration">duration</TableHeaderColumn>
+          <TableHeaderColumn dataField="sql">sql</TableHeaderColumn>
+        </BootstrapTable>
+    )
+  }
+});
+
+function mapStateToProps(state) {
+  return {
+    queryEditors: state.queryEditors,
+    queries: state.queries
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QueryLog)

caravel/assets/javascripts/SqlAnvil/components/SouthPane.jsx

@@ -0,0 +1,23 @@
+import { Tab, Tabs } from 'react-bootstrap';
+import QueryLog from './QueryLog'
+import React from 'react';
+
+const SouthPane = React.createClass({
+  render: function () {
+    return (
+      <Tabs>
+        <Tab title="Query Log" eventKey={1}>
+          <QueryLog/>
+        </Tab>
+        <Tab title="Saved Queries" eventKey={2}>
+          Unavaillable.
+        </Tab>
+        <Tab title="Popular Queries" eventKey={3}>
+          Unavaillable.
+        </Tab>
+      </Tabs>
+    );
+  }
+});
+
+export default SouthPane