perf:Avoid the monitoring module repeatedly requesting clusters or te…

…nants
oceanbase · Mar 20, 2024 · 1870541 · 1870541
1 parent 5b10d06
commit 1870541
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 96 deletions.
diff --git a/ui/src/components/MonitorComp/LineGraph.tsx b/ui/src/components/MonitorComp/LineGraph.tsx
@@ -26,6 +26,7 @@ export interface LineGraphProps {
   isRefresh?: boolean;
   type?: API.MonitorUseTarget;
   useFor: API.MonitorUseFor;
+  filterData?: API.ClusterItem[] | API.TenantDetail[]
 }
 
 export default function LineGraph({
@@ -37,7 +38,8 @@ export default function LineGraph({
   height = 186,
   isRefresh = false,
   type = 'DETAIL',
-  useFor
+  useFor,
+  filterData
 }: LineGraphProps) {
   const [isEmpty, setIsEmpty] = useState<boolean>(true);
   const [isloading, setIsloading] = useState<boolean>(true);
@@ -47,20 +49,23 @@ export default function LineGraph({
   // 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],
       realLabels = labels;
     if (type === 'DETAIL') {
       metricsKeys = metrics.map((metric: MetricType) => metric.key);
     }
     if (type === 'OVERVIEW') realLabels = [];
+
     return {
       groupLabels,
       labels: realLabels, // If empty, query all clusters
       metrics: metricsKeys,
       queryRange,
       type,
-      useFor
+      useFor,
+      filterData
     };
   };
 
@@ -111,8 +116,6 @@ export default function LineGraph({
     if (!isEmpty) setIsEmpty(true);
   };
 
-
-
   // filter metricsData
   const {
     data: metricsData,

diff --git a/ui/src/components/MonitorComp/index.tsx b/ui/src/components/MonitorComp/index.tsx
@@ -26,6 +26,7 @@ interface MonitorCompProps {
   type: API.MonitorUseTarget;
   groupLabels:API.LableKeys[];
   useFor?: API.MonitorUseFor;
+  filterData?: API.ClusterItem[] | API.TenantDetail[]
 }
 
 export default function MonitorComp({
@@ -35,7 +36,9 @@ export default function MonitorComp({
   type,
   queryScope,
   groupLabels,
-  useFor='cluster'
+  useFor='cluster',
+  filterData
+
 }: MonitorCompProps) {
   const { data: allMetrics } = useRequest(getAllMetrics, {
     defaultParams: [queryScope],
@@ -143,6 +146,7 @@ export default function MonitorComp({
                           groupLabels={groupLabels}
                           type={type}
                           useFor={useFor}
+                          filterData={filterData}
                         />
                       </Card>
                     ),

diff --git a/ui/src/components/moreModal/index.less b/ui/src/components/moreModal/index.less
@@ -1,30 +1,30 @@
-.moreContainer {
-  background-color: #fff;
-  position: absolute;
-  border-radius: 6px;
-  box-shadow: 0 4px 8px 0 rgba(0, 59, 141, 0.06);
-  padding: 4px;
-}
-
-.hidden {
-  // visibility: hidden;
-  // pointer-events: none;
-  display: none;
-}
+.moreModalContainer {
+  .moreContainer {
+    background-color: #fff;
+    position: absolute;
+    border-radius: 6px;
+    box-shadow: 0 4px 8px 0 rgba(0, 59, 141, 0.06);
+    padding: 4px;
+  }
+  li {
+    display: block;
+    margin: 0;
+    padding: 5px 20px;
+    cursor: pointer;
+  }
 
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-li {
-  display: block;
-  margin: 0;
-  padding: 5px 20px;
-  cursor: pointer;
-}
+  li:hover {
+    background-color: rgb(248, 250, 254);
+  }
+  .hidden {
+    // visibility: hidden;
+    // pointer-events: none;
+    display: none;
+  }
 
-li:hover {
-  background-color: rgb(248, 250, 254);
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 }
diff --git a/ui/src/components/moreModal/index.tsx b/ui/src/components/moreModal/index.tsx
@@ -16,23 +16,27 @@ export default function MoreModal({
   disable,
 }: MoreModalProps) {
   return (
-    <ul
-      ref={innerRef}
-      className={visible ? `${styles.moreContainer}` : `${styles.hidden}`}
-    >
-      {list.map((item, index) => (
-        <li
-          style={
-            disable
-              ? { color: 'rgba(0, 0, 0, 0.45)', cursor: 'not-allowed' }
-              : {}
-          }
-          onClick={!disable ? () => ItemClick(item.value as API.ModalType) : () => {}}
-          key={index}
-        >
-          {item.label}
-        </li>
-      ))}
-    </ul>
+    <div className={styles.moreModalContainer}>
+      <ul
+        ref={innerRef}
+        className={visible ? `${styles.moreContainer}` : `${styles.hidden}`}
+      >
+        {list.map((item, index) => (
+          <li
+            style={
+              disable
+                ? { color: 'rgba(0, 0, 0, 0.45)', cursor: 'not-allowed' }
+                : {}
+            }
+            onClick={
+              !disable ? () => ItemClick(item.value as API.ModalType) : () => {}
+            }
+            key={index}
+          >
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/ui/src/pages/Cluster/index.tsx b/ui/src/pages/Cluster/index.tsx
@@ -51,7 +51,10 @@ const ClusterPage: React.FC = () => {
         queryScope='OBCLUSTER_OVERVIEW' 
         type='OVERVIEW' 
         groupLabels={['ob_cluster_name']}
-        queryRange={defaultQueryRange}/>
+        queryRange={defaultQueryRange}
+        filterData={clusterList}
+        />
+
     </PageContainer>
   );
 };

diff --git a/ui/src/pages/Tenant/Detail/NewBackup/ScheduleTimeFormItem.tsx b/ui/src/pages/Tenant/Detail/NewBackup/ScheduleTimeFormItem.tsx
@@ -7,7 +7,6 @@ export default function ScheduleTimeFormItem({
   disable?: boolean;
 }) {
   return (
-    <>
       <Space direction="vertical">
         <h3>
           {intl.formatMessage({
@@ -30,6 +29,5 @@ export default function ScheduleTimeFormItem({
           <TimePicker format="HH:mm" disabled={disable} />
         </Form.Item>
       </Space>
-    </>
   );
 }
diff --git a/ui/src/pages/Tenant/Detail/NewBackup/index.less b/ui/src/pages/Tenant/Detail/NewBackup/index.less
@@ -54,3 +54,9 @@
     }
   }
 }
+
+:global {
+  .ant-picker-time-panel-column::after {
+    height: 96px !important;
+  }
+}
diff --git a/ui/src/pages/Tenant/Detail/Overview/index.less b/ui/src/pages/Tenant/Detail/Overview/index.less
@@ -18,22 +18,25 @@
     }
   }
 }
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
+.operateModalContainer {
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 
-li {
-  display: block;
-  margin: 0;
-  padding: 5px 20px;
-  cursor: pointer;
-}
+  li {
+    display: block;
+    margin: 0;
+    padding: 5px 20px;
+    cursor: pointer;
+  }
 
-li:hover {
-  background-color: rgb(248, 250, 254);
+  li:hover {
+    background-color: rgb(248, 250, 254);
+  }
 }
+
 .titleContainer {
   display: flex;
   justify-content: space-between;

diff --git a/ui/src/pages/Tenant/Detail/Overview/index.tsx b/ui/src/pages/Tenant/Detail/Overview/index.tsx
@@ -197,15 +197,17 @@ export default function TenantOverview() {
   ];
 
   const OperateListModal = () => (
-    <ul>
-      {operateListConfig
-        .filter((item) => item.isMore && item.show)
-        .map((operateItem, index) => (
-          <li key={index} onClick={operateItem.onClick}>
-            {operateItem.text}
-          </li>
-        ))}
-    </ul>
+    <div className={styles.operateModalContainer}>
+      <ul>
+        {operateListConfig
+          .filter((item) => item.isMore && item.show)
+          .map((operateItem, index) => (
+            <li key={index} onClick={operateItem.onClick}>
+              {operateItem.text}
+            </li>
+          ))}
+      </ul>
+    </div>
   );
 
   const operateSuccess = () => {

diff --git a/ui/src/pages/Tenant/index.tsx b/ui/src/pages/Tenant/index.tsx
@@ -78,6 +78,7 @@ export default function TenantPage() {
         useFor='tenant'
         groupLabels={['tenant_name','ob_cluster_name']}
         queryRange={defaultQueryRange}
+        filterData={tenantsList}
       />
     </PageContainer>
   );

diff --git a/ui/src/services/index.ts b/ui/src/services/index.ts
@@ -5,7 +5,6 @@ import { intl } from '@/utils/intl'; //@ts-nocheck
 import { request } from '@umijs/max';
 import _ from 'lodash';
 import moment from 'moment';
-import { getAllTenants } from './tenant';
 
 const obClusterPrefix = '/api/v1/obclusters';
 const clusterPrefix = '/api/v1/cluster';
@@ -390,41 +389,39 @@ const setMetricNameFromLabels = (labels:API.MetricsLabels)=>{
   return `${tenantName}(${clustetName})`
 }
 
-const filterMetricsData = async (
+const filterMetricsData = (
   type: 'tenant' | 'cluster',
   metricsData: any,
+  filterData: API.ClusterItem[] | API.TenantDetail[],
 ) => {
-  const request = type === 'cluster' ? getObclusterListReq : getAllTenants;
-  const { data, successful } = await request();
-  if (successful) {
-    return metricsData.filter((item) => {
-      let targetName =
-        item?.metric?.labels?.find(
-          (label) =>
-            label.key ===
-            (type === 'tenant' ? 'tenant_name' : 'ob_cluster_name'),
-        ).value || '';
-      if(type === 'cluster'){
-        return !!data.find((cluster)=>cluster.clusterName === targetName);
-      }else{
-        return !!data.find((tenant)=>tenant.tenantName === targetName);
-      } 
-    });
-  }
-  return metricsData;
+  return metricsData.filter((item) => {
+    let targetName =
+      item?.metric?.labels?.find(
+        (label) =>
+          label.key === (type === 'tenant' ? 'tenant_name' : 'ob_cluster_name'),
+      ).value || '';
+    if (type === 'cluster') {
+      return !!filterData.find((cluster) => cluster.clusterName === targetName);
+    } else {
+      return !!filterData.find((tenant) => tenant.tenantName === targetName);
+    }
+  });
 };
 
 export async function queryMetricsReq({
   useFor,
   type,
+  filterData,
   ...data
 }: API.QueryMetricsType) {
   const r = await request('/api/v1/metrics/query', {
     method: 'POST',
     data,
   });
   if (r.successful) {
-    r.data = await filterMetricsData(useFor,r.data);
+    if(filterData){
+      r.data = filterMetricsData(useFor, r.data, filterData);
+    }
     if (!r.data || !r.data.length) return [];
     r.data.forEach((metric) => {
       metric.values.forEach((item) => {

diff --git a/ui/src/services/typings.d.ts b/ui/src/services/typings.d.ts
@@ -173,6 +173,7 @@ declare namespace API {
     queryRange: { endTimestamp: number; startTimestamp: number; step: number };
     type: MonitorUseTarget;
     useFor: MonitorUseFor;
+    filterData?: API.ClusterItem[] | API.TenantDetail[];
   };
 
   type ClusterMode = 'NORMAL' | 'STANDALONE' | 'SERVICE'