From 1870541ac7a1231ff1438ea3f5e18e066c7e968d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=B4=E6=99=96?= <2689991790@qq.com> Date: Wed, 20 Mar 2024 16:37:29 +0800 Subject: [PATCH] perf:Avoid the monitoring module repeatedly requesting clusters or tenants --- ui/src/components/MonitorComp/LineGraph.tsx | 11 ++-- ui/src/components/MonitorComp/index.tsx | 6 ++- ui/src/components/moreModal/index.less | 54 +++++++++---------- ui/src/components/moreModal/index.tsx | 40 +++++++------- ui/src/pages/Cluster/index.tsx | 5 +- .../Detail/NewBackup/ScheduleTimeFormItem.tsx | 2 - .../pages/Tenant/Detail/NewBackup/index.less | 6 +++ .../pages/Tenant/Detail/Overview/index.less | 29 +++++----- ui/src/pages/Tenant/Detail/Overview/index.tsx | 20 +++---- ui/src/pages/Tenant/index.tsx | 1 + ui/src/services/index.ts | 39 +++++++------- ui/src/services/typings.d.ts | 1 + 12 files changed, 118 insertions(+), 96 deletions(-) diff --git a/ui/src/components/MonitorComp/LineGraph.tsx b/ui/src/components/MonitorComp/LineGraph.tsx index a4d61e330..b8487414f 100644 --- 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(true); const [isloading, setIsloading] = useState(true); @@ -47,6 +49,7 @@ 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(0); + const getQueryParms = () => { let metricsKeys: string[] = [metrics[0].key], realLabels = labels; @@ -54,13 +57,15 @@ export default function LineGraph({ 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 index 2b611d4ec..1f0292c4d 100644 --- 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} /> ), diff --git a/ui/src/components/moreModal/index.less b/ui/src/components/moreModal/index.less index a3bb8fc32..52f90256d 100644 --- 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 index 4758144fe..ea588f34a 100644 --- 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 ( -
    - {list.map((item, index) => ( -
  • ItemClick(item.value as API.ModalType) : () => {}} - key={index} - > - {item.label} -
    • - ))} -
+
+
    + {list.map((item, index) => ( +
  • ItemClick(item.value as API.ModalType) : () => {} + } + key={index} + > + {item.label} +
    • + ))} +
+
); } diff --git a/ui/src/pages/Cluster/index.tsx b/ui/src/pages/Cluster/index.tsx index ea2491880..bc548816b 100644 --- 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} + /> + ); }; diff --git a/ui/src/pages/Tenant/Detail/NewBackup/ScheduleTimeFormItem.tsx b/ui/src/pages/Tenant/Detail/NewBackup/ScheduleTimeFormItem.tsx index 43fe1b89c..4913512da 100644 --- 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 ( - <>

{intl.formatMessage({ @@ -30,6 +29,5 @@ export default function ScheduleTimeFormItem({ - ); } diff --git a/ui/src/pages/Tenant/Detail/NewBackup/index.less b/ui/src/pages/Tenant/Detail/NewBackup/index.less index 4b2f5b6df..f12a85def 100644 --- 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 index dea8cf946..3f2b8b711 100644 --- 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 index 3639d3b13..8a71fb710 100644 --- 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 = () => ( -
    - {operateListConfig - .filter((item) => item.isMore && item.show) - .map((operateItem, index) => ( -
  • - {operateItem.text} -
    • - ))} -
+
+
    + {operateListConfig + .filter((item) => item.isMore && item.show) + .map((operateItem, index) => ( +
  • + {operateItem.text} +
    • + ))} +
+
); const operateSuccess = () => { diff --git a/ui/src/pages/Tenant/index.tsx b/ui/src/pages/Tenant/index.tsx index 214ac1d8e..c9b1e6bc9 100644 --- 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} /> ); diff --git a/ui/src/services/index.ts b/ui/src/services/index.ts index 18da5d0b3..36fe0e180 100644 --- 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,33 +389,29 @@ 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', { @@ -424,7 +419,9 @@ export async function queryMetricsReq({ 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 index 145755821..0f6bf180c 100644 --- 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'