mirror of https://github.com/apache/superset.git
Adding a ShrinkSql component (#1058)
This commit is contained in:
parent
544b3f350f
commit
62c71110df
|
@ -7,12 +7,9 @@ import * as Actions from '../actions';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { Table } from 'reactable';
|
import { Table } from 'reactable';
|
||||||
import { ProgressBar } from 'react-bootstrap';
|
import { ProgressBar } from 'react-bootstrap';
|
||||||
|
|
||||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
|
||||||
import { github } from 'react-syntax-highlighter/dist/styles';
|
|
||||||
|
|
||||||
import Link from './Link';
|
import Link from './Link';
|
||||||
import VisualizeModal from './VisualizeModal';
|
import VisualizeModal from './VisualizeModal';
|
||||||
|
import SqlShrink from './SqlShrink';
|
||||||
import { STATE_BSSTYLE_MAP } from '../common';
|
import { STATE_BSSTYLE_MAP } from '../common';
|
||||||
import { fDuration } from '../../modules/dates';
|
import { fDuration } from '../../modules/dates';
|
||||||
|
|
||||||
|
@ -47,9 +44,7 @@ class QueryTable extends React.Component {
|
||||||
q.started = moment.utc(q.startDttm).format('HH:mm:ss');
|
q.started = moment.utc(q.startDttm).format('HH:mm:ss');
|
||||||
const source = q.ctas ? q.executedSql : q.sql;
|
const source = q.ctas ? q.executedSql : q.sql;
|
||||||
q.sql = (
|
q.sql = (
|
||||||
<SyntaxHighlighter language="sql" style={github}>
|
<SqlShrink sql={source} />
|
||||||
{source || ''}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
);
|
);
|
||||||
q.output = q.tempTable;
|
q.output = q.tempTable;
|
||||||
q.progress = (
|
q.progress = (
|
||||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue