feat: depoly model advanced

2024-09-04 14:32:36 +08:00
parent 01101678b3
commit ca595da0c7
23 changed files with 1032 additions and 217 deletions
@@ -1,14 +1,28 @@
+import LabelSelector from '@/components/label-selector';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
+import FormItemWrapper from '@/components/seal-form/components/wrapper';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import { RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Checkbox, Collapse, Form, Typography } from 'antd';
 import _ from 'lodash';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-import { modelSourceMap, ollamaModelOptions } from '../config';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo
+} from 'react';
+import {
+  modelSourceMap,
+  ollamaModelOptions,
+  placementStrategyOptions
+} from '../config';
 import { FormData } from '../config/types';
+import dataformStyles from '../style/data-form.less';

 interface DataFormProps {
  ref?: any;
@@ -35,6 +49,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
  const { action, repo, onOk } = props;
  const [form] = Form.useForm();
  const intl = useIntl();
+  const wokerSelector = Form.useWatch('worker_selector', form);

  const handleSumit = () => {
    form.submit();
@@ -81,6 +96,13 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
    }
  };

+  const handleWorkerLabelsChange = useCallback(
+    (labels: Record<string, any>) => {
+      form.setFieldValue('worker_selector', labels);
+    },
+    []
+  );
+
  const renderHuggingfaceFields = () => {
    return (
      <>
@@ -201,6 +223,140 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
    }
  };

