[sqllab] show partition metadata for Presto (#1342)

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

@@ -1,11 +1,23 @@
 import React from 'react';
-import { ButtonGroup } from 'react-bootstrap';
+import { ButtonGroup, Well } from 'react-bootstrap';
 import Link from './Link';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
 import shortid from 'shortid';
-import ModalTrigger from '../../components/ModalTrigger.jsx';
+import ModalTrigger from '../../components/ModalTrigger';
+import CopyToClipboard from '../../components/CopyToClipboard';
+
+const propTypes = {
+  table: React.PropTypes.object,
+  queryEditor: React.PropTypes.object,
+  actions: React.PropTypes.object,
+};
+
+const defaultProps = {
+  table: null,
+  actions: {},
+};
 
 class TableElement extends React.Component {
   setSelectStar() {
@@ -40,40 +52,85 @@ class TableElement extends React.Component {
 
   collapseTable(e) {
     e.preventDefault();
-    this.props.actions.collapseTable.bind(this, this.props.table)();
+    this.props.actions.collapseTable(this.props.table);
   }
 
   expandTable(e) {
     e.preventDefault();
-    this.props.actions.expandTable.bind(this, this.props.table)();
+    this.props.actions.expandTable(this.props.table);
+  }
+
+  removeTable() {
+    this.props.actions.removeTable(this.props.table);
   }
 
   render() {
+    const table = this.props.table;
     let metadata = null;
     let buttonToggle;
-    if (this.props.table.expanded) {
+
+    let header;
+    if (table.partitions) {
+      let partitionQuery;
+      let partitionClipBoard;
+      if (table.partitions.partitionQuery) {
+        partitionQuery = table.partitions.partitionQuery;
+        const tt = 'Copy partition query to clipboard';
+        partitionClipBoard = (
+          <CopyToClipboard
+            text={partitionQuery}
+            shouldShowText={false}
+            tooltipText={tt}
+            copyNode={<i className="fa fa-clipboard" />}
+          />
+        );
+      }
+      let latest = [];
+      for (const k in table.partitions.latest) {
+        latest.push(`${k}=${table.partitions.latest[k]}`);
+      }
+      latest = latest.join('/');
+      header = (
+        <Well bsSize="small">
+          <div>
+            <small>
+              latest partition: {latest}
+            </small> {partitionClipBoard}
+          </div>
+        </Well>
+      );
+    }
+    if (table.expanded) {
       buttonToggle = (
         <a
           href="#"
           onClick={(e) => { this.collapseTable(e); }}
         >
-          <strong>{this.props.table.name}</strong>
+          <strong>{table.name}</strong>
           <small className="m-l-5"><i className="fa fa-minus" /></small>
         </a>
       );
       metadata = (
         <div>
-          {this.props.table.columns.map((col) => (
-            <div className="clearfix" key={shortid.generate()}>
-              <div className="pull-left m-l-10">
-                {col.name}
-              </div>
-              <div className="pull-right text-muted">
-                <small> {col.type}</small>
-              </div>
-            </div>
-          ))}
-          <hr />
+          {header}
+          <div className="table-columns">
+            {table.columns.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">
+                    {name}
+                  </div>
+                  <div className="pull-right text-muted">
+                    <small> {col.type}</small>
+                  </div>
+                </div>);
+            })}
+            <hr />
+          </div>
         </div>
       );
     } else {
@@ -82,34 +139,34 @@ class TableElement extends React.Component {
           href="#"
           onClick={(e) => { this.expandTable(e); }}
         >
-          {this.props.table.name}
+          {table.name}
           <small className="m-l-5"><i className="fa fa-plus" /></small>
         </a>
       );
     }
     let keyLink;
-    if (this.props.table.indexes && this.props.table.indexes.length > 0) {
+    if (table.indexes && table.indexes.length > 0) {
       keyLink = (
         <ModalTrigger
           modalTitle={
             <div>
-              Keys for table <strong>{this.props.table.name}</strong>
+              Keys for table <strong>{table.name}</strong>
             </div>
           }
           modalBody={
-            <pre>{JSON.stringify(this.props.table.indexes, null, 4)}</pre>
+            <pre>{JSON.stringify(table.indexes, null, 4)}</pre>
           }
           triggerNode={
             <Link
               className="fa fa-key pull-left m-l-2"
-              tooltip={`View indexes (${this.props.table.indexes.length})`}
+              tooltip={`View indexes (${table.indexes.length})`}
             />
           }
         />
       );
     }
     return (
-      <div>
+      <div className="TableElement">
         <div className="clearfix">
           <div className="pull-left">
             {buttonToggle}
@@ -131,26 +188,22 @@ class TableElement extends React.Component {
               />
               <Link
                 className="fa fa-trash pull-left m-l-2"
-                onClick={this.props.actions.removeTable.bind(this, this.props.table)}
+                onClick={this.removeTable.bind(this)}
                 tooltip="Remove from workspace"
                 href="#"
               />
             </ButtonGroup>
           </div>
         </div>
-        {metadata}
+        <div>
+          {metadata}
+        </div>
       </div>
     );
   }
 }
-TableElement.propTypes = {
-  table: React.PropTypes.object,
-  queryEditor: React.PropTypes.object,
-  actions: React.PropTypes.object,
-};
-TableElement.defaultProps = {
-  table: null,
-};
+TableElement.propTypes = propTypes;
+TableElement.defaultProps = defaultProps;
 
 function mapDispatchToProps(dispatch) {
   return {
@@ -158,3 +211,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 export default connect(null, mapDispatchToProps)(TableElement);
+export { TableElement };