fix:Filter monitored parameters (#255)

* fix:Filter monitored parameters

* fix:Filter out the failed cluster

ui/src/components/MonitorComp/LineGraph.tsx

@@ -44,7 +44,8 @@ export default function LineGraph({
   const lineGraphRef = useRef(null);
   const lineInstanceRef = useRef<Line | null>(null);
   const [inViewport] = useInViewport(lineGraphRef);
-  // 进入可见区域次数,只在第一次进入可见区域发起网络请求
+  // The number of times to enter the visible area, 
+  //only initiate a network request when entering the visible area for the first time
   const [inViewportCount, setInViewportCount] = useState<number>(0);
   const getQueryParms = () => {
     let metricsKeys: string[] = [metrics[0].key],
@@ -55,7 +56,7 @@ export default function LineGraph({
     if (type === 'OVERVIEW') realLabels = [];
     return {
       groupLabels,
-      labels: realLabels, //为空则查询全部集群
+      labels: realLabels, // If empty, query all clusters
       metrics: metricsKeys,
       queryRange,
       type,
@@ -110,6 +111,9 @@ export default function LineGraph({
     if (!isEmpty) setIsEmpty(true);
   };
 
+
+
+  // filter metricsData
   const {
     data: metricsData,
     run: queryMetrics,
@@ -137,7 +141,7 @@ export default function LineGraph({
       lineInstanceDestroy();
     },
   });
-
+  
   useUpdateEffect(() => {
     if (!isEmpty) {
       lineInstanceRender(metricsData);
@@ -156,7 +160,7 @@ export default function LineGraph({
     }
   }, [inViewportCount]);
 
-  //开启实时模式后处理
+  // Process after turning on real-time mode
   useUpdateEffect(() => {
     if (!isRefresh) {
       if (inViewport) {

ui/src/components/MonitorComp/index.tsx

@@ -8,13 +8,15 @@ import { getAllMetrics } from '@/services';
 import LineGraph,{ LineGraphProps,MetricType } from './LineGraph';
 import styles from './index.less';
 
-//查询的label
-// ob_cluster_name
-// ob_cluster_id
-// tenant_name
-// tenant_id
-// svr_ip
-// obzone
+/**
+ * Queryable label:
+ * ob_cluster_name
+ * ob_cluster_id
+ * tenant_name
+ * tenant_id
+ * svr_ip
+ * obzone
+ */
 
 interface MonitorCompProps {
   filterLabel: API.MetricsLabels;

ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx

@@ -1,5 +1,5 @@
 import { intl } from '@/utils/intl'; //@ts-nocheck
-import { Col, Table, Tag, message, Card } from 'antd';
+import { Button,Card,Col,Table,Tag,message } from 'antd';
 import type { ColumnType } from 'antd/es/table';
 
 import showDeleteConfirm from '@/components/customModal/DeleteModal';
@@ -13,6 +13,7 @@ interface ZoneTableProps {
   chooseZoneRef: React.MutableRefObject<string>;
   typeRef: React.MutableRefObject<API.ModalType>;
   setChooseServerNum: React.Dispatch<React.SetStateAction<number>>;
+  clusterStatus:'running' | 'failed' | 'operating'
 }
 
 export default function ZoneTable({
@@ -21,6 +22,7 @@ export default function ZoneTable({
   chooseZoneRef,
   typeRef,
   setChooseServerNum,
+  clusterStatus
 }: ZoneTableProps) {
   const getZoneColumns = (remove, clickScale) => {
     const columns: ColumnType<API.Zone> = [
@@ -80,20 +82,22 @@ export default function ZoneTable({
         render: (value, record) => {
           return (
             <>
-              <a
+              <Button
                 style={{ marginRight: 10 }}
                 onClick={() => {
                   clickScale(record.zone);
                   setChooseServerNum(record.replicas);
                 }}
+                disabled={clusterStatus === 'failed'}
+                type="link"
               >
                 {intl.formatMessage({
                   id: 'OBDashboard.Detail.Overview.ZoneTable.Scale',
                   defaultMessage: '扩缩容',
                 })}
-              </a>
-              <a
-                style={{ color:'#ff4b4b' }}
+              </Button>
+              <Button
+                style={clusterStatus !== 'failed' ? { color: '#ff4b4b' } : {}}
                 onClick={() => {
                   showDeleteConfirm({
                     onOk: () => remove(record.zone),
@@ -103,12 +107,14 @@ export default function ZoneTable({
                     }),
                   });
                 }}
+                disabled={clusterStatus === 'failed'}
+                type="link"
               >
                 {intl.formatMessage({
                   id: 'OBDashboard.Detail.Overview.ZoneTable.Delete',
                   defaultMessage: '删除',
                 })}
-              </a>
+              </Button>
             </>
           );
         },

ui/src/pages/Cluster/Detail/Overview/helper.ts

@@ -1,5 +1,5 @@
 // Functions without UI
-import { CLUSTER_INFO_CONFIG } from "@/constants";
+import { CLUSTER_INFO_CONFIG, RESULT_STATUS } from "@/constants";
 
 /**
  * Get the namespace, name and cluster name or tenant name through the path of the url
@@ -36,16 +36,18 @@ const getNSName = () => {
 // if there is cluster｜zone｜server whose status isn't running,the return status is operating.
 const formatClusterData = (responseData: any): API.ClusterDetail => {
   const res: any = {
+    status:responseData.status,
     info: {},
     metrics: {},
     zones: [],
     servers: [],
   };
-  let status: 'running' | 'operating' = 'running';
+  // let status: 'running' | 'operating' = 'running';
+
   for (let key of Object.keys(responseData)) {
-    if (key === 'status' && responseData[key] !== 'running') {
-      status = 'operating';
-    }
+    // if (key === 'status' && !RESULT_STATUS.includes(responseData[key])) {
+    //   status = 'operating';
+    // }
     if(CLUSTER_INFO_CONFIG.includes(key)){
       res['info'][key] = responseData[key];
     }
@@ -69,17 +71,16 @@ const formatClusterData = (responseData: any): API.ClusterDetail => {
         }
         return temp;
       });
-      for (let zone of zones) {
-        if (zone.status !== 'running') status = 'operating';
-      }
-      for (let server of servers) {
-        if (server.status !== 'running') status = 'operating';
-      }
+      // for (let zone of zones) {
+      //   if (!RESULT_STATUS.includes(zone.status)) status = 'operating';
+      // }
+      // for (let server of servers) {
+      //   if (!RESULT_STATUS.includes(server.status)) status = 'operating';
+      // }
       res['zones'] = zones;
       res['servers'] = servers;
     }
   }
-  res.status = status;
   return res;
 };
 

ui/src/pages/Cluster/Detail/Overview/index.tsx

@@ -42,7 +42,6 @@ const ClusterOverview: React.FC = () => {
       },
     },
   );
-  const isOperating = clusterDetail && clusterDetail.status === 'operating';
   const handleDelete = async () => {
     const res = await deleteObcluster({ ns, name });
     if (res.successful) {
@@ -77,20 +76,34 @@ const ClusterOverview: React.FC = () => {
         defaultMessage: '集群概览',
       }),
       extra: [
-        <Button onClick={handleAddZone} disabled={isOperating} key="1">
+        <Button
+          onClick={handleAddZone}
+          disabled={
+            clusterDetail?.status === 'operating' ||
+            clusterDetail?.status === 'failed'
+          }
+          key="1"
+        >
           {intl.formatMessage({
             id: 'dashboard.Detail.Overview.AddZone',
             defaultMessage: '新增Zone',
           })}
         </Button>,
-        <Button key="2" disabled={isOperating} onClick={handleUpgrade}>
+        <Button
+          key="2"
+          disabled={
+            clusterDetail?.status === 'operating' ||
+            clusterDetail?.status === 'failed'
+          }
+          onClick={handleUpgrade}
+        >
           {intl.formatMessage({
             id: 'OBDashboard.Detail.Overview.Upgrade',
             defaultMessage: '升级',
           })}
         </Button>,
         <Button
-          disabled={isOperating}
+          disabled={clusterDetail?.status === 'operating'}
           onClick={() =>
             showDeleteConfirm({
               onOk: handleDelete,
@@ -132,6 +145,7 @@ const ClusterOverview: React.FC = () => {
 
         {clusterDetail && (
           <ZoneTable
+            clusterStatus={clusterDetail.status}
             zones={clusterDetail.zones as API.Zone[]}
             chooseZoneRef={chooseZoneName}
             setVisible={setOperateModalVisible}

ui/src/pages/Cluster/index.tsx

@@ -9,7 +9,7 @@ import MonitorComp from '@/components/MonitorComp';
 import ClusterList from './ClusterList';
 // import Monitor from './Monitor';
 import { getObclusterListReq } from '@/services';
-import type { LabelType, QueryRangeType } from '../../components/MonitorDetail';
+import type { LabelType,QueryRangeType } from '../../components/MonitorDetail';
 
 const defaultQueryRange:QueryRangeType = {
   step: 20,
@@ -22,17 +22,20 @@ const ClusterPage: React.FC = () => {
   const navigate = useNavigate();
   const [clusterNames, setClusterNames] = useState<LabelType[]>([]);
 
-  const { data: clusterList } = useRequest(getObclusterListReq, {
-    onSuccess: (data) => {
-      let clusterNames: LabelType[] = data.map((item) => ({
-        key: 'ob_cluster_name',
-        value: item.clusterName,
-      }));
-      setClusterNames(clusterNames);
+  const { data: clusterListRes } = useRequest(getObclusterListReq, {
+    onSuccess: ({ successful, data }) => {
+      if (successful) {
+        let clusterNames: LabelType[] = data.map((item) => ({
+          key: 'ob_cluster_name',
+          value: item.clusterName,
+        }));
+        setClusterNames(clusterNames);
+      }
     },
   });
 
   const handleAddCluster = () => navigate('new');
+  const clusterList = clusterListRes?.data;
 
   return (
     <PageContainer>

ui/src/pages/Tenant/Detail/Backup/BackupConfiguration.tsx

@@ -1,32 +1,32 @@
+import showDeleteConfirm from '@/components/customModal/DeleteModal';
 import { BACKUP_RESULT_STATUS } from '@/constants';
 import { usePublicKey } from '@/hook/usePublicKey';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
 import {
-  deletePolicyOfTenant,
-  updateBackupPolicyOfTenant,
+deletePolicyOfTenant,
+updateBackupPolicyOfTenant,
 } from '@/services/tenant';
 import { intl } from '@/utils/intl';
 import { useRequest } from 'ahooks';
 import {
-  Button,
-  Card,
-  Col,
-  Descriptions,
-  Form,
-  InputNumber,
-  Popconfirm,
-  Row,
-  Select,
-  Space,
-  message,
+Button,
+Card,
+Col,
+Descriptions,
+Form,
+InputNumber,
+Row,
+Select,
+Space,
+message
 } from 'antd';
 import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
+import { useRef,useState } from 'react';
 import {
-  checkIsSame,
-  checkScheduleDatesHaveFull,
-  formatBackupForm,
-  formatBackupPolicyData,
+checkIsSame,
+checkScheduleDatesHaveFull,
+formatBackupForm,
+formatBackupPolicyData,
 } from '../../helper';
 import BakMethodsList from '../NewBackup/BakMethodsList';
 import SchduleSelectFormItem from '../NewBackup/SchduleSelectFormItem';
@@ -246,24 +246,24 @@ export default function BackupConfiguration({
                   defaultMessage: '暂停',
                 })}
           </Button>
-          <Popconfirm
-            onConfirm={() => deleteBackupPolicyReq({ ns, name })}
-            title={intl.formatMessage({
-              id: 'Dashboard.Detail.Backup.BackupConfiguration.DeleteBackup',
-              defaultMessage: '删除备份',
-            })}
-            description={intl.formatMessage({
-              id: 'Dashboard.Detail.Backup.BackupConfiguration.AreYouSureYouWant',
-              defaultMessage: '确定要删除该备份策略吗？',
-            })}
+          <Button
+            type="primary"
+            danger
+            onClick={() =>
+              showDeleteConfirm({
+                onOk: () => deleteBackupPolicyReq({ ns, name }),
+                title: intl.formatMessage({
+                  id: 'Dashboard.Detail.Backup.BackupConfiguration.AreYouSureYouWant',
+                  defaultMessage: '确定要删除该备份策略吗？',
+                }),
+              })
+            }
           >
-            <Button type="primary" danger>
-              {intl.formatMessage({
-                id: 'Dashboard.Detail.Backup.BackupConfiguration.Delete',
-                defaultMessage: '删除',
-              })}
-            </Button>
-          </Popconfirm>
+            {intl.formatMessage({
+              id: 'Dashboard.Detail.Backup.BackupConfiguration.Delete',
+              defaultMessage: '删除',
+            })}
+          </Button>
         </Space>
       }
     >

ui/src/pages/Tenant/Detail/NewBackup/index.tsx

@@ -26,7 +26,7 @@ export default function NewBackup() {
   ];
 
   const handleSubmit = async (values: any) => {
-    if (!checkScheduleDatesHaveFull(values)) {
+    if (!checkScheduleDatesHaveFull(values.scheduleDates)) {
       message.warning(
         intl.formatMessage({
           id: 'Dashboard.Detail.NewBackup.ConfigureAtLeastOneFull',