[sqllab] surfacing more table metadata (indices, pk, fks) (#1485)

* Expose more table/column metadata

* [sqllab] expose more table metadata

* more tests

caravel/assets/javascripts/SqlLab/components/ColumnElement.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+const propTypes = {
+  column: React.PropTypes.object.isRequired,
+};
+
+const iconMap = {
+  pk: 'fa-key',
+  fk: 'fa-link',
+  index: 'fa-bookmark',
+};
+const tooltipTitleMap = {
+  pk: 'Primary Key',
+  fk: 'Foreign Key',
+  index: 'Index',
+};
+
+class ColumnElement extends React.PureComponent {
+  render() {
+    const col = this.props.column;
+    let name = col.name;
+    let icons;
+    if (col.keys && col.keys.length > 0) {
+      name = <strong>{col.name}</strong>;
+      icons = col.keys.map((key, i) => (
+        <span key={i} className="ColumnElement">
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="idx-json" bsSize="lg">
+                <strong>{tooltipTitleMap[key.type]}</strong>
+                <hr />
+                <pre className="text-small">
+                  {JSON.stringify(key, null, '  ')}
+                </pre>
+              </Tooltip>
+              }
+          >
+            <i className={`fa text-muted m-l-2 ${iconMap[key.type]}`} />
+          </OverlayTrigger>
+        </span>
+      ));
+    }
+    return (
+      <div className="clearfix table-column">
+        <div className="pull-left m-l-10 col-name">
+          {name}{icons}
+        </div>
+        <div className="pull-right text-muted">
+          <small> {col.type}</small>
+        </div>
+      </div>);
+  }
+}
+ColumnElement.propTypes = propTypes;
+
+export default ColumnElement;