+  const collapseItems = useMemo(() => {
+    const children = (
+      <>
+        <Form.Item<FormData>
+          name="replicas"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.input'
+                },
+                {
+                  name: intl.formatMessage({ id: 'models.form.replicas' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Number
+            style={{ width: '100%' }}
+            label={intl.formatMessage({
+              id: 'models.form.replicas'
+            })}
+            required
+            min={0}
+          ></SealInput.Number>
+        </Form.Item>
+        <Form.Item<FormData> name="placement_strategy">
+          <SealSelect
+            label={intl.formatMessage({
+              id: 'resources.form.placementStrategy'
+            })}
+            options={placementStrategyOptions}
+            description={
+              <div>
+                <div className="m-b-8">
+                  <Typography.Title
+                    level={5}
+                    style={{
+                      color: 'var(--color-white-1)',
+                      marginRight: 10
+                    }}
+                  >
+                    Spread:
+                  </Typography.Title>
+                  <Typography.Text style={{ color: 'var(--color-white-1)' }}>
+                    {intl.formatMessage({
+                      id: 'resources.form.spread.tips'
+                    })}
+                  </Typography.Text>
+                </div>
+                <div>
+                  <Typography.Title
+                    level={5}
+                    style={{ color: 'var(--color-white-1)', marginRight: 10 }}
+                  >
+                    Binpack:
+                  </Typography.Title>
+                  <Typography.Text style={{ color: 'var(--color-white-1)' }}>
+                    {intl.formatMessage({
+                      id: 'resources.form.binpack.tips'
+                    })}
+                  </Typography.Text>
+                </div>
+              </div>
+            }
+          ></SealSelect>
+        </Form.Item>
+        <div style={{ marginBottom: 24 }}>
+          <FormItemWrapper noWrapperStyle>
+            <Form.Item<FormData>
+              name="partial_offload"
+              valuePropName="checked"
+              style={{ padding: '0 10px', marginBottom: 0 }}
+            >
+              <Checkbox>
+                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                  {intl.formatMessage({
+                    id: 'resources.form.enablePartialOffload'
+                  })}
+                </span>
+              </Checkbox>
+            </Form.Item>
+          </FormItemWrapper>
+        </div>
+        <div style={{ marginBottom: 24 }}>
+          <FormItemWrapper noWrapperStyle>
+            <Form.Item<FormData>
+              name="distributed_inference_across_workers"
+              valuePropName="checked"
+              style={{ padding: '0 10px', marginBottom: 0 }}
+            >
+              <Checkbox>
+                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                  {intl.formatMessage({
+                    id: 'resources.form.enableDistributedInferenceAcrossWorkers'
+                  })}
+                </span>
+              </Checkbox>
+            </Form.Item>
+          </FormItemWrapper>
+        </div>
+        <Form.Item<FormData> name="worker_selector">
+          <LabelSelector
+            label={intl.formatMessage({
+              id: 'resources.form.workerSelector'
+            })}
+            labels={wokerSelector}
+            onChange={handleWorkerLabelsChange}
+            description={
+              <span>
+                {intl.formatMessage({
+                  id: 'resources.form.workerSelector.description'
+                })}
+              </span>
+            }
+          ></LabelSelector>
+        </Form.Item>
+      </>
+    );
+    return [
+      {
+        key: '1',
+        label: (
+          <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
+            {intl.formatMessage({ id: 'resources.form.advanced' })}
+          </span>
+        ),
+        children
+      }
+    ];
+  }, []);
+
  useEffect(() => {
    handleOnSelectModel();
  }, [repo]);
@@ -213,7 +369,13 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
      preserve={false}
      style={{ padding: '16px 24px' }}
      clearOnDestroy={true}
-      initialValues={{ replicas: 1, source: props.source }}
+      initialValues={{
+        replicas: 1,
+        source: props.source,
+        placement_strategy: 'spread',
+        partial_offload: true,
+        distributed_inference_across_workers: true
+      }}
    >
      <Form.Item<FormData>
        name="name"
@@ -262,31 +424,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
        }
      </Form.Item>
      {renderFieldsBySource()}
-      <Form.Item<FormData>
-        name="replicas"
-        rules={[
-          {
-            required: true,
-            message: intl.formatMessage(
-              {
-                id: 'common.form.rule.input'
-              },
-              {
-                name: intl.formatMessage({ id: 'models.form.replicas' })
-              }
-            )
-          }
-        ]}
-      >
-        <SealInput.Number
-          style={{ width: '100%' }}
-          label={intl.formatMessage({
-            id: 'models.form.replicas'
-          })}
-          required
-          min={0}
-        ></SealInput.Number>
-      </Form.Item>
      <Form.Item<FormData> name="description">
        <SealInput.TextArea
          label={intl.formatMessage({
@@ -294,6 +431,20 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
          })}
        ></SealInput.TextArea>
      </Form.Item>
+
+      <Collapse
+        expandIconPosition="start"
+        bordered={false}
+        ghost
+        className={dataformStyles['advanced-collapse']}
+        expandIcon={({ isActive }) => (
+          <RightOutlined
+            rotate={isActive ? 90 : 0}
+            style={{ fontSize: '12px' }}
+          />
+        )}
+        items={collapseItems}
+      ></Collapse>
    </Form>
  );
 });
@@ -1,17 +1,23 @@
+import LabelSelector from '@/components/label-selector';
 import ModalFooter from '@/components/modal-footer';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
