// Libraries import { map } from 'lodash'; import { memo } from 'react'; import * as React from 'react'; // Types import { SelectableValue } from '@grafana/data'; import { config } from '@grafana/runtime'; import { InlineFormLabel, RadioButtonGroup, InlineField, Input, Select, Stack } from '@grafana/ui'; import { getLokiQueryType } from '../queryUtils'; import { LokiQuery, LokiQueryDirection, LokiQueryType } from '../types'; export interface LokiOptionFieldsProps { lineLimitValue: string; resolution: number; query: LokiQuery; onChange: (value: LokiQuery) => void; onRunQuery: () => void; runOnBlur?: boolean; } export const queryTypeOptions: Array> = [ { value: LokiQueryType.Range, label: 'Range', description: 'Run query over a range of time.' }, { value: LokiQueryType.Instant, label: 'Instant', description: 'Run query against a single point in time. For this query, the "To" time is used.', }, ]; export const queryDirections: Array> = [ { value: LokiQueryDirection.Backward, label: 'Backward', description: 'Search in backward direction.' }, { value: LokiQueryDirection.Forward, label: 'Forward', description: 'Search in forward direction.', }, ]; if (config.featureToggles.lokiShardSplitting) { queryDirections.push({ value: LokiQueryDirection.Scan, label: 'Scan', description: 'Experimental. Split the query into smaller units and stop at the requested log line limit.', icon: 'exclamation-triangle', }); } export function getQueryDirectionLabel(direction: LokiQueryDirection) { return queryDirections.find((queryDirection) => queryDirection.value === direction)?.label ?? 'Unknown'; } if (config.featureToggles.lokiExperimentalStreaming) { queryTypeOptions.push({ value: LokiQueryType.Stream, label: 'Stream', description: 'Run a query and keep sending results on an interval', }); } export const DEFAULT_RESOLUTION: SelectableValue = { value: 1, label: '1/1', }; export const RESOLUTION_OPTIONS: Array> = [DEFAULT_RESOLUTION].concat( map([2, 3, 4, 5, 10], (value: number) => ({ value, label: '1/' + value, })) ); export function LokiOptionFields(props: LokiOptionFieldsProps) { const { lineLimitValue, resolution, onRunQuery, runOnBlur, onChange } = props; const query = props.query ?? {}; const queryType = getLokiQueryType(query); function onChangeQueryLimit(value: string) { const nextQuery = { ...query, maxLines: preprocessMaxLines(value) }; onChange(nextQuery); } function onQueryTypeChange(queryType: LokiQueryType) { const { instant, range, ...rest } = query; onChange({ ...rest, queryType }); } function onMaxLinesChange(e: React.SyntheticEvent) { if (query.maxLines !== preprocessMaxLines(e.currentTarget.value)) { onChangeQueryLimit(e.currentTarget.value); } } function onReturnKeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter') { onRunQuery(); } } function onResolutionChange(option: SelectableValue) { const nextQuery = { ...query, resolution: option.value }; onChange(nextQuery); } return ( {/*Query type field*/} Query type { onQueryTypeChange(type); if (runOnBlur) { onRunQuery(); } }} /> {/*Line limit field*/} { if (runOnBlur) { onRunQuery(); } }} />