From 62f7d3f72ffb571864e97867d1c83a7df00888e4 Mon Sep 17 00:00:00 2001 From: GraceWalk Date: Fri, 21 Oct 2022 11:42:34 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E8=A1=A8=E9=80=BB=E8=BE=91=20&?= =?UTF-8?q?=20=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout-clusters-fe/src/api/index.ts | 4 + .../MetricSelect.tsx} | 89 ++++++++------- .../NodeScope.tsx | 91 ++++++++-------- .../image/empty.png | Bin .../index.tsx | 103 +++++++++--------- .../style/index.less | 0 .../style/indicator-drawer.less | 13 +-- .../style/node-scope.less | 9 +- .../style/query-module.less | 0 .../Detail.tsx} | 29 ++--- .../config.tsx | 23 ++-- .../index.less | 2 +- .../index.tsx | 74 +++++++------ .../src/constants/chartConfig.ts | 99 ++++++++++++----- .../src/pages/BrokerDashboard/index.tsx | 4 +- .../src/pages/MutliClusterPage/List.tsx | 9 +- .../DetailChart/config.tsx | 6 +- .../SingleClusterDetail/DetailChart/index.tsx | 24 ++-- .../SingleClusterDetail/HealthySetting.tsx | 7 +- .../src/pages/TopicDashboard/index.tsx | 4 +- 20 files changed, 329 insertions(+), 261 deletions(-) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader/IndicatorDrawer.tsx => ChartOperateBar/MetricSelect.tsx} (83%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/NodeScope.tsx (70%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/image/empty.png (100%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/index.tsx (80%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/style/index.less (100%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/style/indicator-drawer.less (94%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/style/node-scope.less (95%) rename km-console/packages/layout-clusters-fe/src/components/{SingleChartHeader => ChartOperateBar}/style/query-module.less (100%) rename km-console/packages/layout-clusters-fe/src/components/{DashboardDragChart/ChartDetail.tsx => DraggableCharts/Detail.tsx} (95%) rename km-console/packages/layout-clusters-fe/src/components/{DashboardDragChart => DraggableCharts}/config.tsx (72%) rename km-console/packages/layout-clusters-fe/src/components/{DashboardDragChart => DraggableCharts}/index.less (98%) rename km-console/packages/layout-clusters-fe/src/components/{DashboardDragChart => DraggableCharts}/index.tsx (84%) diff --git a/km-console/packages/layout-clusters-fe/src/api/index.ts b/km-console/packages/layout-clusters-fe/src/api/index.ts index d3e48939..bbf11d0a 100755 --- a/km-console/packages/layout-clusters-fe/src/api/index.ts +++ b/km-console/packages/layout-clusters-fe/src/api/index.ts @@ -14,6 +14,7 @@ export enum MetricType { Broker = 103, Partition = 104, Replication = 105, + Zookeeper = 110, Controls = 901, } @@ -61,6 +62,8 @@ const api = { phyClusterState: getApi(`/physical-clusters/state`), getOperatingStateList: (clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/groups-overview`), + getGroupTopicList: (clusterPhyId: number, groupName: string) => getApi(`/clusters/${clusterPhyId}/groups/${groupName}/topics-overview`), + // 物理集群接口 phyCluster: getApi(`/physical-clusters`), getPhyClusterBasic: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/basic`), @@ -127,6 +130,7 @@ const api = { getApi(`/clusters/${clusterPhyId}/topics/${topicName}/brokers-partitions-summary`), getTopicPartitionsDetail: (clusterPhyId: string, topicName: string) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/partitions`), getTopicMessagesList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/records`), // Messages列表 + getTopicGroupList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/groups-overview`), // Consumers列表 getTopicMessagesMetadata: (topicName: string, clusterPhyId: number) => getApi(`/clusters//${clusterPhyId}/topics/${topicName}/metadata`), // Messages列表 getTopicACLsList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/acl-Bindings`), // ACLs列表 getTopicConfigs: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/config-topics/${topicName}/configs`), // Configuration列表 diff --git a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx b/km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/MetricSelect.tsx similarity index 83% rename from km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx rename to km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/MetricSelect.tsx index 9c7a4833..badae226 100644 --- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/MetricSelect.tsx @@ -1,15 +1,12 @@ -import React, { useState, useEffect } from 'react'; -import { Drawer, Button, Space, Divider, AppContainer, ProTable } from 'knowdesign'; +import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'; +import { Drawer, Button, Space, Divider, AppContainer, ProTable, Utils } from 'knowdesign'; import { IconFont } from '@knowdesign/icons'; -import { IindicatorSelectModule } from './index'; +import { MetricSelect } from './index'; import './style/indicator-drawer.less'; import { useLocation } from 'react-router-dom'; interface PropsType extends React.HTMLAttributes { - onClose: () => void; - visible: boolean; - isGroup?: boolean; // 是否分组 - indicatorSelectModule: IindicatorSelectModule; + metricSelect: MetricSelect; } interface MetricInfo { @@ -27,25 +24,25 @@ type CategoryData = { metrics: MetricInfo[]; }; -const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange }: any) => { - const innerColumns = [ - { - title: '指标名称', - dataIndex: 'name', - key: 'name', - }, - { - title: '单位', - dataIndex: 'unit', - key: 'unit', - }, - { - title: '描述', - dataIndex: 'desc', - key: 'desc', - }, - ]; +const expandedRowColumns = [ + { + title: '指标名称', + dataIndex: 'name', + key: 'name', + }, + { + title: '单位', + dataIndex: 'unit', + key: 'unit', + }, + { + title: '描述', + dataIndex: 'desc', + key: 'desc', + }, +]; +const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange }: any) => { return (
{ +const MetricSelect = forwardRef(({ metricSelect }: PropsType, ref) => { const [global] = AppContainer.useGlobalValue(); const { pathname } = useLocation(); const [confirmLoading, setConfirmLoading] = useState(false); const [categoryData, setCategoryData] = useState([]); const [selectedCategories, setSelectedCategories] = useState([]); const [childrenSelectedRowKeys, setChildrenSelectedRowKeys] = useState({}); + const [visible, setVisible] = useState(false); const columns = [ { @@ -96,13 +94,13 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) ]; const formateTableData = () => { - const tableData = indicatorSelectModule.tableData; + const tableData = metricSelect.tableData; const categoryData: { [category: string]: MetricInfo[]; } = {}; tableData.forEach(({ name, desc }) => { - const metricDefine = global.getMetricDefine(indicatorSelectModule?.metricType, name); + const metricDefine = global.getMetricDefine(metricSelect?.metricType, name); const returnData = { name, desc, @@ -125,12 +123,12 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) }; const formateSelectedKeys = () => { - const newKeys = indicatorSelectModule.selectedRows; + const newKeys = metricSelect.selectedRows; const result: SelectedMetrics = {}; const selectedCategories: string[] = []; newKeys.forEach((name: string) => { - const metricDefine = global.getMetricDefine(indicatorSelectModule?.metricType, name); + const metricDefine = global.getMetricDefine(metricSelect?.metricType, name); if (metricDefine) { if (!result[metricDefine.category]) { result[metricDefine.category] = [name]; @@ -217,10 +215,10 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) const allRowKeys: string[] = []; Object.entries(childrenSelectedRowKeys).forEach(([, arr]) => allRowKeys.push(...arr)); - indicatorSelectModule.submitCallback(allRowKeys).then( + metricSelect.submitCallback(allRowKeys).then( () => { setConfirmLoading(false); - onClose(); + setVisible(false); }, () => { setConfirmLoading(false); @@ -231,7 +229,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) const rowSelection = { selectedRowKeys: selectedCategories, onChange: rowChange, - // getCheckboxProps: (record: any) => indicatorSelectModule.checkboxProps && indicatorSelectModule.checkboxProps(record), + // getCheckboxProps: (record: any) => metricSelect.checkboxProps && metricSelect.checkboxProps(record), getCheckboxProps: (record: CategoryData) => { const isAllSelected = record.metrics.length === childrenSelectedRowKeys[record.category]?.length; const isNotCheck = !childrenSelectedRowKeys[record.category] || childrenSelectedRowKeys[record.category]?.length === 0; @@ -241,25 +239,33 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) }, }; - useEffect(formateTableData, [indicatorSelectModule.tableData]); + useEffect(formateTableData, [metricSelect.tableData]); useEffect(() => { visible && formateSelectedKeys(); - }, [visible, indicatorSelectModule.selectedRows]); + }, [visible, metricSelect.selectedRows]); + + useImperativeHandle( + ref, + () => ({ + open: () => setVisible(true), + }), + [] + ); return ( <> setVisible(false)} visible={visible} maskClosable={false} extra={ -
-
-
{scopeLabel}
-
-
- - 全选 - - } - size="small" - placeholder={searchPlaceholder} - onChange={(e) => setScopeSearchValue(e.target.value)} - /> -
-
- - - {customList - .filter((item) => item.label.includes(scopeSearchValue)) - .map((item) => ( - - {item.label} - - ))} - - -
- -
- - + {hasCustomScope && ( +
+
{scopeLabel}
+
+
+ + 全选 + + } + size="small" + placeholder={searchPlaceholder} + onChange={(e) => setScopeSearchValue(e.target.value)} + /> +
+
+ + + {customList + .filter((item) => item.label.includes(scopeSearchValue)) + .map((item) => ( + + {item.label} + + ))} + + +
+ +
+ + +
-
+ )}
); @@ -185,7 +188,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => { visible={popVisible} content={clickContent} placement="bottomRight" - overlayClassName="d-node-scope-popover" + overlayClassName={`d-node-scope-popover ${hasCustomScope ? 'large-size' : ''}`} onVisibleChange={visibleChange} > diff --git a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/image/empty.png b/km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/image/empty.png similarity index 100% rename from km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/image/empty.png rename to km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/image/empty.png diff --git a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx b/km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx similarity index 80% rename from km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx rename to km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx index 5284093b..42d66366 100644 --- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from 'react'; -import { Tooltip, Select, Utils, Divider, Button } from 'knowdesign'; +import React, { useEffect, useRef, useState } from 'react'; +import { Select, Divider, Button } from 'knowdesign'; import { IconFont } from '@knowdesign/icons'; import moment from 'moment'; import { DRangeTime } from 'knowdesign'; -import IndicatorDrawer from './IndicatorDrawer'; +import MetricSelect from './MetricSelect'; import NodeScope from './NodeScope'; import './style/index.less'; @@ -24,8 +24,8 @@ export interface KsHeaderOptions { data: number | number[]; }; } -export interface IindicatorSelectModule { - metricType?: MetricType; +export interface MetricSelect { + metricType: MetricType; hide?: boolean; drawerTitle?: string; selectedRows: (string | number)[]; @@ -47,20 +47,27 @@ export interface IcustomScope { } export interface InodeScopeModule { + hasCustomScope: boolean; customScopeList: IcustomScope[]; scopeName?: string; scopeLabel?: string; searchPlaceholder?: string; change?: () => void; } + interface PropsType { - indicatorSelectModule?: IindicatorSelectModule; + metricSelect?: MetricSelect; hideNodeScope?: boolean; hideGridSelect?: boolean; nodeScopeModule?: InodeScopeModule; onChange: (options: KsHeaderOptions) => void; } +interface ScopeData { + isTop: boolean; + data: any; +} + // 列布局选项 const GRID_SIZE_OPTIONS = [ { @@ -77,15 +84,17 @@ const GRID_SIZE_OPTIONS = [ }, ]; -const SingleChartHeader = ({ - indicatorSelectModule, +const MetricOperateBar = ({ + metricSelect, nodeScopeModule = { + hasCustomScope: false, customScopeList: [], }, hideNodeScope = false, hideGridSelect = false, onChange: onChangeCallback, }: PropsType): JSX.Element => { + const metricSelectRef = useRef(null); const [gridNum, setGridNum] = useState(GRID_SIZE_OPTIONS[1].value); const [rangeTime, setRangeTime] = useState<[number, number]>(() => { const curTimeStamp = moment().valueOf(); @@ -93,16 +102,35 @@ const SingleChartHeader = ({ }); const [isRelativeRangeTime, setIsRelativeRangeTime] = useState(true); const [isAutoReload, setIsAutoReload] = useState(false); - const [indicatorDrawerVisible, setIndicatorDrawerVisible] = useState(false); - - const [scopeData, setScopeData] = useState<{ - isTop: boolean; - data: any; - }>({ + const [scopeData, setScopeData] = useState({ isTop: true, data: 5, }); + const sizeChange = (value: number) => setGridNum(value); + + const timeChange = (curRangeTime: [number, number], isRelative: boolean) => { + setRangeTime([...curRangeTime]); + setIsRelativeRangeTime(isRelative); + }; + + const reloadRangeTime = () => { + if (isRelativeRangeTime) { + const timeLen = rangeTime[1] - rangeTime[0] || 0; + const curTimeStamp = moment().valueOf(); + setRangeTime([curTimeStamp - timeLen, curTimeStamp]); + } else { + setRangeTime([...rangeTime]); + } + }; + + const nodeScopeChange = (data: any, isTop?: any) => { + setScopeData({ + isTop, + data, + }); + }; + useEffect(() => { onChangeCallback({ rangeTime, @@ -129,68 +157,37 @@ const SingleChartHeader = ({ }; }, [isRelativeRangeTime, rangeTime]); - const sizeChange = (value: number) => { - setGridNum(value); - }; - - const timeChange = (curRangeTime: [number, number], isRelative: boolean) => { - setRangeTime([...curRangeTime]); - setIsRelativeRangeTime(isRelative); - }; - - const reloadRangeTime = () => { - if (isRelativeRangeTime) { - const timeLen = rangeTime[1] - rangeTime[0] || 0; - const curTimeStamp = moment().valueOf(); - setRangeTime([curTimeStamp - timeLen, curTimeStamp]); - } else { - setRangeTime([...rangeTime]); - } - }; - - const openIndicatorDrawer = () => { - setIndicatorDrawerVisible(true); - }; - - const closeIndicatorDrawer = () => { - setIndicatorDrawerVisible(false); - }; - - const nodeScopeChange = (data: any, isTop?: any) => { - setScopeData({ - isTop, - data, - }); - }; - return ( <>
+ {/* 刷新 */}
+ {/* 时间选择 */}
+ {/* 节点范围 */} {!hideNodeScope && } + {/* 分栏 */} {!hideGridSelect && (