grafana/public/app/features/live/pages/RuleTest.tsx

80 lines
2.0 KiB
TypeScript
Raw Normal View History

2021-10-22 10:56:16 -05:00
import React, { useState } from 'react';
import { Button, CodeEditor, Table, useStyles, Field } from '@grafana/ui';
2021-10-19 02:50:17 -05:00
import { ChannelFrame, Rule } from './types';
import { getBackendSrv, config } from '@grafana/runtime';
import { css } from '@emotion/css';
import { getDisplayProcessor, GrafanaTheme, StreamingDataFrame } from '@grafana/data';
2021-10-22 10:56:16 -05:00
interface Props {
rule: Rule;
}
export const RuleTest: React.FC<Props> = (props) => {
2021-10-19 02:50:17 -05:00
const [response, setResponse] = useState<ChannelFrame[]>();
const [data, setData] = useState<string>();
const styles = useStyles(getStyles);
const onBlur = (text: string) => {
setData(text);
};
const onClick = () => {
getBackendSrv()
.post(`api/live/pipeline-convert-test`, {
2021-10-22 10:56:16 -05:00
channelRules: [props.rule],
channel: props.rule.pattern,
2021-10-19 02:50:17 -05:00
data: data,
})
.then((data: any) => {
const t = data.channelFrames as any[];
if (t) {
setResponse(
t.map((f) => {
const frame = new StreamingDataFrame(f.frame);
for (const field of frame.fields) {
field.display = getDisplayProcessor({ field, theme: config.theme2 });
}
return { channel: f.channel, frame };
})
);
}
})
.catch((e) => {
setResponse(e);
});
};
return (
2021-10-22 10:56:16 -05:00
<div>
<CodeEditor
height={100}
value=""
showLineNumbers={true}
readOnly={false}
language="json"
showMiniMap={false}
onBlur={onBlur}
/>
<Button onClick={onClick} className={styles.margin}>
Test
</Button>
2021-10-19 02:50:17 -05:00
2021-10-22 10:56:16 -05:00
{response?.length &&
response.map((r) => (
<Field key={r.channel} label={r.channel}>
<Table data={r.frame} width={700} height={Math.min(10 * r.frame.length + 10, 150)} showTypeIcons></Table>
</Field>
))}
</div>
2021-10-19 02:50:17 -05:00
);
2021-10-22 10:56:16 -05:00
};
2021-10-19 02:50:17 -05:00
const getStyles = (theme: GrafanaTheme) => {
return {
margin: css`
margin-bottom: 15px;
`,
};
};