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/javascripts/SqlLab/components/SouthPane.jsx

@@ -0,0 +1,44 @@
+import { Tab, Tabs } from 'react-bootstrap';
+import QueryLog from './QueryLog';
+import ResultSet from './ResultSet';
+import React from 'react';
+
+class SouthPane extends React.Component {
+  render() {
+    let results;
+    if (this.props.latestQuery) {
+      if (this.props.latestQuery.state === 'running') {
+        results = (
+          <img className="loading" alt="Loading.." src="/static/assets/images/loading.gif" />
+        );
+      } else if (this.props.latestQuery.state === 'failed') {
+        results = <div className="alert alert-danger">{this.props.latestQuery.msg}</div>;
+      } else if (this.props.latestQuery.state === 'success') {
+        results = <ResultSet showControls query={this.props.latestQuery} />;
+      }
+    } else {
+      results = <div className="alert alert-info">Run a query to display results here</div>;
+    }
+    return (
+      <Tabs bsStyle="pills">
+        <Tab title="Results" eventKey={1}>
+          <div style={{ overflow: 'auto' }}>
+            {results}
+          </div>
+        </Tab>
+        <Tab title="Query Log" eventKey={2}>
+          <QueryLog />
+        </Tab>
+      </Tabs>
+    );
+  }
+}
+
+SouthPane.propTypes = {
+  latestQuery: React.PropTypes.object,
+};
+
+SouthPane.defaultProps = {
+};
+
+export default SouthPane;