CodeMirror.requireMode(syntax.mode, () => {
const content = htmlTextHelper.decodeEntities(el.innerHTML)
const copyIcon = document.createElement('i')
copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
copyIcon.onclick = (e) => {
copy(content)
if (showCopyNotification) {
this.notify('Saved to Clipboard!', {
body: 'Paste it wherever you want!',
silent: true
})
}
}
el.parentNode.appendChild(copyIcon)
el.innerHTML = ''
if (codeBlockTheme.indexOf('solarized') === 0) {
const [refThema, color] = codeBlockTheme.split(' ')
el.parentNode.className += ` cm-s-${refThema} cm-s-${color}`
} else {
el.parentNode.className += ` cm-s-${codeBlockTheme}`
}
CodeMirror.runMode(content, syntax.mime, el, {
tabSize: indentSize
})
})
highlight: (code, lang = global.Mancy.session.lang, indent = false) => {
if(indent) { code = ReplCommon.indent(code || '', lang) }
const element = document.createElement('span');
// format
CodeMirror.runMode(code || '',
`text/${ReplLanguages.getLangQualifiedName(lang)}`,
element
);
return element.innerHTML;
},
renderCode() {
const {src, type} = this.props
const CodeMirror = require('codemirror')
require('codemirror/addon/runmode/runmode')
require('codemirror/mode/javascript/javascript')
require('codemirror/mode/css/css')
require('codemirror/mode/htmlmixed/htmlmixed')
require('codemirror/mode/xml/xml')
CodeMirror.runMode(src, typeMap[type] || type, this.refs.output)
}
componentDidMount: function() {
if (CodeMirror === undefined) {
return;
}
CodeMirror.runMode(
this.props.code,
this.props.mode,
React.findDOMNode(this).children[0]
);
},
render () {
let query = this.props;
if (!query.userQuery) return null;
// code below before the return prepares the data to render, turning out
// crude properties to glazed, garnished ones e.g. formatting of query
let codeTokens = [];
CodeMirror
.runMode(query.userQuery,
'text/x-mysql', function (text, style) {
// this method is called for every token and gives the
// token and style class for it.
codeTokens.push(<span className={'cm-' + style}>{text}</span>);
});
// figuring out the className for query status
// TODO optimize this construct
let statusTypes = {
'EXECUTED': 'success',
'SUCCESSFUL': 'success',
'FAILED': 'danger',
'CANCELED': 'danger',
'CLOSED': 'warning',
'QUEUED': 'info',
'RUNNING': 'info'
};
let statusClass = 'label-' + statusTypes[query.status.status] ||
'label-info';
let handle = query.queryHandle.handleId;
let executionTime = (query.finishTime - query.submissionTime) / (1000 * 60);
let statusType = query.status.status === 'ERROR' ? 'Error: ' : 'Status: ';
let seeResult = '';
let statusMessage = query.status.status === 'SUCCESSFUL' ?
query.status.statusMessage :
query.status.errorMessage;
if (query.status.status === 'SUCCESSFUL') {
seeResult = (<Link to='result' params={{handle: handle}}
className='btn btn-success btn-xs pull-right' style={{marginLeft: '5px'}}>
See Result
</Link>);
}
return (
<section>
<div className='panel panel-default'>
<pre className='cm-s-default' style={{cursor: 'pointer',
border: '0px', marginBottom: '0px'}}
onClick={this.toggleQueryDetails}>
{codeTokens}
<label className={'pull-right label ' + statusClass}>
{query.status.status}
</label>
{query.queryName && (
<label className='pull-right label label-primary'
style={{marginRight: '5px'}}>
{query.queryName}
</label>
)}
</pre>
{this.state.showDetail && (
<div className='panel-body' style={{borderTop: '1px solid #cccccc',
paddingBottom: '0px'}} key={'preview' + handle}>
<div className='row'>
<div className='col-lg-4 col-sm-4'>
<span className='text-muted'>Handle </span>
<strong>{ query.queryHandle.handleId || 'Unknown'}</strong>
</div>
<div className='col-lg-4 col-sm-4'>
<span className='text-muted'>Name </span>
<strong>{ query.queryName || 'Not specified'}</strong>
</div>
<div className='col-lg-4 col-sm-4'>
<span className='text-muted'>Submitted </span>
<strong>
{ Moment(query.submissionTime).format('Do MMM YY, hh:mm:ss a')}
</strong>
</div>
<div className='col-lg-4 col-sm-4'>
<span className='text-muted'>Execution time </span>
<strong>
{ executionTime > 0 ?
Math.ceil(executionTime) +
(executionTime > 1 ? ' mins' : ' min') : 'Still running'
}
</strong>
</div>
</div>
<div className='row'>
<div
className={'alert alert-' + statusTypes[query.status.status]}
style={{marginBottom: '0px', padding: '5px 15px 5px 15px'}}>
<p>
<strong>{statusType}</strong>
{statusMessage || query.status.status}
{seeResult}
<Link to='query' query={{handle: query.queryHandle.handleId}}
className='pull-right'>
Edit Query
</Link>
</p>
</div>
</div>
</div>
)}
</div>
</section>
);
}