diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index 7fdb3c6c..5d044dca 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -1,13 +1,13 @@ import useSetChunkRequest from '@/hooks/use-chunk-request'; -import { formatOrdinal } from '@/utils'; import { CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons'; -import { BaseSelect, LogsViewer } from '@gpustack/core-ui'; +import { LogsViewer } from '@gpustack/core-ui'; import { useIntl } from '@umijs/max'; import { Button, Modal, Tooltip } from 'antd'; import dayjs from 'dayjs'; import React, { useCallback, useEffect, useState } from 'react'; import { MODELS_API } from '../apis'; +import SealCascader from '@/components/seal-form/seal-cascader'; import { InstanceRealtimeLogStatus, InstanceStatusMap } from '../config'; import useQueryModelInstanceRestartCount from '../services/use-query-instance-restart-count'; @@ -29,7 +29,7 @@ const ViewLogsModal: React.FC = (props) => { const [isDownloading, setIsDownloading] = useState( status === InstanceStatusMap.Downloading ); - const [record, setRecord] = useState(0); + const [record, setRecord] = useState([]); const [params, setParams] = useState({ follow: true }); @@ -85,7 +85,7 @@ const ViewLogsModal: React.FC = (props) => { cancelRequest(); }; - const handleOnChange = (value: number, option: any) => { + const handleOnChange = (value: number[], option: any) => { if (!option) { setParams({ follow: true @@ -114,20 +114,55 @@ const ViewLogsModal: React.FC = (props) => { const optionRender = (option: any) => { const { data = {} } = option || {}; - let label = formatOrdinal(data.value); - if (data.isCurrent) { - label = intl.formatMessage({ id: 'models.instance.currentRun' }); + if (data.isParent) { + return {data.label}; } - if (data.isPrevious) { - label = intl.formatMessage({ id: 'models.instance.previousRun' }); - } - return renderLabel(label, data.start_at); + return renderLabel(data.label, data.start_at); }; - const labelRender = (option: any) => { - const data = countOptions.find((item) => item.value === option.value); - if (!data) return ''; - return optionRender({ data }); + const handleOnCountChange = (value: any[], selectedOptions: any[]) => { + const option = selectedOptions?.[1]; + handleOnChange(value, option); + }; + + const showCascader = + countOptions?.some((option) => option.children!?.length >= 2) || + countOptions?.length > 1; + + const renderPrefix = () => { + return ( + + {intl.formatMessage({ id: 'models.instance.startHistory' })} + + + {intl.formatMessage({ + id: 'models.instance.previousRun' + })} + : + + {intl.formatMessage({ + id: 'models.instance.startHistory.tips' + })} + + } + > + + + + ); }; const renderTitle = () => { @@ -136,53 +171,29 @@ const ViewLogsModal: React.FC = (props) => { {intl.formatMessage({ id: 'common.button.viewlog' })} - - {countOptions.length > 1 && ( - - {intl.formatMessage({ id: 'models.instance.startHistory' })} - - - {intl.formatMessage({ - id: 'models.instance.previousRun' - })} - : - - {intl.formatMessage({ - id: 'models.instance.startHistory.tips' - })} - - } - > - - - - } - options={countOptions} - labelRender={labelRender} - optionRender={optionRender} - style={{ - width: 400, - marginRight: 16 + + {showCascader && ( + + maxTagCount={1} + value={record} + options={countOptions} + getPopupContainer={(triggerNode) => triggerNode.parentNode} + optionNode={optionRender} + onChange={handleOnCountChange} + > )}