+import FormItemWrapper from '@/components/seal-form/components/wrapper';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { convertFileSize } from '@/utils';
+import { RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Checkbox, Collapse, Form, Modal, Typography } from 'antd';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
-import { modelSourceMap } from '../config';
+import { modelSourceMap, placementStrategyOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
+import dataformStyles from '../style/data-form.less';

 type AddModalProps = {
  title: string;
@@ -35,13 +41,14 @@ const sourceOptions = [
  }
 ];

-const AddModal: React.FC<AddModalProps> = (props) => {
+const UpdateModal: React.FC<AddModalProps> = (props) => {
  console.log('addmodel====');
  const { title, action, open, onOk, onCancel } = props || {};
  const [form] = Form.useForm();
  const intl = useIntl();
  const [loading, setLoading] = useState(false);
  const modelSource = Form.useWatch('source', form);
+  const wokerSelector = Form.useWatch('worker_selector', form);
  const [repoOptions, setRepoOptions] = useState<
    { label: string; value: string }[]
  >([]);
@@ -254,6 +261,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    }
  };

+  const handleWorkerLabelsChange = useCallback(
+    (labels: Record<string, any>) => {
+      console.log('labels========', labels);
+      form.setFieldValue('worker_selector', labels);
+    },
+    []
+  );
+
  const handleOnSelectModel = useCallback((item: any) => {
    const repo = item.name;
    if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
@@ -272,71 +287,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    form.submit();
  };

-  return (
-    <Modal
-      title={title}
-      open={open}
-      centered={true}
-      onOk={handleSumit}
-      onCancel={onCancel}
-      destroyOnClose={true}
-      closeIcon={true}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      styles={{}}
-      footer={
-        <ModalFooter onCancel={onCancel} onOk={handleSumit}></ModalFooter>
-      }
-    >
-      <Form name="addModalForm" form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData>
-          name="name"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.input'
-                },
-                { name: intl.formatMessage({ id: 'common.table.name' }) }
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({
-              id: 'common.table.name'
-            })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="source"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                {
-                  id: 'common.form.rule.select'
-                },
-                { name: intl.formatMessage({ id: 'models.form.source' }) }
-              )
-            }
-          ]}
-        >
-          {action === PageAction.EDIT && (
-            <SealSelect
-              disabled={true}
-              label={intl.formatMessage({
-                id: 'models.form.source'
-              })}
-              options={sourceOptions}
-              required
-            ></SealSelect>
-          )}
-        </Form.Item>
-        {renderFieldsBySource()}
+  const collapseItems = useMemo(() => {
+    const children = (
+      <>
        <Form.Item<FormData>
          name="replicas"
          rules={[
@@ -346,7 +299,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                {
                  id: 'common.form.rule.input'
                },
-                { name: intl.formatMessage({ id: 'models.form.replicas' }) }
+                {
+                  name: intl.formatMessage({ id: 'models.form.replicas' })
+                }
              )
            }
          ]}
@@ -360,16 +315,229 @@ const AddModal: React.FC<AddModalProps> = (props) => {
            min={0}
          ></SealInput.Number>
        </Form.Item>
-        <Form.Item<FormData> name="description">
-          <SealInput.TextArea
+        <Form.Item<FormData> name="placement_strategy">
+          <SealSelect
            label={intl.formatMessage({
-              id: 'common.table.description'
+              id: 'resources.form.placementStrategy'
            })}
-          ></SealInput.TextArea>
+            options={placementStrategyOptions}
+            description={
+              <div>
+                <div className="m-b-8">
+                  <Typography.Title
+                    level={5}
+                    style={{
+                      color: 'var(--color-white-1)',
+                      marginRight: 10
+                    }}
+                  >
+                    Spread:
+                  </Typography.Title>
+                  <Typography.Text style={{ color: 'var(--color-white-1)' }}>
+                    {intl.formatMessage({
+                      id: 'resources.form.spread.tips'
+                    })}
+                  </Typography.Text>
+                </div>
+                <div>
+                  <Typography.Title
+                    level={5}
+                    style={{ color: 'var(--color-white-1)', marginRight: 10 }}
+                  >
+                    Binpack:
+                  </Typography.Title>
+                  <Typography.Text style={{ color: 'var(--color-white-1)' }}>
+                    {intl.formatMessage({
+                      id: 'resources.form.binpack.tips'
+                    })}
+                  </Typography.Text>
+                </div>
+              </div>
+            }
+          ></SealSelect>
        </Form.Item>
-      </Form>
+        <div style={{ marginBottom: 24 }}>
+          <FormItemWrapper noWrapperStyle>
+            <Form.Item<FormData>
+              name="partial_offload"
+              valuePropName="checked"
+              style={{ padding: '0 10px', marginBottom: 0 }}
+            >
+              <Checkbox>
+                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                  {intl.formatMessage({
+                    id: 'resources.form.enablePartialOffload'
+                  })}
+                </span>
+              </Checkbox>
+            </Form.Item>
+          </FormItemWrapper>
+        </div>
+        <div style={{ marginBottom: 24 }}>
+          <FormItemWrapper noWrapperStyle>
+            <Form.Item<FormData>
+              name="distributed_inference_across_workers"
+              valuePropName="checked"
+              style={{ padding: '0 10px', marginBottom: 0 }}
+            >
+              <Checkbox>
+                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                  {intl.formatMessage({
+                    id: 'resources.form.enableDistributedInferenceAcrossWorkers'
+                  })}
+                </span>
+              </Checkbox>
+            </Form.Item>
+          </FormItemWrapper>
+        </div>
+        <Form.Item<FormData> name="worker_selector">
+          <LabelSelector
+            label={intl.formatMessage({
+              id: 'resources.form.workerSelector'
+            })}
+            labels={form.getFieldValue('worker_selector')}
+            onChange={handleWorkerLabelsChange}
+            description={
+              <span>
+                {intl.formatMessage({
+                  id: 'resources.form.workerSelector.description'
+                })}
+              </span>
+            }
+          ></LabelSelector>
+        </Form.Item>
+      </>
+    );
+    return [
+      {
+        key: '1',
+        label: (
+          <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
+            {intl.formatMessage({ id: 'resources.form.advanced' })}
+          </span>
+        ),
+        children
+      }
+    ];
+  }, []);
+
+  return (
+    <Modal
+      title={title}
+      open={open}
+      centered={true}
+      onOk={handleSumit}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{
+        content: {
+          padding: '0px'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '0'
+        },
+        footer: {
+          padding: '0 var(--ant-modal-content-padding)'
+        }
+      }}
+      footer={
+        <ModalFooter onCancel={onCancel} onOk={handleSumit}></ModalFooter>
+      }
+    >
+      <SimpleBar
+        style={{
+          maxHeight: '550px'
+        }}
+      >
+        <Form
+          name="addModalForm"
+          form={form}
+          onFinish={onOk}
+          preserve={false}
+          style={{
+            padding: 'var(--ant-modal-content-padding)',
+            paddingBlock: 0
+          }}
+        >
+          <Form.Item<FormData>
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  {
+                    id: 'common.form.rule.input'
+                  },
+                  { name: intl.formatMessage({ id: 'common.table.name' }) }
+                )
+              }
+            ]}
+          >
+            <SealInput.Input
+              label={intl.formatMessage({
+                id: 'common.table.name'
+              })}
+              required
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<FormData>
+            name="source"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  {
+                    id: 'common.form.rule.select'
+                  },
+                  { name: intl.formatMessage({ id: 'models.form.source' }) }
+                )
+              }
+            ]}
+          >
+            {action === PageAction.EDIT && (
+              <SealSelect
+                disabled={true}
+                label={intl.formatMessage({
+                  id: 'models.form.source'
+                })}
+                options={sourceOptions}
+                required
+              ></SealSelect>
+            )}
+          </Form.Item>
+          {renderFieldsBySource()}
+          <Form.Item<FormData> name="description">
+            <SealInput.TextArea
+              label={intl.formatMessage({
+                id: 'common.table.description'
+              })}
+            ></SealInput.TextArea>
+          </Form.Item>
+          <Collapse
+            expandIconPosition="start"
+            bordered={false}
+            ghost
+            className={dataformStyles['advanced-collapse']}
+            expandIcon={({ isActive }) => (
+              <RightOutlined
+                rotate={isActive ? 90 : 0}
+                style={{ fontSize: '12px' }}
+              />
+            )}
+            items={collapseItems}
+          ></Collapse>
+        </Form>
+      </SimpleBar>
    </Modal>
  );
 };

