address performance issues w/passrate

buildbarn · Jan 21, 2025 · 1777043 · 1777043
1 parent 98c3593
commit 1777043
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 117 deletions.
diff --git a/config/portal.jsonnet b/config/portal.jsonnet
@@ -7,5 +7,6 @@
   grpcServers: [{
     listenAddresses: [':8082'],
     authenticationPolicy: { allow: {} },
+    maximumReceivedMessageSizeBytes: 10*1024*1024
   }],
 }
diff --git a/frontend/src/app/targets/page.tsx b/frontend/src/app/targets/page.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Content from '@/components/Content';
 import PortalCard from '@/components/PortalCard';
-import { Space } from 'antd';
+import { Alert, Space } from 'antd';
 import { DeploymentUnitOutlined } from '@ant-design/icons';
 import TargetGrid from '@/components/Targets/TargetGrid';
 
@@ -14,7 +14,12 @@ const Page: React.FC = () => {
                 <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                     <PortalCard
                         icon={<DeploymentUnitOutlined />}
-                        titleBits={[<span key="title">Targets Overview</span>]}>
+                        extraBits={[<Alert
+                            showIcon
+                            message = "Search by label to further refine your result"
+                            type = "info"
+                          />]}
+                        titleBits={[<span key="title">Targets Overview  </span>]}>
                         <TargetGrid />
                     </PortalCard>
                 </Space >

diff --git a/frontend/src/app/tests/page.tsx b/frontend/src/app/tests/page.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Content from '@/components/Content';
 import PortalCard from '@/components/PortalCard';
-import { Space } from 'antd';
+import { Alert, Space } from 'antd';
 import { ExperimentFilled } from '@ant-design/icons';
 import TestGrid from '@/components/TestGrid';
 
@@ -14,6 +14,11 @@ const Page: React.FC = () => {
                 <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                     <PortalCard
                         icon={<ExperimentFilled />}
+                        extraBits={[<Alert
+                            showIcon
+                            message = "Search by label to further refine your result"
+                            type = "info"
+                          />]}
                         titleBits={[<span key="title">Tests Overview</span>]}>
                         <TestGrid />
                     </PortalCard>

diff --git a/frontend/src/components/Targets/TargetGrid/index.tsx b/frontend/src/components/Targets/TargetGrid/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { TableColumnsType } from "antd/lib"
-import { Space, Row, Statistic, Table, TableProps, TablePaginationConfig, Pagination } from 'antd';
+import { Space, Row, Statistic, Table, TableProps, TablePaginationConfig, Pagination, Alert } from 'antd';
 import { TestStatusEnum } from '../../TestStatusTag';
 import type { StatisticProps } from "antd/lib";
 import CountUp from 'react-countup';
@@ -32,13 +32,12 @@ interface TargetGridRowDataType {
   min_duration: number;
   max_duration: number;
   total_count: number;
-  pass_rate: number;
   status: TargetStatusType[];
 }
 const formatter: StatisticProps['formatter'] = (value) => (
   <CountUp end={value as number} separator="," />
 );
-const PAGE_SIZE = 10
+const PAGE_SIZE = 20
 const columns: TableColumnsType<TargetGridRowDataType> = [
   {
     title: "Label",
@@ -56,53 +55,41 @@ const columns: TableColumnsType<TargetGridRowDataType> = [
   {
     title: "Average Duration",
     dataIndex: "average_duration",
-    //sorter: (a, b) => a.average_duration - b.average_duration,
     render: (_, record) => <span className={styles.numberFormat}>{millisecondsToTime(record.average_duration)}</span>
   },
   {
     title: "Min Duration",
     dataIndex: "min_duration",
-    //sorter: (a, b) => a.average_duration - b.average_duration,
     render: (_, record) => <span className={styles.numberFormat}>{millisecondsToTime(record.min_duration)}</span>
   },
   {
     title: "Max Duration",
     dataIndex: "max_duration",
-    //sorter: (a, b) => a.average_duration - b.average_duration,
     render: (_, record) => <span className={styles.numberFormat}>{millisecondsToTime(record.max_duration)}</span>
   },
   {
     title: "# Runs",
     dataIndex: "total_count",
     align: "right",
     render: (_, record) => <span className={styles.numberFormat}>{record.total_count}</span>,
-    //sorter: (a, b) => a.total_count - b.total_count,
   },
-  {
-    title: "Pass Rate",
-    dataIndex: "pass_rate",
-    //sorter: (a, b) => a.pass_rate - b.pass_rate,
-    render: (_, record) => <span className={styles.numberFormat}> {(record.pass_rate * 100).toFixed(2)}%</span>
-  }
 ]
 
 const TargetGrid: React.FC<Props> = () => {
 
-  const [variables, setVariables] = useState<GetTargetsWithOffsetQueryVariables>({})
+  const [variables, setVariables] = useState<GetTargetsWithOffsetQueryVariables>({ limit: 20})
 
   const { loading: labelLoading, data: labelData, previousData: labelPreviousData, error: labelError } = useQuery(GET_TARGETS_DATA, {
     variables: variables,
-    fetchPolicy: 'cache-and-network',
+    pollInterval: 300000
   });
 
   const data = labelLoading ? labelPreviousData : labelData;
   var result: TargetGridRowDataType[] = []
-  var totalCnt: number = 0
 
   if (labelError) {
     <PortalAlert className="error" message="There was a problem communicating w/the backend server." />
   } else {
-    totalCnt = data?.getTargetsWithOffset?.total ?? 0
     data?.getTargetsWithOffset?.result?.map(dataRow => {
       var row: TargetGridRowDataType = {
         key: "target-grid-row-data-" + uniqueId(),
@@ -112,7 +99,6 @@ const TargetGrid: React.FC<Props> = () => {
         min_duration: dataRow?.min ?? 0,
         max_duration: dataRow?.max ?? 0,
         total_count: dataRow?.count ?? 0,
-        pass_rate: dataRow?.passRate ?? 0
       }
       result.push(row)
     })
@@ -127,19 +113,14 @@ const TargetGrid: React.FC<Props> = () => {
       } else {
         vars.label = ""
       }
+      vars.limit = PAGE_SIZE
       vars.offset = ((pagination.current ?? 1) - 1) * PAGE_SIZE;
       setVariables(vars)
     },
     [variables],
   );
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <Row>
-        <Space size="large">
-          <Statistic title="Targets" value={totalCnt} formatter={formatter} />
-        </Space>
-      </Row>
-
       <Row>
         <Table<TargetGridRowDataType>
           columns={columns}
@@ -149,15 +130,11 @@ const TargetGrid: React.FC<Props> = () => {
           expandable={{
             indentSize: 100,
             expandedRowRender: (record) => (
-              //TODO: dynamically determine number of buttons to display based on page width and pass that as first
               <TargetGridRow rowLabel={record.label} first={20} reverseOrder={true} />
             ),
             rowExpandable: (_) => true,
           }}
-          pagination={{
-            total: totalCnt,
-            showSizeChanger: false,
-          }}
+          pagination = {false}
           dataSource={result} />
       </Row>
     </Space>

diff --git a/frontend/src/components/TestGrid/index.tsx b/frontend/src/components/TestGrid/index.tsx
@@ -40,7 +40,7 @@ interface TestGridRowDataType {
   status: TestStatusType[];
 }
 
-const PAGE_SIZE = 10
+const PAGE_SIZE = 20
 const columns: TableColumnsType<TestGridRowDataType> = [
   {
     title: "Label",
@@ -80,21 +80,15 @@ const columns: TableColumnsType<TestGridRowDataType> = [
     render: (_, record) => <span className={styles.numberFormat}>{record.total_count}</span>,
     //sorter: (a, b) => a.total_count - b.total_count,
   },
-  {
-    title: "Pass Rate",
-    dataIndex: "pass_rate",
-    //sorter: (a, b) => a.pass_rate - b.pass_rate,
-    render: (_, record) => <span className={styles.numberFormat}> {(record.pass_rate * 100).toFixed(2)}%</span>
-  }
 ]
 
 const TestGrid: React.FC<Props> = () => {
 
-  const [variables, setVariables] = useState<GetTestsWithOffsetQueryVariables>({})
+  const [variables, setVariables] = useState<GetTestsWithOffsetQueryVariables>({ limit:  PAGE_SIZE})
 
   const { loading: labelLoading, data: labelData, previousData: labelPreviousData, error: labelError } = useQuery(GET_TEST_GRID_DATA, {
     variables: variables,
-    fetchPolicy: 'cache-and-network',
+    pollInterval: 300000
   });
 
   const data = labelLoading ? labelPreviousData : labelData;
@@ -136,12 +130,6 @@ const TestGrid: React.FC<Props> = () => {
   );
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <Row>
-        <Space size="large">
-          <Statistic title="Test Targets" value={totalCnt} formatter={formatter} />
-        </Space>
-      </Row>
-
       <Row>
         <Table<TestGridRowDataType>
           columns={columns}
@@ -156,10 +144,11 @@ const TestGrid: React.FC<Props> = () => {
             ),
             rowExpandable: (_) => true,
           }}
-          pagination={{
-            total: totalCnt,
-            showSizeChanger: false,
-          }}
+          pagination = {false}
+          // pagination={{
+          //   total: totalCnt,
+          //   showSizeChanger: false,
+          // }}
           dataSource={result} />
       </Row>
     </Space>

diff --git a/internal/graphql/custom.resolvers.go b/internal/graphql/custom.resolvers.go