pucmnw7fs
/
gpustack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: add delete action in table fetch hook

Browse Source
main
jialin 11 months ago
parent cc20050dc8
commit 4b5f08ccc2
5 changed files with 75 additions and 110 deletions
Show Stats Download Patch File Download Diff File

38
src/hooks/use-table-fetch.ts
Unescape View File

@ -1,12 +1,16 @@
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { handleBatchRequest } from '@/utils';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
export default function useTableFetch<ListItem>(options: {
fetchAPI: (params: any) => Promise<Global.PageResponse<ListItem>>;
deleteAPI?: (id: number) => Promise<any>;
contentForDelete?: string;
}) {
const { fetchAPI } = options;
const { fetchAPI, deleteAPI, contentForDelete } = options;
const modalRef = useRef<any>(null);
const rowSelection = useTableRowSelection();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
@ -91,6 +95,33 @@ export default function useTableFetch<ListItem>(options: {
});
};
const handleDelete = (row: ListItem & { name: string; id: number }) => {
modalRef.current.show({
content: contentForDelete,
operation: 'common.delete.single.confirm',
name: row.name,
async onOk() {
console.log('OK');
await deleteAPI?.(row.id);
fetchData();
}
});
};
const handleDeleteBatch = () => {
modalRef.current.show({
content: contentForDelete,
operation: 'common.delete.confirm',
selection: true,
async onOk() {
if (!deleteAPI) return;
await handleBatchRequest(rowSelection.selectedRowKeys, deleteAPI);
rowSelection.clearSelections();
fetchData();
}
});
};
useEffect(() => {
fetchData();
}, []);
@ -100,6 +131,9 @@ export default function useTableFetch<ListItem>(options: {
rowSelection,
sortOrder,
queryParams,
modalRef,
handleDelete,
handleDeleteBatch,
fetchData,
handlePageChange,
handleTableChange,

37
src/pages/api-keys/index.tsx
Unescape View File

@ -5,7 +5,6 @@ import { PageAction } from '@/config';
import HotKeys from '@/config/hotkeys';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { handleBatchRequest } from '@/utils';
import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
@ -19,7 +18,7 @@ import {
Tooltip
} from 'antd';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { deleteApisKey, queryApisKeysList } from './apis';
import AddAPIKeyModal from './components/add-apikey';
@ -33,17 +32,21 @@ const APIKeys: React.FC = () => {
rowSelection,
queryParams,
sortOrder,
modalRef,
handleDelete,
handleDeleteBatch,
fetchData,
handlePageChange,
handleTableChange,
handleSearch,
handleNameChange
} = useTableFetch<ListItem>({
fetchAPI: queryApisKeysList
fetchAPI: queryApisKeysList,
deleteAPI: deleteApisKey,
contentForDelete: 'apikeys.table.apikeys'
});
const intl = useIntl();
const modalRef = useRef<any>(null);
const [openAddModal, setOpenAddModal] = useState(false);
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@ -67,32 +70,6 @@ const APIKeys: React.FC = () => {
setOpenAddModal(false);
};
const handleDelete = (row: ListItem) => {
modalRef.current.show({
content: 'apikeys.table.apikeys',
operation: 'common.delete.single.confirm',
name: row.name,
async onOk() {
console.log('OK');
await deleteApisKey(row.id);
fetchData();
}
});
};
const handleDeleteBatch = () => {
modalRef.current.show({
content: 'apikeys.table.apikeys',
operation: 'common.delete.confirm',
selection: true,
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
rowSelection.clearSelections();
fetchData();
}
});
};
const renderEmpty = (type?: string) => {
if (type !== 'Table') return;
if (

70
src/pages/resources/components/workers.tsx
Unescape View File

@ -7,7 +7,7 @@ import InfoColumn from '@/components/simple-table/info-column';
import StatusTag from '@/components/status-tag';
import Hotkeys from '@/config/hotkeys';
import useTableFetch from '@/hooks/use-table-fetch';
import { convertFileSize, handleBatchRequest } from '@/utils';
import { convertFileSize } from '@/utils';
import {
DeleteOutlined,
EditOutlined,
@ -27,7 +27,7 @@ import {
message
} from 'antd';
import _ from 'lodash';
import { useCallback, useRef, useState } from 'react';
import { useCallback, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { deleteWorker, queryWorkersList, updateWorker } from '../apis';
import { WorkerStatusMapValue, status } from '../config';
@ -80,25 +80,42 @@ const ActionList = [
}
];
const formateUtilazation = (val1: number, val2: number): number => {
if (!val2 || !val1) {
return 0;
}
return _.round((val1 / val2) * 100, 0);
};
const calcStorage = (files: Filesystem[]) => {
const mountRoot = _.find(
files,
(item: Filesystem) => item.mount_point === '/'
);
return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
};
const Workers: React.FC = () => {
const {
dataSource,
rowSelection,
queryParams,
sortOrder,
modalRef,
handleDelete,
handleDeleteBatch,
fetchData,
handlePageChange,
handleTableChange,
handleSearch,
handleNameChange
} = useTableFetch<ListItem>({
fetchAPI: queryWorkersList
fetchAPI: queryWorkersList,
deleteAPI: deleteWorker,
contentForDelete: 'worker'
});
const modalRef = useRef<any>(null);
const intl = useIntl();
const [open, setOpen] = useState(false);
const [updateLabelsData, setUpdateLabelsData] = useState<{
open: boolean;
data: ListItem;
@ -107,51 +124,10 @@ const Workers: React.FC = () => {
data: {} as ListItem
});
const formateUtilazation = (val1: number, val2: number): number => {
if (!val2 || !val1) {
return 0;
}
return _.round((val1 / val2) * 100, 0);
};
const calcStorage = (files: Filesystem[]) => {
const mountRoot = _.find(
files,
(item: Filesystem) => item.mount_point === '/'
);
return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
};
const handleAddWorker = () => {
setOpen(true);
};
const handleDelete = (row: ListItem) => {
modalRef.current.show({
content: 'worker',
operation: 'common.delete.single.confirm',
name: row.name,
async onOk() {
console.log('OK');
await deleteWorker(row.id);
fetchData();
}
});
};
const handleDeleteBatch = () => {
modalRef.current.show({
content: 'wokers',
operation: 'common.delete.confirm',
selection: true,
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
rowSelection.clearSelections();
fetchData();
}
});
};
const handleUpdateLabelsOk = useCallback(
async (values: Record<string, any>) => {
try {

1
src/pages/users/config/types.ts
Unescape View File

@ -3,6 +3,7 @@ export interface ListItem {
is_admin: boolean;
full_name: string;
id: number;
username: string;
created_at: string;
updated_at: string;
}

39
src/pages/users/index.tsx
Unescape View File

@ -6,7 +6,6 @@ import { PageAction } from '@/config';
import HotKeys from '@/config/hotkeys';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { handleBatchRequest } from '@/utils';
import {
DeleteOutlined,
EditOutlined,
@ -27,7 +26,7 @@ import {
message
} from 'antd';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
import AddModal from './components/add-modal';
@ -56,17 +55,21 @@ const Users: React.FC = () => {
rowSelection,
queryParams,
sortOrder,
modalRef,
handleDelete,
handleDeleteBatch,
fetchData,
handlePageChange,
handleTableChange,
handleSearch,
handleNameChange
} = useTableFetch<ListItem>({
fetchAPI: queryUsersList
fetchAPI: queryUsersList,
deleteAPI: deleteUser,
contentForDelete: 'users.table.user'
});
const intl = useIntl();
const modalRef = useRef<any>(null);
const [openAddModal, setOpenAddModal] = useState(false);
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@ -110,32 +113,6 @@ const Users: React.FC = () => {
setOpenAddModal(false);
};
const handleDelete = (row: ListItem) => {
modalRef.current.show({
content: 'users.table.user',
operation: 'common.delete.single.confirm',
name: row.name,
async onOk() {
console.log('OK');
await deleteUser(row.id);
fetchData();
}
});
};
const handleDeleteBatch = () => {
modalRef.current.show({
content: 'users.table.user',
operation: 'common.delete.confirm',
selection: true,
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
rowSelection.clearSelections();
fetchData();
}
});
};
const handleEditUser = (row: ListItem) => {
setCurrentData(row);
setOpenAddModal(true);
@ -147,7 +124,7 @@ const Users: React.FC = () => {
if (val === 'edit') {
handleEditUser(row);
} else if (val === 'delete') {
handleDelete(row);
handleDelete({ ...row, name: row.username });
}
};

Write Preview
Loading…
Cancel
Save