feat: 支持 Zookeeper 模块

km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx

@@ -26,7 +26,6 @@ const OptionsDefault = [
 
 const NodeScope = ({ nodeScopeModule, change }: propsType) => {
   const {
-    hasCustomScope,
     customScopeList: customList,
     scopeName = '',
     scopeLabel = '自定义范围',
@@ -129,79 +128,75 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
             </Space>
           </Radio.Group>
         </div>
-        {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="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 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>
   );
   return (
-    <>
-      <div id="d-node-scope">
-        <div className="scope-title">{scopeName}筛选：</div>
-        <Popover
-          trigger={['click']}
-          visible={popVisible}
-          content={clickContent}
-          placement="bottomRight"
-          overlayClassName={`d-node-scope-popover ${hasCustomScope ? 'large-size' : ''}`}
-          onVisibleChange={visibleChange}
-        >
-          <span className="input-span">
-            <Input
-              className={isTop ? 'relativeTime d-node-scope-input' : 'absoluteTime d-node-scope-input'}
-              value={inputValue}
-              readOnly={true}
-              suffix={<IconFont type="icon-jiantou1" rotate={90} style={{ color: '#74788D' }}></IconFont>}
-            />
-          </span>
-        </Popover>
-      </div>
-    </>
+    <div id="d-node-scope">
+      <div className="scope-title">{scopeName}筛选：</div>
+      <Popover
+        trigger={['click']}
+        visible={popVisible}
+        content={clickContent}
+        placement="bottomRight"
+        overlayClassName="d-node-scope-popover large-size"
+        onVisibleChange={visibleChange}
+      >
+        <span className="input-span">
+          <Input
+            className={isTop ? 'relativeTime d-node-scope-input' : 'absoluteTime d-node-scope-input'}
+            value={inputValue}
+            readOnly={true}
+            suffix={<IconFont type="icon-jiantou1" rotate={90} style={{ color: '#74788D' }}></IconFont>}
+          />
+        </span>
+      </Popover>
+    </div>
   );
 };
 

km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx

@@ -47,7 +47,6 @@ export interface IcustomScope {
 }
 
 export interface InodeScopeModule {
-  hasCustomScope: boolean;
   customScopeList: IcustomScope[];
   scopeName?: string;
   scopeLabel?: string;
@@ -87,7 +86,6 @@ const GRID_SIZE_OPTIONS = [
 const MetricOperateBar = ({
   metricSelect,
   nodeScopeModule = {
-    hasCustomScope: false,
     customScopeList: [],
   },
   hideNodeScope = false,

km-console/packages/layout-clusters-fe/src/components/DraggableCharts/config.tsx

@@ -4,7 +4,7 @@ import { getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfi
 const METRIC_DASHBOARD_REQ_MAP = {
   [MetricType.Broker]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Broker),
   [MetricType.Topic]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Topic),
-  [MetricType.Zookeeper]: (clusterId: string) => '',
+  [MetricType.Zookeeper]: (clusterId: string) => api.getZookeeperMetrics(clusterId),
 };
 
 export const getMetricDashboardReq = (clusterId: string, type: MetricType.Broker | MetricType.Topic | MetricType.Zookeeper) =>

km-console/packages/layout-clusters-fe/src/components/DraggableCharts/index.tsx

@@ -108,10 +108,10 @@ const DraggableCharts = (props: PropsType): JSX.Element => {
         startTime,
         endTime,
         metricsNames: selectedMetricNames,
-        topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
       },
       dashboardType === MetricType.Broker || dashboardType === MetricType.Topic
         ? {
+            topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
             [dashboardType === MetricType.Broker ? 'brokerIds' : 'topics']: curHeaderOptions?.scopeData?.isTop
               ? null
               : curHeaderOptions.scopeData.data,
@@ -233,8 +233,8 @@ const DraggableCharts = (props: PropsType): JSX.Element => {
     <div id="dashboard-drag-chart" className="topic-dashboard">
       <ChartOperateBar
         onChange={ksHeaderChange}
+        hideNodeScope={dashboardType === MetricType.Zookeeper}
         nodeScopeModule={{
-          hasCustomScope: !(dashboardType === MetricType.Zookeeper),
           customScopeList: scopeList,
           scopeName: dashboardType === MetricType.Broker ? 'Broker' : dashboardType === MetricType.Topic ? 'Topic' : 'Zookeeper',
           scopeLabel: `自定义 ${