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) => { -