[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;

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

@@ -5,6 +5,7 @@ import shortid from 'shortid';
 
 import CopyToClipboard from '../../components/CopyToClipboard';
 import Link from './Link';
+import ColumnElement from './ColumnElement';
 import ModalTrigger from '../../components/ModalTrigger';
 
 const propTypes = {
@@ -119,21 +120,9 @@ class TableElement extends React.PureComponent {
         <div>
           {this.renderHeader()}
           <div className="table-columns">
-            {cols && cols.map((col) => {
-              let name = col.name;
-              if (col.indexed) {
-                name = <strong>{col.name}</strong>;
-              }
-              return (
-                <div className="clearfix table-column" key={shortid.generate()}>
-                  <div className="pull-left m-l-10 col-name">
-                    {name}
-                  </div>
-                  <div className="pull-right text-muted">
-                    <small> {col.type}</small>
-                  </div>
-                </div>);
-            })}
+            {cols && cols.map(col => (
+              <ColumnElement column={col} key={col.name} />
+            ))}
             <hr />
           </div>
         </div>
@@ -147,7 +136,6 @@ class TableElement extends React.PureComponent {
 
   render() {
     const table = this.props.table;
-
     let keyLink;
     if (table.indexes && table.indexes.length > 0) {
       keyLink = (
@@ -157,13 +145,13 @@ class TableElement extends React.PureComponent {
               Keys for table <strong>{table.name}</strong>
             </div>
           }
-          modalBody={
-            <pre>{JSON.stringify(table.indexes, null, 4)}</pre>
-          }
+          modalBody={table.indexes.map((ix, i) => (
+            <pre key={i}>{JSON.stringify(ix, null, '  ')}</pre>
+          ))}
           triggerNode={
             <Link
               className="fa fa-key pull-left m-l-2"
-              tooltip={`View indexes (${table.indexes.length})`}
+              tooltip={`View keys & indexes (${table.indexes.length})`}
             />
           }
         />

caravel/assets/javascripts/SqlLab/main.css

@@ -258,3 +258,13 @@ a.Link {
     padding: 3px 5px;
     margin: 3px 5px;
 }
+.tooltip pre {
+    background: transparent;
+    border: none;
+    text-align: left;
+    color: white;
+    font-size: 10px;
+}
+.tooltip-inner {
+    max-width: 500px;
+}