From b6e4f50849dc8eb3de11cea3e604a7b98252e720 Mon Sep 17 00:00:00 2001 From: wyb Date: Fri, 10 Feb 2023 17:20:44 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=81=A5=E5=BA=B7=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E4=BC=98=E5=8C=96=20&=20Connector=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=20&=20=E6=97=A0MM2?= =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E6=8C=87=E6=A0=87=E5=85=9C=E5=BA=95=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Connect/HasConnector.tsx | 2 +- .../src/pages/Connect/config.tsx | 35 +++++++------ .../MirrorMakerDashBoard/HasConnector.tsx | 51 ++++++++++++++++++ .../src/pages/MirrorMakerDashBoard/index.tsx | 34 ++++++++++++ .../pages/MutliClusterPage/AccessCluster.tsx | 7 +-- .../MutliClusterPage/AccessClusterConfig.tsx | 23 ++++++++ .../src/pages/MutliClusterPage/HomePage.tsx | 2 + .../src/pages/MutliClusterPage/index.less | 8 +++ .../pages/SingleClusterDetail/CheckDetail.tsx | 1 + .../src/pages/SingleClusterDetail/config.tsx | 52 +++++++++++++++++++ 10 files changed, 194 insertions(+), 21 deletions(-) create mode 100644 km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/HasConnector.tsx create mode 100644 km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/index.tsx create mode 100644 km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessClusterConfig.tsx diff --git a/km-console/packages/layout-clusters-fe/src/pages/Connect/HasConnector.tsx b/km-console/packages/layout-clusters-fe/src/pages/Connect/HasConnector.tsx index 18136475..d2deaeea 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Connect/HasConnector.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/HasConnector.tsx @@ -36,7 +36,7 @@ export default (props: Props) => { const [disabled, setDisabled] = useState(true); useLayoutEffect(() => { - Utils.request(api.getConnectors(clusterId)) + Utils.request(api.getConnectClusters(clusterId)) .then((res: any[]) => { res?.length && setDisabled(false); }) diff --git a/km-console/packages/layout-clusters-fe/src/pages/Connect/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/Connect/config.tsx index 82bfa59a..67691d74 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Connect/config.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/config.tsx @@ -94,28 +94,12 @@ const renderLine = (record: any, metricName: string) => { export const getConnectorsColumns = (arg?: any) => { const columns = [ - { - title: 'Connect集群', - dataIndex: 'connectClusterName', - key: 'connectClusterName', - width: 200, - fixed: 'left', - lineClampOne: true, - needTooltip: true, - // render: (t: string, r: any) => { - // return ( - // - // {t} - // {r?.status ? Live : Down} - // - // ); - // }, - }, { title: 'Connector Name', dataIndex: 'connectorName', key: 'connectorName', width: 160, + fixed: 'left', lineClampOne: true, render: (t: string, r: any) => { return t ? ( @@ -135,6 +119,23 @@ export const getConnectorsColumns = (arg?: any) => { ); }, }, + { + title: 'Connect集群', + dataIndex: 'connectClusterName', + key: 'connectClusterName', + width: 200, + lineClampOne: true, + needTooltip: true, + // render: (t: string, r: any) => { + // return ( + // + // {t} + // {r?.status ? Live : Down} + // + // ); + // }, + }, + { title: 'State', dataIndex: 'state', diff --git a/km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/HasConnector.tsx b/km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/HasConnector.tsx new file mode 100644 index 00000000..a8fffc76 --- /dev/null +++ b/km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/HasConnector.tsx @@ -0,0 +1,51 @@ +import React, { useLayoutEffect, useState } from 'react'; +import api from '@src/api'; +import { Spin, Utils } from 'knowdesign'; +import { useParams } from 'react-router-dom'; +import NodataImg from '@src/assets/no-data.png'; + +interface Props { + children: any; +} + +const NoConnector = () => { + return ( +
+ + 暂无数据，请先创建 MM2 任务 +
+ ); +}; + +export default (props: Props) => { + const { clusterId } = useParams<{ + clusterId: string; + }>(); + const [loading, setLoading] = useState(true); + const [disabled, setDisabled] = useState(true); + + useLayoutEffect(() => { + Utils.request(api.getMirrorMakerMetadata(clusterId)) + .then((res: any[]) => { + res?.length && setDisabled(false); + }) + .finally(() => setLoading(false)); + }, []); + + return disabled ? ( + {loading ?
: } + ) : ( + props.children + ); +}; diff --git a/km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/index.tsx b/km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/index.tsx new file mode 100644 index 00000000..b82e7dac --- /dev/null +++ b/km-console/packages/layout-clusters-fe/src/pages/MirrorMakerDashBoard/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { MetricType } from '@src/api'; +import MirrorMakerCard from '@src/components/CardBar/MirrorMakerCard'; +import DraggableCharts from '@src/components/DraggableCharts'; +import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb'; +import { AppContainer } from 'knowdesign'; +import HasConnector from './HasConnector'; + +const MirrorMakerDashboard = (): JSX.Element => { + const [global] = AppContainer.useGlobalValue(); + return ( + <> +
+ +
+ + <> + + + + + + {/* */} + + ); +}; + +export default MirrorMakerDashboard; diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx index ec5fab11..8f06b99b 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx @@ -522,6 +522,7 @@ const ConnectorForm = (props: { const params = { ...values, id: initFieldsValue?.id, + jmxProperties: values.jmxProperties ? `{ "jmxProperties": "${values.jmxProperties}" }` : undefined, }; Utils.put(api.batchConnectClusters, [params]) .then((res) => { @@ -542,7 +543,7 @@ const ConnectorForm = (props: { setSelectedTabKey(undefined); try { const jmxPortInfo = JSON.parse(initFieldsValue.jmxProperties) || {}; - form.setFieldsValue({ ...initFieldsValue, jmxPort: jmxPortInfo.jmxPort }); + form.setFieldsValue({ ...initFieldsValue, jmxProperties: jmxPortInfo.jmxProperties }); } catch { form.setFieldsValue({ ...initFieldsValue }); } @@ -551,7 +552,7 @@ const ConnectorForm = (props: { useLayoutEffect(() => { try { const jmxPortInfo = JSON.parse(initFieldsValue.jmxProperties) || {}; - form.setFieldsValue({ ...initFieldsValue, jmxPort: jmxPortInfo.jmxPort }); + form.setFieldsValue({ ...initFieldsValue, jmxProperties: jmxPortInfo.jmxProperties }); } catch { form.setFieldsValue({ ...initFieldsValue }); } @@ -626,7 +627,7 @@ const ConnectorForm = (props: { ))} - +
diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessClusterConfig.tsx b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessClusterConfig.tsx new file mode 100644 index 00000000..4c73a8ae --- /dev/null +++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessClusterConfig.tsx @@ -0,0 +1,23 @@ +import React, { useState } from 'react'; +import { message } from 'knowdesign'; +import { HeartTwoTone } from '@ant-design/icons'; + +const AccessClusterConfig = () => { + const [count, setCount] = useState(1); + + const setErgeModal = () => { + if (count >= 50) { + message.success({ + content: 'Erge', + icon: , + }); + setCount(1); + } else { + setCount(count + 1); + } + }; + + return
; +}; + +export default AccessClusterConfig; diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx index 25e5cdfe..4f59ae90 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx @@ -6,6 +6,7 @@ import TourGuide, { MultiPageSteps } from '@src/components/TourGuide'; import { healthSorceList, sliderValueMap, sortFieldList, sortTypes, statusFilters } from './config'; import ClusterList from './List'; import AccessClusters from './AccessCluster'; +import AccessCluster from './AccessClusterConfig'; import CustomCheckGroup from './CustomCheckGroup'; import { ClustersPermissionMap } from '../CommonConfig'; import './index.less'; @@ -359,6 +360,7 @@ const MultiClusterPage = () => { />
+
diff --git a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less index fc5dbfa3..f0dab4ba 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less +++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less @@ -343,6 +343,14 @@ } } } + .multi-cluster-erge { + position: absolute; + width: 15px; + height: 15px; + top: 100px; + left: 20px; + background-color: transparent; + } } &-dashboard { & > .dcloud-spin-nested-loading > .dcloud-spin-container::after { diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/CheckDetail.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/CheckDetail.tsx index 29fc708a..83f78db4 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/CheckDetail.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/CheckDetail.tsx @@ -19,6 +19,7 @@ const CheckDetail = forwardRef((props: any, ref): JSX.Element => { const getHealthDetail = () => { setLoading(true); return Utils.request(API.getResourceListHealthDetail(+clusterId)).then((res: any) => { + res.sort((a: any, b: any) => a.dimension - b.dimension); setData(res); setLoading(false); }); diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx index 01af934a..e7d4f2ba 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx @@ -40,6 +40,10 @@ export const dimensionMap = { label: 'Connector', href: '/connect/connectors', }, + 7: { + label: 'MirrorMaker', + href: '/replication', + }, } as any; const toLowerCase = (name = '') => { @@ -95,6 +99,18 @@ const CONFIG_ITEM_DETAIL_DESC = { ConnectorUnassignedTaskCount: (valueGroup: any) => { return `未被分配的任务数量 小于 ${valueGroup?.value}`; }, + MirrorMakerFailedTaskCount: (valueGroup: any) => { + return `失败状态的任务数量 小于 ${valueGroup?.value}`; + }, + MirrorMakerUnassignedTaskCount: (valueGroup: any) => { + return `未被分配的任务数量 小于 ${valueGroup?.value}`; + }, + ReplicationLatencyMsMax: (valueGroup: any) => { + return `消息复制最大延迟时间 小于 ${valueGroup?.value}`; + }, + 'TotalRecord-errors': (valueGroup: any) => { + return `消息处理错误的次数 增量小于 ${valueGroup?.value}`; + }, }; export const getConfigItemDetailDesc = (item: keyof typeof CONFIG_ITEM_DETAIL_DESC, valueGroup: any) => { @@ -409,6 +425,42 @@ export const getHealthySettingColumn = (form: any, data: any, clusterId: string)
); } + case 'MirrorMakerFailedTaskCount': { + return ( +
+ {'>'} + {getFormItem({ configItem, attrs: { min: 0, max: 99998 } })} + 则不通过 +
+ ); + } + case 'MirrorMakerUnassignedTaskCount': { + return ( +
+ {'>'} + {getFormItem({ configItem, attrs: { min: 0, max: 99998 } })} + 则不通过 +
+ ); + } + case 'ReplicationLatencyMsMax': { + return ( +
+ {'>'} + {getFormItem({ configItem, attrs: { min: 0, max: 99998 } })} + 则不通过 +
+ ); + } + case 'TotalRecord-errors': { + return ( +
+ {'>'} + {getFormItem({ configItem, attrs: { min: 0, max: 99998 } })} + 则不通过 +
+ ); + } default: { return <>; }