fix: 图表逻辑 & 展示优化

Author: GraceWalk

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列表

…ts/SingleChartHeader/IndicatorDrawer.tsx …ponents/ChartOperateBar/MetricSelect.tsxkm-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx renamed to km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/MetricSelect.tsx km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx renamed to 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<HTMLDivElement> {
-  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 (
     <div
       style={{
@@ -62,7 +59,7 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
           showHeader: false,
           noPagination: true,
           rowKey: 'name',
-          columns: innerColumns,
+          columns: expandedRowColumns,
           dataSource: metrics,
           attrs: {
             rowSelection: {
@@ -79,13 +76,14 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
   );
 };
 
-const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) => {
+const MetricSelect = forwardRef(({ metricSelect }: PropsType, ref) => {
   const [global] = AppContainer.useGlobalValue();
   const { pathname } = useLocation();
   const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
   const [categoryData, setCategoryData] = useState<CategoryData[]>([]);
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [childrenSelectedRowKeys, setChildrenSelectedRowKeys] = useState<SelectedMetrics>({});
+  const [visible, setVisible] = useState<boolean>(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 (
     <>
       <Drawer
         className="indicator-drawer"
-        title={indicatorSelectModule.drawerTitle || '指标筛选'}
+        title={metricSelect.drawerTitle || '指标筛选'}
         width="868px"
         forceRender={true}
-        onClose={onClose}
+        onClose={() => setVisible(false)}
         visible={visible}
         maskClosable={false}
         extra={
           <Space>
-            <Button size="small" onClick={onClose}>
+            <Button size="small" onClick={() => setVisible(false)}>
               取消
             </Button>
             <Button
@@ -281,6 +287,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
             rowKey: 'category',
             columns: columns,
             dataSource: categoryData,
+            noPagination: true,
             attrs: {
               rowSelection: rowSelection,
               expandable: {
@@ -319,6 +326,6 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
       </Drawer>
     </>
   );
-};
+});
 
-export default IndicatorDrawer;
+export default MetricSelect;

…mponents/SingleChartHeader/NodeScope.tsx …components/ChartOperateBar/NodeScope.tsxkm-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx renamed to km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx renamed to km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx

@@ -26,6 +26,7 @@ const OptionsDefault = [
 
 const NodeScope = ({ nodeScopeModule, change }: propsType) => {
   const {
+    hasCustomScope,
     customScopeList: customList,
     scopeName = '',
     scopeLabel = '自定义范围',
@@ -128,51 +129,53 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
             </Space>
           </Radio.Group>
         </div>
-        <div className="flx_r">
-          <h6 className="time_title">{scopeLabel}</h6>
-          <div className="custom-scope">
-            <div className="check-row">
-              <Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
-                全选
-              </Checkbox>
-              <Input
-                className="search-input"
-                suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
-                size="small"
-                placeholder={searchPlaceholder}
-                onChange={(e) => setScopeSearchValue(e.target.value)}
-              />
-            </div>
-            <div className="fixed-height">
-              <Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
-                <Row gutter={[10, 12]}>
-                  {customList
-                    .filter((item) => item.label.includes(scopeSearchValue))
-                    .map((item) => (
-                      <Col span={12} key={item.value}>
-                        <Checkbox value={item.value}>{item.label}</Checkbox>
-                      </Col>
-                    ))}
-                </Row>
-              </Checkbox.Group>
-            </div>
-
-            <div className="btn-con">
-              <Button
-                type="primary"
-                size="small"
-                className="btn-sure"
-                onClick={customSure}
-                disabled={checkedListTemp?.length > 0 ? false : true}
-              >
-                确定
-              </Button>
-              <Button size="small" onClick={customCancel}>
-                取消
-              </Button>
+        {hasCustomScope && (
+          <div className="flx_r">
+            <h6 className="time_title">{scopeLabel}</h6>
+            <div className="custom-scope">
+              <div className="check-row">
+                <Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+                  全选
+                </Checkbox>
+                <Input
+                  className="search-input"
+                  suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
+                  size="small"
+                  placeholder={searchPlaceholder}
+                  onChange={(e) => setScopeSearchValue(e.target.value)}
+                />
+              </div>
+              <div className="fixed-height">
+                <Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
+                  <Row gutter={[10, 12]}>
+                    {customList
+                      .filter((item) => item.label.includes(scopeSearchValue))
+                      .map((item) => (
+                        <Col span={12} key={item.value}>
+                          <Checkbox value={item.value}>{item.label}</Checkbox>
+                        </Col>
+                      ))}
+                  </Row>
+                </Checkbox.Group>
+              </div>
+
+              <div className="btn-con">
+                <Button
+                  type="primary"
+                  size="small"
+                  className="btn-sure"
+                  onClick={customSure}
+                  disabled={checkedListTemp?.length > 0 ? false : true}
+                >
+                  确定
+                </Button>
+                <Button size="small" onClick={customCancel}>
+                  取消
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
@@ -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}
         >
           <span className="input-span">