diff --git a/package.json b/package.json index 4e1574b7ba6..2f4b7ad6707 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ }, "license": "Apache-2.0", "dependencies": { + "ace-builds": "^1.2.8", "eventemitter3": "^2.0.2", "gaze": "^1.1.2", "grunt-jscs": "3.0.1", diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts new file mode 100644 index 00000000000..d2d32d1f46e --- /dev/null +++ b/public/app/core/components/code_editor/code_editor.ts @@ -0,0 +1,210 @@ +/** + * codeEditor directive based on Ace code editor + * https://github.com/ajaxorg/ace + * + * Basic usage: + * + * + * + * Params: + * content: Editor content. + * onChange: Function called on content change (invoked on editor blur, ctrl+enter, not on every change). + * getCompleter: Function returned external completer. Completer is an object implemented getCompletions() method, + * see Prometheus Data Source implementation for details. + * + * Some Ace editor options available via data-* attributes: + * data-mode - Language mode (text, sql, javascript, etc.). Default is 'text'. + * data-theme - Editor theme (eg 'solarized_dark'). + * data-max-lines - Max editor height in lines. Editor grows automatically from 1 to maxLines. + * data-show-gutter - Show gutter (contains line numbers and additional info). + * data-tab-size - Tab size, default is 2. + * data-behaviours-enabled - Specifies whether to use behaviors or not. "Behaviors" in this case is the auto-pairing of + * special characters, like quotation marks, parenthesis, or brackets. + * + * Keybindings: + * Ctrl-Enter (Command-Enter): run onChange() function + */ + +/// +import _ from 'lodash'; +import coreModule from 'app/core/core_module'; +import config from 'app/core/config'; +import ace from 'ace'; + +const ACE_SRC_BASE = "public/vendor/npm/ace-builds/src-noconflict/"; +const DEFAULT_THEME_DARK = "grafana-dark"; +const DEFAULT_THEME_LIGHT = "textmate"; +const DEFAULT_MODE = "text"; +const DEFAULT_MAX_LINES = 10; +const DEFAULT_TAB_SIZE = 2; +const DEFAULT_BEHAVIOURS = true; + +const GRAFANA_MODULES = ['mode-prometheus', 'snippets-prometheus', 'theme-grafana-dark']; +const GRAFANA_MODULE_BASE = "public/app/core/components/code_editor/"; + +// Trick for loading additional modules +function setModuleUrl(moduleType, name) { + let baseUrl = ACE_SRC_BASE; + let aceModeName = `ace/${moduleType}/${name}`; + let moduleName = `${moduleType}-${name}`; + let componentName = `${moduleName}.js`; + + if (_.includes(GRAFANA_MODULES, moduleName)) { + baseUrl = GRAFANA_MODULE_BASE; + } + + if (moduleType === 'snippets') { + componentName = `${moduleType}/${name}.js`; + } + + ace.config.setModuleUrl(aceModeName, baseUrl + componentName); +} + +setModuleUrl("ext", "language_tools"); +setModuleUrl("mode", "text"); +setModuleUrl("snippets", "text"); + +let editorTemplate = `
`; + +function link(scope, elem, attrs) { + let lightTheme = config.bootData.user.lightTheme; + let default_theme = lightTheme ? DEFAULT_THEME_LIGHT : DEFAULT_THEME_DARK; + + // Options + let langMode = attrs.mode || DEFAULT_MODE; + let maxLines = attrs.maxLines || DEFAULT_MAX_LINES; + let showGutter = attrs.showGutter !== undefined; + let theme = attrs.theme || default_theme; + let tabSize = attrs.tabSize || DEFAULT_TAB_SIZE; + let behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIOURS; + + // Initialize editor + let aceElem = elem.get(0); + let codeEditor = ace.edit(aceElem); + let editorSession = codeEditor.getSession(); + + let editorOptions = { + maxLines: maxLines, + showGutter: showGutter, + tabSize: tabSize, + behavioursEnabled: behavioursEnabled, + highlightActiveLine: false, + showPrintMargin: false, + autoScrollEditorIntoView: true // this is needed if editor is inside scrollable page + }; + + // Set options + codeEditor.setOptions(editorOptions); + // disable depreacation warning + codeEditor.$blockScrolling = Infinity; + // Padding hacks + codeEditor.renderer.setScrollMargin(15, 15); + codeEditor.renderer.setPadding(10); + + setThemeMode(theme); + setLangMode(langMode); + setEditorContent(scope.content); + + // Add classes + elem.addClass("gf-code-editor"); + let textarea = elem.find("textarea"); + textarea.addClass('gf-form-input'); + + // Event handlers + editorSession.on('change', (e) => { + scope.$apply(() => { + let newValue = codeEditor.getValue(); + scope.content = newValue; + }); + }); + + // Sync with outer scope - update editor content if model has been changed from outside of directive. + scope.$watch('content', (newValue, oldValue) => { + let editorValue = codeEditor.getValue(); + if (newValue !== editorValue && newValue !== oldValue) { + scope.$$postDigest(function() { + setEditorContent(newValue); + }); + } + }); + + codeEditor.on('blur', () => { + scope.onChange(); + }); + + scope.$on("$destroy", () => { + codeEditor.destroy(); + }); + + // Keybindings + codeEditor.commands.addCommand({ + name: 'executeQuery', + bindKey: {win: 'Ctrl-Enter', mac: 'Command-Enter'}, + exec: () => { + scope.onChange(); + } + }); + + function setLangMode(lang) { + let aceModeName = `ace/mode/${lang}`; + setModuleUrl("mode", lang); + setModuleUrl("snippets", lang); + editorSession.setMode(aceModeName); + + ace.config.loadModule("ace/ext/language_tools", (language_tools) => { + codeEditor.setOptions({ + enableBasicAutocompletion: true, + enableLiveAutocompletion: true, + enableSnippets: true + }); + + console.log('getting completer', lang); + if (scope.getCompleter()) { + // make copy of array as ace seems to share completers array between instances + codeEditor.completers = codeEditor.completers.slice(); + codeEditor.completers.push(scope.getCompleter()); + } + }); + } + + function setThemeMode(theme) { + setModuleUrl("theme", theme); + let themeModule = `ace/theme/${theme}`; + ace.config.loadModule(themeModule, (theme_module) => { + // Check is theme light or dark and fix if needed + let lightTheme = config.bootData.user.lightTheme; + let fixedTheme = theme; + if (lightTheme && theme_module.isDark) { + fixedTheme = DEFAULT_THEME_LIGHT; + } else if (!lightTheme && !theme_module.isDark) { + fixedTheme = DEFAULT_THEME_DARK; + } + setModuleUrl("theme", fixedTheme); + themeModule = `ace/theme/${fixedTheme}`; + codeEditor.setTheme(themeModule); + + elem.addClass("gf-code-editor--theme-loaded"); + }); + } + + function setEditorContent(value) { + codeEditor.setValue(value); + codeEditor.clearSelection(); + } +} + +export function codeEditorDirective() { + return { + restrict: 'E', + template: editorTemplate, + scope: { + content: "=", + onChange: "&", + getCompleter: "&" + }, + link: link + }; +} + +coreModule.directive('codeEditor', codeEditorDirective); diff --git a/public/app/core/components/code_editor/mode-prometheus.js b/public/app/core/components/code_editor/mode-prometheus.js new file mode 100644 index 00000000000..0bed46e755b --- /dev/null +++ b/public/app/core/components/code_editor/mode-prometheus.js @@ -0,0 +1,481 @@ +// jshint ignore: start +// jscs: disable +ace.define("ace/mode/prometheus_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(require, exports, module) { +"use strict"; + +var oop = require("../lib/oop"); +var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules; + +var PrometheusHighlightRules = function() { + var keywords = ( + "by|without|keep_common|offset|bool|and|or|unless|ignoring|on|group_left|group_right|" + + "count|count_values|min|max|avg|sum|stddev|stdvar|bottomk|topk|quantile" + ); + + var builtinConstants = ( + "true|false|null|__name__|job" + ); + + var builtinFunctions = ( + "abs|absent|ceil|changes|clamp_max|clamp_min|count_scalar|day_of_month|day_of_week|days_in_month|delta|deriv|" + "drop_common_labels|exp|floor|histogram_quantile|holt_winters|hour|idelta|increase|irate|label_replace|ln|log2|" + + "log10|minute|month|predict_linear|rate|resets|round|scalar|sort|sort_desc|sqrt|time|vector|year|avg_over_time|" + + "min_over_time|max_over_time|sum_over_time|count_over_time|quantile_over_time|stddev_over_time|stdvar_over_time" + ); + + var keywordMapper = this.createKeywordMapper({ + "support.function": builtinFunctions, + "keyword": keywords, + "constant.language": builtinConstants + }, "identifier", true); + + this.$rules = { + "start" : [ { + token : "string", // single line + regex : /"(?:[^"\\]|\\.)*?"/ + }, { + token : "string", // string + regex : "'.*?'" + }, { + token : "constant.numeric", // float + regex : "[-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b" + }, { + token : "constant.language", // time + regex : "\\d+[smhdwy]" + }, { + token : keywordMapper, + regex : "[a-zA-Z_$][a-zA-Z0-9_$]*\\b" + }, { + token : "keyword.operator", + regex : "\\+|\\-|\\*|\\/|%|\\^|=|==|!=|<=|>=|<|>|=\\~|!\\~" + }, { + token : "paren.lparen", + regex : "[[({]" + }, { + token : "paren.rparen", + regex : "[\\])}]" + }, { + token : "text", + regex : "\\s+" + } ] + }; +}; + +oop.inherits(PrometheusHighlightRules, TextHighlightRules); + +exports.PrometheusHighlightRules = PrometheusHighlightRules; +}); + +ace.define("ace/mode/prometheus_completions",["require","exports","module","ace/token_iterator", "ace/lib/lang"], function(require, exports, module) { +"use strict"; + +var lang = require("../lib/lang"); + +var prometheusKeyWords = [ + "by", "without", "keep_common", "offset", "bool", "and", "or", "unless", "ignoring", "on", "group_left", + "group_right", "count", "count_values", "min", "max", "avg", "sum", "stddev", "stdvar", "bottomk", "topk", "quantile" +]; + +var keyWordsCompletions = prometheusKeyWords.map(function(word) { + return { + caption: word, + value: word, + meta: "keyword", + score: Number.MAX_VALUE + } +}); + +var prometheusFunctions = [ + { + name: 'abs()', value: 'abs', + def: 'abs(v instant-vector)', + docText: 'Returns the input vector with all sample values converted to their absolute value.' + }, + { + name: 'abs()', value: 'abs', + def: 'abs(v instant-vector)', + docText: 'Returns the input vector with all sample values converted to their absolute value.' + }, + { + name: 'absent()', value: 'absent', + def: 'absent(v instant-vector)', + docText: 'Returns an empty vector if the vector passed to it has any elements and a 1-element vector with the value 1 if the vector passed to it has no elements. This is useful for alerting on when no time series exist for a given metric name and label combination.' + }, + { + name: 'ceil()', value: 'ceil', + def: 'ceil(v instant-vector)', + docText: 'Rounds the sample values of all elements in `v` up to the nearest integer.' + }, + { + name: 'changes()', value: 'changes', + def: 'changes(v range-vector)', + docText: 'For each input time series, `changes(v range-vector)` returns the number of times its value has changed within the provided time range as an instant vector.' + }, + { + name: 'clamp_max()', value: 'clamp_max', + def: 'clamp_max(v instant-vector, max scalar)', + docText: 'Clamps the sample values of all elements in `v` to have an upper limit of `max`.' + }, + { + name: 'clamp_min()', value: 'clamp_min', + def: 'clamp_min(v instant-vector, min scalar)', + docText: 'Clamps the sample values of all elements in `v` to have a lower limit of `min`.' + }, + { + name: 'count_scalar()', value: 'count_scalar', + def: 'count_scalar(v instant-vector)', + docText: 'Returns the number of elements in a time series vector as a scalar. This is in contrast to the `count()` aggregation operator, which always returns a vector (an empty one if the input vector is empty) and allows grouping by labels via a `by` clause.' + }, + { + name: 'day_of_month()', value: 'day_of_month', + def: 'day_of_month(v=vector(time()) instant-vector)', + docText: 'Returns the day of the month for each of the given times in UTC. Returned values are from 1 to 31.' + }, + { + name: 'day_of_week()', value: 'day_of_week', + def: 'day_of_week(v=vector(time()) instant-vector)', + docText: 'Returns the day of the week for each of the given times in UTC. Returned values are from 0 to 6, where 0 means Sunday etc.' + }, + { + name: 'days_in_month()', value: 'days_in_month', + def: 'days_in_month(v=vector(time()) instant-vector)', + docText: 'Returns number of days in the month for each of the given times in UTC. Returned values are from 28 to 31.' + }, + { + name: 'delta()', value: 'delta', + def: 'delta(v range-vector)', + docText: 'Calculates the difference between the first and last value of each time series element in a range vector `v`, returning an instant vector with the given deltas and equivalent labels. The delta is extrapolated to cover the full time range as specified in the range vector selector, so that it is possible to get a non-integer result even if the sample values are all integers.' + }, + { + name: 'deriv()', value: 'deriv', + def: 'deriv(v range-vector)', + docText: 'Calculates the per-second derivative of the time series in a range vector `v`, using simple linear regression.' + }, + { + name: 'drop_common_labels()', value: 'drop_common_labels', + def: 'drop_common_labels(instant-vector)', + docText: 'Drops all labels that have the same name and value across all series in the input vector.' + }, + { + name: 'exp()', value: 'exp', + def: 'exp(v instant-vector)', + docText: 'Calculates the exponential function for all elements in `v`.\nSpecial cases are:\n* `Exp(+Inf) = +Inf` \n* `Exp(NaN) = NaN`' + }, + { + name: 'floor()', value: 'floor', + def: 'floor(v instant-vector)', + docText: 'Rounds the sample values of all elements in `v` down to the nearest integer.' + }, + { + name: 'histogram_quantile()', value: 'histogram_quantile', + def: 'histogram_quantile(φ float, b instant-vector)', + docText: 'Calculates the φ-quantile (0 ≤ φ ≤ 1) from the buckets `b` of a histogram. The samples in `b` are the counts of observations in each bucket. Each sample must have a label `le` where the label value denotes the inclusive upper bound of the bucket. (Samples without such a label are silently ignored.) The histogram metric type automatically provides time series with the `_bucket` suffix and the appropriate labels.' + }, + { + name: 'holt_winters()', value: 'holt_winters', + def: 'holt_winters(v range-vector, sf scalar, tf scalar)', + docText: 'Produces a smoothed value for time series based on the range in `v`. The lower the smoothing factor `sf`, the more importance is given to old data. The higher the trend factor `tf`, the more trends in the data is considered. Both `sf` and `tf` must be between 0 and 1.' + }, + { + name: 'hour()', value: 'hour', + def: 'hour(v=vector(time()) instant-vector)', + docText: 'Returns the hour of the day for each of the given times in UTC. Returned values are from 0 to 23.' + }, + { + name: 'idelta()', value: 'idelta', + def: 'idelta(v range-vector)', + docText: 'Calculates the difference between the last two samples in the range vector `v`, returning an instant vector with the given deltas and equivalent labels.' + }, + { + name: 'increase()', value: 'increase', + def: 'increase(v range-vector)', + docText: 'Calculates the increase in the time series in the range vector. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for. The increase is extrapolated to cover the full time range as specified in the range vector selector, so that it is possible to get a non-integer result even if a counter increases only by integer increments.' + }, + { + name: 'irate()', value: 'irate', + def: 'irate(v range-vector)', + docText: 'Calculates the per-second instant rate of increase of the time series in the range vector. This is based on the last two data points. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for.' + }, + { + name: 'label_replace()', value: 'label_replace', + def: 'label_replace(v instant-vector, dst_label string, replacement string, src_label string, regex string)', + docText: 'For each timeseries in `v`, `label_replace(v instant-vector, dst_label string, replacement string, src_label string, regex string)` matches the regular expression `regex` against the label `src_label`. If it matches, then the timeseries is returned with the label `dst_label` replaced by the expansion of `replacement`. `$1` is replaced with the first matching subgroup, `$2` with the second etc. If the regular expression doesn\'t match then the timeseries is returned unchanged.' + }, + { + name: 'ln()', value: 'ln', + def: 'ln(v instant-vector)', + docText: 'calculates the natural logarithm for all elements in `v`.\nSpecial cases are:\n * `ln(+Inf) = +Inf`\n * `ln(0) = -Inf`\n * `ln(x < 0) = NaN`\n * `ln(NaN) = NaN`' + }, + { + name: 'log2()', value: 'log2', + def: 'log2(v instant-vector)', + docText: 'Calculates the binary logarithm for all elements in `v`. The special cases are equivalent to those in `ln`.' + }, + { + name: 'log10()', value: 'log10', + def: 'log10(v instant-vector)', + docText: 'Calculates the decimal logarithm for all elements in `v`. The special cases are equivalent to those in `ln`.' + }, + { + name: 'minute()', value: 'minute', + def: 'minute(v=vector(time()) instant-vector)', + docText: 'Returns the minute of the hour for each of the given times in UTC. Returned values are from 0 to 59.' + }, + { + name: 'month()', value: 'month', + def: 'month(v=vector(time()) instant-vector)', + docText: 'Returns the month of the year for each of the given times in UTC. Returned values are from 1 to 12, where 1 means January etc.' + }, + { + name: 'predict_linear()', value: 'predict_linear', + def: 'predict_linear(v range-vector, t scalar)', + docText: 'Predicts the value of time series `t` seconds from now, based on the range vector `v`, using simple linear regression.' + }, + { + name: 'rate()', value: 'rate', + def: 'rate(v range-vector)', + docText: "Calculates the per-second average rate of increase of the time series in the range vector. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for. Also, the calculation extrapolates to the ends of the time range, allowing for missed scrapes or imperfect alignment of scrape cycles with the range's time period." + }, + { + name: 'resets()', value: 'resets', + def: 'resets(v range-vector)', + docText: 'For each input time series, `resets(v range-vector)` returns the number of counter resets within the provided time range as an instant vector. Any decrease in the value between two consecutive samples is interpreted as a counter reset.' + }, + { + name: 'round()', value: 'round', + def: 'round(v instant-vector, to_nearest=1 scalar)', + docText: 'Rounds the sample values of all elements in `v` to the nearest integer. Ties are resolved by rounding up. The optional `to_nearest` argument allows specifying the nearest multiple to which the sample values should be rounded. This multiple may also be a fraction.' + }, + { + name: 'scalar()', value: 'scalar', + def: 'scalar(v instant-vector)', + docText: 'Given a single-element input vector, `scalar(v instant-vector)` returns the sample value of that single element as a scalar. If the input vector does not have exactly one element, `scalar` will return `NaN`.' + }, + { + name: 'sort()', value: 'sort', + def: 'sort(v instant-vector)', + docText: 'Returns vector elements sorted by their sample values, in ascending order.' + }, + { + name: 'sort_desc()', value: 'sort_desc', + def: 'sort_desc(v instant-vector)', + docText: 'Returns vector elements sorted by their sample values, in descending order.' + }, + { + name: 'sqrt()', value: 'sqrt', + def: 'sqrt(v instant-vector)', + docText: 'Calculates the square root of all elements in `v`.' + }, + { + name: 'time()', value: 'time', + def: 'time()', + docText: 'Returns the number of seconds since January 1, 1970 UTC. Note that this does not actually return the current time, but the time at which the expression is to be evaluated.' + }, + { + name: 'vector()', value: 'vector', + def: 'vector(s scalar)', + docText: 'Returns the scalar `s` as a vector with no labels.' + }, + { + name: 'year()', value: 'year', + def: 'year(v=vector(time()) instant-vector)', + docText: 'Returns the year for each of the given times in UTC.' + }, + { + name: 'avg_over_time()', value: 'avg_over_time', + def: 'avg_over_time(range-vector)', + docText: 'The average value of all points in the specified interval.' + }, + { + name: 'min_over_time()', value: 'min_over_time', + def: 'min_over_time(range-vector)', + docText: 'The minimum value of all points in the specified interval.' + }, + { + name: 'max_over_time()', value: 'max_over_time', + def: 'max_over_time(range-vector)', + docText: 'The maximum value of all points in the specified interval.' + }, + { + name: 'sum_over_time()', value: 'sum_over_time', + def: 'sum_over_time(range-vector)', + docText: 'The sum of all values in the specified interval.' + }, + { + name: 'count_over_time()', value: 'count_over_time', + def: 'count_over_time(range-vector)', + docText: 'The count of all values in the specified interval.' + }, + { + name: 'quantile_over_time()', value: 'quantile_over_time', + def: 'quantile_over_time(scalar, range-vector)', + docText: 'The φ-quantile (0 ≤ φ ≤ 1) of the values in the specified interval.' + }, + { + name: 'stddev_over_time()', value: 'stddev_over_time', + def: 'stddev_over_time(range-vector)', + docText: 'The population standard deviation of the values in the specified interval.' + }, + { + name: 'stdvar_over_time()', value: 'stdvar_over_time', + def: 'stdvar_over_time(range-vector)', + docText: 'The population standard variance of the values in the specified interval.' + }, +]; + +function wrapText(str, len) { + len = len || 60; + var lines = []; + var space_index = 0; + var line_start = 0; + var next_line_end = len; + var line = ""; + for (var i = 0; i < str.length; i++) { + if (str[i] === ' ') { + space_index = i; + } else if (i >= next_line_end && space_index != 0) { + line = str.slice(line_start, space_index); + lines.push(line); + line_start = space_index + 1; + next_line_end = i + len; + space_index = 0; + } + } + line = str.slice(line_start); + lines.push(line); + return lines.join(" 
"); +} + +function convertMarkDownTags(text) { + text = text.replace(/```(.+)```/, "
$1
"); + text = text.replace(/`([^`]+)`/, "$1"); + return text; +} + +function convertToHTML(item) { + var docText = lang.escapeHTML(item.docText); + docText = convertMarkDownTags(wrapText(docText, 40)); + return [ + "", lang.escapeHTML(item.def), "", "
", docText, "
 " + ].join(""); +} + +var functionsCompletions = prometheusFunctions.map(function(item) { + return { + caption: item.name, + value: item.value, + docHTML: convertToHTML(item), + meta: "function", + score: Number.MAX_VALUE + }; +}); + +var PrometheusCompletions = function() {}; + +(function() { + this.getCompletions = function(state, session, pos, prefix, callback) { + var completions = keyWordsCompletions.concat(functionsCompletions); + callback(null, completions); + }; + +}).call(PrometheusCompletions.prototype); + +exports.PrometheusCompletions = PrometheusCompletions; +}); + +ace.define("ace/mode/behaviour/prometheus",["require","exports","module","ace/lib/oop","ace/mode/behaviour","ace/mode/behaviour/cstyle","ace/token_iterator"], function(require, exports, module) { +"use strict"; + +var oop = require("../../lib/oop"); +var Behaviour = require("../behaviour").Behaviour; +var CstyleBehaviour = require("./cstyle").CstyleBehaviour; +var TokenIterator = require("../../token_iterator").TokenIterator; + +function getWrapped(selection, selected, opening, closing) { + var rowDiff = selection.end.row - selection.start.row; + return { + text: opening + selected + closing, + selection: [ + 0, + selection.start.column + 1, + rowDiff, + selection.end.column + (rowDiff ? 0 : 1) + ] + }; +}; + +var PrometheusBehaviour = function () { + this.inherit(CstyleBehaviour); + + // Rewrite default CstyleBehaviour for {} braces + this.add("braces", "insertion", function(state, action, editor, session, text) { + if (text == '{') { + var selection = editor.getSelectionRange(); + var selected = session.doc.getTextRange(selection); + if (selected !== "" && editor.getWrapBehavioursEnabled()) { + return getWrapped(selection, selected, '{', '}'); + } else if (CstyleBehaviour.isSaneInsertion(editor, session)) { + return { + text: '{}', + selection: [1, 1] + }; + } + } else if (text == '}') { + var cursor = editor.getCursorPosition(); + var line = session.doc.getLine(cursor.row); + var rightChar = line.substring(cursor.column, cursor.column + 1); + if (rightChar == '}') { + var matching = session.$findOpeningBracket('}', {column: cursor.column + 1, row: cursor.row}); + if (matching !== null && CstyleBehaviour.isAutoInsertedClosing(cursor, line, text)) { + return { + text: '', + selection: [1, 1] + }; + } + } + } + }); + + this.add("braces", "deletion", function(state, action, editor, session, range) { + var selected = session.doc.getTextRange(range); + if (!range.isMultiLine() && selected == '{') { + var line = session.doc.getLine(range.start.row); + var rightChar = line.substring(range.start.column + 1, range.start.column + 2); + if (rightChar == '}') { + range.end.column++; + return range; + } + } + }); + +} +oop.inherits(PrometheusBehaviour, CstyleBehaviour); + +exports.PrometheusBehaviour = PrometheusBehaviour; +}); + +ace.define("ace/mode/prometheus",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/prometheus_highlight_rules"], function(require, exports, module) { +"use strict"; + +var oop = require("../lib/oop"); +var TextMode = require("./text").Mode; +var PrometheusHighlightRules = require("./prometheus_highlight_rules").PrometheusHighlightRules; +var PrometheusCompletions = require("./prometheus_completions").PrometheusCompletions; +var PrometheusBehaviour = require("./behaviour/prometheus").PrometheusBehaviour; + +var Mode = function() { + this.HighlightRules = PrometheusHighlightRules; + this.$behaviour = new PrometheusBehaviour(); + this.$completer = new PrometheusCompletions(); + // replace keyWordCompleter + this.completer = this.$completer; +}; +oop.inherits(Mode, TextMode); + +(function() { + + this.$id = "ace/mode/prometheus"; +}).call(Mode.prototype); + +exports.Mode = Mode; + +}); diff --git a/public/app/core/components/code_editor/snippets/prometheus.js b/public/app/core/components/code_editor/snippets/prometheus.js new file mode 100644 index 00000000000..eaaef482932 --- /dev/null +++ b/public/app/core/components/code_editor/snippets/prometheus.js @@ -0,0 +1,21 @@ +// jshint ignore: start +// jscs: disable +ace.define("ace/snippets/prometheus",["require","exports","module"], function(require, exports, module) { +"use strict"; + +// exports.snippetText = "# rate\n\ +// snippet r\n\ +// rate(${1:metric}[${2:range}])\n\ +// "; + +exports.snippets = [ + { + "content": "rate(${1:metric}[${2:range}])", + "name": "rate()", + "scope": "prometheus", + "tabTrigger": "r" + } +]; + +exports.scope = "prometheus"; +}); diff --git a/public/app/core/components/code_editor/theme-grafana-dark.js b/public/app/core/components/code_editor/theme-grafana-dark.js new file mode 100644 index 00000000000..621ec2c5efb --- /dev/null +++ b/public/app/core/components/code_editor/theme-grafana-dark.js @@ -0,0 +1,116 @@ +/* jshint ignore:start */ + +ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"], function(require, exports, module) { + "use strict"; + + exports.isDark = true; + exports.cssClass = "gf-code-dark"; + exports.cssText = ".gf-code-dark .ace_gutter {\ + background: #2f3129;\ + color: #8f908a\ + }\ + .gf-code-dark .ace_print-margin {\ + width: 1px;\ + background: #555651\ + }\ + .gf-code-dark {\ + background-color: #111;\ + color: #e0e0e0\ + }\ + .gf-code-dark .ace_cursor {\ + color: #f8f8f0\ + }\ + .gf-code-dark .ace_marker-layer .ace_selection {\ + background: #49483e\ + }\ + .gf-code-dark.ace_multiselect .ace_selection.ace_start {\ + box-shadow: 0 0 3px 0px #272822;\ + }\ + .gf-code-dark .ace_marker-layer .ace_step {\ + background: rgb(102, 82, 0)\ + }\ + .gf-code-dark .ace_marker-layer .ace_bracket {\ + margin: -1px 0 0 -1px;\ + border: 1px solid #49483e\ + }\ + .gf-code-dark .ace_marker-layer .ace_active-line {\ + background: #202020\ + }\ + .gf-code-dark .ace_gutter-active-line {\ + background-color: #272727\ + }\ + .gf-code-dark .ace_marker-layer .ace_selected-word {\ + border: 1px solid #49483e\ + }\ + .gf-code-dark .ace_invisible {\ + color: #52524d\ + }\ + .gf-code-dark .ace_entity.ace_name.ace_tag,\ + .gf-code-dark .ace_keyword,\ + .gf-code-dark .ace_meta.ace_tag,\ + .gf-code-dark .ace_storage {\ + color: #66d9ef\ + }\ + .gf-code-dark .ace_punctuation,\ + .gf-code-dark .ace_punctuation.ace_tag {\ + color: #fff\ + }\ + .gf-code-dark .ace_constant.ace_character,\ + .gf-code-dark .ace_constant.ace_language,\ + .gf-code-dark .ace_constant.ace_numeric,\ + .gf-code-dark .ace_constant.ace_other {\ + color: #fe85fc\ + }\ + .gf-code-dark .ace_invalid {\ + color: #f8f8f0;\ + background-color: #f92672\ + }\ + .gf-code-dark .ace_invalid.ace_deprecated {\ + color: #f8f8f0;\ + background-color: #ae81ff\ + }\ + .gf-code-dark .ace_support.ace_constant,\ + .gf-code-dark .ace_support.ace_function {\ + color: #59e6e3\ + }\ + .gf-code-dark .ace_fold {\ + background-color: #a6e22e;\ + border-color: #f8f8f2\ + }\ + .gf-code-dark .ace_storage.ace_type,\ + .gf-code-dark .ace_support.ace_class,\ + .gf-code-dark .ace_support.ace_type {\ + font-style: italic;\ + color: #66d9ef\ + }\ + .gf-code-dark .ace_entity.ace_name.ace_function,\ + .gf-code-dark .ace_entity.ace_other,\ + .gf-code-dark .ace_entity.ace_other.ace_attribute-name,\ + .gf-code-dark .ace_variable {\ + color: #a6e22e\ + }\ + .gf-code-dark .ace_variable.ace_parameter {\ + font-style: italic;\ + color: #fd971f\ + }\ + .gf-code-dark .ace_string {\ + color: #74e680\ + }\ + .gf-code-dark .ace_paren {\ + color: #f0a842\ + }\ + .gf-code-dark .ace_operator {\ + color: #FFF\ + }\ + .gf-code-dark .ace_comment {\ + color: #75715e\ + }\ + .gf-code-dark .ace_indent-guide {\ + background: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaccayaaaczgbynaaaaekleqvqimwpq0fd0zxbzd/wpaajvaoxesgneaaaaaelftksuqmcc) right repeat-y\ + }"; + + var dom = require("../lib/dom"); + dom.importCssString(exports.cssText, exports.cssClass); +}); + +/* jshint ignore:end */ diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 3f7867f41fa..f7ebb614d2a 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -19,6 +19,7 @@ import "./directives/diff-view"; import './jquery_extended'; import './partials'; import './components/jsontree/jsontree'; +import './components/code_editor/code_editor'; import {grafanaAppDirective} from './components/grafana_app'; import {sideMenuDirective} from './components/sidemenu/sidemenu'; diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index 9ea5e96654d..84e46c3e9e4 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -72,3 +72,8 @@ declare module 'd3' { var d3: any; export default d3; } + +declare module 'ace' { + var ace: any; + export default ace; +} diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html index 32c3b097be3..15b18cbb988 100644 --- a/public/app/plugins/datasource/mysql/partials/query.editor.html +++ b/public/app/plugins/datasource/mysql/partials/query.editor.html @@ -1,7 +1,8 @@ -
+
- + +
diff --git a/public/app/plugins/datasource/prometheus/completer.ts b/public/app/plugins/datasource/prometheus/completer.ts new file mode 100644 index 00000000000..b7bf60abe02 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/completer.ts @@ -0,0 +1,42 @@ +/// + +import {PrometheusDatasource} from "./datasource"; + +export class PromCompleter { + identifierRegexps = [/[\[\]a-zA-Z_0-9=]/]; + + constructor(private datasource: PrometheusDatasource) { + } + + getCompletions(editor, session, pos, prefix, callback) { + if (prefix === '[') { + var vectors = []; + for (let unit of ['s', 'm', 'h']) { + for (let value of [1,5,10,30]) { + vectors.push({caption: value+unit, value: '['+value+unit, meta: 'range vector'}); + } + } + callback(null, vectors); + return; + } + + var query = prefix; + var line = editor.session.getLine(pos.row); + + return this.datasource.performSuggestQuery(query).then(metricNames => { + callback(null, metricNames.map(name => { + let value = name; + if (prefix === '(') { + value = '(' + name; + } + + return { + caption: name, + value: value, + meta: 'metric', + }; + })); + }); + } + +} diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 9e416de44c7..fbe726928dd 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -11,18 +11,37 @@ import TableModel from 'app/core/table_model'; var durationSplitRegexp = /(\d+)(ms|s|m|h|d|w|M|y)/; -/** @ngInject */ -export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateSrv, timeSrv) { - this.type = 'prometheus'; - this.editorSrc = 'app/features/prometheus/partials/query.editor.html'; - this.name = instanceSettings.name; - this.supportMetrics = true; - this.url = instanceSettings.url; - this.directUrl = instanceSettings.directUrl; - this.basicAuth = instanceSettings.basicAuth; - this.withCredentials = instanceSettings.withCredentials; +function prometheusSpecialRegexEscape(value) { + return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); +} - this._request = function(method, url, requestId) { +export class PrometheusDatasource { + type: string; + editorSrc: string; + name: string; + supportMetrics: boolean; + url: string; + directUrl: string; + basicAuth: any; + withCredentials: any; + + /** @ngInject */ + constructor(instanceSettings, + private $q, + private backendSrv, + private templateSrv, + private timeSrv) { + this.type = 'prometheus'; + this.editorSrc = 'app/features/prometheus/partials/query.editor.html'; + this.name = instanceSettings.name; + this.supportMetrics = true; + this.url = instanceSettings.url; + this.directUrl = instanceSettings.directUrl; + this.basicAuth = instanceSettings.basicAuth; + this.withCredentials = instanceSettings.withCredentials; + } + + _request(method, url, requestId?) { var options: any = { url: this.url + url, method: method, @@ -32,20 +51,17 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS if (this.basicAuth || this.withCredentials) { options.withCredentials = true; } + if (this.basicAuth) { options.headers = { "Authorization": this.basicAuth }; } - return backendSrv.datasourceRequest(options); - }; - - function prometheusSpecialRegexEscape(value) { - return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); + return this.backendSrv.datasourceRequest(options); } - this.interpolateQueryExpr = function(value, variable, defaultFormatFn) { + interpolateQueryExpr(value, variable, defaultFormatFn) { // if no multi or include all do not regexEscape if (!variable.multi && !variable.includeAll) { return value; @@ -57,14 +73,13 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS var escapedValues = _.map(value, prometheusSpecialRegexEscape); return escapedValues.join('|'); - }; + } - this.targetContainsTemplate = function(target) { - return templateSrv.variableExists(target.expr); - }; + targetContainsTemplate(target) { + return this.templateSrv.variableExists(target.expr); + } - // Called once per panel (graph) - this.query = function(options) { + query(options) { var self = this; var start = this.getPrometheusTime(options.range.from, false); var end = this.getPrometheusTime(options.range.to, true); @@ -82,10 +97,10 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS activeTargets.push(target); var query: any = {}; - query.expr = templateSrv.replace(target.expr, options.scopedVars, self.interpolateQueryExpr); + query.expr = this.templateSrv.replace(target.expr, options.scopedVars, self.interpolateQueryExpr); query.requestId = options.panelId + target.refId; - var interval = templateSrv.replace(target.interval, options.scopedVars) || options.interval; + var interval = this.templateSrv.replace(target.interval, options.scopedVars) || options.interval; var intervalFactor = target.intervalFactor || 1; target.step = query.step = this.calculateInterval(interval, intervalFactor); var range = Math.ceil(end - start); @@ -95,14 +110,14 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS // No valid targets, return the empty result to save a round trip. if (_.isEmpty(queries)) { - return $q.when({ data: [] }); + return this.$q.when({ data: [] }); } var allQueryPromise = _.map(queries, query => { return this.performTimeSeriesQuery(query, start, end); }); - return $q.all(allQueryPromise).then(responseList => { + return this.$q.all(allQueryPromise).then(responseList => { var result = []; var index = 0; @@ -122,27 +137,27 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return { data: result }; }); - }; + } - this.adjustStep = function(step, autoStep, range) { + adjustStep(step, autoStep, range) { // Prometheus drop query if range/step > 11000 // calibrate step if it is too big if (step !== 0 && range / step > 11000) { step = Math.ceil(range / 11000); } return Math.max(step, autoStep); - }; + } - this.performTimeSeriesQuery = function(query, start, end) { + performTimeSeriesQuery(query, start, end) { if (start > end) { throw { message: 'Invalid time range' }; } var url = '/api/v1/query_range?query=' + encodeURIComponent(query.expr) + '&start=' + start + '&end=' + end + '&step=' + query.step; return this._request('GET', url, query.requestId); - }; + } - this.performSuggestQuery = function(query) { + performSuggestQuery(query) { var url = '/api/v1/label/__name__/values'; return this._request('GET', url).then(function(result) { @@ -150,41 +165,30 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return metricName.indexOf(query) !== 1; }); }); - }; + } - this.metricFindQuery = function(query) { - if (!query) { return $q.when([]); } + metricFindQuery(query) { + if (!query) { return this.$q.when([]); } - var interpolated; - try { - interpolated = templateSrv.replace(query, {}, this.interpolateQueryExpr); - } catch (err) { - return $q.reject(err); - } - - var metricFindQuery = new PrometheusMetricFindQuery(this, interpolated, timeSrv); + let interpolated = this.templateSrv.replace(query, {}, this.interpolateQueryExpr); + var metricFindQuery = new PrometheusMetricFindQuery(this, interpolated, this.timeSrv); return metricFindQuery.process(); - }; + } - this.annotationQuery = function(options) { + annotationQuery(options) { var annotation = options.annotation; var expr = annotation.expr || ''; var tagKeys = annotation.tagKeys || ''; var titleFormat = annotation.titleFormat || ''; var textFormat = annotation.textFormat || ''; - if (!expr) { return $q.when([]); } + if (!expr) { return this.$q.when([]); } - var interpolated; - try { - interpolated = templateSrv.replace(expr, {}, this.interpolateQueryExpr); - } catch (err) { - return $q.reject(err); - } + var interpolated = this.templateSrv.replace(expr, {}, this.interpolateQueryExpr); var step = '60s'; if (annotation.step) { - step = templateSrv.replace(annotation.step); + step = this.templateSrv.replace(annotation.step); } var start = this.getPrometheusTime(options.range.from, false); @@ -222,19 +226,19 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return eventList; }); - }; + } - this.testDatasource = function() { + testDatasource() { return this.metricFindQuery('metrics(.*)').then(function() { return { status: 'success', message: 'Data source is working', title: 'Success' }; }); - }; + } - this.calculateInterval = function(interval, intervalFactor) { + calculateInterval(interval, intervalFactor) { return Math.ceil(this.intervalSeconds(interval) * intervalFactor); - }; + } - this.intervalSeconds = function(interval) { + intervalSeconds(interval) { var m = interval.match(durationSplitRegexp); var dur = moment.duration(parseInt(m[1]), m[2]); var sec = dur.asSeconds(); @@ -243,9 +247,9 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } return sec; - }; + } - this.transformMetricData = function(md, options, start, end) { + transformMetricData(md, options, start, end) { var dps = [], metricLabel = null; @@ -273,9 +277,9 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } return { target: metricLabel, datapoints: dps }; - }; + } - this.transformMetricDataToTable = function(md) { + transformMetricDataToTable(md) { var table = new TableModel(); var i, j; var metricLabels = {}; @@ -325,17 +329,17 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS }); return table; - }; + } - this.createMetricLabel = function(labelData, options) { + createMetricLabel(labelData, options) { if (_.isUndefined(options) || _.isEmpty(options.legendFormat)) { return this.getOriginalMetricName(labelData); } - return this.renderTemplate(templateSrv.replace(options.legendFormat), labelData) || '{}'; - }; + return this.renderTemplate(this.templateSrv.replace(options.legendFormat), labelData) || '{}'; + } - this.renderTemplate = function(aliasPattern, aliasData) { + renderTemplate(aliasPattern, aliasData) { var aliasRegex = /\{\{\s*(.+?)\s*\}\}/g; return aliasPattern.replace(aliasRegex, function(match, g1) { if (aliasData[g1]) { @@ -343,21 +347,21 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } return g1; }); - }; + } - this.getOriginalMetricName = function(labelData) { + getOriginalMetricName(labelData) { var metricName = labelData.__name__ || ''; delete labelData.__name__; var labelPart = _.map(_.toPairs(labelData), function(label) { return label[0] + '="' + label[1] + '"'; }).join(','); return metricName + '{' + labelPart + '}'; - }; + } - this.getPrometheusTime = function(date, roundUp) { + getPrometheusTime(date, roundUp) { if (_.isString(date)) { date = dateMath.parse(date, roundUp); } return Math.ceil(date.valueOf() / 1000); - }; + } } diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index 35c6af1280b..5140c9e7bbd 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -1,7 +1,9 @@
- + +
@@ -38,17 +40,6 @@
-
-
-
- - -
-
- - -
-
@@ -66,4 +57,5 @@
+ diff --git a/public/app/plugins/datasource/prometheus/query_ctrl.ts b/public/app/plugins/datasource/prometheus/query_ctrl.ts index 7d94a006998..17a564d0b46 100644 --- a/public/app/plugins/datasource/prometheus/query_ctrl.ts +++ b/public/app/plugins/datasource/prometheus/query_ctrl.ts @@ -6,6 +6,7 @@ import moment from 'moment'; import * as dateMath from 'app/core/utils/datemath'; import {QueryCtrl} from 'app/plugins/sdk'; +import {PromCompleter} from './completer'; class PrometheusQueryCtrl extends QueryCtrl { static templateUrl = 'partials/query.editor.html'; @@ -15,6 +16,7 @@ class PrometheusQueryCtrl extends QueryCtrl { formats: any; oldTarget: any; suggestMetrics: any; + getMetricsAutocomplete: any; linkToPrometheus: any; /** @ngInject */ @@ -36,24 +38,19 @@ class PrometheusQueryCtrl extends QueryCtrl { {text: 'Table', value: 'table'}, ]; - $scope.$on('typeahead-updated', () => { - this.$scope.$apply(() => { - this.target.expr += this.target.metric; - this.metric = ''; - this.refreshMetricData(); - }); - }); - - // called from typeahead so need this - // here in order to ensure this ref - this.suggestMetrics = (query, callback) => { - console.log(this); - this.datasource.performSuggestQuery(query).then(callback); - }; - this.updateLink(); } + getCompleter(query) { + return new PromCompleter(this.datasource); + // console.log('getquery); + // return this.datasource.performSuggestQuery(query).then(res => { + // return res.map(item => { + // return {word: item, type: 'metric'}; + // }); + // }); + } + getDefaultFormat() { if (this.panelCtrl.panel.type === 'table') { return 'table'; diff --git a/public/app/system.conf.js b/public/app/system.conf.js index 816cba4fb42..a162b52291d 100644 --- a/public/app/system.conf.js +++ b/public/app/system.conf.js @@ -33,6 +33,7 @@ System.config({ "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge", "d3": "vendor/d3/d3.js", "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes", + "ace": "vendor/npm/ace-builds/src-noconflict/ace" }, packages: { @@ -73,5 +74,9 @@ System.config({ format: 'global', exports: 'Mousetrap' }, + 'vendor/npm/ace-builds/src-noconflict/ace.js': { + format: 'global', + exports: 'ace' + } } }); diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index c6155da946c..81ed198be73 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -77,6 +77,7 @@ @import "components/row.scss"; @import "components/json_explorer.scss"; @import "components/collapse_box.scss"; +@import "components/code_editor.scss"; // PAGES @import "pages/login"; diff --git a/public/sass/components/_code_editor.scss b/public/sass/components/_code_editor.scss new file mode 100644 index 00000000000..0f03e686546 --- /dev/null +++ b/public/sass/components/_code_editor.scss @@ -0,0 +1,79 @@ +.gf-code-editor { + min-height: 2.60rem; + min-width: 20rem; + flex-grow: 1; + margin-right: 0.25rem; + visibility: hidden; + + &.ace_editor { + @include font-family-monospace(); + font-size: 1rem; + min-height: 2.60rem; + + @include border-radius($input-border-radius-sm); + border: $input-btn-border-width solid $input-border-color; + } + + &--theme-loaded { + visibility: visible; + } +} + +.ace_editor.ace_autocomplete { + @include font-family-monospace(); + font-size: 1rem; + + // Ace editor adds