chore: logs history selection
This commit is contained in:
@@ -284,5 +284,6 @@ export default {
|
|||||||
'models.table.instanceView': 'Instance List',
|
'models.table.instanceView': 'Instance List',
|
||||||
'models.table.category': 'Category',
|
'models.table.category': 'Category',
|
||||||
'models.instance.firstStart': 'First Deployment',
|
'models.instance.firstStart': 'First Deployment',
|
||||||
|
'models.instance.lastStart': 'Last Startup',
|
||||||
'models.instance.startHistory': 'Startup History'
|
'models.instance.startHistory': 'Startup History'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -284,6 +284,7 @@ export default {
|
|||||||
'models.table.instanceView': 'Instance List',
|
'models.table.instanceView': 'Instance List',
|
||||||
'models.table.category': 'Category',
|
'models.table.category': 'Category',
|
||||||
'models.instance.firstStart': 'First Deployment',
|
'models.instance.firstStart': 'First Deployment',
|
||||||
|
'models.instance.lastStart': 'Last Startup',
|
||||||
'models.instance.startHistory': 'Startup History'
|
'models.instance.startHistory': 'Startup History'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -288,6 +288,7 @@ export default {
|
|||||||
'models.table.instanceView': 'Instance List',
|
'models.table.instanceView': 'Instance List',
|
||||||
'models.table.category': 'Category',
|
'models.table.category': 'Category',
|
||||||
'models.instance.firstStart': 'First Deployment',
|
'models.instance.firstStart': 'First Deployment',
|
||||||
|
'models.instance.lastStart': 'Last Startup',
|
||||||
'models.instance.startHistory': 'Startup History'
|
'models.instance.startHistory': 'Startup History'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -284,6 +284,7 @@ export default {
|
|||||||
'models.table.instanceView': 'Instance List',
|
'models.table.instanceView': 'Instance List',
|
||||||
'models.table.category': 'Category',
|
'models.table.category': 'Category',
|
||||||
'models.instance.firstStart': 'First Deployment',
|
'models.instance.firstStart': 'First Deployment',
|
||||||
|
'models.instance.lastStart': 'Last Startup',
|
||||||
'models.instance.startHistory': 'Startup History'
|
'models.instance.startHistory': 'Startup History'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -268,5 +268,6 @@ export default {
|
|||||||
'models.table.instanceView': '实例列表',
|
'models.table.instanceView': '实例列表',
|
||||||
'models.table.category': '类别',
|
'models.table.category': '类别',
|
||||||
'models.instance.firstStart': '首次部署',
|
'models.instance.firstStart': '首次部署',
|
||||||
|
'models.instance.lastStart': '最近启动',
|
||||||
'models.instance.startHistory': '启动记录'
|
'models.instance.startHistory': '启动记录'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import useSetChunkRequest from '@/hooks/use-chunk-request';
|
import useSetChunkRequest from '@/hooks/use-chunk-request';
|
||||||
|
import { formatOrdinal } from '@/utils';
|
||||||
import { CloseOutlined } from '@ant-design/icons';
|
import { CloseOutlined } from '@ant-design/icons';
|
||||||
import { BaseSelect, LogsViewer } from '@gpustack/core-ui';
|
import { BaseSelect, LogsViewer } from '@gpustack/core-ui';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Button, Modal } from 'antd';
|
import { Button, Modal } from 'antd';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import { MODELS_API } from '../apis';
|
import { MODELS_API } from '../apis';
|
||||||
|
|
||||||
@@ -27,6 +29,7 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
const [isDownloading, setIsDownloading] = useState<boolean>(
|
const [isDownloading, setIsDownloading] = useState<boolean>(
|
||||||
status === InstanceStatusMap.Downloading
|
status === InstanceStatusMap.Downloading
|
||||||
);
|
);
|
||||||
|
const [record, setRecord] = useState<number>(0);
|
||||||
const [params, setParams] = useState<any>({
|
const [params, setParams] = useState<any>({
|
||||||
follow: true
|
follow: true
|
||||||
});
|
});
|
||||||
@@ -95,6 +98,36 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
worker_id: option.worker_id
|
worker_id: option.worker_id
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
setRecord(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderLabel = (label: string, time: string) => {
|
||||||
|
return (
|
||||||
|
<span className="flex-between gap-8">
|
||||||
|
<span>{label}</span>
|
||||||
|
<span className="text-tertiary font-400">
|
||||||
|
{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const optionRender = (option: any) => {
|
||||||
|
const { data = {} } = option || {};
|
||||||
|
let label = formatOrdinal(data.value);
|
||||||
|
if (data.value === 0) {
|
||||||
|
label = intl.formatMessage({ id: 'models.instance.firstStart' });
|
||||||
|
}
|
||||||
|
if (data.isLast) {
|
||||||
|
label = intl.formatMessage({ id: 'models.instance.lastStart' });
|
||||||
|
}
|
||||||
|
return renderLabel(label, data.start_at);
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelRender = (option: any) => {
|
||||||
|
const data = countOptions.find((item) => item.value === option.value);
|
||||||
|
if (!data) return '';
|
||||||
|
return optionRender({ data });
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderTitle = () => {
|
const renderTitle = () => {
|
||||||
@@ -106,6 +139,7 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
<span>
|
<span>
|
||||||
<BaseSelect
|
<BaseSelect
|
||||||
allowClear
|
allowClear
|
||||||
|
value={record}
|
||||||
onChange={handleOnChange}
|
onChange={handleOnChange}
|
||||||
prefix={
|
prefix={
|
||||||
<span
|
<span
|
||||||
@@ -123,18 +157,8 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
options={countOptions}
|
options={countOptions}
|
||||||
labelRender={(option) => {
|
labelRender={labelRender}
|
||||||
return (
|
optionRender={optionRender}
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: 13
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{option?.label}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
style={{
|
style={{
|
||||||
width: 400,
|
width: 400,
|
||||||
marginRight: 16
|
marginRight: 16
|
||||||
@@ -159,7 +183,13 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
url: `${MODELS_API}/${props.modelId}/instances`,
|
url: `${MODELS_API}/${props.modelId}/instances`,
|
||||||
handler: updateHandler
|
handler: updateHandler
|
||||||
});
|
});
|
||||||
fetchData(props.id);
|
fetchData(props.id).then((list) => {
|
||||||
|
if (list.length === 1) {
|
||||||
|
setRecord(list[0].value);
|
||||||
|
} else if (list.length > 1) {
|
||||||
|
setRecord(list[1].value);
|
||||||
|
}
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
cancelOnClose();
|
cancelOnClose();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -377,6 +377,12 @@ export interface DraftModelItem {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface InstanceRestartCount {
|
export interface InstanceRestartCount {
|
||||||
restart_counts: number[];
|
workers: {
|
||||||
workers: { id: number; name: string }[];
|
worker_id: number;
|
||||||
|
name: string;
|
||||||
|
restarts: {
|
||||||
|
restart_count: number;
|
||||||
|
started_at: string;
|
||||||
|
}[];
|
||||||
|
}[];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { useQueryData } from '@/hooks/use-query-data-list';
|
import { useQueryData } from '@/hooks/use-query-data-list';
|
||||||
import { formatOrdinal } from '@/utils';
|
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { queryModelInstanceRestartCount } from '../apis';
|
import { queryModelInstanceRestartCount } from '../apis';
|
||||||
@@ -14,24 +13,25 @@ export default function useQueryModelInstanceRestartCount() {
|
|||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const [dataList, setDataList] = useState<
|
const [dataList, setDataList] = useState<
|
||||||
{ value: number; label: number | string; worker_id: number }[]
|
{ value: number; label: React.ReactNode; worker_id: number }[]
|
||||||
>([]);
|
>([]);
|
||||||
|
|
||||||
const fetchRestartCount = async (instance_id: number) => {
|
const fetchRestartCount = async (instance_id: number) => {
|
||||||
const res = await fetchData(instance_id);
|
const res = await fetchData(instance_id);
|
||||||
const workerId = res?.workers?.[0]?.id || 0;
|
const workerId = res?.workers?.[0]?.worker_id || 0;
|
||||||
|
const workerItem = res?.workers?.[0];
|
||||||
const dataList =
|
const dataList =
|
||||||
res?.restart_counts?.map((count, index) => {
|
workerItem?.restarts?.map((restart, index) => {
|
||||||
return {
|
return {
|
||||||
value: count,
|
value: restart.restart_count,
|
||||||
label:
|
label: restart.restart_count,
|
||||||
count === 0
|
start_at: restart.started_at,
|
||||||
? intl.formatMessage({ id: 'models.instance.firstStart' })
|
worker_id: workerId,
|
||||||
: formatOrdinal(count),
|
isLast: index === 1
|
||||||
worker_id: workerId
|
|
||||||
};
|
};
|
||||||
}) || [];
|
}) || [];
|
||||||
setDataList(dataList);
|
setDataList(dataList);
|
||||||
|
return dataList;
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
countOptions: dataList,
|
countOptions: dataList,
|
||||||
|
|||||||
Reference in New Issue
Block a user