From d8be4b4750764153815e72d2eaa8abb28bf25342 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=A7=E6=A1=90?= <1058165620@qq.com> Date: Thu, 9 Jan 2025 14:31:12 +0800 Subject: [PATCH] =?UTF-8?q?refactor(datasource):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E6=8C=87=E6=A0=87=E6=95=B0=E6=8D=AE=E7=9B=B8=E5=85=B3=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改标签值的存储方式，从对象数组改为字符串数组 - 优化指标列表的展示，增加可复制的指标名称 - 移除不必要的编辑按钮和相关功能 - 使用 useRequest 钩子优化数据请求 --- src/api/model-types.ts | 10 +--- src/pages/datasource/metric/label.tsx | 59 ++++++++++---------- src/pages/datasource/metric/metadata.tsx | 70 +++++++++--------------- 3 files changed, 55 insertions(+), 84 deletions(-) diff --git a/src/api/model-types.ts b/src/api/model-types.ts index 75ffefb..aca7a50 100644 --- a/src/api/model-types.ts +++ b/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 } /** 字典项 */ diff --git a/src/pages/datasource/metric/label.tsx b/src/pages/datasource/metric/label.tsx index d9a1a26..7f6b703 100644 --- a/src/pages/datasource/metric/label.tsx +++ b/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 = (props) => { const [metricLabelDetail, setMetricLabelDetail] = React.useState() 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 = (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) => ( - {item.value} + {record.values.map((item, index) => ( + {item} ))} ) } - }, - { - title: '备注', - dataIndex: 'remark', - key: 'remark', - render(value) { - return
{value || '-'}
- } - }, - { - title: '操作', - key: 'op', - width: 120, - align: 'center', - render: (_, record) => { - return ( - - - - ) - } } + // { + // title: '备注', + // dataIndex: 'remark', + // key: 'remark', + // render(value) { + // return
{value || '-'}
+ // } + // } + // { + // title: '操作', + // key: 'op', + // width: 120, + // align: 'center', + // render: (_, record) => { + // return ( + // + // + // + // ) + // } + // } ] const getMetricLabels = async () => { diff --git a/src/pages/datasource/metric/metadata.tsx b/src/pages/datasource/metric/metadata.tsx index 8d012a4..1b65afc 100644 --- a/src/pages/datasource/metric/metadata.tsx +++ b/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 = (props) => { const { datasource } = props const [form] = Form.useForm() @@ -30,26 +32,28 @@ export const Metadata: React.FC = (props) => { }) const [metricListTotal, setMetricListTotal] = React.useState(0) const [metricList, setMetricList] = React.useState([]) - const [refresh, setRefresh] = React.useState(false) - const [loading, setLoading] = React.useState(false) const [metricDetail, setMetricDetail] = React.useState() const [openMetricLabelModal, setOpenMetricLabelModal] = React.useState(false) const ADivRef = useRef(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 = (props) => { title: '指标名称', dataIndex: 'name', key: 'name', - // width: 200, + ellipsis: true, + width: 400, render(value) { - return {value} + return ( + + {value.length > 42 ? `${value.slice(0, 42)}...` : value} + + ) } }, { @@ -113,42 +122,16 @@ export const Metadata: React.FC = (props) => { - ) } ] - 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 = (props) => { }, [datasource]) useEffect(() => { - fectMetricList() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [searchMetricParams, refresh]) + getMetricList(searchMetricParams) + }, [searchMetricParams, getMetricList]) return (
@@ -180,7 +162,7 @@ export const Metadata: React.FC = (props) => { -