Adding indexes to table metadata (#1160)

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

@@ -102,22 +102,27 @@ class SqlEditorTopToolbar extends React.Component {
     const tableName = tableOpt.value;
     const qe = this.props.queryEditor;
     const url = `/caravel/table/${qe.dbId}/${tableName}/${qe.schema}/`;
+
+    this.setState({ tableLoading: true });
     $.get(url, (data) => {
       this.props.actions.addTable({
         id: shortid.generate(),
         dbId: this.props.queryEditor.dbId,
         queryEditorId: this.props.queryEditor.id,
         name: data.name,
+        indexes: data.indexes,
         schema: qe.schema,
         columns: data.columns,
         expanded: true,
       });
+      this.setState({ tableLoading: false });
     })
     .fail(() => {
       this.props.actions.addAlert({
         msg: 'Error occurred while fetching metadata',
         bsStyle: 'danger',
       });
+      this.setState({ tableLoading: false });
     });
   }
   render() {

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
 import shortid from 'shortid';
+import ModalTrigger from '../../components/ModalTrigger.jsx';
 
 class TableElement extends React.Component {
   setSelectStar() {
@@ -86,6 +87,27 @@ class TableElement extends React.Component {
         </a>
       );
     }
+    let keyLink;
+    if (this.props.table.indexes && this.props.table.indexes.length > 0) {
+      keyLink = (
+        <ModalTrigger
+          modalTitle={
+            <div>
+              Keys for table <strong>{this.props.table.name}</strong>
+            </div>
+          }
+          modalBody={
+            <pre>{JSON.stringify(this.props.table.indexes, null, 4)}</pre>
+          }
+          triggerNode={
+            <Link
+              className="fa fa-key pull-left m-l-2"
+              tooltip={`View indexes (${this.props.table.indexes.length})`}
+            />
+          }
+        />
+      );
+    }
     return (
       <div>
         <div className="clearfix">
@@ -94,6 +116,7 @@ class TableElement extends React.Component {
           </div>
           <div className="pull-right">
             <ButtonGroup className="ws-el-controls pull-right">
+              {keyLink}
               <Link
                 className="fa fa-pencil pull-left m-l-2"
                 onClick={this.setSelectStar.bind(this)}