43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useLocalStorage } from 'react-use';
|
|
|
|
import { Alert, LinkButton, Stack } from '@grafana/ui';
|
|
|
|
import { t, Trans } from '../../core/internationalization';
|
|
|
|
type Props = {
|
|
datasourceType: string;
|
|
};
|
|
|
|
export function DrilldownAlertBox(props: Props) {
|
|
const isDsCompatibleWithDrilldown = ['prometheus', 'loki', 'tempo', 'grafana-pyroscope-datasource'].includes(
|
|
props.datasourceType
|
|
);
|
|
|
|
const [dismissed, setDismissed] = useLocalStorage('grafana.explore.drilldownsBoxDismissed', false);
|
|
|
|
return (
|
|
isDsCompatibleWithDrilldown &&
|
|
!dismissed && (
|
|
<Alert
|
|
severity={'info'}
|
|
title={t('explore.drilldownInfo.title', 'Explore Metrics, Logs, Traces and Profiles have moved!')}
|
|
onRemove={() => {
|
|
setDismissed(true);
|
|
}}
|
|
>
|
|
<Stack gap={1} alignItems="flex-end" justifyContent={'space-between'}>
|
|
<span>
|
|
<Trans i18nKey={'explore.drilldownInfo.description'}>
|
|
Looking for the Grafana Explore apps? They are now called the Grafana Drilldown apps and can be found
|
|
under <b>Menu > Drilldown</b>
|
|
</Trans>
|
|
</span>
|
|
<LinkButton variant={'secondary'} href="/drilldown">
|
|
<Trans i18nKey={'explore.drilldownInfo.action'}>Go to Grafana Drilldown</Trans>
|
|
</LinkButton>
|
|
</Stack>
|
|
</Alert>
|
|
)
|
|
);
|
|
}
|