94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import { useHistory } from 'react-router';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { Button, Dropdown, MenuProps, Modal } from 'antd';
|
|
import {
|
|
BellIcon,
|
|
EllipsisVertical,
|
|
Grid2x2Plus,
|
|
TrashIcon,
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import React from 'react';
|
|
import { useModal } from 'Components/ModalContext';
|
|
import AlertFormModal from 'Components/Alerts/AlertFormModal/AlertFormModal';
|
|
import { showAddToDashboardModal } from 'Components/Dashboard/components/AddToDashboardButton';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
function CardViewMenu() {
|
|
const { t } = useTranslation();
|
|
const history = useHistory();
|
|
const { alertsStore, metricStore, dashboardStore } = useStore();
|
|
const widget = metricStore.instance;
|
|
const { openModal, closeModal } = useModal();
|
|
|
|
const showAlertModal = () => {
|
|
const seriesId = (widget.series[0] && widget.series[0].seriesId) || '';
|
|
alertsStore.init({ query: { left: seriesId } });
|
|
openModal(<AlertFormModal onClose={closeModal} />, {
|
|
placement: 'right',
|
|
width: 620,
|
|
});
|
|
};
|
|
|
|
const items: MenuProps['items'] = [
|
|
{
|
|
key: 'add-to-dashboard',
|
|
label: t('Add to Dashboard'),
|
|
icon: <Grid2x2Plus size={16} />,
|
|
disabled: !widget.exists(),
|
|
onClick: () => showAddToDashboardModal(widget.metricId, dashboardStore),
|
|
},
|
|
{
|
|
key: 'alert',
|
|
label: t('Set Alerts'),
|
|
icon: <BellIcon size={16} />,
|
|
disabled: !widget.exists() || widget.metricType !== 'timeseries',
|
|
onClick: showAlertModal,
|
|
},
|
|
{
|
|
key: 'remove',
|
|
label: t('Delete'),
|
|
icon: <TrashIcon size={15} />,
|
|
disabled: !widget.exists(),
|
|
onClick: () => {
|
|
Modal.confirm({
|
|
title: t('Confirm Card Deletion'),
|
|
icon: null,
|
|
content:
|
|
t('Are you sure you want to remove this card? This action is permanent and cannot be undone.'),
|
|
footer: (_, { OkBtn, CancelBtn }) => (
|
|
<>
|
|
<CancelBtn />
|
|
<OkBtn />
|
|
</>
|
|
),
|
|
onOk: () => {
|
|
metricStore
|
|
.delete(widget)
|
|
.then(() => {
|
|
history.goBack();
|
|
})
|
|
.catch(() => {
|
|
toast.error(t('Failed to remove card'));
|
|
});
|
|
},
|
|
});
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<Dropdown menu={{ items }}>
|
|
<Button
|
|
type="text"
|
|
icon={<EllipsisVertical size={16} />}
|
|
className="btn-card-options"
|
|
/>
|
|
</Dropdown>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(CardViewMenu);
|