The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
grafana/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

211 lines
6.8 KiB

import { map } from 'lodash';
import React, { PureComponent } from 'react';
// Types
import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
import { SelectableValue } from '@grafana/data';
import { PromQuery } from '../types';
import PromQueryField from './PromQueryField';
import PromLink from './PromLink';
Prometheus: Add support for Exemplars (#28057) * Fix typos * Query exemplars API * Add link to traceID * Update exemplar to show more information Reduce exemplars density * Fix typos * Query exemplars API * Add link to traceID * Update exemplar to show more information Reduce exemplars density * Update GraphNG legend type * Show new graph component in Explore * Add exemplar annotation a design update * Graph panel not to show red line annotation Exemplar plugin to use y value * Address review comments * Density filter for exemplars * Update schema of exemplars * Density filter with y-value sampling * Enforce axis scales to include 0 * Changes after merge with master * Show metrics when there is no result * Decorators tests fix * ExemplarMarker to receive component prop * Remove context menu from explore graph * Add color to graph * Update explore graph panel * Update graph config to use default values * Fix data source tests * Do not show exemplars outside of graph * Add exemplars switch * Fix typos * Add exemplars query only when enabled * Show graph in explore without filling it * Update exemplars plugin y value scale selection * Update tests * Add data source picker for internal linking * Increase pointSize for better visibility * Fix explore e2e test * Fix data link title variable interpolation * Use new switch component in PromExemplarField * Move FieldLink component to new file * Convert exemplar to datalink * Add legend toggling logic to Explore * Add legend toggling to Explore * Address Ivana's feedback * Address Andrej's comments * Address Gio's feedback * Add tests for result_transformer * Fix eslint issues * Change sampler formula for better readability Co-authored-by: David Kaltschmidt <david@leia.lan> Co-authored-by: David Kaltschmidt <david@leia.fritz.box> Co-authored-by: David Kaltschmidt <david.kaltschmidt@gmail.com>
4 years ago
import { PromExemplarField } from './PromExemplarField';
import { PromQueryEditorProps } from './types';
const { Switch } = LegacyForms;
const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
{ label: 'Time series', value: 'time_series' },
{ label: 'Table', value: 'table' },
{ label: 'Heatmap', value: 'heatmap' },
];
const INTERVAL_FACTOR_OPTIONS: Array<SelectableValue<number>> = map([1, 2, 3, 4, 5, 10], (value: number) => ({
value,
label: '1/' + value,
}));
interface State {
legendFormat?: string;
formatOption: SelectableValue<string>;
interval?: string;
intervalFactorOption: SelectableValue<number>;
instant: boolean;
exemplar: boolean;
}
export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State> {
// Query target to be modified and used for queries
query: PromQuery;
constructor(props: PromQueryEditorProps) {
super(props);
// Use default query to prevent undefined input values
Prometheus: Implement stepMode for alerting queries (#36796) * Add select component for choosing step option * Add onStepChange * Add functionality for max step * Rename minInterval to stepInterval to describe min, max and exact step interval * Change select option from standard to exact * Add new type StepType for better type safety * Add tests for adjustInterval * Add functionality and tests for exact step option * Prometheus: Spell out min and max in select component * Prometheus: Change width of step select component and add placeholder * Prometheus: Adjust for the factor in exact step * Prometheus: Update tooltip of step lable to include max and exact options and add padding to select component to give it some breathing room from other components * Update snapshot for step tooltip * Prometheus: make tooltip more informative * Prometheus: add tooltip to interval input element * Prometheus: extract default step option * Prometheus: update snapshot for PromQueryEditor * Prometheus: change step labels to uppercase * Prometheus: define a default step option * Prometheus: use default step option in both ui component and logic * Prometheus: update snapshot for PromQueryEditor * Prometheus: refactor datasource.ts for better readability * Prometheus: change tool tip for step * Prometheus: update snapshots * Prometheus: add correct styling * Prometheus: update snapshots * Prometheus change variable name to something less superfluous * Prometheus: refactor * Prometheus: add new test for adjustInterval * Docs: Update docummentation on the step parameter for prometheus * Prometheus: make step input field smaller and change placeholder text to 15s * Prometheus: update snapshots * Prometheus: Make stepMode uniform in all places in the code * Adjust step based on stepMode * Adjust comment * Check if we have queryInterval * Refactor, add safe interval * Fix merge resolutions * Fix tests and add tests * Update snapshot * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/datasources/prometheus.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Implement calculation with intervalMode in calculator.go * Update tests, add calculate safe interval method * Replace panic with error * Update pkg/tsdb/interval/interval_test.go Co-authored-by: idafurjes <36131195+idafurjes@users.noreply.github.com> * Update pkg/tsdb/calculator_test.go Co-authored-by: idafurjes <36131195+idafurjes@users.noreply.github.com> * Impotrt require * Remove lint errors Co-authored-by: Olof Bourghardt <ob655088@gmail.com> Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> Co-authored-by: idafurjes <36131195+idafurjes@users.noreply.github.com>
4 years ago
const defaultQuery: Partial<PromQuery> = {
expr: '',
legendFormat: '',
interval: '',
exemplar: true,
};
const query = Object.assign({}, defaultQuery, props.query);
this.query = query;
// Query target properties that are fully controlled inputs
this.state = {
// Fully controlled text inputs
interval: query.interval,
legendFormat: query.legendFormat,
// Select options
formatOption: FORMAT_OPTIONS.find((option) => option.value === query.format) || FORMAT_OPTIONS[0],
intervalFactorOption:
INTERVAL_FACTOR_OPTIONS.find((option) => option.value === query.intervalFactor) || INTERVAL_FACTOR_OPTIONS[0],
// Switch options
instant: Boolean(query.instant),
exemplar: Boolean(query.exemplar),
};
}
onFieldChange = (query: PromQuery, override?: any) => {
this.query.expr = query.expr;
};
onFormatChange = (option: SelectableValue<string>) => {
this.query.format = option.value;
this.setState({ formatOption: option }, this.onRunQuery);
};
Grafana-UI: Update React Hook Form to v7 (#33328) * Update hook form * Update Form component * Update ChangePassword.tsx * Update custom types * Update SaveDashboardForm * Update form story * Update FieldArray.story.tsx * Bump hook form version * Update typescript to v4.2.4 * Update ForgottenPassword.tsx * Update LoginForm.tsx * Update SignupPage.tsx * Update VerifyEmail.tsx * Update AdminEditOrgPage.tsx * Update UserCreatePage.tsx * Update BasicSettings.tsx * Update NotificationChannelForm.tsx * Update NotificationChannelOptions.tsx * Update NotificationSettings.tsx * Update OptionElement.tsx * Update AlertRuleForm.tsx * Update AlertTypeStep.tsx * Update AnnotationsField.tsx * Update ConditionField.tsx * Update ConditionsStep.tsx * Update GroupAndNamespaceFields.tsx * Update LabelsField.tsx * Update QueryStep.tsx * Update RowOptionsForm.tsx * Update SaveDashboardAsForm.tsx * Update NewDashboardsFolder.tsx * Update ImportDashboardForm.tsx * Update DashboardImportPage.tsx * Update NewOrgPage.tsx * Update OrgProfile.tsx * Update UserInviteForm.tsx * Update PlaylistForm.tsx * Update ChangePasswordForm.tsx * Update UserProfileEditForm.tsx * Update TeamSettings.tsx * Update SignupInvited.tsx * Expose setValue from the Form * Update typescript to v4.2.4 * Remove ref from field props * Fix tests * Revert TS update * Use exact version * Update latest batch of changes * Reduce the number of strict TS errors * Fix defaults * more type error fixes * Update CreateTeam * fix folder picker in rule form * fixes for hook form 7 * Update docs Co-authored-by: Domas <domasx2@gmail.com>
4 years ago
onInstantChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
const instant = (e.target as HTMLInputElement).checked;
this.query.instant = instant;
this.setState({ instant }, this.onRunQuery);
};
onIntervalChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
const interval = e.currentTarget.value;
this.query.interval = interval;
this.setState({ interval });
};
onIntervalFactorChange = (option: SelectableValue<number>) => {
this.query.intervalFactor = option.value;
this.setState({ intervalFactorOption: option }, this.onRunQuery);
};
onLegendChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
const legendFormat = e.currentTarget.value;
this.query.legendFormat = legendFormat;
this.setState({ legendFormat });
};
onExemplarChange = (isEnabled: boolean) => {
this.query.exemplar = isEnabled;
this.setState({ exemplar: isEnabled }, this.onRunQuery);
};
onRunQuery = () => {
const { query } = this;
// Change of query.hide happens outside of this component and is just passed as prop. We have to update it when running queries.
const { hide } = this.props.query;
this.props.onChange({ ...query, hide });
this.props.onRunQuery();
};
render() {
const { datasource, query, range, data } = this.props;
const { formatOption, instant, interval, intervalFactorOption, legendFormat } = this.state;
return (
<PromQueryField
datasource={datasource}
query={query}
range={range}
onRunQuery={this.onRunQuery}
onChange={this.onFieldChange}
history={[]}
data={data}
data-testid={testIds.editor}
ExtraFieldElement={
<div className="gf-form-inline">
<div className="gf-form">
<InlineFormLabel
width={7}
tooltip="Controls the name of the time series, using name or pattern. For example
{{hostname}} will be replaced with label value for the label hostname."
>
Legend
</InlineFormLabel>
<input
type="text"
className="gf-form-input"
placeholder="legend format"
value={legendFormat}
onChange={this.onLegendChange}
onBlur={this.onRunQuery}
/>
</div>
<div className="gf-form">
<InlineFormLabel
width={7}
tooltip={
<>
An additional lower limit for the step parameter of the Prometheus query and for the{' '}
<code>$__interval</code> and <code>$__rate_interval</code> variables. The limit is absolute and not
modified by the &quot;Resolution&quot; setting.
</>
}
>
Min step
</InlineFormLabel>
<input
type="text"
className="gf-form-input width-8"
placeholder={interval}
onChange={this.onIntervalChange}
onBlur={this.onRunQuery}
value={interval}
/>
</div>
<div className="gf-form">
<div className="gf-form-label">Resolution</div>
<Select
Select: Make portalling the menu opt-in, but opt-in *everywhere* (#37501) * Select: Don't portal by default * Select: Portal all the Selects * Fix indendentation in this comment * Select: Remove @example docs until formatting is correct * Docs: Add some documentation for the Select changes * Update docs/sources/whatsnew/whats-new-in-v8-1.md Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update docs/sources/whatsnew/whats-new-in-v8-1.md Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update packages/grafana-ui/src/components/Select/types.ts Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Docs: Variants instead of varients * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>
4 years ago
menuShouldPortal
isSearchable={false}
options={INTERVAL_FACTOR_OPTIONS}
onChange={this.onIntervalFactorChange}
value={intervalFactorOption}
/>
</div>
<div className="gf-form">
<div className="gf-form-label width-7">Format</div>
<Select
Select: Make portalling the menu opt-in, but opt-in *everywhere* (#37501) * Select: Don't portal by default * Select: Portal all the Selects * Fix indendentation in this comment * Select: Remove @example docs until formatting is correct * Docs: Add some documentation for the Select changes * Update docs/sources/whatsnew/whats-new-in-v8-1.md Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update docs/sources/whatsnew/whats-new-in-v8-1.md Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update packages/grafana-ui/src/components/Select/types.ts Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Docs: Variants instead of varients * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>
4 years ago
menuShouldPortal
className="select-container"
width={16}
isSearchable={false}
options={FORMAT_OPTIONS}
onChange={this.onFormatChange}
value={formatOption}
/>
<Switch label="Instant" checked={instant} onChange={this.onInstantChange} />
<InlineFormLabel width={10} tooltip="Link to Graph in Prometheus">
<PromLink
datasource={datasource}
query={this.query} // Use modified query
panelData={data}
/>
</InlineFormLabel>
</div>
<PromExemplarField onChange={this.onExemplarChange} datasource={datasource} query={this.query} />
</div>
}
/>
);
}
}
export const testIds = {
editor: 'prom-editor',
};