style: start history selection

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<ViewModalProps> = (props) => {
   const [isDownloading, setIsDownloading] = useState<boolean>(
     status === InstanceStatusMap.Downloading
   );
-  const [record, setRecord] = useState<number>(0);
+  const [record, setRecord] = useState<number[]>([]);
   const [params, setParams] = useState<any>({
     follow: true
   });
@@ -85,7 +85,7 @@ const ViewLogsModal: React.FC<ViewModalProps> = (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<ViewModalProps> = (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 <span style={{ fontWeight: 400 }}>{data.label}</span>;
     }
-    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 (
+      <span
+        style={{
+          fontWeight: 400,
+          fontSize: 13,
+          display: 'flex',
+          alignItems: 'center',
+          marginRight: 8,
+          paddingRight: 8,
+          color: 'var(--ant-color-text-secondary)',
+          borderRight: '1px solid var(--ant-color-split)'
+        }}
+      >
+        {intl.formatMessage({ id: 'models.instance.startHistory' })}
+        <Tooltip
+          title={
+            <span>
+              <span className="font-600 m-r-8">
+                {intl.formatMessage({
+                  id: 'models.instance.previousRun'
+                })}
+                :
+              </span>
+              {intl.formatMessage({
+                id: 'models.instance.startHistory.tips'
+              })}
+            </span>
+          }
+        >
+          <QuestionCircleOutlined style={{ marginLeft: 4 }} />
+        </Tooltip>
+      </span>
+    );
   };
 
   const renderTitle = () => {
@@ -136,53 +171,29 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
         <span style={{ fontWeight: 'var(--font-weight-bold)' }}>
           {intl.formatMessage({ id: 'common.button.viewlog' })}
         </span>
-        <span>
-          {countOptions.length > 1 && (
-            <BaseSelect
-              allowClear
-              value={record}
-              onChange={handleOnChange}
-              prefix={
-                <span
-                  style={{
-                    fontWeight: 400,
-                    fontSize: 13,
-                    display: 'flex',
-                    alignItems: 'center',
-                    marginRight: 8,
-                    paddingRight: 8,
-                    color: 'var(--ant-color-text-secondary)',
-                    borderRight: '1px solid var(--ant-color-split)'
-                  }}
-                >
-                  {intl.formatMessage({ id: 'models.instance.startHistory' })}
-                  <Tooltip
-                    title={
-                      <span>
-                        <span className="font-600 m-r-8">
-                          {intl.formatMessage({
-                            id: 'models.instance.previousRun'
-                          })}
-                          :
-                        </span>
-                        {intl.formatMessage({
-                          id: 'models.instance.startHistory.tips'
-                        })}
-                      </span>
-                    }
-                  >
-                    <QuestionCircleOutlined style={{ marginLeft: 4 }} />
-                  </Tooltip>
-                </span>
-              }
-              options={countOptions}
-              labelRender={labelRender}
-              optionRender={optionRender}
-              style={{
-                width: 400,
-                marginRight: 16
+        <span className="flex-center gap-8" style={{ height: 32 }}>
+          {showCascader && (
+            <SealCascader
+              size="small"
+              prefix={renderPrefix()}
+              required
+              showSearch
+              changeOnSelect={false}
+              expandTrigger="hover"
+              style={{ width: 400 }}
+              multiple={false}
+              classNames={{
+                popup: {
+                  root: 'cascader-popup-wrapper gpu-selector'
+                }
               }}
-            ></BaseSelect>
+              maxTagCount={1}
+              value={record}
+              options={countOptions}
+              getPopupContainer={(triggerNode) => triggerNode.parentNode}
+              optionNode={optionRender}
+              onChange={handleOnCountChange}
+            ></SealCascader>
           )}
           <Button
             type="text"
@@ -206,7 +217,10 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
       fetchData(props.id).then((list) => {
         const lastItem = list?.[0];
         if (lastItem) {
-          setRecord(lastItem.value);
+          handleOnChange(
+            [lastItem.value, lastItem.children?.[0]?.value],
+            lastItem.children?.[0]
+          );
         }
       });
     } else {

src/pages/llmodels/services/use-query-instance-restart-count.ts

@@ -4,6 +4,22 @@ import { useState } from 'react';
 import { queryModelInstanceRestartCount } from '../apis';
 import { InstanceRestartCount } from '../config/types';
 
+interface RestartCountOption {
+  label: string;
+  value: number;
+  worker_id: number;
+  name: string;
+  isParent: boolean;
+  children?: {
+    value: number;
+    label: string;
+    start_at: string;
+    worker_id: number;
+    isCurrent: boolean;
+    isPrevious: boolean;
+  }[];
+}
+
 export default function useQueryModelInstanceRestartCount() {
   const { detailData, loading, cancelRequest, fetchData } =
     useQueryData<InstanceRestartCount>({
@@ -11,28 +27,38 @@ export default function useQueryModelInstanceRestartCount() {
       key: 'modelInstanceRestartCount'
     });
   const intl = useIntl();
-
-  const [dataList, setDataList] = useState<
-    { value: number; label: React.ReactNode; worker_id: number }[]
-  >([]);
+  const [dataList, setDataList] = useState<RestartCountOption[]>([]);
 
   const fetchRestartCount = async (instance_id: number) => {
     const res = await fetchData(instance_id);
-    const workerId = res?.workers?.[0]?.worker_id || 0;
-    const workerItem = res?.workers?.[0];
-    const dataList =
-      workerItem?.restarts?.map((restart, index) => {
+
+    const list =
+      res.workers?.map((worker) => {
         return {
-          value: restart.restart_count,
-          label: restart.restart_count,
-          start_at: restart.started_at,
-          worker_id: workerId,
-          isCurrent: index === 0,
-          isPrevious: index === 1
+          value: worker.worker_id,
+          label: worker.name,
+          worker_id: worker.worker_id,
+          name: worker.name,
+          isParent: true,
+          children:
+            worker.restarts?.map((restart, index) => {
+              return {
+                value: restart.restart_count,
+                label:
+                  index === 0
+                    ? intl.formatMessage({ id: 'models.instance.currentRun' })
+                    : intl.formatMessage({ id: 'models.instance.previousRun' }),
+                start_at: restart.started_at,
+                worker_id: worker.worker_id,
+                isCurrent: index === 0,
+                isPrevious: index === 1
+              };
+            }) || []
         };
       }) || [];
-    setDataList(dataList);
-    return dataList;
+
+    setDataList(list);
+    return list;
   };
   return {
     countOptions: dataList,