131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
import React, { FC, useMemo, useState } from 'react';
|
|
import { useObservable } from 'react-use';
|
|
import { css } from 'emotion';
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
import { DataFrame, DataQuery, GrafanaTheme, PanelData } from '@grafana/data';
|
|
import { Button, Icon, Tab, TabContent, TabsBar, useStyles } from '@grafana/ui';
|
|
import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
|
|
import { PreviewQueryTab } from './PreviewQueryTab';
|
|
import { PreviewInstancesTab } from './PreviewInstancesTab';
|
|
|
|
enum Tabs {
|
|
Query = 'query',
|
|
Instances = 'instances',
|
|
}
|
|
|
|
const tabs = [
|
|
{ id: Tabs.Query, text: 'Query result' },
|
|
{ id: Tabs.Instances, text: 'Alerting instances' },
|
|
];
|
|
|
|
interface Props {
|
|
queryRunner: PanelQueryRunner;
|
|
getInstances: () => DataFrame[];
|
|
queries: DataQuery[];
|
|
onTest: () => void;
|
|
onRunQueries: () => void;
|
|
}
|
|
|
|
export const AlertingQueryPreview: FC<Props> = ({ getInstances, onRunQueries, onTest, queryRunner, queries }) => {
|
|
const [activeTab, setActiveTab] = useState<string>(Tabs.Query);
|
|
const styles = useStyles(getStyles);
|
|
|
|
const observable = useMemo(() => queryRunner.getData({ withFieldConfig: true, withTransforms: true }), []);
|
|
const data = useObservable<PanelData>(observable);
|
|
const instances = getInstances();
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<TabsBar>
|
|
{tabs.map((tab, index) => {
|
|
return (
|
|
<Tab
|
|
key={`${tab.id}-${index}`}
|
|
label={tab.text}
|
|
onChangeTab={() => setActiveTab(tab.id)}
|
|
active={activeTab === tab.id}
|
|
/>
|
|
);
|
|
})}
|
|
</TabsBar>
|
|
<TabContent className={styles.tabContent}>
|
|
{data && data.state === 'Error' ? (
|
|
<div className={styles.noQueries}>
|
|
<h4 className={styles.noQueriesHeader}>There was an error :(</h4>
|
|
<div>{data.error?.data?.error}</div>
|
|
</div>
|
|
) : queries && queries.length > 0 ? (
|
|
<AutoSizer style={{ width: '100%', height: '100%' }}>
|
|
{({ width, height }) => {
|
|
switch (activeTab) {
|
|
case Tabs.Instances:
|
|
return (
|
|
<PreviewInstancesTab
|
|
isTested={instances.length > 0}
|
|
instances={instances}
|
|
styles={styles}
|
|
width={width}
|
|
height={height}
|
|
onTest={onTest}
|
|
/>
|
|
);
|
|
|
|
case Tabs.Query:
|
|
default:
|
|
if (data) {
|
|
return <PreviewQueryTab data={data} width={width} height={height} />;
|
|
}
|
|
return (
|
|
<div className={styles.noQueries}>
|
|
<h4 className={styles.noQueriesHeader}>Run queries to view data.</h4>
|
|
<Button onClick={onRunQueries}>Run queries</Button>
|
|
</div>
|
|
);
|
|
}
|
|
}}
|
|
</AutoSizer>
|
|
) : (
|
|
<div className={styles.noQueries}>
|
|
<h4 className={styles.noQueriesHeader}>No queries added.</h4>
|
|
<div>Start adding queries to this alert and a visualisation for your queries will appear here.</div>
|
|
<div>
|
|
Learn more about how to create alert definitions <Icon name="external-link-alt" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</TabContent>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme) => {
|
|
return {
|
|
wrapper: css`
|
|
label: alertDefinitionPreviewTabs;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: ${theme.spacing.md} 0 0 ${theme.spacing.md};
|
|
`,
|
|
tabContent: css`
|
|
background: ${theme.colors.panelBg};
|
|
height: 100%;
|
|
`,
|
|
noQueries: css`
|
|
color: ${theme.colors.textSemiWeak};
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
`,
|
|
noQueriesHeader: css`
|
|
color: ${theme.colors.textSemiWeak};
|
|
`,
|
|
};
|
|
};
|
|
|
|
export type PreviewStyles = ReturnType<typeof getStyles>;
|