mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Alerting: Remove unused NGAlerting components (#34568)
This commit is contained in:
Peter Holmberg
GitHub
@@ -1,55 +0,0 @@
|
||||
import React, { FC } from 'react';
|
||||
// @ts-ignore
|
||||
import Highlighter from 'react-highlight-words';
|
||||
import { FeatureState } from '@grafana/data';
|
||||
import { Card, FeatureBadge, Icon, LinkButton } from '@grafana/ui';
|
||||
import { AlertDefinition } from 'app/types';
|
||||
import { config } from '@grafana/runtime';
|
||||
|
||||
interface Props {
|
||||
alertDefinition: AlertDefinition;
|
||||
search: string;
|
||||
}
|
||||
|
||||
export const AlertDefinitionItem: FC<Props> = ({ alertDefinition, search }) => {
|
||||
return (
|
||||
<Card heading={CardTitle(alertDefinition.title, search)}>
|
||||
<Card.Figure>
|
||||
<Icon size="xl" name="question-circle" className="alert-rule-item__icon" />
|
||||
</Card.Figure>
|
||||
<Card.Meta>
|
||||
<span key="state">
|
||||
<span key="text">{alertDefinition.description}</span>
|
||||
</span>
|
||||
</Card.Meta>
|
||||
<Card.Actions>
|
||||
{[
|
||||
<LinkButton
|
||||
key="edit"
|
||||
variant="secondary"
|
||||
href={
|
||||
config.featureToggles.ngalert
|
||||
? `/alerting/ng/${alertDefinition.uid}/edit`
|
||||
: `/alerting/${alertDefinition.uid}/edit`
|
||||
}
|
||||
icon="cog"
|
||||
>
|
||||
Edit alert
|
||||
</LinkButton>,
|
||||
]}
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const CardTitle = (title: string, search: string) => (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<Highlighter
|
||||
key={title}
|
||||
highlightClassName="highlight-search-match"
|
||||
textToHighlight={title}
|
||||
searchWords={[search]}
|
||||
/>
|
||||
<FeatureBadge featureState={FeatureState.beta} />
|
||||
</div>
|
||||
);
|
||||
@@ -1,83 +0,0 @@
|
||||
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};
|
||||
`,
|
||||
};
|
||||
};
|
||||
@@ -1,118 +0,0 @@
|
||||
import React, { FC, useState } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import { DataFrame, DataQuery, GrafanaTheme, PanelData } from '@grafana/data';
|
||||
import { Icon, Tab, TabContent, TabsBar, useStyles } from '@grafana/ui';
|
||||
import { PreviewQueryTab } from './PreviewQueryTab';
|
||||
import { PreviewInstancesTab } from './PreviewInstancesTab';
|
||||
import { EmptyState } from './EmptyState';
|
||||
|
||||
enum Tabs {
|
||||
Query = 'query',
|
||||
Instances = 'instances',
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: Tabs.Query, text: 'Query result' },
|
||||
{ id: Tabs.Instances, text: 'Alerting instances' },
|
||||
];
|
||||
|
||||
interface Props {
|
||||
getInstances: () => DataFrame[];
|
||||
queries: DataQuery[];
|
||||
onTest: () => void;
|
||||
}
|
||||
|
||||
export const AlertingQueryPreview: FC<Props> = ({ getInstances, onTest, queries }) => {
|
||||
const [activeTab, setActiveTab] = useState<string>(Tabs.Query);
|
||||
const styles = useStyles(getStyles);
|
||||
|
||||
let data = {} as PanelData;
|
||||
|
||||
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' ? (
|
||||
<EmptyState title="There was an error :(">
|
||||
<div>{data.error?.data?.error}</div>
|
||||
</EmptyState>
|
||||
) : (
|
||||
<QueriesAndInstances
|
||||
instances={instances}
|
||||
onTest={onTest}
|
||||
data={data}
|
||||
activeTab={activeTab}
|
||||
queries={queries}
|
||||
/>
|
||||
))}
|
||||
</TabContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface PreviewProps {
|
||||
queries: DataQuery[];
|
||||
instances: DataFrame[];
|
||||
onTest: () => void;
|
||||
data: PanelData;
|
||||
activeTab: string;
|
||||
}
|
||||
|
||||
const QueriesAndInstances: FC<PreviewProps> = ({ queries, instances, onTest, data, activeTab }) => {
|
||||
if (queries.length === 0) {
|
||||
return (
|
||||
<EmptyState title="No queries added.">
|
||||
<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>
|
||||
</EmptyState>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AutoSizer style={{ width: '100%', height: '100%' }}>
|
||||
{({ width, height }) => {
|
||||
switch (activeTab) {
|
||||
case Tabs.Instances:
|
||||
return <PreviewInstancesTab instances={instances} width={width} height={height} onTest={onTest} />;
|
||||
|
||||
case Tabs.Query:
|
||||
default:
|
||||
return <PreviewQueryTab data={data} width={width} height={height} />;
|
||||
}
|
||||
}}
|
||||
</AutoSizer>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
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%;
|
||||
`,
|
||||
};
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import React, { FC, ReactNode } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { useStyles } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
children: ReactNode | ReactNode[];
|
||||
}
|
||||
|
||||
export const EmptyState: FC<Props> = ({ children, title }) => {
|
||||
const styles = useStyles(getStyles);
|
||||
|
||||
return (
|
||||
<div className={styles.emptyState}>
|
||||
<h4 className={styles.emptyStateHeader}>{title}</h4>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => {
|
||||
return {
|
||||
emptyState: css`
|
||||
color: ${theme.colors.textSemiWeak};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`,
|
||||
emptyStateHeader: css`
|
||||
color: ${theme.colors.textSemiWeak};
|
||||
`,
|
||||
};
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import React, { FC } from 'react';
|
||||
import { DataFrame } from '@grafana/data';
|
||||
import { Button, Table } from '@grafana/ui';
|
||||
import { EmptyState } from './EmptyState';
|
||||
|
||||
interface Props {
|
||||
instances: DataFrame[];
|
||||
width: number;
|
||||
height: number;
|
||||
onTest: () => void;
|
||||
}
|
||||
|
||||
export const PreviewInstancesTab: FC<Props> = ({ instances, onTest, height, width }) => {
|
||||
if (!instances.length) {
|
||||
return (
|
||||
<EmptyState title="You haven’t tested your alert yet.">
|
||||
<div>In order to see your instances, you need to test your alert first.</div>
|
||||
<Button onClick={onTest}>Test alert now</Button>
|
||||
</EmptyState>
|
||||
);
|
||||
}
|
||||
return <Table data={instances[0]} height={height} width={width} />;
|
||||
};
|
||||
@@ -1,74 +0,0 @@
|
||||
import React, { FC, useMemo, useState } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { getFrameDisplayName, GrafanaTheme, PanelData, SelectableValue } from '@grafana/data';
|
||||
import { Button, Select, stylesFactory, Table, useTheme } from '@grafana/ui';
|
||||
import { EmptyState } from './EmptyState';
|
||||
|
||||
interface Props {
|
||||
data: PanelData;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export const PreviewQueryTab: FC<Props> = ({ data, height, width }) => {
|
||||
const [currentSeries, setSeries] = useState<number>(0);
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme, height);
|
||||
const series = useMemo<Array<SelectableValue<number>>>(() => {
|
||||
if (data?.series) {
|
||||
return data.series.map((frame, index) => ({ value: index, label: getFrameDisplayName(frame) }));
|
||||
}
|
||||
|
||||
return [];
|
||||
}, [data]);
|
||||
|
||||
// Select padding
|
||||
const padding = 16;
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<EmptyState title="Run queries to view data.">
|
||||
<Button>Run queries</Button>
|
||||
</EmptyState>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data.series) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (data.series.length > 1) {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<div style={{ height: height - theme.spacing.formInputHeight - 16 }}>
|
||||
<Table
|
||||
data={data.series[currentSeries]}
|
||||
height={height - theme.spacing.formInputHeight - padding}
|
||||
width={width}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.selectWrapper}>
|
||||
<Select
|
||||
onChange={(selectedValue) => setSeries(selectedValue.value!)}
|
||||
options={series}
|
||||
value={currentSeries}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <Table data={data.series[0]} height={height} width={width} />;
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
label: preview-wrapper;
|
||||
height: ${height}px;
|
||||
`,
|
||||
selectWrapper: css`
|
||||
padding: ${theme.spacing.md};
|
||||
`,
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user