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

fix: delete worker

Browse Source
This commit is contained in:
jialin
2024-07-10 17:14:55 +08:00
parent 0ed7568859
commit 8607815240
14 changed files with 129 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/copy-button/index.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
>
{copied ? (
<CheckCircleFilled
style={{ color: 'var(--ant-color-primary)', fontSize: '14px' }}
style={{ color: 'var(--ant-color-success)', fontSize: '14px' }}
/>
) : (
<CopyOutlined
src/components/echarts/config.ts
+9 -2
View File
@@ -1,3 +1,4 @@
import { isFunction } from 'lodash';
const chartColorMap = {
tickLineColor: 'rgba(217,217,217,0.5)',
axislabelColor: 'rgba(0, 0, 0, 0.4)'
@@ -8,15 +9,18 @@ export const tooltip = {
// axisPointer: {
// type: 'shadow'
// }
formatter(params: any) {
formatter(params: any, callback?: (val: any) => any) {
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
params.forEach((item: any) => {
let value = isFunction(callback)
? callback?.(item.data.value)
: item.data.value;
result += `<span class="tooltip-item">
<span class="tooltip-item-name">
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
<span class="tooltip-title">${item.seriesName}</span>:
</span>
<span class="tooltip-value">${item.data.value}</span>
<span class="tooltip-value">${value}</span>
</span>`;
});
return `<div class="tooltip-wrapper">${result}</div>`;
@@ -55,6 +59,9 @@ export const xAxis = {
export const yAxis = {
// max: 100,
// min: 0,
nameTextStyle: {
padding: [0, 0, 0, -25]
},
splitLine: {
show: true,
lineStyle: {
src/components/echarts/line-chart.tsx
+10 -2
View File
@@ -17,9 +17,11 @@ const LineChart: React.FC<ChartProps> = (props) => {
const {
seriesData,
xAxisData,
yAxisName,
height,
width,
labelFormatter,
tooltipValueFormatter = null,
legendData = [],
smooth,
title
@@ -34,7 +36,12 @@ const LineChart: React.FC<ChartProps> = (props) => {
},
grid,
tooltip: {
...tooltip
...tooltip,
formatter(params: any) {
return tooltipValueFormatter
? tooltip.formatter(params, tooltipValueFormatter)
: tooltip.formatter(params);
}
},
xAxis: {
...xAxis,
@@ -76,7 +83,8 @@ const LineChart: React.FC<ChartProps> = (props) => {
text: title
},
yAxis: {
...options.yAxis
...options.yAxis,
name: yAxisName
},
xAxis: {
...options.xAxis,
src/components/echarts/types.ts
+2
View File
@@ -3,12 +3,14 @@ export interface ChartProps {
xAxisData: string[];
legendData?: string[];
labelFormatter?: (val?: any) => string;
tooltipValueFormatter?: (val?: any) => string;
height: string | number;
width?: string | number;
title?: string;
value?: number;
smooth?: boolean;
color?: string;
yAxisName?: string;
}
export interface AreaChartItemProps {
src/components/seal-table/components/table-row.tsx
-2
View File
@@ -170,8 +170,6 @@ const TableRow: React.FC<
useEffect(() => {
if (!firstLoad && expanded) {
createChunkRequest();
} else {
chunkRequestRef.current?.current?.cancel?.();
}
return () => {
chunkRequestRef.current?.current?.cancel?.();
src/components/status-tag/index.tsx
+13 -1
View File
@@ -1,5 +1,7 @@
import { StatusColorMap } from '@/config';
import { StatusType } from '@/config/types';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import './index.less';
@@ -16,6 +18,7 @@ type StatusTagProps = {
statusValue: {
status: StatusType;
text: string;
message?: string;
};
download?: {
percent: number;
@@ -56,7 +59,16 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
border: `1px solid ${statusColor?.text}`
}}
>
{renderContent()}
{statusValue.message ? (
<Tooltip title={statusValue.message}>
<span className="m-r-5">
<InfoCircleOutlined />
</span>
{renderContent()}
</Tooltip>
) : (
renderContent()
)}
</span>
);
};
src/locales/en-US/resources.ts
+2 -1
View File
@@ -16,5 +16,6 @@ export default {
'resources.table.gpuutilization': 'GPU Utilization',
'resources.table.vramutilization': 'VRAM Utilization',
'resources.table.total': 'Total',
'resources.table.used': 'Used'
'resources.table.used': 'Used',
'resources.table.wokers': 'workers'
};
src/locales/zh-CN/resources.ts
+2 -1
View File
@@ -16,5 +16,6 @@ export default {
'resources.table.gpuutilization': 'GPU 利用率',
'resources.table.vramutilization': '显存利用率',
'resources.table.total': '总量',
'resources.table.used': '已用'
'resources.table.used': '已用',
'resources.table.wokers': 'workers'
};
src/pages/dashboard/components/resource-utilization.tsx
+5
View File
@@ -116,6 +116,9 @@ const UtilizationOvertime: React.FC = () => {
const typeList = ['gpu', 'cpu', 'memory', 'gpu_memory'];
const tooltipValueFormatter = (value: any) => {
return !value ? value : `${value}%`;
};
const generateData = () => {
const legendData: string[] = [];
const xAxisData: string[] = [];
@@ -154,8 +157,10 @@ const UtilizationOvertime: React.FC = () => {
seriesData={seriesData}
legendData={legendData}
xAxisData={xAxisData}
tooltipValueFormatter={tooltipValueFormatter}
smooth={true}
width="100%"
yAxisName="(%)"
></LineChart>
</>
);
src/pages/llmodels/components/instance-item.tsx
+2 -1
View File
@@ -93,7 +93,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
}
statusValue={{
status: status[item.state] as any,
text: item.state
text: item.state,
message: item.state_message
}}
></StatusTag>
)}
src/pages/llmodels/config/index.ts
+1 -1
View File
@@ -33,7 +33,7 @@ export const status: any = {
[InstanceStatusMap.Running]: StatusMaps.success,
[InstanceStatusMap.Pending]: StatusMaps.transitioning,
[InstanceStatusMap.Initializing]: StatusMaps.transitioning,
[InstanceStatusMap.Scheduled]: StatusMaps.success,
[InstanceStatusMap.Scheduled]: StatusMaps.transitioning,
[InstanceStatusMap.Error]: StatusMaps.error,
[InstanceStatusMap.Downloading]: StatusMaps.transitioning,
[InstanceStatusMap.Unknown]: StatusMaps.inactive,
src/pages/llmodels/config/types.ts
+1
View File
@@ -34,6 +34,7 @@ export interface ModelInstanceListItem {
port: number;
name: string;
state: string;
state_message: string;
download_progress: number;
model_id: number;
model_name: string;
src/pages/resources/apis/index.ts
+6
View File
@@ -27,3 +27,9 @@ export async function queryGPUDeviceItem(id: string) {
methos: 'GET'
});
}
export async function deleteWorker(id: string | number) {
return request(`${WORKERS_API}/${id}`, {
method: 'DELETE'
});
}
src/pages/resources/components/workers.tsx
+75 -4
View File
@@ -1,14 +1,15 @@
import PageTools from '@/components/page-tools';
import ProgressBar from '@/components/progress-bar';
import StatusTag from '@/components/status-tag';
import useTableRowSelection from '@/hooks/use-table-row-selection';
import useTableSort from '@/hooks/use-table-sort';
import { convertFileSize } from '@/utils';
import { SyncOutlined } from '@ant-design/icons';
import { convertFileSize, handleBatchRequest } from '@/utils';
import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input, Space, Table } from 'antd';
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
import _ from 'lodash';
import { memo, useEffect, useState } from 'react';
import { queryWorkersList } from '../apis';
import { deleteWorker, queryWorkersList } from '../apis';
import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
const { Column } = Table;
@@ -18,6 +19,7 @@ const Resources: React.FC = () => {
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
const rowSelection = useTableRowSelection();
const intl = useIntl();
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
@@ -90,6 +92,44 @@ const Resources: React.FC = () => {
return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
};
const handleDelete = (row: ListItem) => {
Modal.confirm({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: ' worker ' }
),
async onOk() {
console.log('OK');
await deleteWorker(row.id);
message.success(intl.formatMessage({ id: 'common.message.success' }));
fetchData();
},
onCancel() {
console.log('Cancel');
}
});
};
const handleDeleteBatch = () => {
Modal.confirm({
title: '',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: ` wokers ` }
),
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
message.success(intl.formatMessage({ id: 'common.message.success' }));
rowSelection.clearSelections();
fetchData();
},
onCancel() {
console.log('Cancel');
}
});
};
const renderStorageTooltip = (files: Filesystem[]) => {
const mountRoot = _.find(
files,
@@ -137,12 +177,23 @@ const Resources: React.FC = () => {
></Button>
</Space>
}
right={
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
{intl.formatMessage({ id: 'common.button.delete' })}
</Button>
}
></PageTools>
<Table
dataSource={dataSource}
loading={loading}
rowKey="id"
onChange={handleTableChange}
rowSelection={rowSelection}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
@@ -307,6 +358,26 @@ const Resources: React.FC = () => {
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
render={(text, record: ListItem) => {
return (
<Space size={20}>
<Tooltip
title={intl.formatMessage({ id: 'common.button.delete' })}
>
<Button
onClick={() => handleDelete(record)}
size="small"
danger
icon={<DeleteOutlined></DeleteOutlined>}
></Button>
</Tooltip>
</Space>
);
}}
/>
</Table>
</>
);