chore: worker selector

src/pages/llmodels/config/form-context.ts

@@ -2,12 +2,24 @@ import { PageActionType } from '@/config/types';
 import React from 'react';
 import { BackendOption, DeployFormKey } from './types';
 
+type EmptyObject = Record<never, never>;
+
+type CascaderOption<T extends object = EmptyObject> = {
+  label: string;
+  value: string | number;
+  parent?: boolean;
+  disabled?: boolean;
+  index?: number;
+  children?: CascaderOption<T>[];
+} & Partial<T>;
+
 interface FormContextProps {
   isGGUF?: boolean;
   formKey: DeployFormKey;
   source: string;
   pageAction: PageActionType;
-  gpuOptions: any[];
+  gpuOptions: CascaderOption[];
+  workerLabelOptions: CascaderOption[];
   backendOptions: BackendOption[];
   onValuesChange?: (changedValues: any, allValues: any) => void;
   onBackendChange: (backend: string, option: any) => void;

src/pages/llmodels/forms/advance-config.tsx

@@ -1,4 +1,5 @@
 import LabelSelector from '@/components/label-selector';
+import { LabelSelectorContext } from '@/components/label-selector/context';
 import CheckboxField from '@/components/seal-form/checkbox-field';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
@@ -36,7 +37,7 @@ const AdvanceConfig = () => {
   const EnviromentVars = Form.useWatch('env', form);
   const scheduleType = Form.useWatch('scheduleType', form);
   const backend = Form.useWatch('backend', form);
-  const { onValuesChange } = useFormContext();
+  const { onValuesChange, workerLabelOptions } = useFormContext();
 
   const handleWorkerLabelsChange = useCallback(
     (labels: Record<string, any>) => {
@@ -104,52 +105,57 @@ const AdvanceConfig = () => {
               }
             ></SealSelect>
           </Form.Item>
-          <Form.Item<FormData>
-            name="worker_selector"
-            rules={[
-              ({ getFieldValue }) => ({
-                validator(rule, value) {
-                  if (
-                    getFieldValue('scheduleType') === ScheduleValueMap.Auto &&
-                    _.keys(value).length > 0
-                  ) {
-                    if (_.some(_.keys(value), (k: string) => !value[k])) {
-                      return Promise.reject(
-                        intl.formatMessage(
-                          {
-                            id: 'common.validate.value'
-                          },
-                          {
-                            name: intl.formatMessage({
-                              id: 'models.form.selector'
-                            })
-                          }
-                        )
-                      );
-                    }
-                  }
-                  return Promise.resolve();
-                }
-              })
-            ]}
+          <LabelSelectorContext.Provider
+            value={{ options: workerLabelOptions }}
           >
-            <LabelSelector
-              label={intl.formatMessage({
-                id: 'resources.form.workerSelector'
-              })}
-              labels={wokerSelector}
-              onChange={handleWorkerLabelsChange}
-              onBlur={handleSelectorOnBlur}
-              onDelete={handleDeleteWorkerSelector}
-              description={
-                <span>
-                  {intl.formatMessage({
-                    id: 'resources.form.workerSelector.description'
-                  })}
-                </span>
-              }
-            ></LabelSelector>
-          </Form.Item>
+            <Form.Item<FormData>
+              name="worker_selector"
+              rules={[
+                ({ getFieldValue }) => ({
+                  validator(rule, value) {
+                    if (
+                      getFieldValue('scheduleType') === ScheduleValueMap.Auto &&
+                      _.keys(value).length > 0
+                    ) {
+                      if (_.some(_.keys(value), (k: string) => !value[k])) {
+                        return Promise.reject(
+                          intl.formatMessage(
+                            {
+                              id: 'common.validate.value'
+                            },
+                            {
+                              name: intl.formatMessage({
+                                id: 'models.form.selector'
+                              })
+                            }
+                          )
+                        );
+                      }
+                    }
+                    return Promise.resolve();
+                  }
+                })
+              ]}
+            >
+              <LabelSelector
+                isAutoComplete
+                label={intl.formatMessage({
+                  id: 'resources.form.workerSelector'
+                })}
+                labels={wokerSelector}
+                onChange={handleWorkerLabelsChange}
+                onBlur={handleSelectorOnBlur}
+                onDelete={handleDeleteWorkerSelector}
+                description={
+                  <span>
+                    {intl.formatMessage({
+                      id: 'resources.form.workerSelector.description'
+                    })}
+                  </span>
+                }
+              ></LabelSelector>
+            </Form.Item>
+          </LabelSelectorContext.Provider>
         </>
       )}
 

src/pages/llmodels/forms/index.tsx

@@ -54,7 +54,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onOk
   } = props;
   const { backendOptions, getBackendOptions } = useQueryBackends();
-  const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
+  const { getGPUOptionList, gpuOptions, workerLabelOptions } =
+    useGenerateGPUOptions();
   const [form] = Form.useForm();
   const intl = useIntl();
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
@@ -208,6 +209,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         pageAction: action,
         gpuOptions: gpuOptions,
         backendOptions: backendOptions,
+        workerLabelOptions: workerLabelOptions,
         onValuesChange: onValuesChange,
         onBackendChange: handleBackendChange
       }}

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

@@ -26,6 +26,9 @@ type CascaderOption<T extends object = EmptyObject> = {
 
 export const useGenerateGPUOptions = () => {
   const [gpuOptions, setGpuOptions] = useState<CascaderOption[]>([]);
+  const [workerLabelOptions, setWorkerLabelOptions] = useState<
+    CascaderOption[]
+  >([]);
 
   const generateCascaderGPUOptions = (
     gpuList: GPUListItem[],
@@ -80,7 +83,34 @@ export const useGenerateGPUOptions = () => {
     return gpuSelectorList;
   };
 
-  const generateWorkerSelectorOptions = (workerList: WorkerListItem[]) => {};
+  const generateWorkerSelectorOptions = (workerList: WorkerListItem[]) => {
+    // each worker may have multiple labels,the labels is object as: {key: value, key2: value2}
+    // different workers may have a same label key but different values
+    // we need to extract a list as: [{label: key, value: key, children: [{label: value, value: value}]}]
+    const labelMap = new Map<string, Set<string>>();
+    workerList.forEach((worker) => {
+      const labels = worker.labels || {};
+      Object.entries(labels).forEach(([key, value]) => {
+        if (!labelMap.has(key)) {
+          labelMap.set(key, new Set());
+        }
+        labelMap.get(key)!.add(value);
+      });
+    });
+
+    const labelOptions: CascaderOption[] = Array.from(labelMap.entries()).map(
+      ([key, values]) => ({
+        label: key,
+        value: key,
+        parent: true,
+        children: Array.from(values).map((value) => ({
+          label: value,
+          value: value
+        }))
+      })
+    );
+    return labelOptions;
+  };
 
   const getGPUOptionList = async (params?: {
     clusterId: number;
@@ -99,13 +129,16 @@ export const useGenerateGPUOptions = () => {
       })
     ]);
     const gpuList = generateCascaderGPUOptions(gpuData.items, workerData.items);
+    const labelOptions = generateWorkerSelectorOptions(workerData.items);
     setGpuOptions(gpuList);
+    setWorkerLabelOptions(labelOptions);
     return gpuList;
   };
 
   return {
     getGPUOptionList,
-    gpuOptions
+    gpuOptions,
+    workerLabelOptions
   };
 };