From 1b31bd0db389083911320ae996c1bf4d54ca5a7c Mon Sep 17 00:00:00 2001 From: popcorny Date: Mon, 14 Aug 2023 11:08:53 +0800 Subject: [PATCH 1/5] Add pr information in report Signed-off-by: popcorny --- static_report/src/types/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static_report/src/types/index.ts b/static_report/src/types/index.ts index 26dd72c26..3cdd1e138 100644 --- a/static_report/src/types/index.ts +++ b/static_report/src/types/index.ts @@ -48,6 +48,12 @@ export interface SaferTableSchema export interface ComparisonReportSchema { base: SaferSRSchema; input: SaferSRSchema; + metadata?: { + github_pr_id?: number; + github_pr_title?: string; + github_pr_url?: string; + [key: string]: any; + }; implicit?: string[]; explicit?: string[]; } From cf4833d2ca909d7bd40b380f5fef88be7313a629 Mon Sep 17 00:00:00 2001 From: popcorny Date: Mon, 14 Aug 2023 15:03:09 +0800 Subject: [PATCH 2/5] Add github pr information in UI Signed-off-by: popcorny --- static_report/src/components/Common/Main.tsx | 13 +- .../components/Reports/ReportContextBar.tsx | 113 ++++++++++++++---- static_report/src/utils/store.ts | 2 +- 3 files changed, 93 insertions(+), 35 deletions(-) diff --git a/static_report/src/components/Common/Main.tsx b/static_report/src/components/Common/Main.tsx index a2fbdab0f..b9f4370b8 100644 --- a/static_report/src/components/Common/Main.tsx +++ b/static_report/src/components/Common/Main.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, FlexProps, useColorMode } from '@chakra-ui/react'; +import { Box, Button, Flex, FlexProps, useColorMode } from '@chakra-ui/react'; import { useEffect, ReactNode } from 'react'; import * as amplitude from '@amplitude/analytics-browser'; @@ -26,11 +26,6 @@ export function Main({ children, isSingleReport, ...props }: Props) { }, []); const { rawData } = useReportStore.getState(); - const fallback = rawData.input ?? rawData.base; - let gitBranch = rawData.base?.datasource.git_branch; - if (gitBranch && !isSingleReport && rawData.input?.datasource.git_branch) { - gitBranch = `${gitBranch} ↔ ${rawData.input?.datasource.git_branch}`; - } return ( diff --git a/static_report/src/components/Reports/ReportContextBar.tsx b/static_report/src/components/Reports/ReportContextBar.tsx index 1d0403736..fceb3e435 100644 --- a/static_report/src/components/Reports/ReportContextBar.tsx +++ b/static_report/src/components/Reports/ReportContextBar.tsx @@ -1,15 +1,26 @@ -import { Flex, FlexProps, Text } from '@chakra-ui/react'; +import { + Box, + Button, + Flex, + FlexProps, + Link, + Spacer, + Text, +} from '@chakra-ui/react'; import { ReactNode } from 'react'; import { BiPlug } from 'react-icons/bi'; import { BsGearWideConnected } from 'react-icons/bs'; import { GoGitBranch } from 'react-icons/go'; +import { VscGitPullRequest } from 'react-icons/vsc'; +import { + Comparable, + ComparisonReportSchema, + SingleReportSchema, +} from '../../types'; import { borderVal } from '../../utils'; -interface Props { - datasource?: string; - version?: string; - gitBranch?: string; - showProjectInfo?: boolean; +interface Props extends Comparable, FlexProps { + data?: Partial | Partial; children?: ReactNode; actionArea?: ReactNode; } @@ -17,17 +28,46 @@ interface Props { * A UI Bar that provides information about the active report or a project's summary and run-selector, when available. Defaults to only show one active report. */ export function ReportContextBar({ - datasource, - version, - gitBranch, - showProjectInfo, + data, children, actionArea, + singleOnly, ...props -}: Props & FlexProps) { +}: Props) { + let datasource: string | undefined = undefined; + let version: string | undefined = undefined; + let gitBranch: string | undefined = undefined; + let githubPr: string | undefined = undefined; + let githubPrUrl: string | undefined = undefined; + + if (data) { + if (singleOnly) { + const report = data as SingleReportSchema; + datasource = report.datasource.name; + version = report.version; + gitBranch = report.datasource.git_branch; + } else { + const report = data as ComparisonReportSchema; + const fallback = report.input ?? report.base; + datasource = fallback.datasource.name; + version = fallback.version; + + if ( + report.base?.datasource.git_branch && + report.input?.datasource.git_branch + ) { + gitBranch = `${report.base?.datasource.git_branch} ↔ ${report.input?.datasource.git_branch}`; + } + + if (report.metadata?.github_pr_id && report.metadata?.github_pr_url) { + githubPr = `#${report.metadata?.github_pr_id} ${report.metadata?.github_pr_title}`; + githubPrUrl = report.metadata?.github_pr_url; + } + } + } + return ( - - {children} - {showProjectInfo && ( + {children && {children}} + + {datasource && ( - Source: {datasource} - - - - Version: {version} + {datasource} )} - {gitBranch && ( + {version && ( + + {version} + + )} + {githubPr && githubPrUrl && ( + + + + + + {githubPr} + + + + )} + {gitBranch && ( + - Branch: {gitBranch} + + {gitBranch} + )} - {actionArea} + {actionArea && {actionArea}} ); } diff --git a/static_report/src/utils/store.ts b/static_report/src/utils/store.ts index 9163d1760..f73c61cd9 100644 --- a/static_report/src/utils/store.ts +++ b/static_report/src/utils/store.ts @@ -147,7 +147,7 @@ const getReportOnly = (rawData: ComparableReport) => { const getReportDisplayTime = (rawData: ComparableReport) => { const baseTime = formatReportTime(rawData.base?.created_at); const targetTime = formatReportTime(rawData.input?.created_at); - const result = targetTime ? `${baseTime} ➡️ ${targetTime}` : baseTime; + const result = targetTime ? `${baseTime} ↔ ${targetTime}` : baseTime; return result; }; const getReportTime = (rawData: ComparableReport) => { From 5a95f5eec5c98514ff6bbb9b0a359e58e9dfec4d Mon Sep 17 00:00:00 2001 From: popcorny Date: Mon, 14 Aug 2023 15:33:24 +0800 Subject: [PATCH 3/5] Adjust ui layout Signed-off-by: popcorny --- static_report/src/components/Common/Main.tsx | 2 +- .../src/components/Common/MasterDetailContainer.tsx | 3 ++- .../src/components/Reports/ReportContextBar.tsx | 12 ++---------- 3 files changed, 5 insertions(+), 12 deletions(-) diff --git a/static_report/src/components/Common/Main.tsx b/static_report/src/components/Common/Main.tsx index b9f4370b8..8f2de622a 100644 --- a/static_report/src/components/Common/Main.tsx +++ b/static_report/src/components/Common/Main.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Flex, FlexProps, useColorMode } from '@chakra-ui/react'; +import { Box, Flex, FlexProps, useColorMode } from '@chakra-ui/react'; import { useEffect, ReactNode } from 'react'; import * as amplitude from '@amplitude/analytics-browser'; diff --git a/static_report/src/components/Common/MasterDetailContainer.tsx b/static_report/src/components/Common/MasterDetailContainer.tsx index 4326d290b..c669dd410 100644 --- a/static_report/src/components/Common/MasterDetailContainer.tsx +++ b/static_report/src/components/Common/MasterDetailContainer.tsx @@ -31,6 +31,7 @@ export function MasterDetailContainer({ flex="0 1 400px" maxWidth="400px" minWidth="280px" + ml="16px" maxHeight={`calc(100vh - ${sideNavTop})`} > @@ -39,7 +40,7 @@ export function MasterDetailContainer({ diff --git a/static_report/src/components/Reports/ReportContextBar.tsx b/static_report/src/components/Reports/ReportContextBar.tsx index fceb3e435..64d40a3c7 100644 --- a/static_report/src/components/Reports/ReportContextBar.tsx +++ b/static_report/src/components/Reports/ReportContextBar.tsx @@ -1,12 +1,4 @@ -import { - Box, - Button, - Flex, - FlexProps, - Link, - Spacer, - Text, -} from '@chakra-ui/react'; +import { Box, Flex, FlexProps, Link, Text } from '@chakra-ui/react'; import { ReactNode } from 'react'; import { BiPlug } from 'react-icons/bi'; import { BsGearWideConnected } from 'react-icons/bs'; @@ -74,7 +66,7 @@ export function ReportContextBar({ bg={'gray.100'} border={borderVal} borderX={0} - px="80px" + px="96px" py="10px" {...props} > From c3170b5ae9f0f5812c0d205ffff66911977521b7 Mon Sep 17 00:00:00 2001 From: popcorny Date: Mon, 14 Aug 2023 16:05:26 +0800 Subject: [PATCH 4/5] Handle the case that title is absent Signed-off-by: popcorny --- .../src/components/Reports/ReportContextBar.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/static_report/src/components/Reports/ReportContextBar.tsx b/static_report/src/components/Reports/ReportContextBar.tsx index 64d40a3c7..45bea982c 100644 --- a/static_report/src/components/Reports/ReportContextBar.tsx +++ b/static_report/src/components/Reports/ReportContextBar.tsx @@ -35,13 +35,13 @@ export function ReportContextBar({ if (data) { if (singleOnly) { const report = data as SingleReportSchema; - datasource = report.datasource.name; + datasource = report.datasource?.name; version = report.version; - gitBranch = report.datasource.git_branch; + gitBranch = report.datasource?.git_branch; } else { const report = data as ComparisonReportSchema; const fallback = report.input ?? report.base; - datasource = fallback.datasource.name; + datasource = fallback.datasource?.name; version = fallback.version; if ( @@ -52,7 +52,12 @@ export function ReportContextBar({ } if (report.metadata?.github_pr_id && report.metadata?.github_pr_url) { - githubPr = `#${report.metadata?.github_pr_id} ${report.metadata?.github_pr_title}`; + if (report.metadata?.github_pr_title) { + githubPr = `#${report.metadata?.github_pr_id} ${report.metadata?.github_pr_title}`; + } else { + githubPr = `#${report.metadata?.github_pr_id}`; + } + githubPrUrl = report.metadata?.github_pr_url; } } From e8155f97e8ff3e7cf827f969cd4bde25548fd9e8 Mon Sep 17 00:00:00 2001 From: popcorny Date: Mon, 14 Aug 2023 16:33:12 +0800 Subject: [PATCH 5/5] Fix e2e issue Signed-off-by: popcorny --- static_report/cypress/e2e/comparison-report.cy.ts | 4 ++-- static_report/src/components/Common/Main.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/static_report/cypress/e2e/comparison-report.cy.ts b/static_report/cypress/e2e/comparison-report.cy.ts index c4112bc04..ccc587501 100644 --- a/static_report/cypress/e2e/comparison-report.cy.ts +++ b/static_report/cypress/e2e/comparison-report.cy.ts @@ -3,9 +3,9 @@ describe('Comparison Report [table-list-page, table-detail-page]', () => { cy.visit('http://localhost:3001'); }); it('should navigate to assertions list page', () => { - cy.visit('http://localhost:3000/#/assertions'); + cy.visit('http://localhost:3001/#/assertions'); }); it('should navigate to BM page ', () => { - cy.visit('http://localhost:3000/#/metrics'); + cy.visit('http://localhost:3001/#/metrics'); }); }); diff --git a/static_report/src/components/Common/Main.tsx b/static_report/src/components/Common/Main.tsx index 8f2de622a..22afd0404 100644 --- a/static_report/src/components/Common/Main.tsx +++ b/static_report/src/components/Common/Main.tsx @@ -39,6 +39,7 @@ export function Main({ children, isSingleReport, ...props }: Props) {