[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/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})`}
             />
           }
         />