phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

(fea) ui - see delete confirmation before deleting

Browse source
This commit is contained in:
ishaan-jaff 2024-02-08 21:33:50 -08:00
parent 1f6827f4f8
commit 5e87932e8e
1 changed files with 75 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

78
ui/litellm-dashboard/src/components/view_key_table.tsx
View file

@ -33,22 +33,60 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
setData,
}) => {
const [isButtonClicked, setIsButtonClicked] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [keyToDelete, setKeyToDelete] = useState<string | null>(null);
const handleDelete = async (token: String) => {
const handleDelete = async (token: string) => {
if (data == null) {
return;
}
// Set the key to delete and open the confirmation modal
setKeyToDelete(token);
setIsDeleteModalOpen(true);
};
const confirmDelete = async () => {
if (keyToDelete == null || data == null) {
return;
}
try {
await keyDeleteCall(accessToken, token);
await keyDeleteCall(accessToken, keyToDelete);
// Successfully completed the deletion. Update the state to trigger a rerender.
const filteredData = data.filter((item) => item.token !== token);
const filteredData = data.filter((item) => item.token !== keyToDelete);
setData(filteredData);
} catch (error) {
console.error("Error deleting the key:", error);
// Handle any error situations, such as displaying an error message to the user.
}
// Close the confirmation modal and reset the keyToDelete
setIsDeleteModalOpen(false);
setKeyToDelete(null);
};
const cancelDelete = () => {
// Close the confirmation modal and reset the keyToDelete
setIsDeleteModalOpen(false);
setKeyToDelete(null);
};
// const handleDelete = async (token: String) => {
// if (data == null) {
// return;
// }
// try {
// await keyDeleteCall(accessToken, token);
// // Successfully completed the deletion. Update the state to trigger a rerender.
// const filteredData = data.filter((item) => item.token !== token);
// setData(filteredData);
// } catch (error) {
// console.error("Error deleting the key:", error);
// // Handle any error situations, such as displaying an error message to the user.
// }
// };
if (data == null) {
return;
}
@ -139,6 +177,40 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
})}
</TableBody>
</Table>
{isDeleteModalOpen && (
<div className="fixed z-10 inset-0 overflow-y-auto">
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 transition-opacity" aria-hidden="true">
<div className="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
{/* Modal Panel */}
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
{/* Confirmation Modal Content */}
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900">Delete Key</h3>
<div className="mt-2">
<p className="text-sm text-gray-500">Are you sure you want to delete this key ?</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<Button onClick={confirmDelete} color="red" className="ml-2">
Delete
</Button>
<Button onClick={cancelDelete}>Cancel</Button>
</div>
</div>
</div>
</div>
)}
</Card>
);
};