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/testdata/components/SimulationQueryEditor.tsx

85 lines
2.8 KiB

import { SelectableValue } from '@grafana/data';
import { InlineField, InlineFieldRow, InlineSwitch, Input, Label, Select } from '@grafana/ui';
import React, { FormEvent } from 'react';
import { EditorProps } from '../QueryEditor';
import { SimulationQuery } from '../types';
export const SimulationQueryEditor = ({ onChange, query }: EditorProps) => {
const simQuery = query.sim ?? ({} as SimulationQuery);
const simKey = simQuery.key ?? ({} as typeof simQuery.key);
const options = [
{ label: 'Flight', value: 'flight' },
{ label: 'Sine', value: 'sine' },
{ label: 'Tank', value: 'tank' },
];
const onUpdateKey = (key: typeof simQuery.key) => {
onChange({ ...query, sim: { ...simQuery, key } });
};
const onUIDChanged = (e: FormEvent<HTMLInputElement>) => {
const { value } = e.target as HTMLInputElement;
onUpdateKey({ ...simKey, uid: value ?? undefined });
};
const onTickChanged = (e: FormEvent<HTMLInputElement>) => {
const tick = e.currentTarget.valueAsNumber;
onUpdateKey({ ...simKey, tick });
};
const onTypeChange = (v: SelectableValue<string>) => {
onUpdateKey({ ...simKey, type: v.value! });
};
const onToggleStream = () => {
onChange({ ...query, sim: { ...simQuery, stream: !simQuery.stream } });
};
const onToggleLast = () => {
onChange({ ...query, sim: { ...simQuery, last: !simQuery.last } });
};
return (
<>
<InlineFieldRow>
<InlineField labelWidth={14} label="Simulation" tooltip="">
<Select
menuShouldPortal
options={options}
value={options.find((item) => item.value === simQuery.key?.type)}
onChange={onTypeChange}
width={32}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField labelWidth={14} label="Stream" tooltip="connect to the live channel">
<InlineSwitch value={Boolean(simQuery.stream)} onChange={onToggleStream} />
</InlineField>
<InlineField label="Interval" tooltip="the rate a simulation will spit out events">
<Input
width={10}
type="number"
value={simKey.tick}
onChange={onTickChanged}
min={1 / 10}
max={50}
suffix="hz"
/>
</InlineField>
<InlineField label="Last" tooltip="Only return the last value">
<Label>
<InlineSwitch value={Boolean(simQuery.last)} onChange={onToggleLast} />
</Label>
</InlineField>
<InlineField label="UID" tooltip="A UID will allow multiple simulations to run at the same time">
<Input type="text" placeholder="optional" value={simQuery.key.uid} onChange={onUIDChanged} />
</InlineField>
</InlineFieldRow>
</>
);
};