-export default memo(AddModal);
+export default memo(UpdateModal);
@@ -147,3 +147,14 @@ export const ModelSortType = {
  downloads: 'downloads',
  lastModified: 'lastModified'
 };
+
+export const placementStrategyOptions = [
+  {
+    label: 'Spread',
+    value: 'spread'
+  },
+  {
+    label: 'Binpack',
+    value: 'binpack'
+  }
+];
@@ -21,6 +21,10 @@ export interface FormData {
  huggingface_filename: string;
  s3_address: string;
  ollama_library_model_name: 'string';
+  distributed_inference_across_workers?: boolean;
+  placement_strategy?: string;
+  partial_offload?: boolean;
+  worker_selector?: object;
  name: string;
  replicas: number;
  description: string;
@@ -0,0 +1,22 @@
+.advanced-collapse {
+  :global {
+    .ant-collapse-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px !important;
+      padding-inline: 5px !important;
+      padding-block: 5px !important;
+      border-radius: var(--border-radius-base) !important;
+      font-size: var(--font-size-middle) !important;
+
+      &:hover {
+        background-color: var(--color-fill-sider) !important;
+      }
+    }
+
+    .ant-collapse-content-box {
+      padding-inline: 0 !important;
+      padding-block: 0 !important;
+    }
+  }
+}
@@ -29,3 +29,10 @@ export async function deleteWorker(id: string | number) {
    method: 'DELETE'
  });
 }
