grafana_bak/public/app/features/plugins/angularDeprecation/AngularDeprecationNotice.tsx
2025-04-01 10:38:02 +09:00

66 lines
2.2 KiB
TypeScript

import { reportInteraction } from '@grafana/runtime';
import { Alert, Button } from '@grafana/ui';
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
const LOCAL_STORAGE_KEY_PREFIX = 'grafana.angularDeprecation.dashboardNoticeAndMigration.isDismissed';
function localStorageKey(dashboardUid: string): string {
return LOCAL_STORAGE_KEY_PREFIX + '.' + dashboardUid;
}
export interface Props {
dashboardUid: string;
showAutoMigrateLink?: boolean;
}
function tryMigration() {
const autoMigrateParam = '__feature.autoMigrateOldPanels';
const url = new URL(window.location.toString());
if (!url.searchParams.has(autoMigrateParam)) {
url.searchParams.append(autoMigrateParam, 'true');
}
window.open(url.toString(), '_self');
}
export function AngularDeprecationNotice({ dashboardUid, showAutoMigrateLink }: Props) {
return (
<LocalStorageValueProvider<boolean> storageKey={localStorageKey(dashboardUid)} defaultValue={false}>
{(isDismissed, onDismiss) => {
if (isDismissed) {
return null;
}
return (
<div>
<Alert
severity="warning"
title="This dashboard depends on Angular, which is deprecated and will stop working in future releases of Grafana."
onRemove={() => {
reportInteraction('angular_deprecation_notice_dismissed');
onDismiss(true);
}}
>
<div className="markdown-html">
<a
href="https://grafana.com/docs/grafana/latest/developers/angular_deprecation/"
className="external-link"
target="_blank"
rel="noreferrer"
>
Read our deprecation notice and migration advice.
</a>
<br />
{showAutoMigrateLink && (
<Button fill="outline" size="sm" onClick={tryMigration} style={{ marginTop: 10 }}>
Try migration
</Button>
)}
</div>
</Alert>
</div>
);
}}
</LocalStorageValueProvider>
);
}