service list chart lazy load

shell/app/common/components/card-list/index.tsx

@@ -19,6 +19,7 @@ import { get } from 'lodash';
 import classnames from 'classnames';
 import EmptyHolder from 'common/components/empty-holder';
 import ErdaIcon from 'common/components/erda-icon';
+import { useInViewport } from 'common/use-hooks';
 
 interface CardColumnsProps<T> {
   dataIndex: keyof T | string[];
@@ -41,9 +42,10 @@ interface IProps<T = Record<string, any>> {
   rowClassName?: string;
   columns: CardColumnsProps<T>[];
   emptyHolder?: React.ReactNode;
+  onViewChange?: (data: T, flag?: boolean) => void;
 }
 
-const renderChild = <T,>(record: T, columns: CardColumnsProps<T>[], index: number) => {
+const renderChild = <T extends unknown>(record: T, columns: CardColumnsProps<T>[], index: number) => {
   return columns.map((column) => {
     let nodes: React.ReactNode = get(record, column.dataIndex);
     if (column.render) {
@@ -64,17 +66,47 @@ const renderChild = <T,>(record: T, columns: CardColumnsProps<T>[], index: numbe
   });
 };
 
-const CardList = <T,>({
+interface IRowProps<T> {
+  rowClass?: string;
+  rowClick: () => void;
+  columns: CardColumnsProps<T>[];
+  record: T;
+  index: number;
+  onViewChange?: (data: T, flag?: boolean) => void;
+}
+
+const RowItem = <T extends unknown>({
+  rowClick,
+  rowClass,
+  record,
+  columns,
+  index,
+  onViewChange,
+}: IRowProps<T>) => {
+  const rowRef = React.useRef();
+  const [isInView] = useInViewport(rowRef);
+  React.useEffect(() => {
+    onViewChange?.(record, isInView);
+  }, [isInView, record]);
+  return (
+    <Row ref={rowRef} onClick={rowClick} className={rowClass}>
+      {renderChild<T>(record, columns, index)}
+    </Row>
+  );
+};
+
+const CardList = <T extends unknown>({
   loading,
   dataSource,
-  rowKey = 'key',
+  rowKey,
   rowClassName,
   columns,
   rowClick,
   slot,
   size = 'default',
   emptyHolder,
   onRefresh,
+  onViewChange,
 }: IProps<T>) => {
   return (
     <div className="card-list flex flex-1 flex-col bg-white shadow pb-2">
@@ -114,15 +146,17 @@ const CardList = <T,>({
                   },
                 );
                 return (
-                  <Row
-                    onClick={() => {
+                  <RowItem<T>
+                    key={rowId}
+                    rowClass={rowClass}
+                    rowClick={() => {
                       rowClick?.(record);
                     }}
-                    key={rowId}
-                    className={rowClass}
-                  >
-                    {renderChild<T>(record, columns, index)}
-                  </Row>
+                    columns={columns}
+                    index={index}
+                    record={record}
+                    onViewChange={onViewChange}
+                  />
                 );
               })
             : emptyHolder || <EmptyHolder relative />}

shell/app/common/use-hooks.tsx

@@ -932,3 +932,52 @@ export const useFullScreen: IUseFullScreen = (target, options) => {
     },
   ];
 };
+
+type IUseInViewPort = (
+  target: BasicTarget,
+  options?: {
+    rootMargin?: string;
+    threshold?: number | number[];
+    root?: BasicTarget<Element>;
+  },
+) => [boolean | undefined, number | undefined];
+
+export const useInViewport: IUseInViewPort = (target, options) => {
+  const [state, setState] = React.useState<boolean>();
+  const [ratio, setRatio] = React.useState<number>();
+
+  React.useEffect(
+    () => {
+      const el = getTargetElement(target);
+      if (!el) {
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            setRatio(entry.intersectionRatio);
+            if (entry.isIntersecting) {
+              setState(true);
+            } else {
+              setState(false);
+            }
+          }
+        },
+        {
+          ...options,
+          root: getTargetElement(options?.root),
+        },
+      );
+
+      observer.observe(el);
+
+      return () => {
+        observer.disconnect();
+      };
+    },
+    []
+  );
+
+  return [state, ratio];
+};

shell/app/modules/msp/env-overview/service-list/pages/index.tsx

@@ -217,8 +217,11 @@ interface IState {
 const MicroServiceOverview = () => {
   const [data, dataLoading] = getServices.useState();
   const tenantId = routeInfoStore.useStore((s) => s.params.terminusKey);
-  const overviewList = getAnalyzerOverview.useData();
+  const [overviewList, setOverviewList] = React.useState<MSP_SERVICES.SERVICE_LIST_CHART[]>([]);
   const serViceCount = getServiceCount.useData();
+  const charts = React.useRef<{
+    [k: string]: { status: 'null' | 'pending' | 'success' | 'error'; data: MSP_SERVICES.SERVICE_LIST_CHART[] };
+  }>({});
   const [{ pagination, searchValue, serviceStatus, startTime, endTime }, updater, update] = useUpdate<IState>({
     searchValue: '',
     startTime: moment().subtract(1, 'h').valueOf(),
@@ -248,14 +251,16 @@ const MicroServiceOverview = () => {
   }, [getServicesList]);
 
   React.useEffect(() => {
-    const serviceIdList = data?.list.map((item) => item?.id);
-    if (serviceIdList?.length) {
-      getAnalyzerOverview.fetch({
-        view: 'service_overview',
-        tenantId,
-        serviceIds: serviceIdList,
-      });
-    }
+    setOverviewList([]);
+    charts.current = data?.list.reduce((prev, next) => {
+      return {
+        ...prev,
+        [next.id]: {
+          status: 'null',
+          data: [],
+        },
+      };
+    }, {});
   }, [data]);
 
   const onPageChange = (current: number, pageSize?: number) => {
@@ -280,6 +285,35 @@ const MicroServiceOverview = () => {
     getServicesList();
     getServiceCount({ tenantId });
   }, [getServicesList]);
+
+  const handleViewChange = React.useCallback(
+    ({ id }: IListItem, flag?: boolean) => {
+      if (flag && ['null', 'error'].includes(charts.current[id].status)) {
+        charts.current[id].status = 'pending';
+        getAnalyzerOverview
+          .fetch({
+            startTime,
+            endTime,
+            serviceIds: [id],
+            tenantId,
+            view: 'service_overview',
+          })
+          .then((res) => {
+            charts.current[id] = {
+              status: res.success ? 'success' : 'error',
+              data: res.data?.list || [],
+            };
+            const list = Object.keys(charts.current)
+              .filter((serviceId) => charts.current[serviceId].status === 'success')
+              .map((serviceId) => {
+                return charts.current[serviceId].data[0];
+              });
+            setOverviewList(list);
+          });
+      }
+    },
+    [tenantId, endTime, startTime],
+  );
 
   const columns: Array<CardColumnsProps<IListItem>> = [
     {
@@ -389,7 +423,7 @@ const MicroServiceOverview = () => {
 
   const list = React.useMemo(() => {
     return (data?.list ?? []).map((item) => {
-      const views = overviewList?.list.find((t) => t.serviceId === item.id)?.views ?? [];
+      const views = overviewList.find((t) => t.serviceId === item.id)?.views ?? [];
       return {
         ...item,
         aggregateMetric: {
@@ -400,7 +434,7 @@ const MicroServiceOverview = () => {
         views,
       };
     });
-  }, [data?.list, overviewList?.list]);
+  }, [data?.list, overviewList]);
 
   const tabsOptions = React.useMemo(
     () =>
@@ -459,6 +493,7 @@ const MicroServiceOverview = () => {
         size="small"
         columns={columns}
         dataSource={list}
+        onViewChange={handleViewChange}
         rowClick={({ id, name }) => {
           listDetail(id, name);
         }}