refactor(datasource): 重构指标数据相关页面

- 修改标签值的存储方式，从对象数组改为字符串数组
- 优化指标列表的展示，增加可复制的指标名称
- 移除不必要的编辑按钮和相关功能
- 使用 useRequest 钩子优化数据请求

src/api/model-types.ts

@@ -246,17 +246,9 @@ export interface MetricLabelItem {
   /** 标签名称 */
   name: string
   /** 标签值 */
-  values: MetricLabelValueItem[]
-  /** ID */
-  id: number
-}
-
-/** 指标数据标签值 */
-export interface MetricLabelValueItem {
+  values: string[]
   /** ID */
   id: number
-  /** 值 */
-  value: string
 }
 
 /** 字典项 */

src/pages/datasource/metric/label.tsx

@@ -2,7 +2,7 @@ import { getMetric } from '@/api/datasource/metric'
 import { MetricType } from '@/api/enum'
 import { MetricTypeData } from '@/api/global'
 import { MetricItem, MetricLabelItem } from '@/api/model-types'
-import { Button, Modal, ModalProps, Space, Table, Tag } from 'antd'
+import { Modal, ModalProps, Space, Table, Tag } from 'antd'
 import { ColumnsType } from 'antd/es/table'
 import React, { useEffect } from 'react'
 import { LabelEditModal } from './label-edit-modal'