+
+export async function updateWorker(id: string | number, data: any) {
+  return request(`${WORKERS_API}/${id}`, {
+    method: 'PUT',
+    data
+  });
+}
@@ -0,0 +1,111 @@
+import LabelSelector from '@/components/label-selector';
+import ModalFooter from '@/components/modal-footer';
+import SealInput from '@/components/seal-form/seal-input';
+import { useIntl } from '@umijs/max';
+import { Form, Modal } from 'antd';
+import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+
+type ViewModalProps = {
+  open: boolean;
+  onCancel: () => void;
+  onOk: (values: FormData) => Promise<void>;
+  data: {
+    name: string;
+    labels: object;
+  };
+};
+interface FormData {
+  labels: object;
+  name: string;
+}
+
+const UpdateLabels: React.FC<ViewModalProps> = (props) => {
+  const { open, onCancel, data, onOk } = props || {};
+  const intl = useIntl();
+  const [form] = Form.useForm();
+  const labels = Form.useWatch('labels', form);
+
+  const handleLabelsChange = (labels: object) => {
+    form.setFieldValue('labels', labels);
+  };
+
+  const handleSumit = () => {
+    form.submit();
+  };
+
+  return (
+    <Modal
+      title={intl.formatMessage({ id: 'resources.button.edittags' })}
+      open={open}
+      centered={true}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{
+        content: {
+          padding: '0px'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '0'
+        },
+        footer: {
+          padding: '0 var(--ant-modal-content-padding)'
+        }
+      }}
+      footer={
+        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
+      }
+    >
+      <SimpleBar
+        style={{
+          maxHeight: '550px'
+        }}
+      >
+        <Form
+          name="deployModel"
+          form={form}
+          onFinish={onOk}
+          preserve={false}
+          clearOnDestroy={true}
+          initialValues={{
+            name: data.name,
+            labels: data.labels
+          }}
+          style={{
+            padding: 'var(--ant-modal-content-padding)',
+            paddingBlock: 0
+          }}
+        >
+          <Form.Item<FormData> name="name">
+            <SealInput.Input
+              label={intl.formatMessage({
+                id: 'common.table.name'
+              })}
+              disabled
+            />
+          </Form.Item>
+          <Form.Item<FormData> name="labels">
+            <LabelSelector
+              label={intl.formatMessage({
+                id: 'resources.table.labels'
+              })}
+              labels={labels}
+              onChange={handleLabelsChange}
+            ></LabelSelector>
+          </Form.Item>
+        </Form>
+      </SimpleBar>
+    </Modal>
+  );
+};
+
+export default React.memo(UpdateLabels);
@@ -1,4 +1,6 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
+import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import StatusTag from '@/components/status-tag';
@@ -10,19 +12,37 @@ import {
  DeleteOutlined,
  InfoCircleOutlined,
  PlusOutlined,
-  SyncOutlined
+  SyncOutlined,
+  TagsOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space, Table, Tooltip } from 'antd';
+import { Button, Input, Space, Table, Tooltip, message } from 'antd';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { deleteWorker, queryWorkersList } from '../apis';
+import { deleteWorker, queryWorkersList, updateWorker } from '../apis';
 import { WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 import AddWorker from './add-worker';
+import UpdateLabels from './update-labels';
 const { Column } = Table;

+const ActionList = [
+  {
+    label: 'resources.button.edittags',
+    key: 'edit',
+    icon: <TagsOutlined />
+  },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    props: {
+      danger: true
+    },
+    icon: <DeleteOutlined />
+  }
+];
+
 const Resources: React.FC = () => {
  console.log('resources======workers');

@@ -47,6 +67,13 @@ const Resources: React.FC = () => {
    perPage: 10,
    search: ''
  });
