Carapal react mockup

This is really just a mock up written in React to try different
components. It could become scaffolding to build a prototype, or not.

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

@@ -0,0 +1,91 @@
+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 addQueryEditor(queryEditor) {
+  return { type: ADD_QUERY_EDITOR, queryEditor };
+}
+
+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

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BootstrapTable } from 'react-bootstrap-table';
+
+
+const ResultSet = React.createClass({
+  render: function () {
+    return (
+      <BootstrapTable
+        condensed={true}
+        data={[
+            {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'},
+            {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'},
+            {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>
+    )
+  }
+});
+
+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/ResultSet.jsx

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { BootstrapTable } from 'react-bootstrap-table';
+
+
+const ResultSet = React.createClass({
+  shouldComponentUpdate() {
+    return false;
+  },
+  render() {
+    console.log(this.props.resultset);
+    var cols = this.props.resultset.columns.map((col, i) => {
+        return <TableHeaderColumn dataField={col}>{col}</TableHeaderColumn>
+    });
+    var data = this.props.resultset.data.map((row, i) => {
+      row['__id'] = i;
+      return row;
+    });
+    return (
+      <BootstrapTable
+          condensed={true}
+          data={this.props.resultset.data}>
+        <TableHeaderColumn dataField="__id" isKey={true}>id</TableHeaderColumn>
+        {cols}
+      </BootstrapTable>
+    );
+  }
+});
+
+export default ResultSet

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