Adding a ShrinkSql component (#1058)

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

@@ -7,12 +7,9 @@ import * as Actions from '../actions';
 import moment from 'moment';
 import { Table } from 'reactable';
 import { ProgressBar } from 'react-bootstrap';
-
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github } from 'react-syntax-highlighter/dist/styles';
-
 import Link from './Link';
 import VisualizeModal from './VisualizeModal';
+import SqlShrink from './SqlShrink';
 import { STATE_BSSTYLE_MAP } from '../common';
 import { fDuration } from '../../modules/dates';
 
@@ -47,9 +44,7 @@ class QueryTable extends React.Component {
       q.started = moment.utc(q.startDttm).format('HH:mm:ss');
       const source = q.ctas ? q.executedSql : q.sql;
       q.sql = (
-        <SyntaxHighlighter language="sql" style={github}>
-          {source || ''}
-        </SyntaxHighlighter>
+        <SqlShrink sql={source} />
       );
       q.output = q.tempTable;
       q.progress = (

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { github } from 'react-syntax-highlighter/dist/styles';
+
+const SqlShrink = (props) => {
+  let lines = props.sql.split('\n');
+  if (lines.length >= props.maxLines) {
+    lines = lines.slice(0, props.maxLines);
+    lines.push('{...}');
+  }
+  const shrunk = lines.map((line) => {
+    if (line.length > props.maxWidth) {
+      return line.slice(0, props.maxWidth) + '{...}';
+    }
+    return line;
+  })
+  .join('\n');
+  return (
+    <div>
+      <SyntaxHighlighter language="sql" style={github}>
+        {shrunk}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+SqlShrink.defaultProps = {
+  maxWidth: 60,
+  maxLines: 6,
+};
+
+SqlShrink.propTypes = {
+  sql: React.PropTypes.string,
+  maxWidth: React.PropTypes.integer,
+  maxLines: React.PropTypes.integer,
+};
+
+export default SqlShrink;