diff --git a/public/app/containers/Explore/Logs.tsx b/public/app/containers/Explore/Logs.tsx
index 10d7827a9a3..ae2d5e2daa6 100644
--- a/public/app/containers/Explore/Logs.tsx
+++ b/public/app/containers/Explore/Logs.tsx
@@ -5,6 +5,7 @@ import { LogsModel, LogRow } from 'app/core/logs_model';
interface LogsProps {
className?: string;
data: LogsModel;
+ loading: boolean;
}
const EXAMPLE_QUERY = '{job="default/prometheus"}';
diff --git a/public/app/containers/Explore/PromQueryField.jest.tsx b/public/app/containers/Explore/PromQueryField.jest.tsx
deleted file mode 100644
index 8d2903cb2c2..00000000000
--- a/public/app/containers/Explore/PromQueryField.jest.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-import PromQueryField from './PromQueryField';
-
-describe('PromQueryField typeahead handling', () => {
- const defaultProps = {
- request: () => ({ data: { data: [] } }),
- };
-
- it('returns default suggestions on emtpty context', () => {
- const instance = shallow(
).instance() as PromQueryField;
- const result = instance.getTypeahead({ text: '', prefix: '', wrapperClasses: [] });
- expect(result.context).toBeUndefined();
- expect(result.refresher).toBeUndefined();
- expect(result.suggestions.length).toEqual(2);
- });
-
- describe('range suggestions', () => {
- it('returns range suggestions in range context', () => {
- const instance = shallow(
).instance() as PromQueryField;
- const result = instance.getTypeahead({ text: '1', prefix: '1', wrapperClasses: ['context-range'] });
- expect(result.context).toBe('context-range');
- expect(result.refresher).toBeUndefined();
- expect(result.suggestions).toEqual([
- {
- items: [{ label: '1m' }, { label: '5m' }, { label: '10m' }, { label: '30m' }, { label: '1h' }],
- label: 'Range vector',
- },
- ]);
- });
- });
-
- describe('metric suggestions', () => {
- it('returns metrics suggestions by default', () => {
- const instance = shallow(
-
- ).instance() as PromQueryField;
- const result = instance.getTypeahead({ text: 'a', prefix: 'a', wrapperClasses: [] });
- expect(result.context).toBeUndefined();
- expect(result.refresher).toBeUndefined();
- expect(result.suggestions.length).toEqual(2);
- });
-
- it('returns default suggestions after a binary operator', () => {
- const instance = shallow(
-
- ).instance() as PromQueryField;
- const result = instance.getTypeahead({ text: '*', prefix: '', wrapperClasses: [] });
- expect(result.context).toBeUndefined();
- expect(result.refresher).toBeUndefined();
- expect(result.suggestions.length).toEqual(2);
- });
- });
-
- describe('label suggestions', () => {
- it('returns default label suggestions on label context and no metric', () => {
- const instance = shallow(
).instance() as PromQueryField;
- const result = instance.getTypeahead({ text: 'j', prefix: 'j', wrapperClasses: ['context-labels'] });
- expect(result.context).toBe('context-labels');
- expect(result.suggestions).toEqual([{ items: [{ label: 'job' }, { label: 'instance' }], label: 'Labels' }]);
- });
-
- it('returns label suggestions on label context and metric', () => {
- const instance = shallow(
-
- ).instance() as PromQueryField;
- const result = instance.getTypeahead({
- text: 'job',
- prefix: 'job',
- wrapperClasses: ['context-labels'],
- metric: 'foo',
- });
- expect(result.context).toBe('context-labels');
- expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
- });
-
- it('returns a refresher on label context and unavailable metric', () => {
- const instance = shallow(
-
- ).instance() as PromQueryField;
- const result = instance.getTypeahead({
- text: 'job',
- prefix: 'job',
- wrapperClasses: ['context-labels'],
- metric: 'xxx',
- });
- expect(result.context).toBeUndefined();
- expect(result.refresher).toBeInstanceOf(Promise);
- expect(result.suggestions).toEqual([]);
- });
-
- it('returns label values on label context when given a metric and a label key', () => {
- const instance = shallow(
-
- ).instance() as PromQueryField;
- const result = instance.getTypeahead({
- text: '=ba',
- prefix: 'ba',
- wrapperClasses: ['context-labels'],
- metric: 'foo',
- labelKey: 'bar',
- });
- expect(result.context).toBe('context-label-values');
- expect(result.suggestions).toEqual([{ items: [{ label: 'baz' }], label: 'Label values' }]);
- });
-
- it('returns label suggestions on aggregation context and metric', () => {
- const instance = shallow(
-
- ).instance() as PromQueryField;
- const result = instance.getTypeahead({
- text: 'job',
- prefix: 'job',
- wrapperClasses: ['context-aggregation'],
- metric: 'foo',
- });
- expect(result.context).toBe('context-aggregation');
- expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
- });
- });
-});
diff --git a/public/app/containers/Explore/PromQueryField.test.tsx b/public/app/containers/Explore/PromQueryField.test.tsx
new file mode 100644
index 00000000000..c82a1cd448f
--- /dev/null
+++ b/public/app/containers/Explore/PromQueryField.test.tsx
@@ -0,0 +1,238 @@
+import React from 'react';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Plain from 'slate-plain-serializer';
+
+import PromQueryField, { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('PromQueryField typeahead handling', () => {
+ const defaultProps = {
+ request: () => ({ data: { data: [] } }),
+ };
+
+ it('returns default suggestions on emtpty context', () => {
+ const instance = shallow(
).instance() as PromQueryField;
+ const result = instance.getTypeahead({ text: '', prefix: '', wrapperClasses: [] });
+ expect(result.context).toBeUndefined();
+ expect(result.refresher).toBeUndefined();
+ expect(result.suggestions.length).toEqual(2);
+ });
+
+ describe('range suggestions', () => {
+ it('returns range suggestions in range context', () => {
+ const instance = shallow(
).instance() as PromQueryField;
+ const result = instance.getTypeahead({ text: '1', prefix: '1', wrapperClasses: ['context-range'] });
+ expect(result.context).toBe('context-range');
+ expect(result.refresher).toBeUndefined();
+ expect(result.suggestions).toEqual([
+ {
+ items: [{ label: '1m' }, { label: '5m' }, { label: '10m' }, { label: '30m' }, { label: '1h' }],
+ label: 'Range vector',
+ },
+ ]);
+ });
+ });
+
+ describe('metric suggestions', () => {
+ it('returns metrics suggestions by default', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const result = instance.getTypeahead({ text: 'a', prefix: 'a', wrapperClasses: [] });
+ expect(result.context).toBeUndefined();
+ expect(result.refresher).toBeUndefined();
+ expect(result.suggestions.length).toEqual(2);
+ });
+
+ it('returns default suggestions after a binary operator', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const result = instance.getTypeahead({ text: '*', prefix: '', wrapperClasses: [] });
+ expect(result.context).toBeUndefined();
+ expect(result.refresher).toBeUndefined();
+ expect(result.suggestions.length).toEqual(2);
+ });
+ });
+
+ describe('label suggestions', () => {
+ it('returns default label suggestions on label context and no metric', () => {
+ const instance = shallow(
).instance() as PromQueryField;
+ const value = Plain.deserialize('{}');
+ const range = value.selection.merge({
+ anchorOffset: 1,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '',
+ prefix: '',
+ wrapperClasses: ['context-labels'],
+ value: valueWithSelection,
+ });
+ expect(result.context).toBe('context-labels');
+ expect(result.suggestions).toEqual([{ items: [{ label: 'job' }, { label: 'instance' }], label: 'Labels' }]);
+ });
+
+ it('returns label suggestions on label context and metric', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const value = Plain.deserialize('metric{}');
+ const range = value.selection.merge({
+ anchorOffset: 7,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '',
+ prefix: '',
+ wrapperClasses: ['context-labels'],
+ value: valueWithSelection,
+ });
+ expect(result.context).toBe('context-labels');
+ expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
+ });
+
+ it('returns label suggestions on label context but leaves out labels that already exist', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const value = Plain.deserialize('{job="foo",}');
+ const range = value.selection.merge({
+ anchorOffset: 11,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '',
+ prefix: '',
+ wrapperClasses: ['context-labels'],
+ value: valueWithSelection,
+ });
+ expect(result.context).toBe('context-labels');
+ expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
+ });
+
+ it('returns a refresher on label context and unavailable metric', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const value = Plain.deserialize('metric{}');
+ const range = value.selection.merge({
+ anchorOffset: 7,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '',
+ prefix: '',
+ wrapperClasses: ['context-labels'],
+ value: valueWithSelection,
+ });
+ expect(result.context).toBeUndefined();
+ expect(result.refresher).toBeInstanceOf(Promise);
+ expect(result.suggestions).toEqual([]);
+ });
+
+ it('returns label values on label context when given a metric and a label key', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const value = Plain.deserialize('metric{bar=ba}');
+ const range = value.selection.merge({
+ anchorOffset: 13,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '=ba',
+ prefix: 'ba',
+ wrapperClasses: ['context-labels'],
+ labelKey: 'bar',
+ value: valueWithSelection,
+ });
+ expect(result.context).toBe('context-label-values');
+ expect(result.suggestions).toEqual([{ items: [{ label: 'baz' }], label: 'Label values for "bar"' }]);
+ });
+
+ it('returns label suggestions on aggregation context and metric w/ selector', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const value = Plain.deserialize('sum(metric{foo="xx"}) by ()');
+ const range = value.selection.merge({
+ anchorOffset: 26,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '',
+ prefix: '',
+ wrapperClasses: ['context-aggregation'],
+ value: valueWithSelection,
+ });
+ expect(result.context).toBe('context-aggregation');
+ expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
+ });
+
+ it('returns label suggestions on aggregation context and metric w/o selector', () => {
+ const instance = shallow(
+
+ ).instance() as PromQueryField;
+ const value = Plain.deserialize('sum(metric) by ()');
+ const range = value.selection.merge({
+ anchorOffset: 16,
+ });
+ const valueWithSelection = value.change().select(range).value;
+ const result = instance.getTypeahead({
+ text: '',
+ prefix: '',
+ wrapperClasses: ['context-aggregation'],
+ value: valueWithSelection,
+ });
+ expect(result.context).toBe('context-aggregation');
+ expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
+ });
+ });
+});
+
+describe('groupMetricsByPrefix()', () => {
+ it('returns an empty group for no metrics', () => {
+ expect(groupMetricsByPrefix([])).toEqual([]);
+ });
+
+ it('returns options grouped by prefix', () => {
+ expect(groupMetricsByPrefix(['foo_metric'])).toMatchObject([
+ {
+ value: 'foo',
+ children: [
+ {
+ value: 'foo_metric',
+ },
+ ],
+ },
+ ]);
+ });
+
+ it('returns options without prefix as toplevel option', () => {
+ expect(groupMetricsByPrefix(['metric'])).toMatchObject([
+ {
+ value: 'metric',
+ },
+ ]);
+ });
+
+ it('returns recording rules grouped separately', () => {
+ expect(groupMetricsByPrefix([':foo_metric:'])).toMatchObject([
+ {
+ value: RECORDING_RULES_GROUP,
+ children: [
+ {
+ value: ':foo_metric:',
+ },
+ ],
+ },
+ ]);
+ });
+});
diff --git a/public/app/containers/Explore/PromQueryField.tsx b/public/app/containers/Explore/PromQueryField.tsx
index eb8fc25c67f..0991f08429a 100644
--- a/public/app/containers/Explore/PromQueryField.tsx
+++ b/public/app/containers/Explore/PromQueryField.tsx
@@ -1,12 +1,16 @@
import _ from 'lodash';
+import moment from 'moment';
import React from 'react';
+import { Value } from 'slate';
+import Cascader from 'rc-cascader';
// dom also includes Element polyfills
import { getNextCharacter, getPreviousCousin } from './utils/dom';
import PluginPrism, { setPrismTokens } from './slate-plugins/prism/index';
import PrismPromql, { FUNCTIONS } from './slate-plugins/prism/promql';
+import BracesPlugin from './slate-plugins/braces';
import RunnerPlugin from './slate-plugins/runner';
-import { processLabels, RATE_RANGES, cleanText } from './utils/prometheus';
+import { processLabels, RATE_RANGES, cleanText, parseSelector } from './utils/prometheus';
import TypeaheadField, {
Suggestion,
@@ -16,16 +20,71 @@ import TypeaheadField, {
TypeaheadOutput,
} from './QueryField';
-const EMPTY_METRIC = '';
+const DEFAULT_KEYS = ['job', 'instance'];
+const EMPTY_SELECTOR = '{}';
+const HISTOGRAM_GROUP = '__histograms__';
+const HISTOGRAM_SELECTOR = '{le!=""}'; // Returns all timeseries for histograms
+const HISTORY_ITEM_COUNT = 5;
+const HISTORY_COUNT_CUTOFF = 1000 * 60 * 60 * 24; // 24h
const METRIC_MARK = 'metric';
const PRISM_LANGUAGE = 'promql';
+export const RECORDING_RULES_GROUP = '__recording_rules__';
-export const wrapLabel = label => ({ label });
+export const wrapLabel = (label: string) => ({ label });
export const setFunctionMove = (suggestion: Suggestion): Suggestion => {
suggestion.move = -1;
return suggestion;
};
+export function addHistoryMetadata(item: Suggestion, history: any[]): Suggestion {
+ const cutoffTs = Date.now() - HISTORY_COUNT_CUTOFF;
+ const historyForItem = history.filter(h => h.ts > cutoffTs && h.query === item.label);
+ const count = historyForItem.length;
+ const recent = historyForItem[0];
+ let hint = `Queried ${count} times in the last 24h.`;
+ if (recent) {
+ const lastQueried = moment(recent.ts).fromNow();
+ hint = `${hint} Last queried ${lastQueried}.`;
+ }
+ return {
+ ...item,
+ documentation: hint,
+ };
+}
+
+export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): CascaderOption[] {
+ // Filter out recording rules and insert as first option
+ const ruleRegex = /:\w+:/;
+ const ruleNames = metrics.filter(metric => ruleRegex.test(metric));
+ const rulesOption = {
+ label: 'Recording rules',
+ value: RECORDING_RULES_GROUP,
+ children: ruleNames
+ .slice()
+ .sort()
+ .map(name => ({ label: name, value: name })),
+ };
+
+ const options = ruleNames.length > 0 ? [rulesOption] : [];
+
+ const metricsOptions = _.chain(metrics)
+ .filter(metric => !ruleRegex.test(metric))
+ .groupBy(metric => metric.split(delimiter)[0])
+ .map((metricsForPrefix: string[], prefix: string): CascaderOption => {
+ const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
+ const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
+ return {
+ children,
+ label: prefix,
+ value: prefix,
+ };
+ })
+ .sortBy('label')
+ .value();
+
+ return [...options, ...metricsOptions];
+}
+
export function willApplySuggestion(
suggestion: string,
{ typeaheadContext, typeaheadText }: TypeaheadFieldState
@@ -56,58 +115,105 @@ export function willApplySuggestion(
return suggestion;
}
+interface CascaderOption {
+ label: string;
+ value: string;
+ children?: CascaderOption[];
+ disabled?: boolean;
+}
+
interface PromQueryFieldProps {
+ error?: string;
+ hint?: any;
+ histogramMetrics?: string[];
+ history?: any[];
initialQuery?: string | null;
labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
metrics?: string[];
+ metricsByPrefix?: CascaderOption[];
+ onClickHintFix?: (action: any) => void;
onPressEnter?: () => void;
- onQueryChange?: (value: string) => void;
+ onQueryChange?: (value: string, override?: boolean) => void;
portalPrefix?: string;
request?: (url: string) => any;
}
interface PromQueryFieldState {
+ histogramMetrics: string[];
labelKeys: { [index: string]: string[] }; // metric -> [labelKey,...]
labelValues: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
metrics: string[];
+ metricsByPrefix: CascaderOption[];
}
interface PromTypeaheadInput {
text: string;
prefix: string;
wrapperClasses: string[];
- metric?: string;
labelKey?: string;
+ value?: Value;
}
class PromQueryField extends React.Component
{
plugins: any[];
- constructor(props, context) {
+ constructor(props: PromQueryFieldProps, context) {
super(props, context);
this.plugins = [
+ BracesPlugin(),
RunnerPlugin({ handler: props.onPressEnter }),
PluginPrism({ definition: PrismPromql, language: PRISM_LANGUAGE }),
];
this.state = {
+ histogramMetrics: props.histogramMetrics || [],
labelKeys: props.labelKeys || {},
labelValues: props.labelValues || {},
metrics: props.metrics || [],
+ metricsByPrefix: props.metricsByPrefix || [],
};
}
componentDidMount() {
this.fetchMetricNames();
+ this.fetchHistogramMetrics();
}
- onChangeQuery = value => {
+ onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
+ let query;
+ if (selectedOptions.length === 1) {
+ if (selectedOptions[0].children.length === 0) {
+ query = selectedOptions[0].value;
+ } else {
+ // Ignore click on group
+ return;
+ }
+ } else {
+ const prefix = selectedOptions[0].value;
+ const metric = selectedOptions[1].value;
+ if (prefix === HISTOGRAM_GROUP) {
+ query = `histogram_quantile(0.95, sum(rate(${metric}[5m])) by (le))`;
+ } else {
+ query = metric;
+ }
+ }
+ this.onChangeQuery(query, true);
+ };
+
+ onChangeQuery = (value: string, override?: boolean) => {
// Send text change to parent
const { onQueryChange } = this.props;
if (onQueryChange) {
- onQueryChange(value);
+ onQueryChange(value, override);
+ }
+ };
+
+ onClickHintFix = () => {
+ const { hint, onClickHintFix } = this.props;
+ if (onClickHintFix && hint && hint.fix) {
+ onClickHintFix(hint.fix.action);
}
};
@@ -119,25 +225,23 @@ class PromQueryField extends React.Component {
- const { editorNode, prefix, text, wrapperNode } = typeahead;
+ const { prefix, text, value, wrapperNode } = typeahead;
// Get DOM-dependent context
const wrapperClasses = Array.from(wrapperNode.classList);
- // Take first metric as lucky guess
- const metricNode = editorNode.querySelector(`.${METRIC_MARK}`);
- const metric = metricNode && metricNode.textContent;
const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
const labelKey = labelKeyNode && labelKeyNode.textContent;
+ const nextChar = getNextCharacter();
- const result = this.getTypeahead({ text, prefix, wrapperClasses, metric, labelKey });
+ const result = this.getTypeahead({ text, value, prefix, wrapperClasses, labelKey });
- console.log('handleTypeahead', wrapperClasses, text, prefix, result.context);
+ console.log('handleTypeahead', wrapperClasses, text, prefix, nextChar, labelKey, result.context);
return result;
};
// Keep this DOM-free for testing
- getTypeahead({ prefix, wrapperClasses, metric, text }: PromTypeaheadInput): TypeaheadOutput {
+ getTypeahead({ prefix, wrapperClasses, text }: PromTypeaheadInput): TypeaheadOutput {
// Determine candidates by CSS context
if (_.includes(wrapperClasses, 'context-range')) {
// Suggestions for metric[|]
@@ -145,12 +249,11 @@ class PromQueryField extends React.Component 0) {
+ const historyItems = _.chain(history)
+ .uniqBy('query')
+ .take(HISTORY_ITEM_COUNT)
+ .map(h => h.query)
+ .map(wrapLabel)
+ .map(item => addHistoryMetadata(item, history))
+ .value();
+
+ suggestions.push({
+ prefixMatch: true,
+ skipSort: true,
+ label: 'History',
+ items: historyItems,
+ });
+ }
+
suggestions.push({
prefixMatch: true,
label: 'Functions',
items: FUNCTIONS.map(setFunctionMove),
});
- if (this.state.metrics) {
+ if (metrics) {
suggestions.push({
label: 'Metrics',
- items: this.state.metrics.map(wrapLabel),
+ items: metrics.map(wrapLabel),
});
}
return { suggestions };
@@ -191,14 +314,27 @@ class PromQueryField extends React.Component = null;
const suggestions: SuggestionGroup[] = [];
- const labelKeys = this.state.labelKeys[metric];
+
+ // sum(foo{bar="1"}) by (|)
+ const line = value.anchorBlock.getText();
+ const cursorOffset: number = value.anchorOffset;
+ // sum(foo{bar="1"}) by (
+ const leftSide = line.slice(0, cursorOffset);
+ const openParensAggregationIndex = leftSide.lastIndexOf('(');
+ const openParensSelectorIndex = leftSide.slice(0, openParensAggregationIndex).lastIndexOf('(');
+ const closeParensSelectorIndex = leftSide.slice(openParensSelectorIndex).indexOf(')') + openParensSelectorIndex;
+ // foo{bar="1"}
+ const selectorString = leftSide.slice(openParensSelectorIndex + 1, closeParensSelectorIndex);
+ const selector = parseSelector(selectorString, selectorString.length - 2).selector;
+
+ const labelKeys = this.state.labelKeys[selector];
if (labelKeys) {
suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
} else {
- refresher = this.fetchMetricLabels(metric);
+ refresher = this.fetchSeriesLabels(selector);
}
return {
@@ -208,59 +344,57 @@ class PromQueryField extends React.Component = null;
const suggestions: SuggestionGroup[] = [];
- if (metric) {
- const labelKeys = this.state.labelKeys[metric];
- if (labelKeys) {
- if ((text && text.startsWith('=')) || _.includes(wrapperClasses, 'attr-value')) {
- // Label values
- if (labelKey) {
- const labelValues = this.state.labelValues[metric][labelKey];
- context = 'context-label-values';
- suggestions.push({
- label: 'Label values',
- items: labelValues.map(wrapLabel),
- });
- }
- } else {
- // Label keys
- context = 'context-labels';
- suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
- }
- } else {
- refresher = this.fetchMetricLabels(metric);
+ const line = value.anchorBlock.getText();
+ const cursorOffset: number = value.anchorOffset;
+
+ // Get normalized selector
+ let selector;
+ let parsedSelector;
+ try {
+ parsedSelector = parseSelector(line, cursorOffset);
+ selector = parsedSelector.selector;
+ } catch {
+ selector = EMPTY_SELECTOR;
+ }
+ const containsMetric = selector.indexOf('__name__=') > -1;
+ const existingKeys = parsedSelector ? parsedSelector.labelKeys : [];
+
+ if ((text && text.startsWith('=')) || _.includes(wrapperClasses, 'attr-value')) {
+ // Label values
+ if (labelKey && this.state.labelValues[selector] && this.state.labelValues[selector][labelKey]) {
+ const labelValues = this.state.labelValues[selector][labelKey];
+ context = 'context-label-values';
+ suggestions.push({
+ label: `Label values for "${labelKey}"`,
+ items: labelValues.map(wrapLabel),
+ });
}
} else {
- // Metric-independent label queries
- const defaultKeys = ['job', 'instance'];
- // Munge all keys that we have seen together
- const labelKeys = Object.keys(this.state.labelKeys).reduce((acc, metric) => {
- return acc.concat(this.state.labelKeys[metric].filter(key => acc.indexOf(key) === -1));
- }, defaultKeys);
- if ((text && text.startsWith('=')) || _.includes(wrapperClasses, 'attr-value')) {
- // Label values
- if (labelKey) {
- if (this.state.labelValues[EMPTY_METRIC]) {
- const labelValues = this.state.labelValues[EMPTY_METRIC][labelKey];
- context = 'context-label-values';
- suggestions.push({
- label: 'Label values',
- items: labelValues.map(wrapLabel),
- });
- } else {
- // Can only query label values for now (API to query keys is under development)
- refresher = this.fetchLabelValues(labelKey);
- }
+ // Label keys
+ const labelKeys = this.state.labelKeys[selector] || (containsMetric ? null : DEFAULT_KEYS);
+ if (labelKeys) {
+ const possibleKeys = _.difference(labelKeys, existingKeys);
+ if (possibleKeys.length > 0) {
+ context = 'context-labels';
+ suggestions.push({ label: `Labels`, items: possibleKeys.map(wrapLabel) });
}
- } else {
- // Label keys
- context = 'context-labels';
- suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
}
}
+
+ // Query labels for selector
+ if (selector && !this.state.labelValues[selector]) {
+ if (selector === EMPTY_SELECTOR) {
+ // Query label values for default labels
+ refresher = Promise.all(DEFAULT_KEYS.map(key => this.fetchLabelValues(key)));
+ } else {
+ refresher = this.fetchSeriesLabels(selector, !containsMetric);
+ }
+ }
+
return { context, refresher, suggestions };
}
@@ -271,19 +405,29 @@ class PromQueryField extends React.Component {
+ const histogramSeries = this.state.labelValues[HISTOGRAM_SELECTOR];
+ if (histogramSeries && histogramSeries['__name__']) {
+ const histogramMetrics = histogramSeries['__name__'].slice().sort();
+ this.setState({ histogramMetrics });
+ }
+ });
+ }
+
+ async fetchLabelValues(key: string) {
const url = `/api/v1/label/${key}/values`;
try {
const res = await this.request(url);
const body = await (res.data || res.json());
- const pairs = this.state.labelValues[EMPTY_METRIC];
+ const exisingValues = this.state.labelValues[EMPTY_SELECTOR];
const values = {
- ...pairs,
+ ...exisingValues,
[key]: body.data,
};
const labelValues = {
...this.state.labelValues,
- [EMPTY_METRIC]: values,
+ [EMPTY_SELECTOR]: values,
};
this.setState({ labelValues });
} catch (e) {
@@ -291,12 +435,12 @@ class PromQueryField extends React.Component void) {
const url = `/api/v1/series?match[]=${name}`;
try {
const res = await this.request(url);
const body = await (res.data || res.json());
- const { keys, values } = processLabels(body.data);
+ const { keys, values } = processLabels(body.data, withName);
const labelKeys = {
...this.state.labelKeys,
[name]: keys,
@@ -305,7 +449,7 @@ class PromQueryField extends React.Component ({ label: hm, value: hm }));
+ const metricsOptions = [
+ { label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions },
+ ...metricsByPrefix,
+ ];
+
return (
-
+
+
+
+
+
+
+
+
+
+
+ {error ?
{error}
: null}
+ {hint ? (
+
+ ) : null}
+
+
-
-
-
-
-
);
}
}
-export default class QueryRows extends PureComponent
{
+export default class QueryRows extends PureComponent {
render() {
- const { className = '', queries, ...handlers } = this.props;
+ const { className = '', queries, queryErrors = [], queryHints = [], ...handlers } = this.props;
return (
- {queries.map((q, index) => )}
+ {queries.map((q, index) => (
+
+ ))}
);
}
diff --git a/public/app/containers/Explore/Table.tsx b/public/app/containers/Explore/Table.tsx
index 7179a0fc89a..cbb3ab11f4e 100644
--- a/public/app/containers/Explore/Table.tsx
+++ b/public/app/containers/Explore/Table.tsx
@@ -1,22 +1,82 @@
import React, { PureComponent } from 'react';
-// import TableModel from 'app/core/table_model';
+import TableModel from 'app/core/table_model';
-const EMPTY_TABLE = {
- columns: [],
- rows: [],
-};
+const EMPTY_TABLE = new TableModel();
-export default class Table extends PureComponent {
+interface TableProps {
+ className?: string;
+ data: TableModel;
+ loading: boolean;
+ onClickCell?: (columnKey: string, rowValue: string) => void;
+}
+
+interface SFCCellProps {
+ columnIndex: number;
+ onClickCell?: (columnKey: string, rowValue: string, columnIndex: number, rowIndex: number, table: TableModel) => void;
+ rowIndex: number;
+ table: TableModel;
+ value: string;
+}
+
+function Cell(props: SFCCellProps) {
+ const { columnIndex, rowIndex, table, value, onClickCell } = props;
+ const column = table.columns[columnIndex];
+ if (column && column.filterable && onClickCell) {
+ const onClick = event => {
+ event.preventDefault();
+ onClickCell(column.text, value, columnIndex, rowIndex, table);
+ };
+ return (
+
+
+ {value}
+
+ |
+ );
+ }
+ return {value} | ;
+}
+
+export default class Table extends PureComponent {
render() {
- const { className = '', data } = this.props;
+ const { className = '', data, loading, onClickCell } = this.props;
const tableModel = data || EMPTY_TABLE;
+ if (!loading && data && data.rows.length === 0) {
+ return (
+
+
+
+ | Table |
+
+
+
+
+ | The queries returned no data for a table. |
+
+
+
+ );
+ }
return (
{tableModel.columns.map(col => | {col.text} | )}
- {tableModel.rows.map((row, i) => {row.map((content, j) => | {content} | )}
)}
+ {tableModel.rows.map((row, i) => (
+
+ {row.map((value, j) => (
+ |
+ ))}
+
+ ))}
);
diff --git a/public/app/containers/Explore/TimePicker.jest.tsx b/public/app/containers/Explore/TimePicker.test.tsx
similarity index 100%
rename from public/app/containers/Explore/TimePicker.jest.tsx
rename to public/app/containers/Explore/TimePicker.test.tsx
diff --git a/public/app/containers/Explore/slate-plugins/braces.test.ts b/public/app/containers/Explore/slate-plugins/braces.test.ts
index 5c9a90ae034..dda805c07f7 100644
--- a/public/app/containers/Explore/slate-plugins/braces.test.ts
+++ b/public/app/containers/Explore/slate-plugins/braces.test.ts
@@ -44,4 +44,13 @@ describe('braces', () => {
handler(event, change);
expect(Plain.serialize(change.value)).toEqual('(foo) (bar)() ugh');
});
+
+ it('adds closing braces outside a selector', () => {
+ const change = Plain.deserialize('sumrate(metric{namespace="dev", cluster="c1"}[2m])').change();
+ let event;
+ change.move(3);
+ event = new window.KeyboardEvent('keydown', { key: '(' });
+ handler(event, change);
+ expect(Plain.serialize(change.value)).toEqual('sum(rate(metric{namespace="dev", cluster="c1"}[2m]))');
+ });
});
diff --git a/public/app/containers/Explore/slate-plugins/braces.ts b/public/app/containers/Explore/slate-plugins/braces.ts
index b92a224d111..2ea58569ef0 100644
--- a/public/app/containers/Explore/slate-plugins/braces.ts
+++ b/public/app/containers/Explore/slate-plugins/braces.ts
@@ -4,6 +4,8 @@ const BRACES = {
'(': ')',
};
+const NON_SELECTOR_SPACE_REGEXP = / (?![^}]+})/;
+
export default function BracesPlugin() {
return {
onKeyDown(event, change) {
@@ -28,8 +30,8 @@ export default function BracesPlugin() {
event.preventDefault();
const text = value.anchorText.text;
const offset = value.anchorOffset;
- const space = text.indexOf(' ', offset);
- const length = space > 0 ? space : text.length;
+ const delimiterIndex = text.slice(offset).search(NON_SELECTOR_SPACE_REGEXP);
+ const length = delimiterIndex > -1 ? delimiterIndex + offset : text.length;
const forward = length - offset;
// Insert matching braces
change
diff --git a/public/app/containers/Explore/utils/debounce.ts b/public/app/containers/Explore/utils/debounce.ts
index 9f2bd35e116..5fda5a05f5f 100644
--- a/public/app/containers/Explore/utils/debounce.ts
+++ b/public/app/containers/Explore/utils/debounce.ts
@@ -1,7 +1,7 @@
// Based on underscore.js debounce()
export default function debounce(func, wait) {
let timeout;
- return function() {
+ return function(this: any) {
const context = this;
const args = arguments;
const later = function() {
diff --git a/public/app/containers/Explore/utils/dom.ts b/public/app/containers/Explore/utils/dom.ts
index 6ba21b54c83..6ab3de39923 100644
--- a/public/app/containers/Explore/utils/dom.ts
+++ b/public/app/containers/Explore/utils/dom.ts
@@ -1,6 +1,6 @@
// Node.closest() polyfill
if ('Element' in window && !Element.prototype.closest) {
- Element.prototype.closest = function(s) {
+ Element.prototype.closest = function(this: any, s) {
const matches = (this.document || this.ownerDocument).querySelectorAll(s);
let el = this;
let i;
diff --git a/public/app/containers/Explore/utils/prometheus.test.ts b/public/app/containers/Explore/utils/prometheus.test.ts
new file mode 100644
index 00000000000..d12d28c6bc9
--- /dev/null
+++ b/public/app/containers/Explore/utils/prometheus.test.ts
@@ -0,0 +1,61 @@
+import { parseSelector } from './prometheus';
+
+describe('parseSelector()', () => {
+ let parsed;
+
+ it('returns a clean selector from an empty selector', () => {
+ parsed = parseSelector('{}', 1);
+ expect(parsed.selector).toBe('{}');
+ expect(parsed.labelKeys).toEqual([]);
+ });
+
+ it('throws if selector is broken', () => {
+ expect(() => parseSelector('{foo')).toThrow();
+ });
+
+ it('returns the selector sorted by label key', () => {
+ parsed = parseSelector('{foo="bar"}');
+ expect(parsed.selector).toBe('{foo="bar"}');
+ expect(parsed.labelKeys).toEqual(['foo']);
+
+ parsed = parseSelector('{foo="bar",baz="xx"}');
+ expect(parsed.selector).toBe('{baz="xx",foo="bar"}');
+ });
+
+ it('returns a clean selector from an incomplete one', () => {
+ parsed = parseSelector('{foo}');
+ expect(parsed.selector).toBe('{}');
+
+ parsed = parseSelector('{foo="bar",baz}');
+ expect(parsed.selector).toBe('{foo="bar"}');
+
+ parsed = parseSelector('{foo="bar",baz="}');
+ expect(parsed.selector).toBe('{foo="bar"}');
+ });
+
+ it('throws if not inside a selector', () => {
+ expect(() => parseSelector('foo{}', 0)).toThrow();
+ expect(() => parseSelector('foo{} + bar{}', 5)).toThrow();
+ });
+
+ it('returns the selector nearest to the cursor offset', () => {
+ expect(() => parseSelector('{foo="bar"} + {foo="bar"}', 0)).toThrow();
+
+ parsed = parseSelector('{foo="bar"} + {foo="bar"}', 1);
+ expect(parsed.selector).toBe('{foo="bar"}');
+
+ parsed = parseSelector('{foo="bar"} + {baz="xx"}', 1);
+ expect(parsed.selector).toBe('{foo="bar"}');
+
+ parsed = parseSelector('{baz="xx"} + {foo="bar"}', 16);
+ expect(parsed.selector).toBe('{foo="bar"}');
+ });
+
+ it('returns a selector with metric if metric is given', () => {
+ parsed = parseSelector('bar{foo}', 4);
+ expect(parsed.selector).toBe('{__name__="bar"}');
+
+ parsed = parseSelector('baz{foo="bar"}', 12);
+ expect(parsed.selector).toBe('{__name__="baz",foo="bar"}');
+ });
+});
diff --git a/public/app/containers/Explore/utils/prometheus.ts b/public/app/containers/Explore/utils/prometheus.ts
index 30f9c25b8f7..19129976282 100644
--- a/public/app/containers/Explore/utils/prometheus.ts
+++ b/public/app/containers/Explore/utils/prometheus.ts
@@ -1,9 +1,16 @@
export const RATE_RANGES = ['1m', '5m', '10m', '30m', '1h'];
-export function processLabels(labels) {
+export function processLabels(labels, withName = false) {
const values = {};
labels.forEach(l => {
const { __name__, ...rest } = l;
+ if (withName) {
+ values['__name__'] = values['__name__'] || [];
+ if (values['__name__'].indexOf(__name__) === -1) {
+ values['__name__'].push(__name__);
+ }
+ }
+
Object.keys(rest).forEach(key => {
if (!values[key]) {
values[key] = [];
@@ -18,3 +25,67 @@ export function processLabels(labels) {
// Strip syntax chars
export const cleanText = s => s.replace(/[{}[\]="(),!~+\-*/^%]/g, '').trim();
+
+// const cleanSelectorRegexp = /\{(\w+="[^"\n]*?")(,\w+="[^"\n]*?")*\}/;
+const selectorRegexp = /\{[^}]*?\}/;
+const labelRegexp = /\b\w+="[^"\n]*?"/g;
+export function parseSelector(query: string, cursorOffset = 1): { labelKeys: any[]; selector: string } {
+ if (!query.match(selectorRegexp)) {
+ // Special matcher for metrics
+ if (query.match(/^\w+$/)) {
+ return {
+ selector: `{__name__="${query}"}`,
+ labelKeys: ['__name__'],
+ };
+ }
+ throw new Error('Query must contain a selector: ' + query);
+ }
+
+ // Check if inside a selector
+ const prefix = query.slice(0, cursorOffset);
+ const prefixOpen = prefix.lastIndexOf('{');
+ const prefixClose = prefix.lastIndexOf('}');
+ if (prefixOpen === -1) {
+ throw new Error('Not inside selector, missing open brace: ' + prefix);
+ }
+ if (prefixClose > -1 && prefixClose > prefixOpen) {
+ throw new Error('Not inside selector, previous selector already closed: ' + prefix);
+ }
+ const suffix = query.slice(cursorOffset);
+ const suffixCloseIndex = suffix.indexOf('}');
+ const suffixClose = suffixCloseIndex + cursorOffset;
+ const suffixOpenIndex = suffix.indexOf('{');
+ const suffixOpen = suffixOpenIndex + cursorOffset;
+ if (suffixClose === -1) {
+ throw new Error('Not inside selector, missing closing brace in suffix: ' + suffix);
+ }
+ if (suffixOpenIndex > -1 && suffixOpen < suffixClose) {
+ throw new Error('Not inside selector, next selector opens before this one closed: ' + suffix);
+ }
+
+ // Extract clean labels to form clean selector, incomplete labels are dropped
+ const selector = query.slice(prefixOpen, suffixClose);
+ const labels = {};
+ selector.replace(labelRegexp, match => {
+ const delimiterIndex = match.indexOf('=');
+ const key = match.slice(0, delimiterIndex);
+ const value = match.slice(delimiterIndex + 1, match.length);
+ labels[key] = value;
+ return '';
+ });
+
+ // Add metric if there is one before the selector
+ const metricPrefix = query.slice(0, prefixOpen);
+ const metricMatch = metricPrefix.match(/\w+$/);
+ if (metricMatch) {
+ labels['__name__'] = `"${metricMatch[0]}"`;
+ }
+
+ // Build sorted selector
+ const labelKeys = Object.keys(labels).sort();
+ const cleanSelector = labelKeys.map(key => `${key}=${labels[key]}`).join(',');
+
+ const selectorString = ['{', cleanSelector, '}'].join('');
+
+ return { labelKeys, selector: selectorString };
+}
diff --git a/public/app/containers/ManageDashboards/FolderPermissions.tsx b/public/app/containers/ManageDashboards/FolderPermissions.tsx
index aac5d32750a..072908d2b8e 100644
--- a/public/app/containers/ManageDashboards/FolderPermissions.tsx
+++ b/public/app/containers/ManageDashboards/FolderPermissions.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import Permissions from 'app/core/components/Permissions/Permissions';
import Tooltip from 'app/core/components/Tooltip/Tooltip';
@@ -12,7 +12,7 @@ import SlideDown from 'app/core/components/Animations/SlideDown';
@inject('nav', 'folder', 'view', 'permissions')
@observer
-export class FolderPermissions extends Component {
+export class FolderPermissions extends Component {
constructor(props) {
super(props);
this.handleAddPermission = this.handleAddPermission.bind(this);
diff --git a/public/app/containers/ManageDashboards/FolderSettings.jest.tsx b/public/app/containers/ManageDashboards/FolderSettings.test.tsx
similarity index 100%
rename from public/app/containers/ManageDashboards/FolderSettings.jest.tsx
rename to public/app/containers/ManageDashboards/FolderSettings.test.tsx
diff --git a/public/app/containers/ManageDashboards/FolderSettings.tsx b/public/app/containers/ManageDashboards/FolderSettings.tsx
index d25a7dc6c06..88830356563 100644
--- a/public/app/containers/ManageDashboards/FolderSettings.tsx
+++ b/public/app/containers/ManageDashboards/FolderSettings.tsx
@@ -3,13 +3,13 @@ import { hot } from 'react-hot-loader';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
import { getSnapshot } from 'mobx-state-tree';
import appEvents from 'app/core/app_events';
@inject('nav', 'folder', 'view')
@observer
-export class FolderSettings extends React.Component {
+export class FolderSettings extends React.Component {
formSnapshot: any;
componentDidMount() {
diff --git a/public/app/containers/ServerStats/ServerStats.jest.tsx b/public/app/containers/ServerStats/ServerStats.test.tsx
similarity index 100%
rename from public/app/containers/ServerStats/ServerStats.jest.tsx
rename to public/app/containers/ServerStats/ServerStats.test.tsx
diff --git a/public/app/containers/ServerStats/ServerStats.tsx b/public/app/containers/ServerStats/ServerStats.tsx
index 761b296855f..63e78996041 100644
--- a/public/app/containers/ServerStats/ServerStats.tsx
+++ b/public/app/containers/ServerStats/ServerStats.tsx
@@ -2,11 +2,11 @@ import React from 'react';
import { hot } from 'react-hot-loader';
import { inject, observer } from 'mobx-react';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import IContainerProps from 'app/containers/IContainerProps';
+import ContainerProps from 'app/containers/ContainerProps';
@inject('nav', 'serverStats')
@observer
-export class ServerStats extends React.Component {
+export class ServerStats extends React.Component {
constructor(props) {
super(props);
const { nav, serverStats } = this.props;
diff --git a/public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap b/public/app/containers/ServerStats/__snapshots__/ServerStats.test.tsx.snap
similarity index 100%
rename from public/app/containers/ServerStats/__snapshots__/ServerStats.jest.tsx.snap
rename to public/app/containers/ServerStats/__snapshots__/ServerStats.test.tsx.snap
diff --git a/public/app/containers/Teams/TeamGroupSync.tsx b/public/app/containers/Teams/TeamGroupSync.tsx
index 323dceae0d8..a3b2e4aed14 100644
--- a/public/app/containers/Teams/TeamGroupSync.tsx
+++ b/public/app/containers/Teams/TeamGroupSync.tsx
@@ -1,12 +1,12 @@
import React from 'react';
import { hot } from 'react-hot-loader';
import { observer } from 'mobx-react';
-import { ITeam, ITeamGroup } from 'app/stores/TeamsStore/TeamsStore';
+import { Team, TeamGroup } from 'app/stores/TeamsStore/TeamsStore';
import SlideDown from 'app/core/components/Animations/SlideDown';
import Tooltip from 'app/core/components/Tooltip/Tooltip';
interface Props {
- team: ITeam;
+ team: Team;
}
interface State {
@@ -27,7 +27,7 @@ export class TeamGroupSync extends React.Component {
this.props.team.loadGroups();
}
- renderGroup(group: ITeamGroup) {
+ renderGroup(group: TeamGroup) {
return (
| {group.groupId} |
@@ -53,7 +53,7 @@ export class TeamGroupSync extends React.Component {
this.setState({ isAdding: false, newGroupId: '' });
};
- onRemoveGroup = (group: ITeamGroup) => {
+ onRemoveGroup = (group: TeamGroup) => {
this.props.team.removeGroup(group.groupId);
};
diff --git a/public/app/containers/Teams/TeamList.tsx b/public/app/containers/Teams/TeamList.tsx
index 31406250cb3..d0feee75184 100644
--- a/public/app/containers/Teams/TeamList.tsx
+++ b/public/app/containers/Teams/TeamList.tsx
@@ -3,7 +3,7 @@ import { hot } from 'react-hot-loader';
import { inject, observer } from 'mobx-react';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import { NavStore } from 'app/stores/NavStore/NavStore';
-import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore';
+import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore';
import { BackendSrv } from 'app/core/services/backend_srv';
import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
@@ -27,7 +27,7 @@ export class TeamList extends React.Component {
this.props.teams.loadTeams();
}
- deleteTeam(team: ITeam) {
+ deleteTeam(team: Team) {
this.props.backendSrv.delete('/api/teams/' + team.id).then(this.fetchTeams.bind(this));
}
@@ -35,8 +35,8 @@ export class TeamList extends React.Component {
this.props.teams.setSearchQuery(evt.target.value);
};
- renderTeamMember(team: ITeam): JSX.Element {
- let teamUrl = `org/teams/edit/${team.id}`;
+ renderTeamMember(team: Team): JSX.Element {
+ const teamUrl = `org/teams/edit/${team.id}`;
return (
diff --git a/public/app/containers/Teams/TeamMembers.tsx b/public/app/containers/Teams/TeamMembers.tsx
index 0d0762469a0..b06a547063a 100644
--- a/public/app/containers/Teams/TeamMembers.tsx
+++ b/public/app/containers/Teams/TeamMembers.tsx
@@ -1,13 +1,13 @@
import React from 'react';
import { hot } from 'react-hot-loader';
import { observer } from 'mobx-react';
-import { ITeam, ITeamMember } from 'app/stores/TeamsStore/TeamsStore';
-import appEvents from 'app/core/app_events';
+import { Team, TeamMember } from 'app/stores/TeamsStore/TeamsStore';
import SlideDown from 'app/core/components/Animations/SlideDown';
import { UserPicker, User } from 'app/core/components/Picker/UserPicker';
+import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
interface Props {
- team: ITeam;
+ team: Team;
}
interface State {
@@ -30,23 +30,15 @@ export class TeamMembers extends React.Component {
this.props.team.setSearchQuery(evt.target.value);
};
- removeMember(member: ITeamMember) {
- appEvents.emit('confirm-modal', {
- title: 'Remove Member',
- text: 'Are you sure you want to remove ' + member.login + ' from this group?',
- yesText: 'Remove',
- icon: 'fa-warning',
- onConfirm: () => {
- this.removeMemberConfirmed(member);
- },
- });
- }
-
- removeMemberConfirmed(member: ITeamMember) {
+ removeMember(member: TeamMember) {
this.props.team.removeMember(member);
}
- renderMember(member: ITeamMember) {
+ removeMemberConfirmed(member: TeamMember) {
+ this.props.team.removeMember(member);
+ }
+
+ renderMember(member: TeamMember) {
return (
|
@@ -54,10 +46,8 @@ export class TeamMembers extends React.Component {
|
{member.login} |
{member.email} |
-
- this.removeMember(member)} className="btn btn-danger btn-mini">
-
-
+ |
+ this.removeMember(member)} />
|
);
@@ -79,8 +69,9 @@ export class TeamMembers extends React.Component {
render() {
const { newTeamMember, isAdding } = this.state;
- const members = this.props.team.members.values();
+ const members = this.props.team.filteredMembers;
const newTeamMemberValue = newTeamMember && newTeamMember.id.toString();
+ const { team } = this.props;
return (
@@ -91,7 +82,7 @@ export class TeamMembers extends React.Component
{
type="text"
className="gf-form-input"
placeholder="Search members"
- value={''}
+ value={team.search}
onChange={this.onSearchQueryChange}
/>
diff --git a/public/app/containers/Teams/TeamPages.tsx b/public/app/containers/Teams/TeamPages.tsx
index 500a7cbe5e8..2abc9c51535 100644
--- a/public/app/containers/Teams/TeamPages.tsx
+++ b/public/app/containers/Teams/TeamPages.tsx
@@ -5,7 +5,7 @@ import { inject, observer } from 'mobx-react';
import config from 'app/core/config';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import { NavStore } from 'app/stores/NavStore/NavStore';
-import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore';
+import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore';
import { ViewStore } from 'app/stores/ViewStore/ViewStore';
import TeamMembers from './TeamMembers';
import TeamSettings from './TeamSettings';
@@ -40,7 +40,7 @@ export class TeamPages extends React.Component {
nav.initTeamPage(this.getCurrentTeam(), this.currentPage, this.isSyncEnabled);
}
- getCurrentTeam(): ITeam {
+ getCurrentTeam(): Team {
const { teams, view } = this.props;
return teams.map.get(view.routeParams.get('id'));
}
diff --git a/public/app/containers/Teams/TeamSettings.tsx b/public/app/containers/Teams/TeamSettings.tsx
index 142088a5d1e..0de60a0b16c 100644
--- a/public/app/containers/Teams/TeamSettings.tsx
+++ b/public/app/containers/Teams/TeamSettings.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import { hot } from 'react-hot-loader';
import { observer } from 'mobx-react';
-import { ITeam } from 'app/stores/TeamsStore/TeamsStore';
+import { Team } from 'app/stores/TeamsStore/TeamsStore';
import { Label } from 'app/core/components/Forms/Forms';
interface Props {
- team: ITeam;
+ team: Team;
}
@observer
diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index a4439509f8e..e7295646172 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -2,7 +2,6 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
import { PasswordStrength } from './components/PasswordStrength';
import PageHeader from './components/PageHeader/PageHeader';
import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
-import LoginBackground from './components/Login/LoginBackground';
import { SearchResult } from './components/search/SearchResult';
import { TagFilter } from './components/TagFilter/TagFilter';
import DashboardPermissions from './components/Permissions/DashboardPermissions';
@@ -11,7 +10,6 @@ export function registerAngularDirectives() {
react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
- react2AngularDirective('loginBackground', LoginBackground, []);
react2AngularDirective('searchResult', SearchResult, []);
react2AngularDirective('tagFilter', TagFilter, [
'tags',
diff --git a/public/app/core/app_events.ts b/public/app/core/app_events.ts
index 26dd74bcb00..6af7913167b 100644
--- a/public/app/core/app_events.ts
+++ b/public/app/core/app_events.ts
@@ -1,4 +1,4 @@
import { Emitter } from './utils/emitter';
-var appEvents = new Emitter();
+const appEvents = new Emitter();
export default appEvents;
diff --git a/public/app/core/components/DeleteButton/DeleteButton.jest.tsx b/public/app/core/components/DeleteButton/DeleteButton.test.tsx
similarity index 100%
rename from public/app/core/components/DeleteButton/DeleteButton.jest.tsx
rename to public/app/core/components/DeleteButton/DeleteButton.test.tsx
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.jest.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
similarity index 100%
rename from public/app/core/components/EmptyListCTA/EmptyListCTA.jest.tsx
rename to public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index 1583303dfa1..5ece360e36a 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -1,34 +1,37 @@
import React, { Component } from 'react';
-export interface IProps {
- model: any;
+export interface Props {
+ model: any;
}
-class EmptyListCTA extends Component {
- render() {
- const {
- title,
- buttonIcon,
- buttonLink,
- buttonTitle,
- proTip,
- proTipLink,
- proTipLinkTitle,
- proTipTarget
- } = this.props.model;
- return (
-
- );
- }
+class EmptyListCTA extends Component {
+ render() {
+ const {
+ title,
+ buttonIcon,
+ buttonLink,
+ buttonTitle,
+ proTip,
+ proTipLink,
+ proTipLinkTitle,
+ proTipTarget,
+ } = this.props.model;
+ return (
+
+ );
+ }
}
export default EmptyListCTA;
diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
similarity index 100%
rename from public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap
rename to public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
diff --git a/public/app/core/components/Forms/Forms.tsx b/public/app/core/components/Forms/Forms.tsx
index 4b74d48ba08..543e1a1d6df 100644
--- a/public/app/core/components/Forms/Forms.tsx
+++ b/public/app/core/components/Forms/Forms.tsx
@@ -12,7 +12,7 @@ export const Label: SFC = props => {
{props.children}
{props.tooltip && (
-
+
)}
diff --git a/public/app/core/components/Login/LoginBackground.tsx b/public/app/core/components/Login/LoginBackground.tsx
deleted file mode 100644
index 83e228ab6e0..00000000000
--- a/public/app/core/components/Login/LoginBackground.tsx
+++ /dev/null
@@ -1,1240 +0,0 @@
-import React, { Component } from 'react';
-
-const xCount = 50;
-const yCount = 50;
-
-function Cell({ x, y, flipIndex }) {
- const index = (y * xCount) + x;
- const bgColor1 = getColor(x, y);
- return (
-
- );
-}
-
-function getRandomInt(min, max) {
- min = Math.ceil(min);
- max = Math.floor(max);
- return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
-}
-
-export default class LoginBackground extends Component {
- cancelInterval: any;
-
- constructor(props) {
- super(props);
-
- this.state = {
- flipIndex: null,
- };
-
- this.flipElements = this.flipElements.bind(this);
- }
-
- flipElements() {
- const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
- this.setState(prevState => {
- return {
- ...prevState,
- flipIndex: elementIndexToFlip,
- };
- });
- }
-
- componentWillMount() {
- this.cancelInterval = setInterval(this.flipElements, 3000);
- }
-
- componentWillUnmount() {
- clearInterval(this.cancelInterval);
- }
-
- render() {
- console.log('re-render!', this.state.flipIndex);
-
- return (
-
- {Array.from(Array(yCount)).map((el, y) => {
- return (
-
- {Array.from(Array(xCount)).map((el2, x) => {
- return (
- |
- );
- })}
-
- );
- })}
-