Merge pull request #845 from InfuseAI/feature/sc-31820/backlinks-to-p…

…r-in-comparison-reports-ui [Feature] backlinks to pr in comparison reports UI
InfuseAI · Aug 14, 2023 · 306374a · 306374a
2 parents b4966c9 + e8155f9
commit 306374a
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 38 deletions.
diff --git 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
@@ -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 (
     <Flex
@@ -43,11 +38,8 @@ export function Main({ children, isSingleReport, ...props }: Props) {
 
       <Box position={'sticky'} top={0} bg={bgColor[colorMode]} zIndex="banner">
         <ReportContextBar
-          datasource={fallback?.datasource.name}
-          version={fallback?.version}
-          gitBranch={gitBranch}
-          px="96px"
-          showProjectInfo
+          data={isSingleReport ? (rawData.base as any) : (rawData as any)}
+          singleOnly={isSingleReport}
         ></ReportContextBar>
       </Box>
 

diff --git 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})`}
         >
           <SideBar singleOnly={singleOnly} />
@@ -39,7 +40,7 @@ export function MasterDetailContainer({
         <Box
           maxHeight={mainContentAreaHeight}
           h={'100%'}
-          p={9}
+          p="16px"
           flex="1 0 800px"
           width="800px"
         >

diff --git a/static_report/src/components/Reports/ReportContextBar.tsx b/static_report/src/components/Reports/ReportContextBar.tsx
@@ -1,65 +1,129 @@
-import { Flex, FlexProps, 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';
 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<ComparisonReportSchema> | Partial<SingleReportSchema>;
   children?: ReactNode;
   actionArea?: ReactNode;
 }
 /**
  * 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) {
+        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;
+      }
+    }
+  }
+
   return (
     <Flex
-      w={'100%'}
       gap={5}
       justify={'space-between'}
       alignItems={'center'}
       bg={'gray.100'}
       border={borderVal}
       borderX={0}
-      px="80px"
+      px="96px"
       py="10px"
       {...props}
     >
-      <Flex gap={5}>
-        {children}
-        {showProjectInfo && (
+      {children && <Box flex="0 0 auto">{children}</Box>}
+      <Flex overflow="hidden" gap={5} justify={'flex-start'} flex="1">
+        {datasource && (
           <Flex gap={5}>
             <Flex alignItems={'center'} gap={2}>
               <BiPlug />
-              <Text color={'gray.500'}>Source: {datasource}</Text>
-            </Flex>
-            <Flex alignItems={'center'} gap={2}>
-              <BsGearWideConnected />
-              <Text color={'gray.500'}>Version: {version}</Text>
+              <Text color={'gray.500'}>{datasource}</Text>
             </Flex>
           </Flex>
         )}
-        {gitBranch && (
+        {version && (
           <Flex alignItems={'center'} gap={2}>
+            <BsGearWideConnected />
+            <Text color={'gray.500'}>{version}</Text>
+          </Flex>
+        )}
+        {githubPr && githubPrUrl && (
+          <Flex alignItems={'center'} gap={2} overflow="hidden">
+            <VscGitPullRequest />
+
+            <Text
+              flex="1"
+              color={'gray.500'}
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+              overflow="hidden"
+            >
+              <Link href={githubPrUrl} target="_blank">
+                {githubPr}
+              </Link>
+            </Text>
+          </Flex>
+        )}
+        {gitBranch && (
+          <Flex alignItems={'center'} gap={2} flex="1" overflow="hidden">
             <GoGitBranch />
-            <Text color={'gray.500'}>Branch: {gitBranch}</Text>
+            <Text
+              flex="1"
+              color={'gray.500'}
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+              overflow="hidden"
+            >
+              {gitBranch}
+            </Text>
           </Flex>
         )}
       </Flex>
-      {actionArea}
+      {actionArea && <Box flex="0 0 auto">{actionArea}</Box>}
     </Flex>
   );
 }
diff --git 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[];
 }

diff --git 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) => {