style: model list buttons

src/pages/llmodels/components/instances.tsx

@@ -1,7 +1,7 @@
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { Space } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { ModelInstanceListItem } from '../config/types';
 import '../style/instance-item.less';
 import InstanceItem from './instance-item';
@@ -10,6 +10,7 @@ interface InstanceItemProps {
   list: ModelInstanceListItem[];
   workerList: WorkerListItem[];
   modelData?: any;
+  currentExpanded?: string;
   handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
 }
 
@@ -17,8 +18,26 @@ const Instances: React.FC<InstanceItemProps> = ({
   list,
   workerList,
   modelData,
+  currentExpanded,
   handleChildSelect
 }) => {
+  const [firstLoad, setFirstLoad] = React.useState(true);
+
+  const defaultOpenId = useMemo(() => {
+    if (!currentExpanded) {
+      return '';
+    }
+    const current = _.find(
+      list,
+      (item: ModelInstanceListItem) => item.worker_id
+    );
+    return current ? current.name : '';
+  }, [currentExpanded, list]);
+
+  useEffect(() => {
+    setFirstLoad(false);
+  }, []);
+
   return (
     <Space size={16} direction="vertical" style={{ width: '100%' }}>
       {_.map(list, (item: ModelInstanceListItem, index: number) => {
@@ -28,6 +47,7 @@ const Instances: React.FC<InstanceItemProps> = ({
             modelData={modelData}
             workerList={workerList}
             instanceData={item}
+            defaultOpenId={firstLoad ? defaultOpenId : ''}
             handleChildSelect={handleChildSelect}
           ></InstanceItem>
         );