style: cluster selector

src/pages/cluster-management/components/add-worker/constainers.tsx

@@ -5,7 +5,7 @@ export const Title = styled.div`
 `;
 
 export const ConfigWrapper = styled.div`
-  padding: 16px;
+  padding: 12px 16px;
   margin-bottom: 16px;
   border: 1px solid var(--ant-color-split);
   border-radius: var(--ant-border-radius);

src/pages/cluster-management/components/add-worker/specify-arguments.tsx

@@ -238,22 +238,12 @@ const SpecifyArguments = () => {
             <span
               dangerouslySetInnerHTML={{
                 __html: workerIPConfig.enable
-                  ? intl.formatMessage(
-                      {
-                        id: 'clusters.addworker.specifyWorkerIP'
-                      },
-                      {
-                        type: ` (${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`
-                      }
-                    )
-                  : intl.formatMessage(
-                      {
-                        id: 'clusters.addworker.detectWorkerIP'
-                      },
-                      {
-                        type: ` (${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`
-                      }
-                    )
+                  ? intl.formatMessage({
+                      id: 'clusters.addworker.specifyWorkerIP'
+                    })
+                  : intl.formatMessage({
+                      id: 'clusters.addworker.detectWorkerIP'
+                    })
               }}
             ></span>
           }
@@ -325,8 +315,11 @@ const SpecifyArguments = () => {
               }}
             ></span>
           }
+          tips={intl.formatMessage({
+            id: 'clusters.addworker.detectWorkerAddress.tips'
+          })}
           placeholder={intl.formatMessage({
-            id: 'clusters.addworker.enterWorkerIP'
+            id: 'clusters.addworker.enterWorkerAddress'
           })}
           value={externalWorkerIPConfig.ip}
           checked={externalWorkerIPConfig.enable}
@@ -334,7 +327,7 @@ const SpecifyArguments = () => {
             externalWorkerIPConfig.required &&
             !externalWorkerIPConfig.ip &&
             intl.formatMessage({
-              id: 'clusters.addworker.enterWorkerIP.error'
+              id: 'clusters.addworker.enterWorkerAddress.error'
             })
           }
           onChange={(checked) =>

src/pages/llmodels/forms/basic.tsx

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { modelNameReg } from '@/config';
@@ -10,6 +11,7 @@ import {
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { useMemo } from 'react';
+import styled from 'styled-components';
 import { sourceOptions } from '../config';
 import { FormData } from '../config/types';
 import BackendForm from './backend';
@@ -19,11 +21,59 @@ import LocalPathSource from './local-path-source';
 import ModeField from './mode-field';
 import OnlineSource from './online-source';
 
+const ClusterOption = styled.span`
+  display: flex;
+  padding: 8px 0;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--ant-color-split);
+  gap: 8px;
+  .label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .dot {
+    display: flex;
+    width: 8px;
+    height: 8px;
+    background-color: var(--ant-color-warning);
+    border-radius: 50%;
+    &.ready {
+      background-color: var(--ant-color-success);
+    }
+  }
+  .item {
+    width: max-content;
+    display: flex;
+    align-items: center;
+    padding: 2px 0px;
+    border-radius: 4px;
+    font-weight: 400;
+    gap: 12px;
+  }
+`;
+
 interface BasicFormProps {
   fields?: string[];
   sourceDisable?: boolean;
   sourceList?: Global.BaseOption<string>[];
-  clusterList: Global.BaseOption<number, { provider: string; state: string }>[];
+  clusterList: Global.BaseOption<
+    number,
+    {
+      provider: string;
+      state: string;
+      is_default: boolean;
+      workers: number;
+      ready_workers: number;
+      gpus: number;
+    }
+  >[];
   handleClusterChange: (value: number) => void;
   onSourceChange?: (value: string) => void;
 }
@@ -51,11 +101,43 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
           item.state === ClusterStatusValueMap.Ready
             ? item.label
             : `${item.label} [${ClusterStatusLabelMap[item.state as string]}]`,
-        value: item.value
+        value: item.value,
+        workers: item.workers,
+        ready_workers: item.ready_workers,
+        gpus: item.gpus
       };
     });
   }, [clusterList]);
 
+  const clusterOptionRender = (option: any) => {
+    const { data } = option;
+
+    return (
+      <ClusterOption>
+        <span className="label">
+          <AutoTooltip ghost maxWidth={'100%'}>
+            {data.label}
+          </AutoTooltip>
+        </span>
+        <span className={`item ${data.ready_workers > 0 ? 'ready' : ''}`}>
+          <span
+            className={`dot ${data.ready_workers > 0 ? 'ready' : ''}`}
+          ></span>
+          <span className="flex-center gap-4 text-tertiary">
+            <span>{intl.formatMessage({ id: 'resources.nodes' })}:</span>
+            <span>
+              {data.ready_workers} / {data.workers}
+            </span>
+          </span>
+          <span className="flex-center gap-4 text-tertiary">
+            <span>GPUs:</span>
+            <span>{data.gpus}</span>
+          </span>
+        </span>
+      </ClusterOption>
+    );
+  };
+
   return (
     <>
       <Form.Item<FormData>
@@ -120,6 +202,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
             onChange={handleClusterChange}
             label={intl.formatMessage({ id: 'clusters.title' })}
             options={clusterOptions}
+            optionRender={clusterOptionRender}
             required
           ></SealSelect>
         }

src/pages/llmodels/hooks/use-form-initial-values.ts

@@ -218,7 +218,10 @@ export const useGenerateWorkerOptions = () => {
         value: item.id,
         provider: item.provider as string,
         state: item.state,
-        is_default: item.is_default
+        is_default: item.is_default,
+        workers: item.workers,
+        ready_workers: item.ready_workers,
+        gpus: item.gpus
       }))
     );
   };
@@ -254,7 +257,10 @@ export default function useFormInitialValues() {
         value: item.id,
         provider: item.provider as string,
         state: item.state,
-        is_default: item.is_default
+        is_default: item.is_default,
+        workers: item.workers,
+        ready_workers: item.ready_workers,
+        gpus: item.gpus
       }));
       setClusterList(list);
       setClusterListAtom(list);