Alerting: refactor unified alerting promotion to deprecation (#49019)

This commit is contained in:
Gilles De Mey 2022-05-17 17:30:41 +02:00 committed by GitHub
parent 51dfcd7d37
commit 4b4f996fa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 81 deletions

View File

@ -14,7 +14,7 @@ import { ShowModalReactEvent } from '../../types/events';
import { AlertHowToModal } from './AlertHowToModal';
import AlertRuleItem from './AlertRuleItem';
import { UnifiedAlertingPromotion } from './components/UnifiedAlertingPromotion';
import { DeprecationNotice } from './components/DeprecationNotice';
import { getAlertRulesAsync, togglePauseAlertRule } from './state/actions';
import { setSearchQuery } from './state/reducers';
import { getAlertRuleItems, getSearchQuery } from './state/selectors';
@ -127,7 +127,7 @@ export class AlertRuleListUnconnected extends PureComponent<Props> {
How to add an alert
</Button>
</div>
<UnifiedAlertingPromotion />
<DeprecationNotice />
<VerticalGroup spacing="none">
{alertRules.map((rule) => {
return (

View File

@ -0,0 +1,29 @@
import React, { FC } from 'react';
import { Alert } from '@grafana/ui';
export const LOCAL_STORAGE_KEY = 'grafana.legacyalerting.unifiedalertingpromo';
const DeprecationNotice: FC<{}> = () => (
<Alert severity="warning" title="Grafana legacy alerting is going away soon">
<p>
You are using Grafana legacy alerting, it has been deprecated and will be removed in the next major version of
Grafana.
<br />
We encourage you to upgrade to the new Grafana alerting experience.
</p>
<p>
See{' '}
<a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/difference-old-new/">
Whats New with Grafana alerting
</a>{' '}
to learn more about what&lsquo;s new or learn{' '}
<a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/opt-in/">
how to enable the new Grafana alerting feature
</a>
.
</p>
</Alert>
);
export { DeprecationNotice };

View File

@ -1,34 +0,0 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { UnifiedAlertingPromotion, LOCAL_STORAGE_KEY } from './UnifiedAlertingPromotion';
describe('Unified Alerting promotion', () => {
beforeEach(() => {
window.localStorage.clear();
});
it('should show by default', () => {
render(<UnifiedAlertingPromotion />);
expect(screen.queryByText('Try out the Grafana 8 alerting!')).toBeInTheDocument();
});
it('should be hidden if dismissed', async () => {
const promotion = render(<UnifiedAlertingPromotion />);
expect(window.localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('true');
const dismissButton = promotion.getByRole('button');
await userEvent.click(dismissButton);
expect(screen.queryByText('Try out the Grafana 8 alerting!')).not.toBeInTheDocument();
expect(window.localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('false');
});
it('should not render if previously dismissed', () => {
window.localStorage.setItem(LOCAL_STORAGE_KEY, 'false');
render(<UnifiedAlertingPromotion />);
expect(screen.queryByText('Try out the Grafana 8 alerting!')).not.toBeInTheDocument();
});
});

View File

@ -1,45 +0,0 @@
import React, { FC } from 'react';
import { useLocalStorage } from 'react-use';
import { Alert } from '@grafana/ui';
export const LOCAL_STORAGE_KEY = 'grafana.legacyalerting.unifiedalertingpromo';
const UnifiedAlertingPromotion: FC<{}> = () => {
const [showUnifiedAlertingPromotion, setShowUnifiedAlertingPromotion] = useLocalStorage<boolean>(
LOCAL_STORAGE_KEY,
true
);
if (!showUnifiedAlertingPromotion) {
return null;
}
return (
<Alert
severity="info"
title="Try out the Grafana 8 alerting!"
onRemove={() => setShowUnifiedAlertingPromotion(false)}
>
<p>
You are using the legacy Grafana alerting.
<br />
While we have no plans of deprecating it any time soon, we invite you to give the improved Grafana 8 alerting a
try.
</p>
<p>
See{' '}
<a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/difference-old-new/">
Whats New with Grafana 8 alerting
</a>{' '}
to learn more about what&lsquo;s new in Grafana 8 alerting or learn{' '}
<a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/opt-in/">
how to enable the new Grafana 8 alerting feature
</a>
.
</p>
</Alert>
);
};
export { UnifiedAlertingPromotion };