opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 05:01:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

TestData: Add schema-based form for simulation (#49637)

Browse Source 
* add inputs for corresponding schema

* change input to default value

* reformat inline fields and keep local state

* add comment on state

* show input on default
This commit is contained in:
An
2022-06-02 12:48:07 -04:00
committed by GitHub
parent 15b3bbad6b
commit 104c4a7630
2 changed files with 109 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
public/app/plugins/datasource/testdata/components/SimulationQueryEditor.tsx vendored
View File

@ -1,23 +1,14 @@
import React, { FormEvent, useMemo } from 'react';
import React, { FormEvent, useMemo, useState } from 'react';
import { useAsync } from 'react-use';
import { DataFrameJSON, SelectableValue } from '@grafana/data';
import {
InlineField,
InlineFieldRow,
Button,
FieldSet,
InlineSwitch,
Input,
Label,
Select,
Form,
TextArea,
} from '@grafana/ui';
import { InlineField, InlineFieldRow, InlineSwitch, Input, Label, Select } from '@grafana/ui';
import { EditorProps } from '../QueryEditor';
import { SimulationQuery } from '../types';
import { SimulationSchemaForm } from './SimulationSchemaForm';
// Type string `json:"type"`
// Name string `json:"name"`
// Description string `json:"description"`
@ -31,12 +22,12 @@ interface SimInfo {
forward: boolean;
config: DataFrameJSON;
}
interface FormDTO {
config: string;
}
export const SimulationQueryEditor = ({ onChange, query, ds }: EditorProps) => {
const simQuery = query.sim ?? ({} as SimulationQuery);
const simKey = simQuery.key ?? ({} as typeof simQuery.key);
// keep track of updated config state to pass down to form
const [cfgValue, setCfgValue] = useState<Record<string, any>>({});
// This only changes once
const info = useAsync(async () => {
@ -63,7 +54,9 @@ export const SimulationQueryEditor = ({ onChange, query, ds }: EditorProps) => {
if (simKey.uid) {
path += '/' + simKey.uid;
}
return (await ds.getResource('sim/' + path))?.config;
let config = (await ds.getResource('sim/' + path))?.config;
setCfgValue(config.value);
return config;
}, [simKey.type, simKey.tick, simKey.uid]);
const onUpdateKey = (key: typeof simQuery.key) => {
@ -91,14 +84,16 @@ export const SimulationQueryEditor = ({ onChange, query, ds }: EditorProps) => {
const onToggleLast = () => {
onChange({ ...query, sim: { ...simQuery, last: !simQuery.last } });
};
const onSubmitChange = (data: FormDTO) => {
const onSchemaFormChange = (config: Record<string, any>) => {
let path = simKey.type + '/' + simKey.tick + 'hz';
if (simKey.uid) {
path += '/' + simKey.uid;
}
ds.postResource('sim/' + path, JSON.parse(data.config));
ds.postResource('sim/' + path, config).then((res) => {
setCfgValue(res.config);
});
};
return (
<>
<InlineFieldRow>
@ -112,7 +107,6 @@ export const SimulationQueryEditor = ({ onChange, query, ds }: EditorProps) => {
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField labelWidth={14} label="Stream" tooltip="connect to the live channel">
<InlineSwitch value={Boolean(simQuery.stream)} onChange={onToggleStream} />
@ -139,18 +133,11 @@ export const SimulationQueryEditor = ({ onChange, query, ds }: EditorProps) => {
<Input type="text" placeholder="optional" value={simQuery.key.uid} onChange={onUIDChanged} />
</InlineField>
</InlineFieldRow>
<div>
<Form onSubmit={onSubmitChange}>
{({ register }) => (
<FieldSet>
<TextArea {...register('config')} defaultValue={JSON.stringify(config.value, null, 2)} rows={7} />
<Button type="submit">Submit</Button>
</FieldSet>
)}
</Form>
SCHEMA:
<pre>{JSON.stringify(current.details?.config.schema, null, 2)}</pre>
</div>
<SimulationSchemaForm
onChange={onSchemaFormChange}
config={cfgValue ?? config.value}
schema={current.details?.config.schema ?? { fields: [] }}
/>
</>
);
};