tiennm99/litellm
1
0
Fork 0
mirror of https://github.com/tiennm99/litellm.git synced 2026-08-23 16:24:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: change to reusable buttons and delete modal

Browse Source
This commit is contained in:
yuneng-jiang
2025-12-20 17:21:53 -08:00
parent 4b652e19d8
commit 7bc98408f0
6 changed files with 49 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/Settings/LoggingAndAlerts/LoggingCallbacks/LoggingCallbacksTable.tsx
+4 -26
View File
@@ -1,10 +1,10 @@
import { PencilAltIcon, PlayIcon, TrashIcon } from "@heroicons/react/outline";
import { Button, Icon } from "@tremor/react";
import type { TableProps } from "antd";
import { Table, Tooltip } from "antd";
import Title from "antd/es/typography/Title";
import React from "react";
import { AlertingObject } from "./types";
import TableIconActionButton from "../../../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
type LoggingCallbacksProps = {
callbacks: AlertingObject[];
@@ -79,31 +79,9 @@ export const LoggingCallbacksTable: React.FC<LoggingCallbacksProps> = ({
align: "right",
render: (_: unknown, record: CallbackRow) => (
<div className="flex justify-end gap-2">
<Tooltip title="Test Callback">
<Icon
icon={PlayIcon}
size="sm"
className="cursor-pointer text-indigo-600 hover:text-indigo-700"
onClick={() => onTest(record)}
/>
</Tooltip>
<Tooltip title="Edit Callback">
<Icon
icon={PencilAltIcon}
size="sm"
className="cursor-pointer text-indigo-600 hover:text-indigo-700"
onClick={() => onEdit(record)}
/>
</Tooltip>
<Tooltip title="Delete Callback">
<Icon
icon={TrashIcon}
size="sm"
className="cursor-pointer text-indigo-600 hover:text-red-600"
onClick={() => onDelete(record)}
/>
</Tooltip>
<TableIconActionButton variant="Test" tooltipText="Test Callback" onClick={() => onTest(record)} />
<TableIconActionButton variant="Edit" tooltipText="Edit Callback" onClick={() => onEdit(record)} />
<TableIconActionButton variant="Delete" tooltipText="Delete Callback" onClick={() => onDelete(record)} />
</div>
),
width: 240,
ui/litellm-dashboard/src/components/budgets/budget_panel.tsx
+7 -9
View File
@@ -3,7 +3,6 @@
*
*/
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
import {
Button,
Card,
@@ -28,6 +27,7 @@ import NotificationsManager from "../molecules/notifications_manager";
import { budgetDeleteCall, getBudgetList } from "../networking";
import BudgetModal from "./budget_modal";
import EditBudgetModal from "./edit_budget_modal";
import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
interface BudgetSettingsPageProps {
accessToken: string | null;
@@ -149,16 +149,14 @@ const BudgetPanel: React.FC<BudgetSettingsPageProps> = ({ accessToken }) => {
<TableCell>{value.max_budget ? value.max_budget : "n/a"}</TableCell>
<TableCell>{value.tpm_limit ? value.tpm_limit : "n/a"}</TableCell>
<TableCell>{value.rpm_limit ? value.rpm_limit : "n/a"}</TableCell>
<Icon
icon={PencilAltIcon}
size="sm"
className="cursor-pointer"
<TableIconActionButton
variant="Edit"
tooltipText="Edit budget"
onClick={() => handleEditCall(value)}
/>
<Icon
icon={TrashIcon}
size="sm"
className="cursor-pointer hover:text-red-500"
<TableIconActionButton
variant="Delete"
tooltipText="Delete budget"
onClick={() => handleDeleteClick(value)}
/>
</TableRow>
ui/litellm-dashboard/src/components/organizations.tsx
+15 -22
View File
@@ -23,7 +23,7 @@ import NumericalInput from "./shared/numerical_input";
import { Input } from "antd";
import { Modal, Form, Tooltip, Select as Select2 } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { PencilAltIcon, TrashIcon, RefreshIcon, ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
import { RefreshIcon, ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
import { TextInput } from "@tremor/react";
import { getModelDisplayName } from "./key_team_helpers/fetch_available_models_team_key";
import OrganizationInfoView from "./organization/organization_view";
@@ -33,6 +33,7 @@ import MCPServerSelector from "./mcp_server_management/MCPServerSelector";
import { formatNumberWithCommas } from "../utils/dataUtils";
import NotificationsManager from "./molecules/notifications_manager";
import DeleteResourceModal from "./common_components/DeleteResourceModal";
import TableIconActionButton from "./common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
interface OrganizationsTableProps {
organizations: Organization[];
@@ -375,27 +376,19 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
<TableCell>
{userRole === "Admin" && (
<>
<Tooltip title="Edit organization">
{" "}
<Icon
icon={PencilAltIcon}
size="sm"
className="cursor-pointer hover:text-blue-600"
onClick={() => {
setSelectedOrgId(org.organization_id);
setEditOrg(true);
}}
/>
</Tooltip>
<Tooltip title="Delete organization">
{" "}
<Icon
onClick={() => handleDelete(org.organization_id)}
icon={TrashIcon}
size="sm"
className="cursor-pointer hover:text-red-600"
/>
</Tooltip>
<TableIconActionButton
variant="Edit"
tooltipText="Edit organization"
onClick={() => {
setSelectedOrgId(org.organization_id);
setEditOrg(true);
}}
/>
<TableIconActionButton
variant="Delete"
tooltipText="Delete organization"
onClick={() => handleDelete(org.organization_id)}
/>
</>
)}
</TableCell>
ui/litellm-dashboard/src/components/vector_store_management/DeleteModal.tsx
-27
View File
@@ -1,27 +0,0 @@
import React from "react";
import { Modal } from "antd";
import { Button as TremorButton } from "@tremor/react";
interface DeleteModalProps {
isVisible: boolean;
onCancel: () => void;
onConfirm: () => void;
}
const DeleteModal: React.FC<DeleteModalProps> = ({ isVisible, onCancel, onConfirm }) => {
return (
<Modal title="Delete Vector Store" visible={isVisible} footer={null} onCancel={onCancel}>
<p>Are you sure you want to delete this vector store? This action cannot be undone.</p>
<div className="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<TremorButton onClick={onConfirm} color="red" className="ml-2">
Delete
</TremorButton>
<TremorButton onClick={onCancel} variant="primary">
Cancel
</TremorButton>
</div>
</Modal>
);
};
export default DeleteModal;
ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.tsx
+8 -9
View File
@@ -1,6 +1,6 @@
import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Icon } from "@tremor/react";
import { TrashIcon, PencilAltIcon, SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
import { Tooltip } from "antd";
import {
ColumnDef,
@@ -12,6 +12,7 @@ import {
} from "@tanstack/react-table";
import { VectorStore } from "./types";
import { getProviderLogoAndName } from "../provider_info_helpers";
import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
interface VectorStoreTableProps {
data: VectorStore[];
@@ -104,17 +105,15 @@ const VectorStoreTable: React.FC<VectorStoreTableProps> = ({ data, onView, onEdi
const vectorStore = row.original;
return (
<div className="flex space-x-2">
<Icon
icon={PencilAltIcon}
size="sm"
<TableIconActionButton
variant="Edit"
tooltipText="Edit vector store"
onClick={() => onEdit(vectorStore.vector_store_id)}
className="cursor-pointer"
/>
<Icon
icon={TrashIcon}
size="sm"
<TableIconActionButton
variant="Delete"
tooltipText="Delete vector store"
onClick={() => onDelete(vectorStore.vector_store_id)}
className="cursor-pointer"
/>
</div>
);
ui/litellm-dashboard/src/components/vector_store_management/index.tsx
+15 -6
View File
@@ -5,7 +5,7 @@ import { vectorStoreListCall, vectorStoreDeleteCall, credentialListCall, Credent
import { VectorStore } from "./types";
import VectorStoreTable from "./VectorStoreTable";
import VectorStoreForm from "./VectorStoreForm";
import DeleteModal from "./DeleteModal";
import DeleteResourceModal from "../common_components/DeleteResourceModal";
import VectorStoreInfoView from "./vector_store_info";
import { isAdminRole } from "@/utils/roles";
import NotificationsManager from "../molecules/notifications_manager";
@@ -25,6 +25,7 @@ const VectorStoreManagement: React.FC<VectorStoreProps> = ({ accessToken, userID
const [credentials, setCredentials] = useState<CredentialItem[]>([]);
const [selectedVectorStoreId, setSelectedVectorStoreId] = useState<string | null>(null);
const [editVectorStore, setEditVectorStore] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const fetchVectorStores = async () => {
if (!accessToken) return;
@@ -80,6 +81,7 @@ const VectorStoreManagement: React.FC<VectorStoreProps> = ({ accessToken, userID
const confirmDelete = async () => {
if (!accessToken || !vectorStoreToDelete) return;
setIsDeleting(true);
try {
await vectorStoreDeleteCall(accessToken, vectorStoreToDelete);
NotificationsManager.success("Vector store deleted successfully");
@@ -87,9 +89,11 @@ const VectorStoreManagement: React.FC<VectorStoreProps> = ({ accessToken, userID
} catch (error) {
console.error("Error deleting vector store:", error);
NotificationsManager.fromBackend("Error deleting vector store: " + error);
} finally {
setIsDeleting(false);
setIsDeleteModalOpen(false);
setVectorStoreToDelete(null);
}
setIsDeleteModalOpen(false);
setVectorStoreToDelete(null);
};
const handleCreateSuccess = () => {
@@ -153,10 +157,15 @@ const VectorStoreManagement: React.FC<VectorStoreProps> = ({ accessToken, userID
/>
{/* Delete Confirmation Modal */}
<DeleteModal
isVisible={isDeleteModalOpen}
<DeleteResourceModal
isOpen={isDeleteModalOpen}
title="Delete Vector Store"
message="Are you sure you want to delete this vector store? This action cannot be undone."
resourceInformationTitle="Vector Store Information"
resourceInformation={[{ label: "Vector Store ID", value: vectorStoreToDelete, code: true }]}
onCancel={() => setIsDeleteModalOpen(false)}
onConfirm={confirmDelete}
onOk={confirmDelete}
confirmLoading={isDeleting}
/>
</div>
</div>