mirror of https://github.com/grafana/grafana
Alexander Zobnin
7 years ago
parent
96ffa9d797
commit
fefb2c2ba2
@ -0,0 +1,348 @@ |
||||
import Plain from 'slate-plain-serializer'; |
||||
|
||||
import QueryField from './query_field'; |
||||
// import debounce from './utils/debounce';
|
||||
// import {getNextCharacter} from './utils/dom';
|
||||
import debounce from 'app/features/explore/utils/debounce'; |
||||
import { getNextCharacter } from 'app/features/explore/utils/dom'; |
||||
|
||||
import { FUNCTIONS, KEYWORDS } from './kusto'; |
||||
// import '../sass/editor.base.scss';
|
||||
|
||||
|
||||
const TYPEAHEAD_DELAY = 500; |
||||
|
||||
interface Suggestion { |
||||
text: string; |
||||
deleteBackwards?: number; |
||||
type?: string; |
||||
} |
||||
|
||||
interface SuggestionGroup { |
||||
label: string; |
||||
items: Suggestion[]; |
||||
prefixMatch?: boolean; |
||||
skipFilter?: boolean; |
||||
} |
||||
|
||||
const cleanText = s => s.replace(/[{}[\]="(),!~+\-*/^%]/g, '').trim(); |
||||
const wrapText = text => ({ text }); |
||||
|
||||
export default class KustoQueryField extends QueryField { |
||||
fields: any; |
||||
events: any; |
||||
|
||||
constructor(props, context) { |
||||
super(props, context); |
||||
|
||||
this.onTypeahead = debounce(this.onTypeahead, TYPEAHEAD_DELAY); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.updateMenu(); |
||||
} |
||||
|
||||
onTypeahead = () => { |
||||
const selection = window.getSelection(); |
||||
if (selection.anchorNode) { |
||||
const wrapperNode = selection.anchorNode.parentElement; |
||||
if (wrapperNode === null) { |
||||
return; |
||||
} |
||||
const editorNode = wrapperNode.closest('.slate-query-field'); |
||||
if (!editorNode || this.state.value.isBlurred) { |
||||
// Not inside this editor
|
||||
return; |
||||
} |
||||
|
||||
// DOM ranges
|
||||
const range = selection.getRangeAt(0); |
||||
const text = selection.anchorNode.textContent; |
||||
if (text === null) { |
||||
return; |
||||
} |
||||
const offset = range.startOffset; |
||||
let prefix = cleanText(text.substr(0, offset)); |
||||
|
||||
// Model ranges
|
||||
const modelOffset = this.state.value.anchorOffset; |
||||
const modelPrefix = this.state.value.anchorText.text.slice(0, modelOffset); |
||||
|
||||
// Determine candidates by context
|
||||
let suggestionGroups: SuggestionGroup[] = []; |
||||
const wrapperClasses = wrapperNode.classList; |
||||
let typeaheadContext: string | null = null; |
||||
|
||||
if (wrapperClasses.contains('function-context')) { |
||||
typeaheadContext = 'context-function'; |
||||
if (this.fields) { |
||||
suggestionGroups = this._getFieldsSuggestions(); |
||||
} else { |
||||
this._fetchFields(); |
||||
return; |
||||
} |
||||
} else if (modelPrefix.match(/(facet\s$)/i)) { |
||||
typeaheadContext = 'context-facet'; |
||||
if (this.fields) { |
||||
suggestionGroups = this._getFieldsSuggestions(); |
||||
} else { |
||||
this._fetchFields(); |
||||
return; |
||||
} |
||||
} else if (modelPrefix.match(/(,\s*$)/)) { |
||||
typeaheadContext = 'context-multiple-fields'; |
||||
if (this.fields) { |
||||
suggestionGroups = this._getFieldsSuggestions(); |
||||
} else { |
||||
this._fetchFields(); |
||||
return; |
||||
} |
||||
} else if (modelPrefix.match(/(from\s$)/i)) { |
||||
typeaheadContext = 'context-from'; |
||||
if (this.events) { |
||||
suggestionGroups = this._getAfterFromSuggestions(); |
||||
} else { |
||||
this._fetchEvents(); |
||||
return; |
||||
} |
||||
} else if (modelPrefix.match(/(^select\s\w*$)/i)) { |
||||
typeaheadContext = 'context-select'; |
||||
if (this.fields) { |
||||
suggestionGroups = this._getAfterSelectSuggestions(); |
||||
} else { |
||||
this._fetchFields(); |
||||
return; |
||||
} |
||||
} else if ( |
||||
modelPrefix.match(/\)\s$/) || |
||||
modelPrefix.match(/SELECT ((?:\$?\w+\(?\w*\)?\,?\s*)+)([\)]\s|\b)/gi) |
||||
) { |
||||
typeaheadContext = 'context-after-function'; |
||||
suggestionGroups = this._getAfterFunctionSuggestions(); |
||||
} else if (modelPrefix.match(/from\s\S+\s\w*$/i)) { |
||||
prefix = ''; |
||||
typeaheadContext = 'context-since'; |
||||
suggestionGroups = this._getAfterEventSuggestions(); |
||||
// } else if (modelPrefix.match(/\d+\s\w*$/)) {
|
||||
// typeaheadContext = 'context-number';
|
||||
// suggestionGroups = this._getAfterNumberSuggestions();
|
||||
} else if (modelPrefix.match(/ago\b/i) || modelPrefix.match(/facet\b/i) || modelPrefix.match(/\$__timefilter\b/i)) { |
||||
typeaheadContext = 'context-timeseries'; |
||||
suggestionGroups = this._getAfterAgoSuggestions(); |
||||
} else if (prefix && !wrapperClasses.contains('argument')) { |
||||
typeaheadContext = 'context-builtin'; |
||||
suggestionGroups = this._getKeywordSuggestions(); |
||||
} else if (Plain.serialize(this.state.value) === '') { |
||||
typeaheadContext = 'context-new'; |
||||
suggestionGroups = this._getInitialSuggestions(); |
||||
} |
||||
|
||||
let results = 0; |
||||
prefix = prefix.toLowerCase(); |
||||
const filteredSuggestions = suggestionGroups.map(group => { |
||||
if (group.items && prefix && !group.skipFilter) { |
||||
group.items = group.items.filter(c => c.text.length >= prefix.length); |
||||
if (group.prefixMatch) { |
||||
group.items = group.items.filter(c => c.text.toLowerCase().indexOf(prefix) === 0); |
||||
} else { |
||||
group.items = group.items.filter(c => c.text.toLowerCase().indexOf(prefix) > -1); |
||||
} |
||||
} |
||||
results += group.items.length; |
||||
return group; |
||||
}) |
||||
.filter(group => group.items.length > 0); |
||||
|
||||
// console.log('onTypeahead', selection.anchorNode, wrapperClasses, text, offset, prefix, typeaheadContext);
|
||||
|
||||
this.setState({ |
||||
typeaheadPrefix: prefix, |
||||
typeaheadContext, |
||||
typeaheadText: text, |
||||
suggestions: results > 0 ? filteredSuggestions : [], |
||||
}); |
||||
} |
||||
} |
||||
|
||||
applyTypeahead(change, suggestion) { |
||||
const { typeaheadPrefix, typeaheadContext, typeaheadText } = this.state; |
||||
let suggestionText = suggestion.text || suggestion; |
||||
const move = 0; |
||||
|
||||
// Modify suggestion based on context
|
||||
|
||||
const nextChar = getNextCharacter(); |
||||
if (suggestion.type === 'function') { |
||||
if (!nextChar || nextChar !== '(') { |
||||
suggestionText += '('; |
||||
} |
||||
} else if (typeaheadContext === 'context-function') { |
||||
if (!nextChar || nextChar !== ')') { |
||||
suggestionText += ')'; |
||||
} |
||||
} else { |
||||
if (!nextChar || nextChar !== ' ') { |
||||
suggestionText += ' '; |
||||
} |
||||
} |
||||
|
||||
this.resetTypeahead(); |
||||
|
||||
// Remove the current, incomplete text and replace it with the selected suggestion
|
||||
const backward = suggestion.deleteBackwards || typeaheadPrefix.length; |
||||
const text = cleanText(typeaheadText); |
||||
const suffixLength = text.length - typeaheadPrefix.length; |
||||
const offset = typeaheadText.indexOf(typeaheadPrefix); |
||||
const midWord = typeaheadPrefix && ((suffixLength > 0 && offset > -1) || suggestionText === typeaheadText); |
||||
const forward = midWord ? suffixLength + offset : 0; |
||||
|
||||
return change |
||||
.deleteBackward(backward) |
||||
.deleteForward(forward) |
||||
.insertText(suggestionText) |
||||
.move(move) |
||||
.focus(); |
||||
} |
||||
|
||||
private _getFieldsSuggestions(): SuggestionGroup[] { |
||||
return [ |
||||
{ |
||||
prefixMatch: true, |
||||
label: 'Fields', |
||||
items: this.fields.map(wrapText) |
||||
}, |
||||
{ |
||||
prefixMatch: true, |
||||
label: 'Variables', |
||||
items: this.props.templateVariables.map(wrapText) |
||||
} |
||||
]; |
||||
} |
||||
|
||||
private _getAfterFromSuggestions(): SuggestionGroup[] { |
||||
return [ |
||||
{ |
||||
skipFilter: true, |
||||
label: 'Events', |
||||
items: this.events.map(wrapText) |
||||
}, |
||||
{ |
||||
prefixMatch: true, |
||||
label: 'Variables', |
||||
items: this.props.templateVariables |
||||
.map(wrapText) |
||||
.map(suggestion => { |
||||
suggestion.deleteBackwards = 0; |
||||
return suggestion; |
||||
}) |
||||
} |
||||
]; |
||||
} |
||||
|
||||
private _getAfterSelectSuggestions(): SuggestionGroup[] { |
||||
return [ |
||||
{ |
||||
prefixMatch: true, |
||||
label: 'Fields', |
||||
items: this.fields.map(wrapText) |
||||
}, |
||||
{ |
||||
prefixMatch: true, |
||||
label: 'Functions', |
||||
items: FUNCTIONS.map((s: any) => { s.type = 'function'; return s; }) |
||||
}, |
||||
{ |
||||
prefixMatch: true, |
||||
label: 'Variables', |
||||
items: this.props.templateVariables.map(wrapText) |
||||
} |
||||
]; |
||||
} |
||||
|
||||
private _getAfterFunctionSuggestions(): SuggestionGroup[] { |
||||
return [{ |
||||
prefixMatch: true, |
||||
label: 'Keywords', |
||||
items: ['FROM'].map(wrapText) |
||||
}]; |
||||
} |
||||
|
||||
private _getAfterEventSuggestions(): SuggestionGroup[] { |
||||
return [ |
||||
{ |
||||
skipFilter: true, |
||||
label: 'Keywords', |
||||
items: ['SINCE'].map(wrapText) |
||||
.map((suggestion: any) => { |
||||
suggestion.deleteBackwards = 0; |
||||
return suggestion; |
||||
}) |
||||
}, |
||||
{ |
||||
skipFilter: true, |
||||
label: 'Macros', |
||||
items: ['$__timeFilter'].map(wrapText) |
||||
.map((suggestion: any) => { |
||||
suggestion.deleteBackwards = 0; |
||||
return suggestion; |
||||
}) |
||||
} |
||||
]; |
||||
} |
||||
|
||||
// private _getAfterNumberSuggestions(): SuggestionGroup[] {
|
||||
// return [{
|
||||
// prefixMatch: true,
|
||||
// label: 'Duration',
|
||||
// items: DURATION
|
||||
// .map(d => `${d} AGO`)
|
||||
// .map(wrapText)
|
||||
// }];
|
||||
// }
|
||||
|
||||
private _getAfterAgoSuggestions(): SuggestionGroup[] { |
||||
return [{ |
||||
prefixMatch: true, |
||||
label: 'Keywords', |
||||
items: ['TIMESERIES', 'COMPARE WITH', 'FACET'].map(wrapText) |
||||
}]; |
||||
} |
||||
|
||||
private _getKeywordSuggestions(): SuggestionGroup[] { |
||||
return [{ |
||||
prefixMatch: true, |
||||
label: 'Keywords', |
||||
items: KEYWORDS.map(wrapText) |
||||
}]; |
||||
} |
||||
|
||||
private _getInitialSuggestions(): SuggestionGroup[] { |
||||
// TODO: return datbase tables as an initial suggestion
|
||||
return [{ |
||||
prefixMatch: true, |
||||
label: 'Keywords', |
||||
items: KEYWORDS.map(wrapText) |
||||
}]; |
||||
} |
||||
|
||||
private async _fetchEvents() { |
||||
const query = 'events'; |
||||
const result = await this.request(query); |
||||
|
||||
if (result === undefined) { |
||||
this.events = []; |
||||
} else { |
||||
this.events = result; |
||||
} |
||||
setTimeout(this.onTypeahead, 0); |
||||
} |
||||
|
||||
private async _fetchFields() { |
||||
const query = 'fields'; |
||||
const result = await this.request(query); |
||||
|
||||
this.fields = result || []; |
||||
|
||||
setTimeout(this.onTypeahead, 0); |
||||
} |
||||
} |
||||
@ -0,0 +1,61 @@ |
||||
import KustoQueryField from './KustoQueryField'; |
||||
import Kusto from './kusto'; |
||||
|
||||
import React, {Component} from 'react'; |
||||
import coreModule from 'app/core/core_module'; |
||||
|
||||
|
||||
|
||||
class Editor extends Component<any, any> { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
edited: false, |
||||
query: props.query || '', |
||||
}; |
||||
} |
||||
|
||||
onChangeQuery = value => { |
||||
const { index, change } = this.props; |
||||
const { query } = this.state; |
||||
const edited = query !== value; |
||||
this.setState({ edited, query: value }); |
||||
if (change) { |
||||
change(value, index); |
||||
} |
||||
}; |
||||
|
||||
onPressEnter = () => { |
||||
const { execute } = this.props; |
||||
if (execute) { |
||||
execute(); |
||||
} |
||||
}; |
||||
|
||||
render() { |
||||
const { request, variables } = this.props; |
||||
const { edited, query } = this.state; |
||||
|
||||
return ( |
||||
<div className="gf-form-input" style={{height: 'auto'}}> |
||||
<KustoQueryField |
||||
initialQuery={edited ? null : query} |
||||
onPressEnter={this.onPressEnter} |
||||
onQueryChange={this.onChangeQuery} |
||||
prismLanguage="kusto" |
||||
prismDefinition={Kusto} |
||||
placeholder="Enter a query" |
||||
request={request} |
||||
templateVariables={variables} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
coreModule.directive('kustoEditor', [ |
||||
'reactDirective', |
||||
reactDirective => { |
||||
return reactDirective(Editor, ['change', 'database', 'execute', 'query', 'request', 'variables']); |
||||
}, |
||||
]); |
||||
@ -0,0 +1,333 @@ |
||||
import PluginPrism from './slate-plugins/prism'; |
||||
// import PluginPrism from 'slate-prism';
|
||||
// import Prism from 'prismjs';
|
||||
|
||||
import BracesPlugin from 'app/features/explore/slate-plugins/braces'; |
||||
import ClearPlugin from 'app/features/explore/slate-plugins/clear'; |
||||
// Custom plugins (new line on Enter and run on Shift+Enter)
|
||||
import NewlinePlugin from './slate-plugins/newline'; |
||||
import RunnerPlugin from './slate-plugins/runner'; |
||||
|
||||
import Typeahead from './typeahead'; |
||||
|
||||
import { Block, Document, Text, Value } from 'slate'; |
||||
import { Editor } from 'slate-react'; |
||||
import Plain from 'slate-plain-serializer'; |
||||
import ReactDOM from 'react-dom'; |
||||
import React from 'react'; |
||||
import _ from 'lodash'; |
||||
|
||||
|
||||
function flattenSuggestions(s) { |
||||
return s ? s.reduce((acc, g) => acc.concat(g.items), []) : []; |
||||
} |
||||
|
||||
export const makeFragment = text => { |
||||
const lines = text.split('\n').map(line => |
||||
Block.create({ |
||||
type: 'paragraph', |
||||
nodes: [Text.create(line)], |
||||
}) |
||||
); |
||||
|
||||
const fragment = Document.create({ |
||||
nodes: lines, |
||||
}); |
||||
return fragment; |
||||
}; |
||||
|
||||
export const getInitialValue = query => Value.create({ document: makeFragment(query) }); |
||||
|
||||
class Portal extends React.Component<any, any> { |
||||
node: any; |
||||
|
||||
constructor(props) { |
||||
super(props); |
||||
const { index = 0, prefix = 'query' } = props; |
||||
this.node = document.createElement('div'); |
||||
this.node.classList.add(`slate-typeahead`, `slate-typeahead-${prefix}-${index}`); |
||||
document.body.appendChild(this.node); |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
document.body.removeChild(this.node); |
||||
} |
||||
|
||||
render() { |
||||
return ReactDOM.createPortal(this.props.children, this.node); |
||||
} |
||||
} |
||||
|
||||
class QueryField extends React.Component<any, any> { |
||||
menuEl: any; |
||||
plugins: any; |
||||
resetTimer: any; |
||||
|
||||
constructor(props, context) { |
||||
super(props, context); |
||||
|
||||
const { prismDefinition = {}, prismLanguage = 'kusto' } = props; |
||||
|
||||
this.plugins = [ |
||||
BracesPlugin(), |
||||
ClearPlugin(), |
||||
RunnerPlugin({ handler: props.onPressEnter }), |
||||
NewlinePlugin(), |
||||
PluginPrism({ definition: prismDefinition, language: prismLanguage }), |
||||
]; |
||||
|
||||
this.state = { |
||||
labelKeys: {}, |
||||
labelValues: {}, |
||||
suggestions: [], |
||||
typeaheadIndex: 0, |
||||
typeaheadPrefix: '', |
||||
value: getInitialValue(props.initialQuery || ''), |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.updateMenu(); |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
clearTimeout(this.resetTimer); |
||||
} |
||||
|
||||
componentDidUpdate() { |
||||
this.updateMenu(); |
||||
} |
||||
|
||||
onChange = ({ value }) => { |
||||
const changed = value.document !== this.state.value.document; |
||||
this.setState({ value }, () => { |
||||
if (changed) { |
||||
this.onChangeQuery(); |
||||
} |
||||
}); |
||||
|
||||
window.requestAnimationFrame(this.onTypeahead); |
||||
} |
||||
|
||||
request = (url?) => { |
||||
if (this.props.request) { |
||||
return this.props.request(url); |
||||
} |
||||
return fetch(url); |
||||
} |
||||
|
||||
onChangeQuery = () => { |
||||
// Send text change to parent
|
||||
const { onQueryChange } = this.props; |
||||
if (onQueryChange) { |
||||
onQueryChange(Plain.serialize(this.state.value)); |
||||
} |
||||
} |
||||
|
||||
onKeyDown = (event, change) => { |
||||
const { typeaheadIndex, suggestions } = this.state; |
||||
|
||||
switch (event.key) { |
||||
case 'Escape': { |
||||
if (this.menuEl) { |
||||
event.preventDefault(); |
||||
event.stopPropagation(); |
||||
this.resetTypeahead(); |
||||
return true; |
||||
} |
||||
break; |
||||
} |
||||
|
||||
case ' ': { |
||||
if (event.ctrlKey) { |
||||
event.preventDefault(); |
||||
this.onTypeahead(); |
||||
return true; |
||||
} |
||||
break; |
||||
} |
||||
|
||||
case 'Tab': { |
||||
if (this.menuEl) { |
||||
// Dont blur input
|
||||
event.preventDefault(); |
||||
if (!suggestions || suggestions.length === 0) { |
||||
return undefined; |
||||
} |
||||
|
||||
// Get the currently selected suggestion
|
||||
const flattenedSuggestions = flattenSuggestions(suggestions); |
||||
const selected = Math.abs(typeaheadIndex); |
||||
const selectedIndex = selected % flattenedSuggestions.length || 0; |
||||
const suggestion = flattenedSuggestions[selectedIndex]; |
||||
|
||||
this.applyTypeahead(change, suggestion); |
||||
return true; |
||||
} |
||||
break; |
||||
} |
||||
|
||||
case 'ArrowDown': { |
||||
if (this.menuEl) { |
||||
// Select next suggestion
|
||||
event.preventDefault(); |
||||
this.setState({ typeaheadIndex: typeaheadIndex + 1 }); |
||||
} |
||||
break; |
||||
} |
||||
|
||||
case 'ArrowUp': { |
||||
if (this.menuEl) { |
||||
// Select previous suggestion
|
||||
event.preventDefault(); |
||||
this.setState({ typeaheadIndex: Math.max(0, typeaheadIndex - 1) }); |
||||
} |
||||
break; |
||||
} |
||||
|
||||
default: { |
||||
// console.log('default key', event.key, event.which, event.charCode, event.locale, data.key);
|
||||
break; |
||||
} |
||||
} |
||||
return undefined; |
||||
} |
||||
|
||||
onTypeahead = (change?, item?) => { |
||||
return change || this.state.value.change(); |
||||
} |
||||
|
||||
applyTypeahead(change?, suggestion?): { value: object } { return { value: {} }; } |
||||
|
||||
resetTypeahead = () => { |
||||
this.setState({ |
||||
suggestions: [], |
||||
typeaheadIndex: 0, |
||||
typeaheadPrefix: '', |
||||
typeaheadContext: null, |
||||
}); |
||||
} |
||||
|
||||
handleBlur = () => { |
||||
const { onBlur } = this.props; |
||||
// If we dont wait here, menu clicks wont work because the menu
|
||||
// will be gone.
|
||||
this.resetTimer = setTimeout(this.resetTypeahead, 100); |
||||
if (onBlur) { |
||||
onBlur(); |
||||
} |
||||
} |
||||
|
||||
handleFocus = () => { |
||||
const { onFocus } = this.props; |
||||
if (onFocus) { |
||||
onFocus(); |
||||
} |
||||
} |
||||
|
||||
onClickItem = item => { |
||||
const { suggestions } = this.state; |
||||
if (!suggestions || suggestions.length === 0) { |
||||
return; |
||||
} |
||||
|
||||
// Get the currently selected suggestion
|
||||
const flattenedSuggestions = flattenSuggestions(suggestions); |
||||
const suggestion = _.find( |
||||
flattenedSuggestions, |
||||
suggestion => suggestion.display === item || suggestion.text === item |
||||
); |
||||
|
||||
// Manually triggering change
|
||||
const change = this.applyTypeahead(this.state.value.change(), suggestion); |
||||
this.onChange(change); |
||||
} |
||||
|
||||
updateMenu = () => { |
||||
const { suggestions } = this.state; |
||||
const menu = this.menuEl; |
||||
const selection = window.getSelection(); |
||||
const node = selection.anchorNode; |
||||
|
||||
// No menu, nothing to do
|
||||
if (!menu) { |
||||
return; |
||||
} |
||||
|
||||
// No suggestions or blur, remove menu
|
||||
const hasSuggesstions = suggestions && suggestions.length > 0; |
||||
if (!hasSuggesstions) { |
||||
menu.removeAttribute('style'); |
||||
return; |
||||
} |
||||
|
||||
// Align menu overlay to editor node
|
||||
if (node && node.parentElement) { |
||||
// Read from DOM
|
||||
const rect = node.parentElement.getBoundingClientRect(); |
||||
const scrollX = window.scrollX; |
||||
const scrollY = window.scrollY; |
||||
|
||||
// Write DOM
|
||||
requestAnimationFrame(() => { |
||||
menu.style.opacity = 1; |
||||
menu.style.top = `${rect.top + scrollY + rect.height + 4}px`; |
||||
menu.style.left = `${rect.left + scrollX - 2}px`; |
||||
}); |
||||
} |
||||
} |
||||
|
||||
menuRef = el => { |
||||
this.menuEl = el; |
||||
} |
||||
|
||||
renderMenu = () => { |
||||
const { portalPrefix } = this.props; |
||||
const { suggestions } = this.state; |
||||
const hasSuggesstions = suggestions && suggestions.length > 0; |
||||
if (!hasSuggesstions) { |
||||
return null; |
||||
} |
||||
|
||||
// Guard selectedIndex to be within the length of the suggestions
|
||||
let selectedIndex = Math.max(this.state.typeaheadIndex, 0); |
||||
const flattenedSuggestions = flattenSuggestions(suggestions); |
||||
selectedIndex = selectedIndex % flattenedSuggestions.length || 0; |
||||
const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map( |
||||
i => (typeof i === 'object' ? i.text : i) |
||||
); |
||||
|
||||
// Create typeahead in DOM root so we can later position it absolutely
|
||||
return ( |
||||
<Portal prefix={portalPrefix}> |
||||
<Typeahead |
||||
menuRef={this.menuRef} |
||||
selectedItems={selectedKeys} |
||||
onClickItem={this.onClickItem} |
||||
groupedItems={suggestions} |
||||
/> |
||||
</Portal> |
||||
); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="slate-query-field"> |
||||
{this.renderMenu()} |
||||
<Editor |
||||
autoCorrect={false} |
||||
onBlur={this.handleBlur} |
||||
onKeyDown={this.onKeyDown} |
||||
onChange={this.onChange} |
||||
onFocus={this.handleFocus} |
||||
placeholder={this.props.placeholder} |
||||
plugins={this.plugins} |
||||
spellCheck={false} |
||||
value={this.state.value} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default QueryField; |
||||
@ -0,0 +1,35 @@ |
||||
function getIndent(text) { |
||||
let offset = text.length - text.trimLeft().length; |
||||
if (offset) { |
||||
let indent = text[0]; |
||||
while (--offset) { |
||||
indent += text[0]; |
||||
} |
||||
return indent; |
||||
} |
||||
return ''; |
||||
} |
||||
|
||||
export default function NewlinePlugin() { |
||||
return { |
||||
onKeyDown(event, change) { |
||||
const { value } = change; |
||||
if (!value.isCollapsed) { |
||||
return undefined; |
||||
} |
||||
|
||||
if (event.key === 'Enter' && !event.shiftKey) { |
||||
event.preventDefault(); |
||||
|
||||
const { startBlock } = value; |
||||
const currentLineText = startBlock.text; |
||||
const indent = getIndent(currentLineText); |
||||
|
||||
return change |
||||
.splitBlock() |
||||
.insertText(indent) |
||||
.focus(); |
||||
} |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,123 @@ |
||||
import React from 'react'; |
||||
import Prism from 'prismjs'; |
||||
|
||||
const TOKEN_MARK = 'prism-token'; |
||||
|
||||
export function setPrismTokens(language, field, values, alias = 'variable') { |
||||
Prism.languages[language][field] = { |
||||
alias, |
||||
pattern: new RegExp(`(?:^|\\s)(${values.join('|')})(?:$|\\s)`), |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* Code-highlighting plugin based on Prism and |
||||
* https://github.com/ianstormtaylor/slate/blob/master/examples/code-highlighting/index.js
|
||||
* |
||||
* (Adapted to handle nested grammar definitions.) |
||||
*/ |
||||
|
||||
export default function PrismPlugin({ definition, language }) { |
||||
if (definition) { |
||||
// Don't override exising modified definitions
|
||||
Prism.languages[language] = Prism.languages[language] || definition; |
||||
} |
||||
|
||||
return { |
||||
/** |
||||
* Render a Slate mark with appropiate CSS class names |
||||
* |
||||
* @param {Object} props |
||||
* @return {Element} |
||||
*/ |
||||
|
||||
renderMark(props) { |
||||
const { children, mark } = props; |
||||
// Only apply spans to marks identified by this plugin
|
||||
if (mark.type !== TOKEN_MARK) { |
||||
return undefined; |
||||
} |
||||
const className = `token ${mark.data.get('types')}`; |
||||
return <span className={className}>{children}</span>; |
||||
}, |
||||
|
||||
/** |
||||
* Decorate code blocks with Prism.js highlighting. |
||||
* |
||||
* @param {Node} node |
||||
* @return {Array} |
||||
*/ |
||||
|
||||
decorateNode(node) { |
||||
if (node.type !== 'paragraph') { |
||||
return []; |
||||
} |
||||
|
||||
const texts = node.getTexts().toArray(); |
||||
const tstring = texts.map(t => t.text).join('\n'); |
||||
const grammar = Prism.languages[language]; |
||||
const tokens = Prism.tokenize(tstring, grammar); |
||||
const decorations: any[] = []; |
||||
let startText = texts.shift(); |
||||
let endText = startText; |
||||
let startOffset = 0; |
||||
let endOffset = 0; |
||||
let start = 0; |
||||
|
||||
function processToken(token, acc?) { |
||||
// Accumulate token types down the tree
|
||||
const types = `${acc || ''} ${token.type || ''} ${token.alias || ''}`; |
||||
|
||||
// Add mark for token node
|
||||
if (typeof token === 'string' || typeof token.content === 'string') { |
||||
startText = endText; |
||||
startOffset = endOffset; |
||||
|
||||
const content = typeof token === 'string' ? token : token.content; |
||||
const newlines = content.split('\n').length - 1; |
||||
const length = content.length - newlines; |
||||
const end = start + length; |
||||
|
||||
let available = startText.text.length - startOffset; |
||||
let remaining = length; |
||||
|
||||
endOffset = startOffset + remaining; |
||||
|
||||
while (available < remaining) { |
||||
endText = texts.shift(); |
||||
remaining = length - available; |
||||
available = endText.text.length; |
||||
endOffset = remaining; |
||||
} |
||||
|
||||
// Inject marks from up the tree (acc) as well
|
||||
if (typeof token !== 'string' || acc) { |
||||
const range = { |
||||
anchorKey: startText.key, |
||||
anchorOffset: startOffset, |
||||
focusKey: endText.key, |
||||
focusOffset: endOffset, |
||||
marks: [{ type: TOKEN_MARK, data: { types } }], |
||||
}; |
||||
|
||||
decorations.push(range); |
||||
} |
||||
|
||||
start = end; |
||||
} else if (token.content && token.content.length) { |
||||
// Tokens can be nested
|
||||
for (const subToken of token.content) { |
||||
processToken(subToken, types); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Process top-level tokens
|
||||
for (const token of tokens) { |
||||
processToken(token); |
||||
} |
||||
|
||||
return decorations; |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
export default function RunnerPlugin({ handler }) { |
||||
return { |
||||
onKeyDown(event) { |
||||
// Handle enter
|
||||
if (handler && event.key === 'Enter' && event.shiftKey) { |
||||
// Submit on Enter
|
||||
event.preventDefault(); |
||||
handler(event); |
||||
return true; |
||||
} |
||||
return undefined; |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,77 @@ |
||||
import React from 'react'; |
||||
|
||||
function scrollIntoView(el) { |
||||
if (!el || !el.offsetParent) { |
||||
return; |
||||
} |
||||
const container = el.offsetParent; |
||||
if (el.offsetTop > container.scrollTop + container.offsetHeight || el.offsetTop < container.scrollTop) { |
||||
container.scrollTop = el.offsetTop - container.offsetTop; |
||||
} |
||||
} |
||||
|
||||
class TypeaheadItem extends React.PureComponent<any, any> { |
||||
el: any; |
||||
componentDidUpdate(prevProps) { |
||||
if (this.props.isSelected && !prevProps.isSelected) { |
||||
scrollIntoView(this.el); |
||||
} |
||||
} |
||||
|
||||
getRef = el => { |
||||
this.el = el; |
||||
}; |
||||
|
||||
render() { |
||||
const { hint, isSelected, label, onClickItem } = this.props; |
||||
const className = isSelected ? 'typeahead-item typeahead-item__selected' : 'typeahead-item'; |
||||
const onClick = () => onClickItem(label); |
||||
return ( |
||||
<li ref={this.getRef} className={className} onClick={onClick}> |
||||
{label} |
||||
{hint && isSelected ? <div className="typeahead-item-hint">{hint}</div> : null} |
||||
</li> |
||||
); |
||||
} |
||||
} |
||||
|
||||
class TypeaheadGroup extends React.PureComponent<any, any> { |
||||
render() { |
||||
const { items, label, selected, onClickItem } = this.props; |
||||
return ( |
||||
<li className="typeahead-group"> |
||||
<div className="typeahead-group__title">{label}</div> |
||||
<ul className="typeahead-group__list"> |
||||
{items.map(item => { |
||||
const text = typeof item === 'object' ? item.text : item; |
||||
const label = typeof item === 'object' ? item.display || item.text : item; |
||||
return ( |
||||
<TypeaheadItem |
||||
key={text} |
||||
onClickItem={onClickItem} |
||||
isSelected={selected.indexOf(text) > -1} |
||||
hint={item.hint} |
||||
label={label} |
||||
/> |
||||
); |
||||
})} |
||||
</ul> |
||||
</li> |
||||
); |
||||
} |
||||
} |
||||
|
||||
class Typeahead extends React.PureComponent<any, any> { |
||||
render() { |
||||
const { groupedItems, menuRef, selectedItems, onClickItem } = this.props; |
||||
return ( |
||||
<ul className="typeahead" ref={menuRef}> |
||||
{groupedItems.map(g => ( |
||||
<TypeaheadGroup key={g.label} onClickItem={onClickItem} selected={selectedItems} {...g} /> |
||||
))} |
||||
</ul> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default Typeahead; |
||||
@ -1 +0,0 @@ |
||||
Object.assign({}); |
||||
@ -1,219 +0,0 @@ |
||||
// tslint:disable-next-line:no-reference
|
||||
///<reference path="../../../../../../node_modules/monaco-editor/monaco.d.ts" />
|
||||
|
||||
import KustoCodeEditor from './kusto_code_editor'; |
||||
import _ from 'lodash'; |
||||
|
||||
describe('KustoCodeEditor', () => { |
||||
let editor; |
||||
|
||||
describe('getCompletionItems', () => { |
||||
let completionItems; |
||||
let lineContent; |
||||
let model; |
||||
|
||||
beforeEach(() => { |
||||
(global as any).monaco = { |
||||
languages: { |
||||
CompletionItemKind: { |
||||
Keyword: '', |
||||
}, |
||||
}, |
||||
}; |
||||
model = { |
||||
getLineCount: () => 3, |
||||
getValueInRange: () => 'atable/n' + lineContent, |
||||
getLineContent: () => lineContent, |
||||
}; |
||||
|
||||
const StandaloneMock = jest.fn<monaco.editor.ICodeEditor>(); |
||||
editor = new KustoCodeEditor(null, 'TimeGenerated', () => {}, {}); |
||||
editor.codeEditor = new StandaloneMock(); |
||||
}); |
||||
|
||||
describe('when no where clause and no | in model text', () => { |
||||
beforeEach(() => { |
||||
lineContent = ' '; |
||||
const position = { lineNumber: 2, column: 2 }; |
||||
completionItems = editor.getCompletionItems(model, position); |
||||
}); |
||||
|
||||
it('should not return any grafana macros', () => { |
||||
expect(completionItems.length).toBe(0); |
||||
}); |
||||
}); |
||||
|
||||
describe('when no where clause in model text', () => { |
||||
beforeEach(() => { |
||||
lineContent = '| '; |
||||
const position = { lineNumber: 2, column: 3 }; |
||||
completionItems = editor.getCompletionItems(model, position); |
||||
}); |
||||
|
||||
it('should return grafana macros for where and timefilter', () => { |
||||
expect(completionItems.length).toBe(1); |
||||
|
||||
expect(completionItems[0].label).toBe('where $__timeFilter(timeColumn)'); |
||||
expect(completionItems[0].insertText.value).toBe('where \\$__timeFilter(${0:TimeGenerated})'); |
||||
}); |
||||
}); |
||||
|
||||
describe('when on line with where clause', () => { |
||||
beforeEach(() => { |
||||
lineContent = '| where Test == 2 and '; |
||||
const position = { lineNumber: 2, column: 23 }; |
||||
completionItems = editor.getCompletionItems(model, position); |
||||
}); |
||||
|
||||
it('should return grafana macros and variables', () => { |
||||
expect(completionItems.length).toBe(4); |
||||
|
||||
expect(completionItems[0].label).toBe('$__timeFilter(timeColumn)'); |
||||
expect(completionItems[0].insertText.value).toBe('\\$__timeFilter(${0:TimeGenerated})'); |
||||
|
||||
expect(completionItems[1].label).toBe('$__from'); |
||||
expect(completionItems[1].insertText.value).toBe('\\$__from'); |
||||
|
||||
expect(completionItems[2].label).toBe('$__to'); |
||||
expect(completionItems[2].insertText.value).toBe('\\$__to'); |
||||
|
||||
expect(completionItems[3].label).toBe('$__interval'); |
||||
expect(completionItems[3].insertText.value).toBe('\\$__interval'); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('onDidChangeCursorSelection', () => { |
||||
const keyboardEvent = { |
||||
selection: { |
||||
startLineNumber: 4, |
||||
startColumn: 26, |
||||
endLineNumber: 4, |
||||
endColumn: 31, |
||||
selectionStartLineNumber: 4, |
||||
selectionStartColumn: 26, |
||||
positionLineNumber: 4, |
||||
positionColumn: 31, |
||||
}, |
||||
secondarySelections: [], |
||||
source: 'keyboard', |
||||
reason: 3, |
||||
}; |
||||
|
||||
const modelChangedEvent = { |
||||
selection: { |
||||
startLineNumber: 2, |
||||
startColumn: 1, |
||||
endLineNumber: 3, |
||||
endColumn: 3, |
||||
selectionStartLineNumber: 2, |
||||
selectionStartColumn: 1, |
||||
positionLineNumber: 3, |
||||
positionColumn: 3, |
||||
}, |
||||
secondarySelections: [], |
||||
source: 'modelChange', |
||||
reason: 2, |
||||
}; |
||||
|
||||
describe('suggestion trigger', () => { |
||||
let suggestionTriggered; |
||||
let lineContent = ''; |
||||
|
||||
beforeEach(() => { |
||||
(global as any).monaco = { |
||||
languages: { |
||||
CompletionItemKind: { |
||||
Keyword: '', |
||||
}, |
||||
}, |
||||
editor: { |
||||
CursorChangeReason: { |
||||
NotSet: 0, |
||||
ContentFlush: 1, |
||||
RecoverFromMarkers: 2, |
||||
Explicit: 3, |
||||
Paste: 4, |
||||
Undo: 5, |
||||
Redo: 6, |
||||
}, |
||||
}, |
||||
}; |
||||
const StandaloneMock = jest.fn<monaco.editor.ICodeEditor>(() => ({ |
||||
getModel: () => { |
||||
return { |
||||
getLineCount: () => 3, |
||||
getLineContent: () => lineContent, |
||||
}; |
||||
}, |
||||
})); |
||||
|
||||
editor = new KustoCodeEditor(null, 'TimeGenerated', () => {}, {}); |
||||
editor.codeEditor = new StandaloneMock(); |
||||
editor.triggerSuggestions = () => { |
||||
suggestionTriggered = true; |
||||
}; |
||||
}); |
||||
|
||||
describe('when model change event, reason is RecoverFromMarkers and there is a space after', () => { |
||||
beforeEach(() => { |
||||
suggestionTriggered = false; |
||||
lineContent = '| '; |
||||
editor.onDidChangeCursorSelection(modelChangedEvent); |
||||
}); |
||||
|
||||
it('should trigger suggestion', () => { |
||||
expect(suggestionTriggered).toBeTruthy(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when not model change event', () => { |
||||
beforeEach(() => { |
||||
suggestionTriggered = false; |
||||
editor.onDidChangeCursorSelection(keyboardEvent); |
||||
}); |
||||
|
||||
it('should not trigger suggestion', () => { |
||||
expect(suggestionTriggered).toBeFalsy(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when model change event but with incorrect reason', () => { |
||||
beforeEach(() => { |
||||
suggestionTriggered = false; |
||||
const modelChangedWithInvalidReason = _.cloneDeep(modelChangedEvent); |
||||
modelChangedWithInvalidReason.reason = 5; |
||||
editor.onDidChangeCursorSelection(modelChangedWithInvalidReason); |
||||
}); |
||||
|
||||
it('should not trigger suggestion', () => { |
||||
expect(suggestionTriggered).toBeFalsy(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when model change event but with no space after', () => { |
||||
beforeEach(() => { |
||||
suggestionTriggered = false; |
||||
lineContent = '|'; |
||||
editor.onDidChangeCursorSelection(modelChangedEvent); |
||||
}); |
||||
|
||||
it('should not trigger suggestion', () => { |
||||
expect(suggestionTriggered).toBeFalsy(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when model change event but with no space after', () => { |
||||
beforeEach(() => { |
||||
suggestionTriggered = false; |
||||
lineContent = '|'; |
||||
editor.onDidChangeCursorSelection(modelChangedEvent); |
||||
}); |
||||
|
||||
it('should not trigger suggestion', () => { |
||||
expect(suggestionTriggered).toBeFalsy(); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,332 +0,0 @@ |
||||
// tslint:disable-next-line:no-reference
|
||||
///<reference path="../../../../../../node_modules/monaco-editor/monaco.d.ts" />
|
||||
|
||||
import _ from 'lodash'; |
||||
|
||||
export interface SuggestionController { |
||||
_model: any; |
||||
} |
||||
|
||||
export default class KustoCodeEditor { |
||||
codeEditor: monaco.editor.IStandaloneCodeEditor; |
||||
completionItemProvider: monaco.IDisposable; |
||||
signatureHelpProvider: monaco.IDisposable; |
||||
|
||||
splitWithNewLineRegex = /[^\n]+\n?|\n/g; |
||||
newLineRegex = /\r?\n/; |
||||
startsWithKustoPipeRegex = /^\|\s*/g; |
||||
kustoPipeRegexStrict = /^\|\s*$/g; |
||||
|
||||
constructor( |
||||
private containerDiv: any, |
||||
private defaultTimeField: string, |
||||
private getSchema: () => any, |
||||
private config: any |
||||
) {} |
||||
|
||||
initMonaco(scope) { |
||||
const themeName = this.config.bootData.user.lightTheme ? 'grafana-light' : 'vs-dark'; |
||||
|
||||
monaco.editor.defineTheme('grafana-light', { |
||||
base: 'vs', |
||||
inherit: true, |
||||
rules: [ |
||||
{ token: 'comment', foreground: '008000' }, |
||||
{ token: 'variable.predefined', foreground: '800080' }, |
||||
{ token: 'function', foreground: '0000FF' }, |
||||
{ token: 'operator.sql', foreground: 'FF4500' }, |
||||
{ token: 'string', foreground: 'B22222' }, |
||||
{ token: 'operator.scss', foreground: '0000FF' }, |
||||
{ token: 'variable', foreground: 'C71585' }, |
||||
{ token: 'variable.parameter', foreground: '9932CC' }, |
||||
{ token: '', foreground: '000000' }, |
||||
{ token: 'type', foreground: '0000FF' }, |
||||
{ token: 'tag', foreground: '0000FF' }, |
||||
{ token: 'annotation', foreground: '2B91AF' }, |
||||
{ token: 'keyword', foreground: '0000FF' }, |
||||
{ token: 'number', foreground: '191970' }, |
||||
{ token: 'annotation', foreground: '9400D3' }, |
||||
{ token: 'invalid', background: 'cd3131' }, |
||||
], |
||||
colors: { |
||||
'textCodeBlock.background': '#FFFFFF', |
||||
}, |
||||
}); |
||||
|
||||
monaco.languages['kusto'].kustoDefaults.setLanguageSettings({ |
||||
includeControlCommands: true, |
||||
newlineAfterPipe: true, |
||||
useIntellisenseV2: false, |
||||
useSemanticColorization: true, |
||||
}); |
||||
|
||||
this.codeEditor = monaco.editor.create(this.containerDiv, { |
||||
value: scope.content || 'Write your query here', |
||||
language: 'kusto', |
||||
// language: 'go',
|
||||
selectionHighlight: false, |
||||
theme: themeName, |
||||
folding: true, |
||||
lineNumbers: 'off', |
||||
lineHeight: 16, |
||||
suggestFontSize: 13, |
||||
dragAndDrop: false, |
||||
occurrencesHighlight: false, |
||||
minimap: { |
||||
enabled: false, |
||||
}, |
||||
renderIndentGuides: false, |
||||
wordWrap: 'on', |
||||
}); |
||||
this.codeEditor.layout(); |
||||
|
||||
if (monaco.editor.getModels().length === 1) { |
||||
this.completionItemProvider = monaco.languages.registerCompletionItemProvider('kusto', { |
||||
triggerCharacters: ['.', ' '], |
||||
provideCompletionItems: this.getCompletionItems.bind(this), |
||||
}); |
||||
|
||||
this.signatureHelpProvider = monaco.languages.registerSignatureHelpProvider('kusto', { |
||||
signatureHelpTriggerCharacters: ['(', ')'], |
||||
provideSignatureHelp: this.getSignatureHelp.bind(this), |
||||
}); |
||||
} |
||||
|
||||
this.codeEditor.createContextKey('readyToExecute', true); |
||||
|
||||
this.codeEditor.onDidChangeCursorSelection(event => { |
||||
this.onDidChangeCursorSelection(event); |
||||
}); |
||||
|
||||
this.getSchema().then(schema => { |
||||
if (!schema) { |
||||
return; |
||||
} |
||||
|
||||
monaco.languages['kusto'].getKustoWorker().then(workerAccessor => { |
||||
const model = this.codeEditor.getModel(); |
||||
if (!model) { |
||||
return; |
||||
} |
||||
|
||||
workerAccessor(model.uri).then(worker => { |
||||
const dbName = Object.keys(schema.Databases).length > 0 ? Object.keys(schema.Databases)[0] : ''; |
||||
worker.setSchemaFromShowSchema(schema, 'https://help.kusto.windows.net', dbName); |
||||
this.codeEditor.layout(); |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
setOnDidChangeModelContent(listener) { |
||||
this.codeEditor.onDidChangeModelContent(listener); |
||||
} |
||||
|
||||
disposeMonaco() { |
||||
if (this.completionItemProvider) { |
||||
try { |
||||
this.completionItemProvider.dispose(); |
||||
} catch (e) { |
||||
console.error('Failed to dispose the completion item provider.', e); |
||||
} |
||||
} |
||||
if (this.signatureHelpProvider) { |
||||
try { |
||||
this.signatureHelpProvider.dispose(); |
||||
} catch (e) { |
||||
console.error('Failed to dispose the signature help provider.', e); |
||||
} |
||||
} |
||||
if (this.codeEditor) { |
||||
try { |
||||
this.codeEditor.dispose(); |
||||
} catch (e) { |
||||
console.error('Failed to dispose the editor component.', e); |
||||
} |
||||
} |
||||
} |
||||
|
||||
addCommand(keybinding: number, commandFunc: monaco.editor.ICommandHandler) { |
||||
this.codeEditor.addCommand(keybinding, commandFunc, 'readyToExecute'); |
||||
} |
||||
|
||||
getValue() { |
||||
return this.codeEditor.getValue(); |
||||
} |
||||
|
||||
toSuggestionController(srv: monaco.editor.IEditorContribution): SuggestionController { |
||||
return srv as any; |
||||
} |
||||
|
||||
setEditorContent(value) { |
||||
this.codeEditor.setValue(value); |
||||
} |
||||
|
||||
getCompletionItems(model: monaco.editor.IReadOnlyModel, position: monaco.Position) { |
||||
const timeFilterDocs = |
||||
'##### Macro that uses the selected timerange in Grafana to filter the query.\n\n' + |
||||
'- `$__timeFilter()` -> Uses the ' + |
||||
this.defaultTimeField + |
||||
' column\n\n' + |
||||
'- `$__timeFilter(datetimeColumn)` -> Uses the specified datetime column to build the query.'; |
||||
|
||||
const textUntilPosition = model.getValueInRange({ |
||||
startLineNumber: 1, |
||||
startColumn: 1, |
||||
endLineNumber: position.lineNumber, |
||||
endColumn: position.column, |
||||
}); |
||||
|
||||
if (!_.includes(textUntilPosition, '|')) { |
||||
return []; |
||||
} |
||||
|
||||
if (!_.includes(textUntilPosition.toLowerCase(), 'where')) { |
||||
return [ |
||||
{ |
||||
label: 'where $__timeFilter(timeColumn)', |
||||
kind: monaco.languages.CompletionItemKind.Keyword, |
||||
insertText: { |
||||
value: 'where \\$__timeFilter(${0:' + this.defaultTimeField + '})', |
||||
}, |
||||
documentation: { |
||||
value: timeFilterDocs, |
||||
}, |
||||
}, |
||||
]; |
||||
} |
||||
|
||||
if (_.includes(model.getLineContent(position.lineNumber).toLowerCase(), 'where')) { |
||||
return [ |
||||
{ |
||||
label: '$__timeFilter(timeColumn)', |
||||
kind: monaco.languages.CompletionItemKind.Keyword, |
||||
insertText: { |
||||
value: '\\$__timeFilter(${0:' + this.defaultTimeField + '})', |
||||
}, |
||||
documentation: { |
||||
value: timeFilterDocs, |
||||
}, |
||||
}, |
||||
{ |
||||
label: '$__from', |
||||
kind: monaco.languages.CompletionItemKind.Keyword, |
||||
insertText: { |
||||
value: `\\$__from`, |
||||
}, |
||||
documentation: { |
||||
value: |
||||
'Built-in variable that returns the from value of the selected timerange in Grafana.\n\n' + |
||||
'Example: `where ' + |
||||
this.defaultTimeField + |
||||
' > $__from` ', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '$__to', |
||||
kind: monaco.languages.CompletionItemKind.Keyword, |
||||
insertText: { |
||||
value: `\\$__to`, |
||||
}, |
||||
documentation: { |
||||
value: |
||||
'Built-in variable that returns the to value of the selected timerange in Grafana.\n\n' + |
||||
'Example: `where ' + |
||||
this.defaultTimeField + |
||||
' < $__to` ', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '$__interval', |
||||
kind: monaco.languages.CompletionItemKind.Keyword, |
||||
insertText: { |
||||
value: `\\$__interval`, |
||||
}, |
||||
documentation: { |
||||
value: |
||||
'##### Built-in variable that returns an automatic time grain suitable for the current timerange.\n\n' + |
||||
'Used with the bin() function - `bin(' + |
||||
this.defaultTimeField + |
||||
', $__interval)` \n\n' + |
||||
'[Grafana docs](http://docs.grafana.org/reference/templating/#the-interval-variable)', |
||||
}, |
||||
}, |
||||
]; |
||||
} |
||||
|
||||
return []; |
||||
} |
||||
|
||||
getSignatureHelp(model: monaco.editor.IReadOnlyModel, position: monaco.Position, token: monaco.CancellationToken) { |
||||
const textUntilPosition = model.getValueInRange({ |
||||
startLineNumber: position.lineNumber, |
||||
startColumn: position.column - 14, |
||||
endLineNumber: position.lineNumber, |
||||
endColumn: position.column, |
||||
}); |
||||
|
||||
if (textUntilPosition !== '$__timeFilter(') { |
||||
return {} as monaco.languages.SignatureHelp; |
||||
} |
||||
|
||||
const signature: monaco.languages.SignatureHelp = { |
||||
activeParameter: 0, |
||||
activeSignature: 0, |
||||
signatures: [ |
||||
{ |
||||
label: '$__timeFilter(timeColumn)', |
||||
parameters: [ |
||||
{ |
||||
label: 'timeColumn', |
||||
documentation: |
||||
'Default is ' + |
||||
this.defaultTimeField + |
||||
' column. Datetime column to filter data using the selected date range. ', |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
return signature; |
||||
} |
||||
|
||||
onDidChangeCursorSelection(event) { |
||||
if (event.source !== 'modelChange' || event.reason !== monaco.editor.CursorChangeReason.RecoverFromMarkers) { |
||||
return; |
||||
} |
||||
const lastChar = this.getCharAt(event.selection.positionLineNumber, event.selection.positionColumn - 1); |
||||
|
||||
if (lastChar !== ' ') { |
||||
return; |
||||
} |
||||
|
||||
this.triggerSuggestions(); |
||||
} |
||||
|
||||
triggerSuggestions() { |
||||
const suggestController = this.codeEditor.getContribution('editor.contrib.suggestController'); |
||||
if (!suggestController) { |
||||
return; |
||||
} |
||||
|
||||
const convertedController = this.toSuggestionController(suggestController); |
||||
|
||||
convertedController._model.cancel(); |
||||
setTimeout(() => { |
||||
convertedController._model.trigger(true); |
||||
}, 10); |
||||
} |
||||
|
||||
getCharAt(lineNumber: number, column: number) { |
||||
const model = this.codeEditor.getModel(); |
||||
if (model.getLineCount() === 0 || model.getLineCount() < lineNumber) { |
||||
return ''; |
||||
} |
||||
const line = model.getLineContent(lineNumber); |
||||
if (line.length < column || column < 1) { |
||||
return ''; |
||||
} |
||||
return line[column - 1]; |
||||
} |
||||
} |
||||
@ -1,105 +0,0 @@ |
||||
// tslint:disable-next-line:no-reference
|
||||
// ///<reference path="../../../../../../node_modules/monaco-editor/monaco.d.ts" />
|
||||
|
||||
import angular from 'angular'; |
||||
import KustoCodeEditor from './kusto_code_editor'; |
||||
import config from 'app/core/config'; |
||||
|
||||
/** |
||||
* Load monaco code editor and its' dependencies as a separate webpack chunk. |
||||
*/ |
||||
function importMonaco() { |
||||
return import( |
||||
/* webpackChunkName: "monaco" */ |
||||
'./monaco-loader' |
||||
).then(monaco => { |
||||
return monaco; |
||||
}).catch(error => { |
||||
console.error('An error occurred while loading monaco-kusto:\n', error); |
||||
}); |
||||
} |
||||
|
||||
const editorTemplate = `<div id="content" tabindex="0" style="width: 100%; height: 120px"></div>`; |
||||
|
||||
function link(scope, elem, attrs) { |
||||
const containerDiv = elem.find('#content')[0]; |
||||
|
||||
if (!(global as any).monaco) { |
||||
// (global as any).System.import(`./${scope.pluginBaseUrl}/lib/monaco.min.js`).then(() => {
|
||||
importMonaco().then(() => { |
||||
setTimeout(() => { |
||||
initMonaco(containerDiv, scope); |
||||
}, 1); |
||||
}); |
||||
} else { |
||||
setTimeout(() => { |
||||
initMonaco(containerDiv, scope); |
||||
}, 1); |
||||
} |
||||
|
||||
containerDiv.onblur = () => { |
||||
scope.onChange(); |
||||
}; |
||||
|
||||
containerDiv.onkeydown = evt => { |
||||
if (evt.key === 'Escape') { |
||||
evt.stopPropagation(); |
||||
return true; |
||||
} |
||||
|
||||
return undefined; |
||||
}; |
||||
|
||||
function initMonaco(containerDiv, scope) { |
||||
const kustoCodeEditor = new KustoCodeEditor(containerDiv, scope.defaultTimeField, scope.getSchema, config); |
||||
|
||||
kustoCodeEditor.initMonaco(scope); |
||||
|
||||
/* tslint:disable:no-bitwise */ |
||||
kustoCodeEditor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => { |
||||
const newValue = kustoCodeEditor.getValue(); |
||||
scope.content = newValue; |
||||
scope.onChange(); |
||||
}); |
||||
/* tslint:enable:no-bitwise */ |
||||
|
||||
// Sync with outer scope - update editor content if model has been changed from outside of directive.
|
||||
scope.$watch('content', (newValue, oldValue) => { |
||||
const editorValue = kustoCodeEditor.getValue(); |
||||
if (newValue !== editorValue && newValue !== oldValue) { |
||||
scope.$$postDigest(() => { |
||||
kustoCodeEditor.setEditorContent(newValue); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
kustoCodeEditor.setOnDidChangeModelContent(() => { |
||||
scope.$apply(() => { |
||||
const newValue = kustoCodeEditor.getValue(); |
||||
scope.content = newValue; |
||||
}); |
||||
}); |
||||
|
||||
scope.$on('$destroy', () => { |
||||
kustoCodeEditor.disposeMonaco(); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
/** @ngInject */ |
||||
export function kustoMonacoEditorDirective() { |
||||
return { |
||||
restrict: 'E', |
||||
template: editorTemplate, |
||||
scope: { |
||||
content: '=', |
||||
onChange: '&', |
||||
getSchema: '&', |
||||
defaultTimeField: '@', |
||||
pluginBaseUrl: '@', |
||||
}, |
||||
link: link, |
||||
}; |
||||
} |
||||
|
||||
angular.module('grafana.controllers').directive('kustoMonacoEditor', kustoMonacoEditorDirective); |
||||
@ -1,21 +0,0 @@ |
||||
// tslint:disable:no-reference
|
||||
// ///<reference path="../../../../../../node_modules/@alexanderzobnin/monaco-kusto/release/min/monaco.d.ts" />
|
||||
|
||||
// (1) Desired editor features:
|
||||
import "monaco-editor/esm/vs/editor/browser/controller/coreCommands.js"; |
||||
import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js'; |
||||
import 'monaco-editor/esm/vs/editor/contrib/contextmenu/contextmenu.js'; |
||||
import "monaco-editor/esm/vs/editor/contrib/find/findController.js"; |
||||
import 'monaco-editor/esm/vs/editor/contrib/folding/folding.js'; |
||||
import 'monaco-editor/esm/vs/editor/contrib/format/formatActions.js'; |
||||
import 'monaco-editor/esm/vs/editor/contrib/multicursor/multicursor.js'; |
||||
import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; |
||||
import 'monaco-editor/esm/vs/editor/contrib/wordHighlighter/wordHighlighter.js'; |
||||
import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js'; |
||||
import "monaco-editor/esm/vs/editor/editor.api.js"; |
||||
|
||||
// (2) Desired languages:
|
||||
import '@alexanderzobnin/monaco-kusto/release/webpack/bridge.min.js'; |
||||
import '@alexanderzobnin/monaco-kusto/release/webpack/Kusto.JavaScript.Client.min.js'; |
||||
import '@alexanderzobnin/monaco-kusto/release/webpack/Kusto.Language.Bridge.min.js'; |
||||
import '@alexanderzobnin/monaco-kusto/release/webpack/monaco.contribution.min.js'; |
||||
@ -1,122 +0,0 @@ |
||||
const path = require('path'); |
||||
const webpack = require('webpack'); |
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); |
||||
|
||||
module.exports = { |
||||
// output: {
|
||||
// filename: 'monaco.min.js',
|
||||
// path: path.resolve(__dirname, 'dist'),
|
||||
// libraryTarget: 'umd',
|
||||
// library: 'monaco',
|
||||
// globalObject: 'self'
|
||||
// },
|
||||
entry: { |
||||
// monaco: './public/app/plugins/datasource/grafana-azure-monitor-datasource/monaco/monaco-loader.ts',
|
||||
}, |
||||
output: { |
||||
// filename: 'monaco.min.js',
|
||||
// chunkFilename: '[name].bundle.js',
|
||||
globalObject: 'self', |
||||
}, |
||||
resolveLoader: { |
||||
alias: { |
||||
'blob-url-loader': require.resolve('./loaders/blobUrl'), |
||||
'compile-loader': require.resolve('./loaders/compile'), |
||||
}, |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.css$/, |
||||
use: [ 'style-loader', 'css-loader' ] |
||||
}, |
||||
// {
|
||||
// // https://github.com/bridgedotnet/Bridge/issues/3097
|
||||
// test: /bridge\.js$/,
|
||||
// loader: 'regexp-replace-loader',
|
||||
// options: {
|
||||
// match: {
|
||||
// pattern: "globals\\.System\\s=\\s\\{\\};"
|
||||
// },
|
||||
// replaceWith: "$& System = globals.System; "
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// test: /Kusto\.JavaScript\.Client\.js$/,
|
||||
// loader: 'regexp-replace-loader',
|
||||
// options: {
|
||||
// match: {
|
||||
// pattern: '"use strict";'
|
||||
// },
|
||||
// replaceWith: "$& System = globals.System; "
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// test: /Kusto\.Language\.Bridge\.js$/,
|
||||
// loader: 'regexp-replace-loader',
|
||||
// options: {
|
||||
// match: {
|
||||
// pattern: '"use strict";'
|
||||
// },
|
||||
// replaceWith: "$& System = globals.System; "
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// test: /newtonsoft\.json\.js$/,
|
||||
// loader: 'regexp-replace-loader',
|
||||
// options: {
|
||||
// match: {
|
||||
// pattern: '"use strict";'
|
||||
// },
|
||||
// replaceWith: "$& System = globals.System; "
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// test: /monaco\.contribution\.js$/,
|
||||
// loader: 'regexp-replace-loader',
|
||||
// options: {
|
||||
// match: {
|
||||
// pattern: 'vs/language/kusto/kustoMode',
|
||||
// flags: 'g'
|
||||
// },
|
||||
// replaceWith: "./kustoMode"
|
||||
// }
|
||||
// },
|
||||
] |
||||
}, |
||||
optimization: { |
||||
splitChunks: { |
||||
// chunks: 'all',
|
||||
cacheGroups: { |
||||
// monacoContribution: {
|
||||
// test: /(src)|(node_modules(?!\/@kusto))/,
|
||||
// name: 'monaco.contribution',
|
||||
// enforce: false,
|
||||
// // chunks: 'all',
|
||||
// },
|
||||
// bridge: {
|
||||
// test: /bridge/,
|
||||
// name: 'bridge',
|
||||
// chunks: 'all',
|
||||
// },
|
||||
// KustoJavaScriptClient: {
|
||||
// test: /Kusto\.JavaScript\.Client/,
|
||||
// name: 'kusto.javaScript.client',
|
||||
// chunks: 'all',
|
||||
// },
|
||||
// KustoLanguageBridge: {
|
||||
// test: /Kusto\.Language\.Bridge/,
|
||||
// name: 'kusto.language.bridge',
|
||||
// chunks: 'all',
|
||||
// },
|
||||
} |
||||
} |
||||
}, |
||||
plugins: [ |
||||
new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs\/language\/typescript\/lib/), |
||||
// new webpack.optimize.LimitChunkCountPlugin({
|
||||
// maxChunks: 1,
|
||||
// }),
|
||||
// new UglifyJSPlugin()
|
||||
], |
||||
}; |
||||
Loading…
Reference in new issue