Skip to content

N
nexpie-grafana-theme
Commit 7d58ec3d by Marcus Andersson Committed by GitHub
Options

AlertTab: some ui updates (#23971) 

* updated the alerting tab.

* changed so we use a confirm button.

* removed uncommeneted import.

* Change to secondary buttons

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* trying to fix issue with panel of undefined.

* Fix prettier

* Update public/app/features/alerting/AlertTab.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
parent cc3fc180
Showing with 122 additions and 218 deletions
public/app/features/alerting/AlertTab.tsx
import React, { PureComponent } from 'react';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { css } from 'emotion';
import { Alert, Button, IconName } from '@grafana/ui';
import { Alert, Button, IconName, CustomScrollbar, Container, HorizontalGroup, ConfirmModal, Modal } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
import appEvents from 'app/core/app_events';
import { getAlertingValidationMessage } from './getAlertingValidationMessage';
import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/EditorTabBody';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import StateHistory from './StateHistory';
import 'app/features/alerting/AlertTabCtrl';
......@@ -16,7 +13,7 @@ import 'app/features/alerting/AlertTabCtrl';
import { DashboardModel } from '../dashboard/state/DashboardModel';
import { PanelModel } from '../dashboard/state/PanelModel';
import { TestRuleResult } from './TestRuleResult';
import { AppNotificationSeverity, CoreEvents, StoreState } from 'app/types';
import { AppNotificationSeverity, StoreState } from 'app/types';
import { updateLocation } from 'app/core/actions';
import { PanelEditorTabId } from '../dashboard/components/PanelEditor/types';
......@@ -37,6 +34,9 @@ export type Props = OwnProps & ConnectedProps & DispatchProps;
interface State {
validatonMessage: string;
showStateHistory: boolean;
showDeleteConfirmation: boolean;
showTestRule: boolean;
}
class UnConnectedAlertTab extends PureComponent<Props, State> {
......@@ -46,6 +46,9 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
state: State = {
validatonMessage: '',
showStateHistory: false,
showDeleteConfirmation: false,
showTestRule: false,
};
componentDidMount() {
......@@ -103,57 +106,6 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
}
}
stateHistory = (): EditorToolbarView => {
const { panel, dashboard } = this.props;
return {
title: 'State history',
render: () => {
return (
<StateHistory
dashboard={dashboard}
panelId={panel.editSourceId ?? panel.id}
onRefresh={this.panelCtrl.refresh}
/>
);
},
};
};
deleteAlert = (): EditorToolbarView => {
const { panel } = this.props;
return {
title: 'Delete',
btnType: 'danger',
onClick: () => {
appEvents.emit(CoreEvents.showConfirmModal, {
title: 'Delete Alert',
text: 'Are you sure you want to delete this alert rule?',
text2: 'You need to save dashboard for the delete to take effect',
icon: 'trash-alt',
yesText: 'Delete',
onConfirm: () => {
delete panel.alert;
panel.thresholds = [];
this.panelCtrl.alertState = null;
this.panelCtrl.render();
this.forceUpdate();
},
});
},
};
};
renderTestRuleResult = () => {
const { dashboard, panel } = this.props;
return <TestRuleResult panel={panel} dashboard={dashboard} />;
};
testRule = (): EditorToolbarView => ({
title: 'Test Rule',
render: () => this.renderTestRuleResult(),
});
onAddAlert = () => {
this.panelCtrl._enableAlert();
this.component.digest();
......@@ -165,6 +117,11 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
updateLocation({ query: { tab: PanelEditorTabId.Query }, partial: true });
};
onToggleModal = (prop: keyof Omit<State, 'validatonMessage'>) => {
const value = this.state[prop];
this.setState({ ...this.state, [prop]: !value });
};
renderValidationMessage = () => {
const { validatonMessage } = this.state;
......@@ -186,6 +143,74 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
);
};
renderTestRule = () => {
if (!this.state.showTestRule) {
return null;
}
const { panel, dashboard } = this.props;
const onDismiss = () => this.onToggleModal('showTestRule');
return (
<Modal isOpen={true} icon="bug" title="Testing rule" onDismiss={onDismiss} onClickBackdrop={onDismiss}>
<TestRuleResult panel={panel} dashboard={dashboard} />
</Modal>
);
};
renderDeleteConfirmation = () => {
if (!this.state.showDeleteConfirmation) {
return null;
}
const { panel } = this.props;
const onDismiss = () => this.onToggleModal('showDeleteConfirmation');
return (
<ConfirmModal
isOpen={true}
icon="trash-alt"
title="Delete"
body={
<div>
Are you sure you want to delete this alert rule?
<br />
<small>You need to save dashboard for the delete to take effect.</small>
</div>
}
confirmText="Delete Alert"
onDismiss={onDismiss}
onConfirm={() => {
delete panel.alert;
panel.thresholds = [];
this.panelCtrl.alertState = null;
this.panelCtrl.render();
this.component.digest();
onDismiss();
}}
/>
);
};
renderStateHistory = () => {
if (!this.state.showStateHistory) {
return null;
}
const { panel, dashboard } = this.props;
const onDismiss = () => this.onToggleModal('showStateHistory');
return (
<Modal isOpen={true} icon="history" title="State history" onDismiss={onDismiss} onClickBackdrop={onDismiss}>
<StateHistory
dashboard={dashboard}
panelId={panel.editSourceId ?? panel.id}
onRefresh={() => this.panelCtrl.refresh()}
/>
</Modal>
);
};
render() {
const { alert, transformations } = this.props.panel;
const { validatonMessage } = this.state;
......@@ -195,8 +220,6 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
return this.renderValidationMessage();
}
const toolbarItems = alert ? [this.stateHistory(), this.testRule(), this.deleteAlert()] : [];
const model = {
title: 'Panel has no alert rule defined',
buttonIcon: 'bell' as IconName,
......@@ -205,7 +228,9 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
};
return (
<EditorTabBody toolbarItems={toolbarItems}>
<>
<CustomScrollbar autoHeightMin="100%">
<Container padding="md">
<div aria-label={selectors.components.AlertTab.content}>
{alert && hasTransformations && (
<Alert
......@@ -215,9 +240,28 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
)}
<div ref={element => (this.element = element)} />
{alert && (
<HorizontalGroup>
<Button onClick={() => this.onToggleModal('showStateHistory')} variant="secondary">
State history
</Button>
<Button onClick={() => this.onToggleModal('showTestRule')} variant="secondary">
Test rule
</Button>
<Button onClick={() => this.onToggleModal('showDeleteConfirmation')} variant="destructive">
Delete
</Button>
</HorizontalGroup>
)}
{!alert && !validatonMessage && <EmptyListCTA {...model} />}
</div>
</EditorTabBody>
</Container>
</CustomScrollbar>
{this.renderTestRule()}
{this.renderDeleteConfirmation()}
{this.renderStateHistory()}
</>
);
}
}
......
public/app/features/alerting/StateHistory.tsx
import React, { PureComponent } from 'react';
import { getBackendSrv } from '@grafana/runtime';
import { Icon } from '@grafana/ui';
import { Icon, ConfirmButton, Button } from '@grafana/ui';
import alertDef from './state/alertDef';
import { DashboardModel } from '../dashboard/state/DashboardModel';
import appEvents from '../../core/app_events';
import { CoreEvents } from 'app/types';
import { css } from 'emotion';
interface Props {
dashboard: DashboardModel;
......@@ -46,28 +45,16 @@ class StateHistory extends PureComponent<Props, State> {
});
}
clearHistory = () => {
const { dashboard, onRefresh, panelId } = this.props;
clearHistory = async () => {
const { dashboard, panelId, onRefresh } = this.props;
appEvents.emit(CoreEvents.showConfirmModal, {
title: 'Delete Alert History',
text: 'Are you sure you want to remove all history & annotations for this alert?',
icon: 'trash-alt',
yesText: 'Yes',
onConfirm: () => {
getBackendSrv()
.post('/api/annotations/mass-delete', {
await getBackendSrv().post('/api/annotations/mass-delete', {
dashboardId: dashboard.id,
panelId: panelId,
})
.then(() => {
this.setState({
stateHistoryItems: [],
});
this.setState({ stateHistoryItems: [] });
onRefresh();
});
},
});
};
render() {
......@@ -78,9 +65,17 @@ class StateHistory extends PureComponent<Props, State> {
{stateHistoryItems.length > 0 && (
<div className="p-b-1">
<span className="muted">Last 50 state changes</span>
<button className="btn btn-small btn-danger pull-right" onClick={this.clearHistory}>
<Icon name="trash-alt" style={{ marginRight: '4px' }} size="xs" /> {` Clear history`}
</button>
<ConfirmButton onConfirm={this.clearHistory} confirmVariant="destructive" confirmText="Clear">
<Button
className={css`
direction: ltr;
`}
variant="destructive"
icon="trash-alt"
>
Clear history
</Button>
</ConfirmButton>
</div>
)}
<ol className="alert-rule-list">
......
public/app/features/dashboard/panel_editor/EditorTabBody.tsx deleted 100644 → 0
import React, { PureComponent } from 'react';
import { CustomScrollbar, Icon, IconName, PanelOptionsGroup } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import { FadeIn } from 'app/core/components/Animations/FadeIn';
interface Props {
children: JSX.Element;
renderToolbar?: () => JSX.Element;
toolbarItems?: EditorToolbarView[];
scrollTop?: number;
setScrollTop?: (value: React.MouseEvent<HTMLElement>) => void;
}
export interface EditorToolbarView {
title?: string;
heading?: string;
icon?: string;
disabled?: boolean;
onClick?: () => void;
render?: () => JSX.Element;
action?: () => void;
btnType?: 'danger';
}
interface State {
openView?: EditorToolbarView;
isOpen: boolean;
fadeIn: boolean;
}
export class EditorTabBody extends PureComponent<Props, State> {
static defaultProps: Partial<Props> = {
toolbarItems: [],
};
constructor(props: Props) {
super(props);
this.state = {
openView: null,
fadeIn: false,
isOpen: false,
};
}
componentDidMount() {
this.setState({ fadeIn: true });
}
onToggleToolBarView = (item: EditorToolbarView) => {
this.setState({
openView: item,
isOpen: this.state.openView !== item || !this.state.isOpen,
});
};
onCloseOpenView = () => {
this.setState({ isOpen: false });
};
static getDerivedStateFromProps(props: Props, state: State) {
if (state.openView) {
const activeToolbarItem = props.toolbarItems.find(
(item: any) => item.title === state.openView.title && item.icon === state.openView.icon
);
if (activeToolbarItem) {
return {
...state,
openView: activeToolbarItem,
};
}
}
return state;
}
renderButton(view: EditorToolbarView) {
const onClick = () => {
if (view.onClick) {
view.onClick();
}
if (view.render) {
this.onToggleToolBarView(view);
}
};
return (
<div className="nav-buttons" key={view.title + view.icon}>
<button
className="btn navbar-button"
onClick={onClick}
disabled={view.disabled}
aria-label={selectors.components.QueryEditorToolbarItem.button(view.title)}
>
{view.icon && <Icon name={view.icon as IconName} />} {view.title}
</button>
</div>
);
}
renderOpenView(view: EditorToolbarView) {
return (
<PanelOptionsGroup title={view.title || view.heading} onClose={this.onCloseOpenView}>
{view.render()}
</PanelOptionsGroup>
);
}
render() {
const { children, renderToolbar, toolbarItems, scrollTop, setScrollTop } = this.props;
const { openView, fadeIn, isOpen } = this.state;
return (
<>
<div className="toolbar">
{renderToolbar && renderToolbar()}
{toolbarItems.map(item => this.renderButton(item))}
</div>
<div className="panel-editor__scroll">
<CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop} updateAfterMountMs={300}>
<div className="panel-editor__content">
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
{openView && this.renderOpenView(openView)}
</FadeIn>
<FadeIn in={fadeIn} duration={50}>
{children}
</FadeIn>
</div>
</CustomScrollbar>
</div>
</>
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment