root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: model list duplicate

Browse Source
This commit is contained in:
jialin
2024-07-09 16:59:35 +08:00
parent 734368dd49
commit fe14edbb4e
22 changed files with 247 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+6
View File
@@ -18,6 +18,12 @@ export default defineConfig({
base: process.env.npm_config_base || '/',
...(isProduction
? {
jsMinifierOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
},
scripts: [
{
src: `/js/umi.${t}.js`
src/components/drop-down-buttons/index.tsx
+8 -5
View File
@@ -31,11 +31,14 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
return (
<>
{items?.length === 1 ? (
<Button
icon={_.get(items, '0.icon')}
size={size}
onClick={handleButtonClick}
></Button>
<Tooltip title={_.head(items)?.label}>
<Button
{..._.head(items)}
icon={_.get(items, '0.icon')}
size={size}
onClick={handleButtonClick}
></Button>
</Tooltip>
) : (
<Dropdown.Button
menu={{
src/components/footer/index.less
-1
View File
@@ -1,6 +1,5 @@
// footer all styles
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: transparent;
src/components/icon-font/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_clxjnjvlf6m.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_n8fe7jbl7n.js'
});
export default IconFont;
src/components/seal-table/components/table-row.tsx
+24 -5
View File
@@ -17,6 +17,7 @@ const TableRow: React.FC<
rowIndex,
expandable,
rowSelection,
expandedRowKeys,
rowKey,
columns,
pollingChildren,
@@ -31,12 +32,14 @@ const TableRow: React.FC<
const [checked, setChecked] = useState(false);
const [childrenData, setChildrenData] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const [firstLoad, setFirstLoad] = useState(true);
const pollTimer = useRef<any>(null);
const chunkRequestRef = useRef<any>(null);
console.log('table row====');
const { updateChunkedList } = useUpdateChunkedList(childrenData, {
setDataList: setChildrenData
setDataList: setChildrenData,
callback: (list) => renderChildren?.(list)
});
useEffect(() => {
@@ -50,6 +53,14 @@ const TableRow: React.FC<
}
}, [rowSelection]);
useEffect(() => {
if (expandedRowKeys?.includes(record[rowKey])) {
setExpanded(true);
} else {
setExpanded(false);
}
}, [expandedRowKeys]);
useEffect(() => {
return () => {
if (pollTimer.current) {
@@ -75,6 +86,7 @@ const TableRow: React.FC<
};
const handleLoadChildren = async () => {
console.log('first load=====', firstLoad);
try {
setLoading(true);
const data = await loadChildren?.(record);
@@ -83,6 +95,8 @@ const TableRow: React.FC<
} catch (error) {
setChildrenData([]);
setLoading(false);
} finally {
setFirstLoad(false);
}
};
@@ -113,9 +127,9 @@ const TableRow: React.FC<
const handleRowExpand = async () => {
setExpanded(!expanded);
onExpand?.(!expanded, record);
onExpand?.(!expanded, record, record[rowKey]);
console.log('expanded=====', record);
chunkRequestRef.current?.current?.cancel?.();
if (pollTimer.current) {
clearInterval(pollTimer.current);
}
@@ -149,10 +163,15 @@ const TableRow: React.FC<
};
useEffect(() => {
if (childrenData.length) {
if (!firstLoad && expanded) {
createChunkRequest();
} else {
chunkRequestRef.current?.current?.cancel?.();
}
}, [childrenData]);
return () => {
chunkRequestRef.current?.current?.cancel?.();
};
}, [firstLoad, expanded]);
const renderRowPrefix = () => {
if (expandable && rowSelection) {
src/components/seal-table/index.tsx
+2
View File
@@ -12,6 +12,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
children,
rowKey,
onExpand,
expandedRowKeys,
loading,
expandable,
pollingChildren,
@@ -144,6 +145,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
loadChildren={loadChildren}
loadChildrenAPI={loadChildrenAPI}
onExpand={onExpand}
expandedRowKeys={expandedRowKeys}
></TableRow>
);
})}
src/components/seal-table/types.ts
+2 -1
View File
@@ -24,6 +24,7 @@ export interface RowSelectionProps {
onChange: (selectedRowKeys: React.Key[]) => void;
}
export interface SealTableProps {
expandedRowKeys?: React.Key[];
rowSelection?: RowSelectionProps;
children: React.ReactNode[];
empty?: React.ReactNode;
@@ -32,7 +33,7 @@ export interface SealTableProps {
pollingChildren?: boolean;
watchChildren?: boolean;
loading?: boolean;
onExpand?: (expanded: boolean, record: any) => void;
onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
renderChildren?: (data: any) => React.ReactNode;
loadChildren?: (record: any) => Promise<any[]>;
loadChildrenAPI?: (record: any) => string;
src/hooks/use-expanded-row-keys.ts
+35
View File
@@ -0,0 +1,35 @@
import { useCallback, useState } from 'react';
export default function useExpandedRowKeys() {
const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
const handleExpandChange = useCallback(
(expanded: boolean, record: any, rowKey: any) => {
if (expanded) {
setExpandedRowKeys((keys) => [...keys, rowKey]);
} else {
setExpandedRowKeys((keys) => keys.filter((key) => key !== rowKey));
}
},
[]
);
const updateExpandedRowKeys = (keys: React.Key[]) => {
// remove expanded row keys that are in the deleted keys
const newExpandedRowKeys = expandedRowKeys.filter(
(key) => !keys.includes(key)
);
setExpandedRowKeys(newExpandedRowKeys);
};
const clearExpandedRowKeys = () => {
setExpandedRowKeys([]);
};
return {
expandedRowKeys,
clearExpandedRowKeys,
updateExpandedRowKeys,
handleExpandChange
};
}
src/hooks/use-update-chunk-list.ts
+17 -16
View File
@@ -8,17 +8,17 @@ interface ChunkedCollection {
type: string | number;
}
// Only used to update lists without nested state
export function useUpdateChunkedList(
dataList: { id: string | number }[],
options: {
setDataList: (args: any) => void;
callback?: (args: any) => void;
filterFun?: (args: any) => boolean;
mapFun?: (args: any) => any;
computedID?: (d: object) => string;
}
) {
const updateChunkedList = (data: ChunkedCollection) => {
export function useUpdateChunkedList(options: {
setDataList: (args: any) => void;
callback?: (args: any) => void;
filterFun?: (args: any) => boolean;
mapFun?: (args: any) => any;
computedID?: (d: object) => string;
}) {
const updateChunkedList = (
data: ChunkedCollection,
dataList: { id: string | number }[]
) => {
let collections = data?.collection || [];
if (options?.computedID) {
collections = _.map(collections, (item: any) => {
@@ -42,16 +42,17 @@ export function useUpdateChunkedList(
);
if (updateIndex === -1) {
const updateItem = _.cloneDeep(item);
options.setDataList((preDataList: any) => {
options.setDataList?.((preDataList: any) => {
return _.concat(updateItem, preDataList);
});
}
console.log('create=========', updateIndex, dataList, collections);
});
}
// DELETE
if (data?.type === WatchEventType.DELETE) {
options.setDataList((prevDataList: any) => {
const updatedList = _.filter(prevDataList, (item: any) => {
options.setDataList?.(() => {
const updatedList = _.filter(dataList, (item: any) => {
return !_.find(ids, (id: any) => id === item.id);
});
return updatedList;
@@ -59,8 +60,8 @@ export function useUpdateChunkedList(
}
// UPDATE
if (data?.type === WatchEventType.UPDATE) {
options.setDataList((prevDataList: any[]) => {
const updatedDataList = _.cloneDeep(prevDataList);
options.setDataList?.(() => {
const updatedDataList = _.cloneDeep(dataList);
_.each(collections, (item: any) => {
const updateIndex = _.findIndex(
src/layouts/rightRender.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export function getRightRenderContent(opts: {
mode: 'vertical',
expandIcon: false,
inlineCollapsed: collapsed,
triggerSubMenuAction: 'hover',
triggerSubMenuAction: 'click',
items: [
{
key: 'lang',
src/pages/llmodels/components/instance-item.tsx
+20 -5
View File
@@ -12,18 +12,24 @@ import { ModelInstanceListItem } from '../config/types';
interface InstanceItemProps {
list: ModelInstanceListItem[];
handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
handleChildSelect: (
val: string,
item: ModelInstanceListItem,
list: ModelInstanceListItem[]
) => void;
}
const InstanceItem: React.FC<InstanceItemProps> = ({
list,
handleChildSelect
}) => {
console.log('instance item====');
const intl = useIntl();
const childActionList = [
{
label: intl.formatMessage({ id: 'common.button.viewlog' }),
key: 'viewlog',
status: [InstanceStatusMap.Running, InstanceStatusMap.Error],
icon: <FieldTimeOutlined />
},
{
@@ -33,9 +39,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
icon: <DeleteOutlined />
}
];
const testStatus = {
state: InstanceStatusMap.Scheduled
const setChildActionList = (item: ModelInstanceListItem) => {
return _.filter(childActionList, (action: any) => {
if (action.key === 'viewlog') {
return InstanceStatusMap.Running.includes(item.state);
}
return true;
});
};
const getWorkerIp = (item: ModelInstanceListItem) => {
if (item.worker_ip) {
return item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
@@ -90,8 +103,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
<Col span={5}>
<div style={{ paddingLeft: 39 }}>
<DropdownButtons
items={childActionList}
onSelect={(val: string) => handleChildSelect(val, item)}
items={setChildActionList(item)}
onSelect={(val: string) =>
handleChildSelect(val, item, list)
}
></DropdownButtons>
</div>
</Col>
src/pages/llmodels/components/table-list.tsx
+15 -11
View File
@@ -4,6 +4,7 @@ import SealTable from '@/components/seal-table';
import SealColumn from '@/components/seal-table/components/seal-column';
import { PageAction } from '@/config';
import type { PageActionType } from '@/config/types';
import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { handleBatchRequest } from '@/utils';
@@ -18,7 +19,7 @@ import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
import { Button, Input, Modal, Space, message } from 'antd';
import dayjs from 'dayjs';
import { memo, useCallback, useEffect, useState } from 'react';
import { memo, useCallback, useState } from 'react';
import {
MODELS_API,
MODEL_INSTANCE_API,
@@ -57,11 +58,9 @@ const Models: React.FC<ModelsProps> = ({
handleSearch,
handleShowSizeChange,
handlePageChange,
createModelsChunkRequest,
queryParams,
loading,
total,
fetchData
total
}) => {
// const { modal } = App.useApp();
console.log('model list====2');
@@ -69,6 +68,8 @@ const Models: React.FC<ModelsProps> = ({
const intl = useIntl();
const navigate = useNavigate();
const rowSelection = useTableRowSelection();
const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
useExpandedRowKeys();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
@@ -145,6 +146,7 @@ const Models: React.FC<ModelsProps> = ({
async onOk() {
await deleteModel(row.id);
message.success(intl.formatMessage({ id: 'common.message.success' }));
updateExpandedRowKeys([row.id]);
},
onCancel() {
console.log('Cancel');
@@ -162,6 +164,7 @@ const Models: React.FC<ModelsProps> = ({
await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
message.success(intl.formatMessage({ id: 'common.message.success' }));
rowSelection.clearSelections();
updateExpandedRowKeys(rowSelection.selectedRowKeys);
},
onCancel() {
console.log('Cancel');
@@ -181,7 +184,7 @@ const Models: React.FC<ModelsProps> = ({
console.log('error:', error);
}
};
const handleDeleteInstace = (row: any) => {
const handleDeleteInstace = (row: any, list: ModelInstanceListItem[]) => {
Modal.confirm({
title: '',
content: intl.formatMessage(
@@ -191,6 +194,9 @@ const Models: React.FC<ModelsProps> = ({
async onOk() {
await deleteModelInstance(row.id);
message.success(intl.formatMessage({ id: 'common.message.success' }));
if (list.length === 1) {
updateExpandedRowKeys([row.model_id]);
}
},
onCancel() {
console.log('Cancel');
@@ -232,9 +238,9 @@ const Models: React.FC<ModelsProps> = ({
}, []);
const handleChildSelect = useCallback(
(val: any, row: ModelInstanceListItem) => {
(val: any, row: ModelInstanceListItem, list: ModelInstanceListItem[]) => {
if (val === 'delete') {
handleDeleteInstace(row);
handleDeleteInstace(row, list);
}
if (val === 'viewlog') {
handleViewLogs(row);
@@ -252,10 +258,6 @@ const Models: React.FC<ModelsProps> = ({
);
};
useEffect(() => {
createModelsChunkRequest();
}, []);
return (
<>
<PageContainer
@@ -309,6 +311,8 @@ const Models: React.FC<ModelsProps> = ({
<SealTable
dataSource={dataSource}
rowSelection={rowSelection}
expandedRowKeys={expandedRowKeys}
onExpand={handleExpandChange}
loading={loading}
rowKey="id"
expandable={true}
src/pages/llmodels/components/view-logs-modal.tsx
+31 -8
View File
@@ -1,7 +1,8 @@
import LogsViewer from '@/components/logs-viewer';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Modal } from 'antd';
import React from 'react';
import { Button, Modal } from 'antd';
import React, { useState } from 'react';
type ViewModalProps = {
open: boolean;
@@ -12,14 +13,36 @@ type ViewModalProps = {
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
console.log('viewlogs======');
const { open, url, onCancel } = props || {};
const [modalSize, setModalSize] = useState<any>({
width: 600,
height: 450
});
const isFullScreenRef = React.useRef(false);
const intl = useIntl();
if (!open) {
return null;
}
const handleFullscreenToggle = () => {
isFullScreenRef.current = !isFullScreenRef.current;
setModalSize((size: any) => {
return {
width: size.width === 600 ? '100%' : 600,
height: size.height === 450 ? 'calc(100vh - 100px)' : 450
};
});
};
return (
<Modal
title={intl.formatMessage({ id: 'common.button.viewlog' })}
title={
<span className="flex flex-center">
<span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
<Button size="middle" type="text" onClick={handleFullscreenToggle}>
{isFullScreenRef.current ? (
<FullscreenExitOutlined />
) : (
<FullscreenOutlined />
)}
</Button>
</span>
}
open={open}
centered={true}
onCancel={onCancel}
@@ -27,11 +50,11 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
width={modalSize.width}
footer={null}
>
<LogsViewer
height={500}
height={modalSize.height}
url={url}
params={{
follow: true
src/pages/llmodels/config/index.ts
+4 -2
View File
@@ -25,7 +25,8 @@ export const InstanceStatusMap = {
Scheduled: 'Scheduled',
Error: 'Error',
Downloading: 'Downloading',
Unknown: 'Unknown'
Unknown: 'Unknown',
Analyzing: 'Analyzing'
};
export const status: any = {
@@ -35,7 +36,8 @@ export const status: any = {
[InstanceStatusMap.Scheduled]: StatusMaps.success,
[InstanceStatusMap.Error]: StatusMaps.error,
[InstanceStatusMap.Downloading]: StatusMaps.transitioning,
[InstanceStatusMap.Unknown]: StatusMaps.inactive
[InstanceStatusMap.Unknown]: StatusMaps.inactive,
[InstanceStatusMap.Analyzing]: StatusMaps.transitioning
};
export const ActionList = [
src/pages/llmodels/index.tsx
+18 -3
View File
@@ -17,7 +17,9 @@ const Models: React.FC = () => {
const [total, setTotal] = useState(100);
const [loading, setLoading] = useState(false);
const [dataSource, setDataSource] = useState<ListItem[]>([]);
const [firstLoad, setFirstLoad] = useState(true);
const chunkRequedtRef = useRef<any>();
const dataSourceRef = useRef<any>();
let axiosToken = createAxiosToken();
const [queryParams, setQueryParams] = useState({
page: 1,
@@ -26,10 +28,14 @@ const Models: React.FC = () => {
});
// request data
const { updateChunkedList } = useUpdateChunkedList(dataSource, {
const { updateChunkedList } = useUpdateChunkedList({
setDataList: setDataSource
});
useEffect(() => {
dataSourceRef.current = dataSource;
}, [dataSource]);
const fetchData = useCallback(async () => {
axiosToken?.cancel?.();
axiosToken = createAxiosToken();
@@ -49,6 +55,7 @@ const Models: React.FC = () => {
console.log('error', error);
} finally {
setLoading(false);
setFirstLoad(false);
}
}, [queryParams]);
@@ -76,7 +83,7 @@ const Models: React.FC = () => {
const updateHandler = (list: any) => {
_.each(list, (data: any) => {
updateChunkedList(data);
updateChunkedList(data, dataSourceRef.current);
});
};
@@ -110,9 +117,17 @@ const Models: React.FC = () => {
);
useEffect(() => {
fetchData();
if (!firstLoad) {
createModelsChunkRequest();
}
return () => {
chunkRequedtRef.current?.current?.cancel?.();
};
}, [firstLoad]);
useEffect(() => {
fetchData();
return () => {
axiosToken?.cancel?.();
};
}, [queryParams]);
src/pages/login/components/styles.less
+4
View File
@@ -17,4 +17,8 @@
:local(.box) {
padding-top: 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
src/pages/login/index.tsx
+3
View File
@@ -21,6 +21,9 @@ const Login = () => {
useEffect(() => {
gotoDefaultPage(userInfo);
}, [userInfo]);
useEffect(() => {
document.title = 'GPUStack';
}, []);
return (
<>
src/pages/playground/components/chat-footer.tsx
+37 -6
View File
@@ -13,6 +13,7 @@ import '../style/chat-footer.less';
interface ChatFooterProps {
onSubmit: () => void;
onStop: () => void;
onClear: () => void;
onNewMessage: () => void;
onView: () => void;
@@ -26,6 +27,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
const {
onSubmit,
onClear,
onStop,
onNewMessage,
onView,
feedback,
@@ -40,6 +42,26 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
{ enabled: !disabled }
);
const renderSubmitButton = () => {
if (disabled) {
return (
<>
{intl.formatMessage({ id: 'common.button.stop' })}
<span className="m-l-5">
<IconFont type="icon-stop"></IconFont>
</span>
</>
);
}
return (
<>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<IconFont type="icon-command"></IconFont> + <EnterOutlined />
</span>
</>
);
};
return (
<div className="chat-footer">
<Row style={{ width: '100%' }}>
@@ -71,12 +93,21 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button disabled={disabled} type="primary" onClick={onSubmit}>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<IconFont type="icon-command"></IconFont> + <EnterOutlined />
</span>
</Button>
{!disabled ? (
<Button type="primary" disabled={disabled} onClick={onSubmit}>
{intl.formatMessage({ id: 'common.button.submit' })}
<span className="m-l-5 opct-7">
<IconFont type="icon-command"></IconFont> + <EnterOutlined />
</span>
</Button>
) : (
<Button type="primary" onClick={onStop}>
{intl.formatMessage({ id: 'common.button.stop' })}
<span className="m-l-5">
<IconFont type="icon-stop"></IconFont>
</span>
</Button>
)}
</Space>
</Col>
</Row>
src/pages/playground/components/ground-left.tsx
+14 -1
View File
@@ -47,6 +47,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
const [currentIsFocus, setCurrentIsFocus] = useState(false);
const systemRef = useRef<any>(null);
const contentRef = useRef<any>('');
const controllerRef = useRef<any>(null);
const handleSystemMessageChange = (e: any) => {
setSystemMessage(e.target.value);
@@ -88,11 +89,21 @@ const MessageList: React.FC<MessageProps> = (props) => {
console.log('messageList=====', messageList, messageId.current, chunk);
return false;
};
const handleStopConversation = () => {
controllerRef.current?.abort?.();
setLoading(false);
};
const submitMessage = async () => {
try {
setLoading(true);
setMessageId();
setTokenResult(null);
controllerRef.current?.abort?.();
controllerRef.current = new AbortController();
const signal = controllerRef.current.signal;
contentRef.current = '';
const chatParams = {
messages: systemMessage
@@ -109,7 +120,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
};
const result = await fetchChunkedData({
data: chatParams,
url: CHAT_API
url: CHAT_API,
signal
});
if (!result) {
@@ -246,6 +258,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
onNewMessage={handleNewMessage}
onSubmit={handleSubmit}
onView={handleView}
onStop={handleStopConversation}
disabled={loading}
hasTokenResult={!!tokenResult}
feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
src/pages/playground/components/reference-params.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
<span>
{intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
{usage.tokens_per_second * 1000} Tokens/s
{usage.tokens_per_second} Tokens/s
</span>
</div>
);
src/pages/playground/components/view-code-modal.tsx
+2 -2
View File
@@ -137,7 +137,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
closeIcon={true}
maskClosable={false}
keyboard={false}
width={660}
width={600}
footer={null}
>
<div style={{ marginBottom: '10px' }}>
@@ -152,7 +152,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
onChangeLang={handleOnChangeLang}
>
<Editor
height="min(500px, 90vh)"
height="min(450px, 90vh)"
theme="vs-dark"
className="monaco-editor"
defaultLanguage="shell"
src/utils/fetch-chunk-data.ts
+2
View File
@@ -30,6 +30,7 @@ export const fetchChunkedData = async (params: {
data?: any;
url: string;
params?: any;
signal?: AbortSignal;
method?: string;
}) => {
const method = params.method || 'POST';
@@ -40,6 +41,7 @@ export const fetchChunkedData = async (params: {
const response = await fetch(url, {
method,
body: method === 'POST' ? JSON.stringify(params.data) : null,
signal: params.signal,
headers: {
'Content-Type': 'application/json'
}