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;
|
|
|
|
`,
|
|
|
|
};
|
|
|
|
};
|