+  const [updateLabelsData, setUpdateLabelsData] = useState<{
+    open: boolean;
+    data: ListItem;
+  }>({
+    open: false,
+    data: {} as ListItem
+  });

  const fetchData = useCallback(async () => {
    setDataSource((pre) => {
@@ -164,6 +191,52 @@ const Resources: React.FC = () => {
      0
    );
  };
+
+  const handleUpdateLabelsOk = useCallback(
+    async (values: Record<string, any>) => {
+      try {
+        console.log('updateLabelsData.data', updateLabelsData.data);
+        await updateWorker(updateLabelsData.data.id, {
+          ...updateLabelsData.data,
+          labels: values.labels
+        });
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
+        fetchData();
+        setUpdateLabelsData({ open: false, data: {} as ListItem });
+      } catch (error) {
+        console.log('error', error);
+      }
+    },
+    [updateLabelsData, fetchData]
+  );
+
+  const handleCancelUpdateLabels = useCallback(() => {
+    setUpdateLabelsData({
+      ...updateLabelsData,
+      open: false
+    });
+  }, []);
+
+  const handleUpdateLabels = (record: ListItem) => {
+    console.log('record', record);
+    setUpdateLabelsData({
+      open: true,
+      data: {
+        ...record
+      }
+    });
+  };
+
+  const handleSelect = (val: any, record: ListItem) => {
+    if (val === 'edit') {
+      handleUpdateLabels(record);
+      return;
+    }
+    if (val === 'delete') {
+      handleDelete(record);
+    }
+  };
+
  useEffect(() => {
    fetchData();
  }, [queryParams]);
@@ -236,6 +309,32 @@ const Resources: React.FC = () => {
          dataIndex="name"
          key="name"
        />
+        <Column
+          title={intl.formatMessage({ id: 'resources.table.labels' })}
+          dataIndex="labels"
+          key="labels"
+          width={200}
+          render={(text, record: ListItem) => {
+            return (
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: 6,
+                  maxWidth: 200
+                }}
+              >
+                {_.map(record.labels, (item: any, index: string) => {
+                  return (
+                    <AutoTooltip key={index} className="m-r-0" maxWidth={120}>
+                      {index}:{item}
+                    </AutoTooltip>
+                  );
+                })}
+              </div>
+            );
+          }}
+        />
        <Column
          title={intl.formatMessage({ id: 'common.table.status' })}
          dataIndex="state"
@@ -398,24 +497,25 @@ const Resources: React.FC = () => {
          key="operation"
          render={(text, record: ListItem) => {
            return (
-              <Space size={20}>
-                <Tooltip
-                  title={intl.formatMessage({ id: 'common.button.delete' })}
-                >
-                  <Button
-                    onClick={() => handleDelete(record)}
-                    size="small"
-                    danger
-                    icon={<DeleteOutlined></DeleteOutlined>}
-                  ></Button>
-                </Tooltip>
-              </Space>
+              <DropdownButtons
+                items={ActionList}
+                onSelect={(val) => handleSelect(val, record)}
+              ></DropdownButtons>
            );
          }}
        />
      </Table>
      <DeleteModal ref={modalRef}></DeleteModal>
      <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
+      <UpdateLabels
+        open={updateLabelsData.open}
+        onOk={handleUpdateLabelsOk}
+        onCancel={handleCancelUpdateLabels}
+        data={{
+          name: updateLabelsData.data.name,
+          labels: updateLabelsData.data.labels
+        }}
+      ></UpdateLabels>
    </>
  );
 };