mirror of
https://github.com/grafana/grafana.git
synced 2025-02-16 02:23:31 -06:00
569fb3f112
* fix viz * add datasource picker on query rows in mixed mode * add timerange, handle add/remove queryrunners * multiqueryrunner test * trying things out. * adding another test to verify running a induvidual query runner will update multirunner. * cleaned up tests a bit. * draft version working ok. * fixing so we base the refId from request targets. * reenable adding expression * layout fixes for alerting page * some cleanup * cleaning up code that we won't use * changed so we don't display the time range if params not passed. * remove unused things in querygroup * changed button to type button. * removed timerange from dataQuery and removed multiquery runner. * minor refactoring. * renamed callback function to make it more clear what it does. * renamed droppable area. * changed so we only display the query editor when selecting threshold. * removed the refresh picker. * revert * wip * extending with data query. * timerange fixes * it is now possible to add grafana queries. * removed unused type. * removed expect import. * added docs. * moved range converting methods to rangeUtil. * clean up some typings, remove file * making sure we don't blow up on component being unmounted. Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import React, { FC, FormEvent } from 'react';
|
|
import { css } from '@emotion/css';
|
|
import { GrafanaTheme, SelectableValue } from '@grafana/data';
|
|
import { Field, Input, Select, Tab, TabContent, TabsBar, TextArea, useStyles } from '@grafana/ui';
|
|
import { AlertDefinition } from 'app/types';
|
|
|
|
const intervalOptions: Array<SelectableValue<number>> = [
|
|
{ value: 60, label: '1m' },
|
|
{ value: 300, label: '5m' },
|
|
{ value: 600, label: '10m' },
|
|
];
|
|
|
|
interface Props {
|
|
alertDefinition: AlertDefinition;
|
|
onChange: (event: FormEvent<HTMLElement>) => void;
|
|
onIntervalChange: (interval: SelectableValue<number>) => void;
|
|
onConditionChange: (refId: SelectableValue<string>) => void;
|
|
}
|
|
|
|
export const AlertDefinitionOptions: FC<Props> = ({ alertDefinition, onChange, onIntervalChange }) => {
|
|
const styles = useStyles(getStyles);
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<TabsBar>
|
|
<Tab label="Alert definition" active={true} />
|
|
</TabsBar>
|
|
<TabContent className={styles.container}>
|
|
<Field label="Title">
|
|
<Input width={25} name="title" value={alertDefinition.title} onChange={onChange} />
|
|
</Field>
|
|
<Field label="Description" description="What does the alert do? Why was it created?">
|
|
<TextArea
|
|
rows={5}
|
|
width={25}
|
|
name="description"
|
|
value={alertDefinition.description}
|
|
onChange={onChange}
|
|
readOnly={true}
|
|
/>
|
|
</Field>
|
|
<Field label="Evaluate">
|
|
<div className={styles.optionRow}>
|
|
<span className={styles.optionName}>Every</span>
|
|
<Select
|
|
onChange={onIntervalChange}
|
|
value={intervalOptions.find((i) => i.value === alertDefinition.intervalSeconds)}
|
|
options={intervalOptions}
|
|
width={10}
|
|
/>
|
|
</div>
|
|
</Field>
|
|
<Field label="Conditions">
|
|
<div />
|
|
</Field>
|
|
</TabContent>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme) => {
|
|
return {
|
|
wrapper: css`
|
|
padding-top: ${theme.spacing.md};
|
|
height: 100%;
|
|
`,
|
|
container: css`
|
|
padding: ${theme.spacing.md};
|
|
background-color: ${theme.colors.panelBg};
|
|
height: 100%;
|
|
border-left: 1px solid ${theme.colors.border1};
|
|
`,
|
|
optionRow: css`
|
|
display: flex;
|
|
align-items: baseline;
|
|
`,
|
|
optionName: css`
|
|
font-size: ${theme.typography.size.md};
|
|
color: ${theme.colors.formInputText};
|
|
margin-right: ${theme.spacing.sm};
|
|
`,
|
|
};
|
|
};
|