84 lines
No EOL
2.6 KiB
TypeScript
84 lines
No EOL
2.6 KiB
TypeScript
// Components/CardViewMenu.tsx
|
|
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';
|
|
|
|
const CardViewMenu = () => {
|
|
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: 'Add to Dashboard',
|
|
icon: <Grid2x2Plus size={16} />,
|
|
disabled: !widget.exists(),
|
|
onClick: () => showAddToDashboardModal(widget.metricId, dashboardStore),
|
|
},
|
|
{
|
|
key: 'alert',
|
|
label: 'Set Alerts',
|
|
icon: <BellIcon size={16} />,
|
|
disabled: !widget.exists() || widget.metricType === 'predefined',
|
|
onClick: showAlertModal,
|
|
},
|
|
{
|
|
key: 'remove',
|
|
label: 'Delete',
|
|
icon: <TrashIcon size={15} />,
|
|
disabled: !widget.exists(),
|
|
onClick: () => {
|
|
Modal.confirm({
|
|
title: 'Confirm Card Deletion',
|
|
icon: null,
|
|
content:
|
|
'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('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); |