From c57eaf6227e465c044e27d53c92c4ef550a828ba Mon Sep 17 00:00:00 2001 From: Juan Escalada <97265671+jescalada@users.noreply.github.com> Date: Thu, 1 Aug 2024 09:55:13 -0700 Subject: [PATCH] Add "Load More" button for Metrics table in Runs Overview tab (#110) * Add index/count based fetching for useRunMetricsBatch * Add quick fix for alignment config error * Add preliminary infinite scrolling properties * Add Load More button to Card * Fix and clean up useRunMetricsBatch hook * Type annotations and cleanup * Clean up old changes * Fix styling and add dynamic metric count to button * Fix broken test date check --- src/e2e/Dashboard/DashboardContent.spec.ts | 11 ++++-- src/src/components/kit/Card/Card.d.ts | 3 ++ src/src/components/kit/Card/Card.scss | 5 +++ src/src/components/kit/Card/Card.tsx | 17 ++++++++- .../RunOverviewTab/RunOverviewTab.tsx | 13 +++++++ .../MetricsCard/RunOverviewTabMetricsCard.tsx | 11 ++++-- .../RunDetail/hooks/useRunMetricsBatch.tsx | 35 +++++++++++++------ 7 files changed, 79 insertions(+), 16 deletions(-) diff --git a/src/e2e/Dashboard/DashboardContent.spec.ts b/src/e2e/Dashboard/DashboardContent.spec.ts index 4551e684..c5716c13 100644 --- a/src/e2e/Dashboard/DashboardContent.spec.ts +++ b/src/e2e/Dashboard/DashboardContent.spec.ts @@ -120,9 +120,14 @@ test.describe('Dashboard', () => { const month = date.getUTCMonth() + 1; // getUTCMonth() is zero-based const day = date.getUTCDate(); - const expectedText = `datetime(${year},${month},${day})<=run.created_at void; + loadMoreText?: string; } diff --git a/src/src/components/kit/Card/Card.scss b/src/src/components/kit/Card/Card.scss index b70ac8d4..20e834cd 100644 --- a/src/src/components/kit/Card/Card.scss +++ b/src/src/components/kit/Card/Card.scss @@ -16,6 +16,11 @@ margin-top: $space-xxxs; margin-bottom: $space-xxxs; } + &__loadMoreButton { + margin-top: $space-md; + margin-bottom: $space-sm * -1; + margin-left: 0; + } } &__tableWrapper { height: toRem(356px); diff --git a/src/src/components/kit/Card/Card.tsx b/src/src/components/kit/Card/Card.tsx index 41ef7fd8..72c1f9d2 100644 --- a/src/src/components/kit/Card/Card.tsx +++ b/src/src/components/kit/Card/Card.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import { Text } from 'components/kit'; +import { Button, Text } from 'components/kit'; import DataList from 'components/kit/DataList'; import { ICardProps } from './Card.d'; @@ -29,6 +29,9 @@ function Card({ className, dataListProps, children, + loadMore, + loadMoreHandler, + loadMoreText, }: ICardProps): React.FunctionComponentElement { const tableRef = React.useRef(null); @@ -48,6 +51,18 @@ function Card({ {subtitle} )} + {loadMore && loadMoreHandler && ( + + + + )} {children || (
diff --git a/src/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx b/src/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx index 21396e85..5805cc61 100644 --- a/src/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx +++ b/src/src/pages/RunDetail/RunOverviewTab/RunOverviewTab.tsx @@ -26,10 +26,15 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) { const overviewSectionRef = React.useRef(null); const overviewSectionContentRef = React.useRef(null); const [containerHeight, setContainerHeight] = React.useState(0); + const METRICS_FETCH_COUNT = 500; + + const [startIndex, setStartIndex] = React.useState(0); useRunMetricsBatch({ runTraces: runData.runTraces, runHash, + startIndex, + count: METRICS_FETCH_COUNT, }); React.useEffect(() => { @@ -71,6 +76,12 @@ function RunOverviewTab({ runData, runHash }: IRunOverviewTabProps) { sidebarRef?.current?.scrollTo(0, e.target.scrollTop); } + function fetchMoreMetrics() { + if (runData.runMetricsBatch.length > startIndex + 1) { + setStartIndex((prevIndex) => prevIndex + METRICS_FETCH_COUNT); + } + } + return (
)} diff --git a/src/src/pages/RunDetail/RunOverviewTab/components/MetricsCard/RunOverviewTabMetricsCard.tsx b/src/src/pages/RunDetail/RunOverviewTab/components/MetricsCard/RunOverviewTabMetricsCard.tsx index fede35b7..48ab4ba6 100644 --- a/src/src/pages/RunDetail/RunOverviewTab/components/MetricsCard/RunOverviewTabMetricsCard.tsx +++ b/src/src/pages/RunDetail/RunOverviewTab/components/MetricsCard/RunOverviewTabMetricsCard.tsx @@ -16,10 +16,14 @@ function RunOverviewTabMetricsCard({ isLoading, runBatch, type, + totalMetrics = 0, + loadMoreHandler, }: { isLoading: boolean; runBatch: any; type: 'metric' | 'systemMetric'; + totalMetrics?: number; + loadMoreHandler?: () => void; }) { const tableData = React.useMemo(() => { if (runBatch) { @@ -49,7 +53,7 @@ function RunOverviewTabMetricsCard({ tint={50} className='RunOverviewTab__cardBox__tableTitleCount' > - ({runBatch?.length}) + ({totalMetrics}) ), @@ -92,7 +96,7 @@ function RunOverviewTabMetricsCard({ ), }, ], - [runBatch], + [totalMetrics], ); return ( @@ -116,6 +120,9 @@ function RunOverviewTabMetricsCard({ title: 'No Results', }, }} + loadMore={loadMoreHandler && totalMetrics > runBatch?.length} + loadMoreHandler={loadMoreHandler} + loadMoreText={`Load More (${runBatch?.length}/${totalMetrics})`} /> ); diff --git a/src/src/pages/RunDetail/hooks/useRunMetricsBatch.tsx b/src/src/pages/RunDetail/hooks/useRunMetricsBatch.tsx index 2c256ac0..a0b5136c 100644 --- a/src/src/pages/RunDetail/hooks/useRunMetricsBatch.tsx +++ b/src/src/pages/RunDetail/hooks/useRunMetricsBatch.tsx @@ -2,20 +2,35 @@ import React from 'react'; import runDetailAppModel from 'services/models/runs/runDetailAppModel'; -function useRunMetricsBatch({ runTraces, runHash }: any) { +function useRunMetricsBatch({ + runTraces, + runHash, + startIndex = 0, + count = 500, // Error occurs if count is greater than 1000 +}: { + runTraces: any; + runHash: string; + startIndex?: number; + count?: number; +}) { React.useEffect(() => { - const runsBatchRequestRef = runDetailAppModel.getRunMetricsBatch( - runTraces.metric, - runHash, - ); + const fetchMetricsBatch = () => { + const runsBatchRequestRef = runDetailAppModel.getRunMetricsBatch( + startIndex !== undefined && count + ? runTraces.metric.slice(startIndex, startIndex + count) + : runTraces.metric, + runHash, + ); - runsBatchRequestRef.call(); + runsBatchRequestRef.call(); - return () => { - runsBatchRequestRef.abort(); + return () => { + runsBatchRequestRef.abort(); + }; }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [runTraces, runHash]); + + fetchMetricsBatch(); + }, [runTraces, runHash, startIndex, count]); } export default useRunMetricsBatch;