root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 235 Packages Projects Releases Wiki Activity

Merge branch 'ace-editor'

This commit is contained in:
Torkel Ödegaard 2017-08-29 15:52:03 +02:00
parent 78ea1ea76e bdb1cfb008
commit dda1cf1a88
19 changed files with 1816 additions and 693 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

210
public/app/core/components/code_editor/code_editor.ts Normal file
View File

@ -0,0 +1,210 @@
/**
* codeEditor directive based on Ace code editor
* https://github.com/ajaxorg/ace
*
* Basic usage:
* <code-editor content="ctrl.target.query" on-change="ctrl.panelCtrl.refresh()"
* data-mode="sql" data-show-gutter>
* </code-editor>
*
* 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
*/
///<reference path="../../../headers/common.d.ts" />
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 = `<div></div>`;
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);

481
public/app/core/components/code_editor/mode-prometheus.js Normal file
View File

@ -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("&nbsp<br>");
}
function convertMarkDownTags(text) {
text = text.replace(/```(.+)```/, "<pre>$1</pre>");
text = text.replace(/`([^`]+)`/, "<code>$1</code>");
return text;
}
function convertToHTML(item) {
var docText = lang.escapeHTML(item.docText);
docText = convertMarkDownTags(wrapText(docText, 40));
return [
"<b>", lang.escapeHTML(item.def), "</b>", "<hr></hr>", docText, "<br>&nbsp"
].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;
});

21
public/app/core/components/code_editor/snippets/prometheus.js Normal file
View File

@ -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";
});

116
public/app/core/components/code_editor/theme-grafana-dark.js Normal file
View File

@ -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 */

1
public/app/core/core.ts
View File

@ -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';

5
public/app/headers/common.d.ts vendored
View File

@ -72,3 +72,8 @@ declare module 'd3' {
var d3: any;
export default d3;
}
declare module 'ace' {
var ace: any;
export default ace;
}

5
public/app/plugins/datasource/mysql/partials/query.editor.html
View File

@ -1,7 +1,8 @@
<query-editor-row query-ctrl="ctrl" can-collapse="false">
<div class="gf-form-inline">
<div class="gf-form-inline">
<div class="gf-form gf-form--grow">
<textarea rows="10" class="gf-form-input" ng-model="ctrl.target.rawSql" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"></textarea>
<code-editor content="ctrl.target.rawSql" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
</code-editor>
</div>
</div>

42
public/app/plugins/datasource/prometheus/completer.ts Normal file
View File

@ -0,0 +1,42 @@
///<reference path="../../../headers/common.d.ts" />
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',
};
}));
});
}
}

152
public/app/plugins/datasource/prometheus/datasource.ts
View File

@ -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);
};
}
}

16
public/app/plugins/datasource/prometheus/partials/query.editor.html
View File

@ -1,7 +1,9 @@
<query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="false">
<div class="gf-form-inline">
<div class="gf-form gf-form--grow">
<textarea rows="3" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 give-focus="ctrl.target.refId == 'A'" ng-model-onblur ng-change="ctrl.refreshMetricData()"></textarea>
<code-editor content="ctrl.target.expr" on-change="ctrl.refreshMetricData()"
get-completer="ctrl.getCompleter()" data-mode="prometheus">
</code-editor>
</div>
</div>
@ -38,17 +40,6 @@
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-26">
<label class="gf-form-label width-8">Metric lookup</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.metric" spellcheck='false' bs-typeahead="ctrl.suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Format as</label>
<div class="gf-form-select-wrapper width-8">
@ -66,4 +57,5 @@
</div>
</div>
</query-editor-row>

27
public/app/plugins/datasource/prometheus/query_ctrl.ts
View File

@ -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';

5
public/app/system.conf.js
View File

@ -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'
}
}
});

1
public/sass/_grafana.scss
View File

@ -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";

79
public/sass/components/_code_editor.scss Normal file
View File

@ -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 <style> tag at the end of <head>, after grafana.css, so !important
// is used for overriding styles with the same CSS specificity.
background-color: $dropdownBackground !important;
color: $dropdownLinkColor !important;
border: 1px solid $dropdownBorder !important;
width: 320px !important;
.ace_scroller {
.ace_selected, .ace_active-line, .ace_line-hover {
color: $dropdownLinkColorHover;
background-color: $dropdownLinkBackgroundHover !important;
}
.ace_line-hover {
border-color: transparent;
}
.ace_completion-highlight {
color: $yellow;
}
.ace_rightAlignedText {
color: $text-muted;
z-index: 0;
}
}
}
$doc-font-size: $font-size-sm;
.ace_tooltip.ace_doc-tooltip {
@include font-family-monospace();
font-size: $doc-font-size;
background-color: $popover-help-bg;
color: $popover-help-color;
background-image: none;
border: 1px solid $dropdownBorder;
padding: 0.5rem 1rem;
hr {
background-color: $popover-help-color;
margin: 0.5rem 0rem;
}
code {
padding: 0px 1px;
margin: 0px;
}
}
.ace_tooltip {
border-radius: 3px;
}

5
public/test/test-main.js
View File

@ -41,6 +41,7 @@
"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,6 +74,10 @@
format: 'global',
exports: 'Mousetrap'
},
'vendor/npm/ace-builds/src-noconflict/ace.js': {
format: 'global',
exports: 'ace'
},
}
});

1
tasks/options/copy.js
View File

@ -19,6 +19,7 @@ module.exports = function(config) {
cwd: './node_modules',
expand: true,
src: [
'ace-builds/src-noconflict/**/*',
'eventemitter3/*.js',
'systemjs/dist/*.js',
'es6-promise/**/*',

5
tasks/options/watch.js
View File

@ -21,7 +21,10 @@ module.exports = function(config, grunt) {
return;
}
gaze(config.srcDir + '/**/*', function(err, watcher) {
gaze([
config.srcDir + '/app/**/*',
config.srcDir + '/sass/**/*',
], function(err, watcher) {
console.log('Gaze watchers setup');

1336
yarn.lock
View File

File diff suppressed because it is too large Load Diff