feat: logs history
This commit is contained in:
jialin
@@ -0,0 +1,127 @@
|
||||
.logs-viewer-wrap-w2 {
|
||||
position: relative;
|
||||
|
||||
.pg {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 130px;
|
||||
|
||||
.pg-inner {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -18px;
|
||||
// width: 80px;
|
||||
height: 185px;
|
||||
|
||||
&:hover {
|
||||
.pagination {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.pagination {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.at-top {
|
||||
.pagination {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--color-fill-spin-bg);
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
|
||||
button {
|
||||
color: rgba(255, 255, 255, 70%);
|
||||
background-color: rgba(71, 71, 71, 100%);
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 90%) !important;
|
||||
background-color: rgba(71, 71, 71, 100%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding: 5px 0 2px 10px;
|
||||
background-color: var(--color-logs-bg);
|
||||
border-radius: var(--ant-border-radius);
|
||||
font-family:
|
||||
monospace, Menlo, Courier, 'Courier New', Consolas, Monaco,
|
||||
'Liberation Mono' !important;
|
||||
|
||||
.content {
|
||||
word-wrap: break-word;
|
||||
height: 100%;
|
||||
padding-right: 2px;
|
||||
|
||||
&.line-break {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.text {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
color: var(--color-logs-text);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 22px;
|
||||
white-space: pre-wrap;
|
||||
background-color: var(--color-logs-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.xterm {
|
||||
.xterm-viewport {
|
||||
overflow-y: auto !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--scrollbar-size);
|
||||
height: var(--scrollbar-size);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-scrollbar-track);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
import useSetChunkFetch from '@/hooks/use-chunk-fetch';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { Spin } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import LogsList from './logs-list';
|
||||
import LogsPagination from './logs-pagination';
|
||||
import './styles/index.less';
|
||||
import useLogsPagination from './use-logs-pagination';
|
||||
|
||||
interface LogsViewerProps {
|
||||
height?: number;
|
||||
content?: string;
|
||||
url: string;
|
||||
params?: Record<string, any>;
|
||||
ref?: any;
|
||||
tail?: number;
|
||||
enableScorllLoad?: boolean;
|
||||
diffHeight?: number;
|
||||
isDownloading?: boolean;
|
||||
}
|
||||
|
||||
const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
|
||||
const {
|
||||
diffHeight,
|
||||
url,
|
||||
tail: defaultTail,
|
||||
enableScorllLoad = true,
|
||||
isDownloading,
|
||||
params
|
||||
} = props;
|
||||
const { pageSize, page, setPage, setTotalPage, totalPage } =
|
||||
useLogsPagination();
|
||||
const { setChunkFetch } = useSetChunkFetch();
|
||||
const chunkRequedtRef = useRef<any>(null);
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
const logParseWorker = useRef<any>(null);
|
||||
const tail = useRef<any>(defaultTail);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isAtTop, setIsAtTop] = useState(false);
|
||||
const [scrollPos, setScrollPos] = useState<any[]>([]);
|
||||
const logListRef = useRef<any>(null);
|
||||
const loadMoreDone = useRef(false);
|
||||
const pageRef = useRef<any>(page);
|
||||
const totalPageRef = useRef<any>(totalPage);
|
||||
const isLoadingMoreRef = useRef(false);
|
||||
const [currentData, setCurrentPageData] = useState<any[]>([]);
|
||||
const scrollPosRef = useRef<any>({
|
||||
pos: 'bottom',
|
||||
page: 1
|
||||
});
|
||||
const lineCountRef = useRef(0);
|
||||
const clearScreen = useRef(false);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
abort() {
|
||||
chunkRequedtRef.current?.current?.abort?.();
|
||||
logParseWorker.current?.terminate?.();
|
||||
}
|
||||
}));
|
||||
|
||||
const removeBracketsFromLine = (row: string) => {
|
||||
return row.startsWith('(…)') ? row.slice(3) : row;
|
||||
};
|
||||
|
||||
const setCurrentData = (lines: string[]) => {
|
||||
const dataList = lines.map((line, index) => {
|
||||
return {
|
||||
content: line,
|
||||
uid: `${pageRef.current}-${index}`
|
||||
};
|
||||
});
|
||||
|
||||
setCurrentPageData(dataList);
|
||||
};
|
||||
|
||||
const debounceLoading = _.debounce(() => {
|
||||
setLoading(false);
|
||||
isLoadingMoreRef.current = false;
|
||||
if (logListRef.current?.scroller) {
|
||||
logListRef.current.scroller.style['pointer-events'] = 'auto';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
const getCurrent = useCallback(() => {
|
||||
if (pageRef.current < 1) {
|
||||
pageRef.current = 1;
|
||||
}
|
||||
const start = (pageRef.current - 1) * pageSize;
|
||||
const end = pageRef.current * pageSize;
|
||||
const currentLogs = logs.slice(start, end);
|
||||
setPage(pageRef.current);
|
||||
setCurrentData(currentLogs);
|
||||
}, [logs, pageSize]);
|
||||
|
||||
const getPrePage = useCallback(() => {
|
||||
pageRef.current = pageRef.current - 1;
|
||||
|
||||
getCurrent();
|
||||
|
||||
setScrollPos(['bottom', pageRef.current]);
|
||||
scrollPosRef.current = {
|
||||
pos: 'bottom',
|
||||
page: pageRef.current
|
||||
};
|
||||
}, [getCurrent]);
|
||||
|
||||
const getNextPage = useCallback(() => {
|
||||
pageRef.current = pageRef.current + 1;
|
||||
|
||||
getCurrent();
|
||||
|
||||
setScrollPos(['top', pageRef.current]);
|
||||
scrollPosRef.current = {
|
||||
pos: 'top',
|
||||
page: pageRef.current
|
||||
};
|
||||
}, [getCurrent]);
|
||||
|
||||
const handleonBackend = useCallback(() => {
|
||||
pageRef.current = totalPageRef.current;
|
||||
getCurrent();
|
||||
|
||||
console.log('pageRef.current', pageRef.current);
|
||||
setScrollPos(['bottom', pageRef.current]);
|
||||
scrollPosRef.current = {
|
||||
pos: 'bottom',
|
||||
page: pageRef.current
|
||||
};
|
||||
}, [getCurrent]);
|
||||
|
||||
const handleonToFirst = useCallback(() => {
|
||||
pageRef.current = 1;
|
||||
getCurrent();
|
||||
setScrollPos(['top', pageRef.current]);
|
||||
scrollPosRef.current = {
|
||||
pos: 'top',
|
||||
page: pageRef.current
|
||||
};
|
||||
}, [getCurrent]);
|
||||
|
||||
const updateContent = (data: string) => {
|
||||
if (isLoadingMoreRef.current) {
|
||||
setLoading(true);
|
||||
if (logListRef.current?.scroller) {
|
||||
logListRef.current.scroller.style['pointer-events'] = 'none';
|
||||
}
|
||||
}
|
||||
logParseWorker.current.postMessage({
|
||||
inputStr: data,
|
||||
page: pageRef.current,
|
||||
reset: clearScreen.current,
|
||||
isDownloading: isDownloading
|
||||
});
|
||||
clearScreen.current = false;
|
||||
};
|
||||
|
||||
const createChunkConnection = async () => {
|
||||
chunkRequedtRef.current?.current?.abort?.();
|
||||
logParseWorker.current?.postMessage({
|
||||
inputStr: '',
|
||||
page: pageRef.current,
|
||||
reset: true,
|
||||
isDownloading: isDownloading
|
||||
});
|
||||
chunkRequedtRef.current = setChunkFetch({
|
||||
url,
|
||||
params: {
|
||||
tail: tail.current,
|
||||
...props.params
|
||||
},
|
||||
watch: params?.watch ?? true,
|
||||
contentType: 'text',
|
||||
handler: updateContent
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnScroll = useMemoizedFn(
|
||||
async (data: { isTop: boolean; isBottom: boolean }) => {
|
||||
const { isTop, isBottom } = data;
|
||||
setIsAtTop(isTop);
|
||||
if (isBottom) {
|
||||
scrollPosRef.current = {
|
||||
pos: 'bottom',
|
||||
page: page
|
||||
};
|
||||
} else if (isTop) {
|
||||
scrollPosRef.current = {
|
||||
pos: 'top',
|
||||
page: page
|
||||
};
|
||||
} else {
|
||||
scrollPosRef.current = {
|
||||
pos: 'middle',
|
||||
page: page
|
||||
};
|
||||
}
|
||||
if (
|
||||
loading ||
|
||||
(logs.length > 0 &&
|
||||
lineCountRef.current < pageSize - 1 &&
|
||||
!loadMoreDone.current) ||
|
||||
!enableScorllLoad
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isTop && !loadMoreDone.current) {
|
||||
tail.current = undefined;
|
||||
createChunkConnection();
|
||||
loadMoreDone.current = true;
|
||||
isLoadingMoreRef.current = true;
|
||||
clearScreen.current = true;
|
||||
} else if (isTop && page <= totalPage && page > 1) {
|
||||
// getPrePage();
|
||||
} else if (isBottom && page < totalPage) {
|
||||
// getNextPage();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const debouncedScroll = useCallback(
|
||||
_.throttle(() => {
|
||||
if (scrollPos[0] === 'top' && scrollPosRef.current.pos === 'top') {
|
||||
logListRef.current?.scrollToTop();
|
||||
}
|
||||
if (scrollPosRef.current.pos === 'bottom') {
|
||||
logListRef.current?.scrollToBottom();
|
||||
}
|
||||
}, 150),
|
||||
[scrollPos]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
createChunkConnection();
|
||||
return () => {
|
||||
chunkRequedtRef.current?.current?.abort?.();
|
||||
};
|
||||
}, [url, isDownloading, props.params]);
|
||||
|
||||
useEffect(() => {
|
||||
debouncedScroll();
|
||||
}, [scrollPos]);
|
||||
|
||||
useEffect(() => {
|
||||
logParseWorker.current?.terminate?.();
|
||||
|
||||
logParseWorker.current = new Worker(
|
||||
// @ts-ignore
|
||||
new URL('./parse-worker.ts', import.meta.url),
|
||||
{
|
||||
type: 'module'
|
||||
}
|
||||
);
|
||||
|
||||
logParseWorker.current.onmessage = (event: any) => {
|
||||
const { result, lines } = event.data;
|
||||
lineCountRef.current = lines;
|
||||
|
||||
if (pageRef.current < 1) {
|
||||
pageRef.current = 1;
|
||||
}
|
||||
|
||||
const oldTotalPage = totalPageRef.current;
|
||||
|
||||
totalPageRef.current = Math.ceil(result.length / pageSize);
|
||||
|
||||
if (isLoadingMoreRef.current) {
|
||||
pageRef.current = totalPageRef.current;
|
||||
} else if (
|
||||
pageRef.current === oldTotalPage &&
|
||||
scrollPosRef.current.pos === 'bottom'
|
||||
) {
|
||||
scrollPosRef.current = {
|
||||
pos: 'bottom',
|
||||
page: pageRef.current
|
||||
};
|
||||
pageRef.current = totalPageRef.current;
|
||||
setScrollPos(['bottom', pageRef.current]);
|
||||
}
|
||||
|
||||
const start = (pageRef.current - 1) * pageSize;
|
||||
const end = pageRef.current * pageSize;
|
||||
const currentLogs = result.slice(start, end);
|
||||
|
||||
setLogs(result);
|
||||
setTotalPage(totalPageRef.current);
|
||||
setPage(pageRef.current);
|
||||
setCurrentData(currentLogs);
|
||||
debounceLoading();
|
||||
};
|
||||
|
||||
return () => {
|
||||
if (logParseWorker.current) {
|
||||
logParseWorker.current.terminate();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="logs-viewer-wrap-w2">
|
||||
<div className="wrap">
|
||||
<div>
|
||||
<LogsList
|
||||
ref={logListRef}
|
||||
dataList={currentData}
|
||||
diffHeight={diffHeight}
|
||||
onScroll={handleOnScroll}
|
||||
></LogsList>
|
||||
</div>
|
||||
{loading && (
|
||||
<Spin
|
||||
size="default"
|
||||
spinning={loading}
|
||||
className={classNames({
|
||||
loading: loading
|
||||
})}
|
||||
></Spin>
|
||||
)}
|
||||
{totalPage > 1 && (
|
||||
<div className="pg">
|
||||
<div
|
||||
className={classNames('pg-inner', {
|
||||
'at-top': true
|
||||
})}
|
||||
>
|
||||
<LogsPagination
|
||||
page={page}
|
||||
total={totalPage}
|
||||
pageSize={pageSize}
|
||||
onNext={getNextPage}
|
||||
onPrev={getPrePage}
|
||||
onToFirst={handleonToFirst}
|
||||
onBackend={handleonBackend}
|
||||
></LogsPagination>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default LogsViewer;
|
||||
@@ -282,5 +282,7 @@ export default {
|
||||
'models.table.instance.benchmark': 'Run Benchmark',
|
||||
'models.table.modelView': 'Model List',
|
||||
'models.table.instanceView': 'Instance List',
|
||||
'models.table.category': 'Category'
|
||||
'models.table.category': 'Category',
|
||||
'models.instance.firstStart': 'First Deployment',
|
||||
'models.instance.startHistory': 'Startup History'
|
||||
};
|
||||
|
||||
@@ -282,7 +282,9 @@ export default {
|
||||
'models.table.instance.benchmark': 'Run Benchmark',
|
||||
'models.table.modelView': 'Model List',
|
||||
'models.table.instanceView': 'Instance List',
|
||||
'models.table.category': 'Category'
|
||||
'models.table.category': 'Category',
|
||||
'models.instance.firstStart': 'First Deployment',
|
||||
'models.instance.startHistory': 'Startup History'
|
||||
};
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
|
||||
@@ -286,7 +286,9 @@ export default {
|
||||
'models.table.instance.benchmark': 'Run Benchmark',
|
||||
'models.table.modelView': 'Model List',
|
||||
'models.table.instanceView': 'Instance List',
|
||||
'models.table.category': 'Category'
|
||||
'models.table.category': 'Category',
|
||||
'models.instance.firstStart': 'First Deployment',
|
||||
'models.instance.startHistory': 'Startup History'
|
||||
};
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
|
||||
@@ -282,7 +282,9 @@ export default {
|
||||
'models.table.instance.benchmark': 'Kıyaslama Çalıştır',
|
||||
'models.table.modelView': 'Model List',
|
||||
'models.table.instanceView': 'Instance List',
|
||||
'models.table.category': 'Category'
|
||||
'models.table.category': 'Category',
|
||||
'models.instance.firstStart': 'First Deployment',
|
||||
'models.instance.startHistory': 'Startup History'
|
||||
};
|
||||
|
||||
// ========== To-Do: Translate Keys (Remove After Translation) ==========
|
||||
|
||||
@@ -266,5 +266,7 @@ export default {
|
||||
'models.table.instance.benchmark': '运行基准测试',
|
||||
'models.table.modelView': '模型列表',
|
||||
'models.table.instanceView': '实例列表',
|
||||
'models.table.category': '类别'
|
||||
'models.table.category': '类别',
|
||||
'models.instance.firstStart': '首次部署',
|
||||
'models.instance.startHistory': '启动记录'
|
||||
};
|
||||
|
||||
@@ -152,6 +152,11 @@ export async function queryModelInstanceLogs(id: number) {
|
||||
method: 'GET'
|
||||
});
|
||||
}
|
||||
export async function queryModelInstanceRestartCount(id: number) {
|
||||
return request(`${MODEL_INSTANCE_API}/${id}/log-options`, {
|
||||
method: 'GET'
|
||||
});
|
||||
}
|
||||
|
||||
// ===================== Model Instances end =====================
|
||||
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import useSetChunkRequest from '@/hooks/use-chunk-request';
|
||||
import { LogsViewer } from '@gpustack/core-ui';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { BaseSelect, LogsViewer } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Modal } from 'antd';
|
||||
import { Button, Modal } from 'antd';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { MODELS_API } from '../apis';
|
||||
|
||||
import { InstanceRealtimeLogStatus, InstanceStatusMap } from '../config';
|
||||
import useQueryModelInstanceRestartCount from '../services/use-query-instance-restart-count';
|
||||
|
||||
type ViewModalProps = {
|
||||
open: boolean;
|
||||
url: string;
|
||||
id?: number | string;
|
||||
id?: number;
|
||||
modelId?: number | string;
|
||||
tail?: number;
|
||||
status?: string;
|
||||
@@ -24,7 +27,12 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
||||
const [isDownloading, setIsDownloading] = useState<boolean>(
|
||||
status === InstanceStatusMap.Downloading
|
||||
);
|
||||
const [params, setParams] = useState<any>({
|
||||
follow: true
|
||||
});
|
||||
const logsViewerRef = React.useRef<any>(null);
|
||||
const { countOptions, fetchData, cancelRequest } =
|
||||
useQueryModelInstanceRestartCount();
|
||||
const requestRef = React.useRef<any>(null);
|
||||
const contentRef = React.useRef<any>(null);
|
||||
|
||||
@@ -68,6 +76,82 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const cancelOnClose = () => {
|
||||
logsViewerRef.current?.abort();
|
||||
requestRef.current?.current?.cancel?.();
|
||||
cancelRequest();
|
||||
};
|
||||
|
||||
const handleOnChange = (value: number, option: any) => {
|
||||
if (!option) {
|
||||
setParams({
|
||||
follow: true
|
||||
});
|
||||
} else {
|
||||
setParams({
|
||||
follow: true,
|
||||
watch: false,
|
||||
restart_count: option.value,
|
||||
worker_id: option.worker_id
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const renderTitle = () => {
|
||||
return (
|
||||
<span className="flex-between flex-center gap-16">
|
||||
<span style={{ fontWeight: 'var(--font-weight-bold)' }}>
|
||||
{intl.formatMessage({ id: 'common.button.viewlog' })}
|
||||
</span>
|
||||
<span>
|
||||
<BaseSelect
|
||||
allowClear
|
||||
onChange={handleOnChange}
|
||||
prefix={
|
||||
<span
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontSize: 13,
|
||||
marginRight: 8,
|
||||
paddingRight: 8,
|
||||
color: 'var(--ant-color-text-secondary)',
|
||||
borderRight: '1px solid var(--ant-color-split)'
|
||||
}}
|
||||
>
|
||||
{intl.formatMessage({ id: 'models.instance.startHistory' })} (
|
||||
{countOptions.length})
|
||||
</span>
|
||||
}
|
||||
options={countOptions}
|
||||
labelRender={(option) => {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
{option?.label}
|
||||
</span>
|
||||
);
|
||||
}}
|
||||
style={{
|
||||
width: 400,
|
||||
marginRight: 16
|
||||
}}
|
||||
></BaseSelect>
|
||||
<Button
|
||||
type="text"
|
||||
color="default"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={handleCancel}
|
||||
size="middle"
|
||||
></Button>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open && props.id) {
|
||||
requestRef.current?.current?.cancel?.();
|
||||
@@ -75,32 +159,24 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
||||
url: `${MODELS_API}/${props.modelId}/instances`,
|
||||
handler: updateHandler
|
||||
});
|
||||
fetchData(props.id);
|
||||
} else {
|
||||
logsViewerRef.current?.abort();
|
||||
requestRef.current?.current?.cancel?.();
|
||||
cancelOnClose();
|
||||
}
|
||||
|
||||
return () => {
|
||||
logsViewerRef.current?.abort();
|
||||
requestRef.current?.current?.cancel?.();
|
||||
cancelOnClose();
|
||||
};
|
||||
}, [props.id, open]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<span className="flex flex-center">
|
||||
<span style={{ fontWeight: 'var(--font-weight-bold)' }}>
|
||||
{' '}
|
||||
{intl.formatMessage({ id: 'common.button.viewlog' })}
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
title={renderTitle()}
|
||||
open={open}
|
||||
centered={true}
|
||||
onCancel={handleCancel}
|
||||
destroyOnHidden={true}
|
||||
closeIcon={true}
|
||||
closeIcon={false}
|
||||
mask={{
|
||||
closable: false
|
||||
}}
|
||||
@@ -116,14 +192,12 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
|
||||
<div className="viewer-wrapper" ref={contentRef}>
|
||||
<LogsViewer
|
||||
ref={logsViewerRef}
|
||||
diffHeight={78}
|
||||
diffHeight={95}
|
||||
url={url}
|
||||
tail={tail}
|
||||
enableScorllLoad={enableScorllLoad}
|
||||
isDownloading={isDownloading}
|
||||
params={{
|
||||
follow: true
|
||||
}}
|
||||
params={params}
|
||||
></LogsViewer>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -375,3 +375,8 @@ export interface DraftModelItem {
|
||||
name: string;
|
||||
algorithm: string;
|
||||
}
|
||||
|
||||
export interface InstanceRestartCount {
|
||||
restart_counts: number[];
|
||||
workers: { id: number; name: string }[];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useQueryData } from '@/hooks/use-query-data-list';
|
||||
import { formatOrdinal } from '@/utils';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useState } from 'react';
|
||||
import { queryModelInstanceRestartCount } from '../apis';
|
||||
import { InstanceRestartCount } from '../config/types';
|
||||
|
||||
export default function useQueryModelInstanceRestartCount() {
|
||||
const { detailData, loading, cancelRequest, fetchData } =
|
||||
useQueryData<InstanceRestartCount>({
|
||||
fetchDetail: queryModelInstanceRestartCount,
|
||||
key: 'modelInstanceRestartCount'
|
||||
});
|
||||
const intl = useIntl();
|
||||
|
||||
const [dataList, setDataList] = useState<
|
||||
{ value: number; label: number | string; worker_id: number }[]
|
||||
>([]);
|
||||
|
||||
const fetchRestartCount = async (instance_id: number) => {
|
||||
const res = await fetchData(instance_id);
|
||||
const workerId = res?.workers?.[0]?.id || 0;
|
||||
const dataList =
|
||||
res?.restart_counts?.map((count, index) => {
|
||||
return {
|
||||
value: count,
|
||||
label:
|
||||
count === 0
|
||||
? intl.formatMessage({ id: 'models.instance.firstStart' })
|
||||
: formatOrdinal(count),
|
||||
worker_id: workerId
|
||||
};
|
||||
}) || [];
|
||||
setDataList(dataList);
|
||||
};
|
||||
return {
|
||||
countOptions: dataList,
|
||||
loading,
|
||||
cancelRequest,
|
||||
fetchData: fetchRestartCount
|
||||
};
|
||||
}
|
||||
@@ -344,3 +344,18 @@ export const parseParamsString = (paramsString: string): string[] => {
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// ordinal.ts
|
||||
const enOrdinalRules = new Intl.PluralRules('en', { type: 'ordinal' });
|
||||
|
||||
const suffixMap: Record<string, string> = {
|
||||
one: 'st',
|
||||
two: 'nd',
|
||||
few: 'rd',
|
||||
other: 'th'
|
||||
};
|
||||
|
||||
export function formatOrdinal(n: number): string {
|
||||
const rule = enOrdinalRules.select(n);
|
||||
return `${n}${suffixMap[rule]}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user