@@ -18,10 +18,6 @@ export const Label: React.FC<LabelProps> = (props) => {
   const [metricLabelDetail, setMetricLabelDetail] = React.useState<MetricLabelItem>()
   const [openEditModal, setOpenEditModal] = React.useState(false)
 
-  const handleEdit = (detail: MetricLabelItem) => {
-    setMetricLabelDetail(detail)
-    setOpenEditModal(true)
-  }
   const handleEditModalOnOK = () => {
     setOpenEditModal(false)
     getMetricLabels()
@@ -37,46 +33,47 @@ export const Label: React.FC<LabelProps> = (props) => {
       title: '标签名',
       dataIndex: 'name',
       key: 'name',
+      ellipsis: true,
       width: 300
     },
     {
       title: '标签值',
       dataIndex: 'value',
       key: 'value',
-      // width: 200,
+      ellipsis: true,
       render(_, record) {
         return (
           <>
-            {record.values.map((item) => (
-              <Tag key={item.id}>{item.value}</Tag>
+            {record.values.map((item, index) => (
+              <Tag key={`${index}-${item}`}>{item}</Tag>
             ))}
           </>
         )
       }
-    },
-    {
-      title: '备注',
-      dataIndex: 'remark',
-      key: 'remark',
-      render(value) {
-        return <div>{value || '-'}</div>
-      }
-    },
-    {
-      title: '操作',
-      key: 'op',
-      width: 120,
-      align: 'center',
-      render: (_, record) => {
-        return (
-          <Space>
-            <Button size='small' type='link' onClick={() => handleEdit(record)}>
-              编辑
-            </Button>
-          </Space>
-        )
-      }
     }
+    // {
+    //   title: '备注',
+    //   dataIndex: 'remark',
+    //   key: 'remark',
+    //   render(value) {
+    //     return <div>{value || '-'}</div>
+    //   }
+    // }
+    // {
+    //   title: '操作',
+    //   key: 'op',
+    //   width: 120,
+    //   align: 'center',
+    //   render: (_, record) => {
+    //     return (
+    //       <Space>
+    //         <Button size='small' type='link' onClick={() => handleEdit(record)}>
+    //           编辑
+    //         </Button>
+    //       </Space>
+    //     )
+    //   }
+    // }
   ]
 
   const getMetricLabels = async () => {

src/pages/datasource/metric/metadata.tsx

@@ -5,7 +5,8 @@ import { DatasourceItem, MetricItem } from '@/api/model-types'
 import { DataInput } from '@/components/data/child/data-input'
 import { useContainerHeightTop } from '@/hooks/useContainerHeightTop'
 import { GlobalContext } from '@/utils/context'
-import { Button, Flex, Form, Input, Space, Table, Tag } from 'antd'
+import { useRequest } from 'ahooks'
+import { Button, Flex, Form, Input, Space, Table, Tag, Typography } from 'antd'
 import { ColumnsType } from 'antd/es/table'
 import React, { useContext, useEffect, useRef } from 'react'
 import { Info } from './info'
@@ -15,7 +16,8 @@ export interface MetadataProps {
   datasource?: DatasourceItem
 }
 
-let searchTimer: NodeJS.Timeout | null = null
+const { Text } = Typography
+
 export const Metadata: React.FC<MetadataProps> = (props) => {
   const { datasource } = props
   const [form] = Form.useForm()
@@ -30,26 +32,28 @@ export const Metadata: React.FC<MetadataProps> = (props) => {
   })
   const [metricListTotal, setMetricListTotal] = React.useState(0)
   const [metricList, setMetricList] = React.useState<MetricItem[]>([])
-  const [refresh, setRefresh] = React.useState(false)
-  const [loading, setLoading] = React.useState(false)
   const [metricDetail, setMetricDetail] = React.useState<MetricItem>()
   const [openMetricLabelModal, setOpenMetricLabelModal] = React.useState(false)
   const ADivRef = useRef<HTMLDivElement>(null)
   const AutoTableHeight = useContainerHeightTop(ADivRef, metricList, isFullscreen)
 
-  const handleRefresh = () => {
-    setRefresh(!refresh)
-  }
+  const { run: getMetricList, loading } = useRequest(listMetric, {
+    manual: true,
+    onSuccess: (reply) => {
+      const {
+        list,
+        pagination: { total }
+      } = reply
+      setMetricList(list || [])
+      setMetricListTotal(total || 0)
+    }
+  })
 
   const handleLabel = (record: MetricItem) => {
     setMetricDetail(record)
     setOpenMetricLabelModal(true)
   }
 
-  const hendleEditMetric = (record: MetricItem) => {
-    setMetricDetail(record)
-  }
-
   const hanleLabelModalOnCancel = () => {
     setOpenMetricLabelModal(false)
     setMetricDetail(undefined)
@@ -82,9 +86,14 @@ export const Metadata: React.FC<MetadataProps> = (props) => {
       title: '指标名称',
       dataIndex: 'name',
       key: 'name',
-      // width: 200,
+      ellipsis: true,
+      width: 400,
       render(value) {
-        return <a>{value}</a>
+        return (
+          <Text copyable={{ text: value }}>
+            <a href='#'>{value.length > 42 ? `${value.slice(0, 42)}...` : value}</a>
+          </Text>
+        )
       }
     },
     {
@@ -113,42 +122,16 @@ export const Metadata: React.FC<MetadataProps> = (props) => {
           <Button type='link' size='small' onClick={() => handleLabel(record)}>
             标签
           </Button>
-          <Button type='link' size='small' onClick={() => hendleEditMetric(record)}>
-            编辑
-          </Button>
         </Space>
       )
     }
   ]
 
-  const fectMetricList = () => {
-    if (searchTimer) {
-      clearTimeout(searchTimer)
-    }
-    searchTimer = setTimeout(() => {
-      setLoading(true)
-      listMetric(searchMetricParams)
-        .then((reply) => {
-          const {
-            list,
-            pagination: { total }
-          } = reply
-
-          if (!list || !total) return
-          setMetricList(list)
-          setMetricListTotal(total || 0)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    }, 500)
-  }
-
   const fetchSyncMetric = () => {
     if (!datasource?.id) return
     syncDatasourceMeta({
       id: datasource?.id
-    }).then(handleRefresh)
+    }).then(() => getMetricList(searchMetricParams))
   }
 
   useEffect(() => {
@@ -162,9 +145,8 @@ export const Metadata: React.FC<MetadataProps> = (props) => {
   }, [datasource])
 
   useEffect(() => {
-    fectMetricList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchMetricParams, refresh])
+    getMetricList(searchMetricParams)
+  }, [searchMetricParams, getMetricList])
 
   return (
     <div className='flex flex-col gap-3'>
@@ -180,7 +162,7 @@ export const Metadata: React.FC<MetadataProps> = (props) => {
           <Button type='primary' onClick={fetchSyncMetric}>
             同步数据
           </Button>
-          <Button color='default' variant='filled' onClick={handleRefresh} loading={loading}>
+          <Button color='default' variant='filled' onClick={() => getMetricList(searchMetricParams)} loading={loading}>
             刷新
           </Button>
         </Space>