Add source to report context bar

Signed-off-by: Wei-Chun, Chang <[email protected]> Co-authored-by: Ching Yi, Chan <[email protected]>
InfuseAI · Sep 26, 2023 · a9cfb9d · a9cfb9d
1 parent 7978c32
commit a9cfb9d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 18 deletions.
diff --git a/.../src/components/Common/SkipDatasource.tsx → .../src/components/Common/SkipDataSource.tsx b/.../src/components/Common/SkipDatasource.tsx → .../src/components/Common/SkipDataSource.tsx
@@ -1,14 +1,6 @@
 import { Alert, AlertIcon, AlertDescription } from '@chakra-ui/react';
 
-export function SkipDatasource({
-  skipDataSource,
-}: {
-  skipDataSource: boolean | undefined;
-}) {
-  if (!skipDataSource) {
-    return <></>;
-  }
-
+export function SkipDataSource() {
   return (
     <Alert status="error" mb={3} rounded={10}>
       <AlertIcon />

diff --git a/static_report/src/components/Overview/Overview.tsx b/static_report/src/components/Overview/Overview.tsx
@@ -30,7 +30,7 @@ import { LineageGraphData } from '../../utils/dbt';
 import { topologySort } from '../../utils/graph';
 import { CompDbtNodeEntryItem, useReportStore } from '../../utils/store';
 import { SearchTextInput } from '../Common/SearchTextInput';
-import { SkipDatasource } from '../Common/SkipDatasource';
+import { SkipDataSource } from '../Common/SkipDataSource';
 import { ModelList } from './ModelList';
 import { MetricList } from './MetricList';
 import { NodeList } from './NodeList';
@@ -369,7 +369,7 @@ export function Overview({ singleOnly }: Props) {
   return (
     <>
       <Flex direction="column" w={'100%'} minHeight="650px">
-        <SkipDatasource skipDataSource={skipDataSource} />
+        {skipDataSource && <SkipDataSource />}
         <Flex w={'100%'} paddingBottom="10px" marginBottom="20px">
           <Heading fontSize={24}>
             {singleOnly ? 'Overview' : 'Impact Summary'}

diff --git a/static_report/src/components/Reports/ReportContextBar.tsx b/static_report/src/components/Reports/ReportContextBar.tsx
@@ -1,9 +1,20 @@
-import { Box, Flex, FlexProps, Link, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  FlexProps,
+  Icon,
+  Link,
+  Text,
+  Tooltip,
+} from '@chakra-ui/react';
 import { ReactNode } from 'react';
 import { BiPlug } from 'react-icons/bi';
 import { BsGearWideConnected } from 'react-icons/bs';
+import { FiInfo } from 'react-icons/fi';
 import { GoGitBranch } from 'react-icons/go';
+import { TbBuildingWarehouse } from 'react-icons/tb';
 import { VscGitPullRequest } from 'react-icons/vsc';
+
 import {
   Comparable,
   ComparisonReportSchema,
@@ -31,13 +42,19 @@ export function ReportContextBar({
   let gitBranch: string | undefined = undefined;
   let githubPr: string | undefined = undefined;
   let githubPrUrl: string | undefined = undefined;
+  let reportFrom: string | undefined = undefined;
+  let skipDataSource: boolean | undefined = false;
 
   if (data) {
     if (singleOnly) {
       const report = data as SingleReportSchema;
       datasource = report.datasource?.name;
       version = report.version;
       gitBranch = report.datasource?.git_branch;
+      skipDataSource = report.datasource?.skip_datasource;
+      reportFrom = report.datasource?.skip_datasource
+        ? 'Manifest File'
+        : report.datasource.type;
     } else {
       const report = data as ComparisonReportSchema;
       const fallback = report.input ?? report.base;
@@ -60,9 +77,60 @@ export function ReportContextBar({
 
         githubPrUrl = report.metadata?.github_pr_url;
       }
+
+      skipDataSource =
+        report.base?.datasource.skip_datasource ||
+        report.input?.datasource.skip_datasource;
+
+      const baseFrom = report.base?.datasource.skip_datasource
+        ? 'Manifest File'
+        : report.base?.datasource.type;
+      const targetFrom = report.input?.datasource.skip_datasource
+        ? 'Manifest File'
+        : report.input?.datasource.type;
+
+      if (baseFrom !== targetFrom) {
+        reportFrom = `${baseFrom} ↔ ${targetFrom}`;
+      } else {
+        reportFrom = baseFrom;
+      }
     }
   }
 
+  const showIcon = (skipDataSource: boolean | undefined) => {
+    return skipDataSource ? (
+      <Tooltip
+        shouldWrapChildren
+        label="Connect PipeRider to your datasource for full schema info"
+        placement="top-start"
+      >
+        <Icon as={FiInfo} />
+      </Tooltip>
+    ) : (
+      <Icon as={TbBuildingWarehouse} />
+    );
+  };
+
+  const showReportSource = (
+    reportFrom: string | undefined,
+    skipDataSource: boolean | undefined,
+  ) => {
+    return (
+      <Flex alignItems={'center'} gap={2} flex="1" overflow="hidden">
+        {showIcon(skipDataSource)}
+        <Text
+          flex="1"
+          color={'gray.500'}
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+          overflow="hidden"
+        >
+          source: {reportFrom}
+        </Text>
+      </Flex>
+    );
+  };
+
   return (
     <Flex
       gap={5}
@@ -125,7 +193,7 @@ export function ReportContextBar({
           </Flex>
         )}
         {gitBranch && (
-          <Flex alignItems={'center'} gap={2} flex="1" overflow="hidden">
+          <Flex alignItems={'center'} gap={2} overflow="hidden">
             <GoGitBranch />
             <Text
               flex="1"
@@ -138,6 +206,7 @@ export function ReportContextBar({
             </Text>
           </Flex>
         )}
+        {showReportSource(reportFrom, skipDataSource)}
       </Flex>
       {actionArea && <Box flex="0 0 auto">{actionArea}</Box>}
     </Flex>

diff --git a/static_report/src/pages/CRTableDetailPage.tsx b/static_report/src/pages/CRTableDetailPage.tsx
@@ -25,7 +25,7 @@ import { useTableRoute } from '../utils/routes';
 import { NO_VALUE } from '../components/Columns/constants';
 import { TableGeneralStats } from '../components/Tables/TableMetrics/TableGeneralStats';
 import { DupedTableRowsWidget } from '../components/Widgets/DupedTableRowsWidget';
-import { SkipDatasource } from '../components/Common/SkipDatasource';
+import { SkipDataSource } from '../components/Common/SkipDataSource';
 
 export default function CRTableDetailPage() {
   let { tableName, uniqueId } = useTableRoute();
@@ -39,14 +39,17 @@ export default function CRTableDetailPage() {
     },
   });
 
-  const { tableColumnsOnly = [] } = useReportStore.getState();
+  const { tableColumnsOnly = [], reportDataSource } = useReportStore.getState();
   const nodeKey = uniqueId ? uniqueId : `table.${tableName}`;
 
   const currentTableEntry = tableColumnsOnly.find(([key]) => key === nodeKey);
   if (!currentTableEntry) {
     return <NoData text={`No data found for table '${nodeKey}'`} />;
   }
 
+  const skipDataSource =
+    reportDataSource?.base?.skip_datasource ||
+    reportDataSource?.target?.skip_datasource;
   const [, { base, target }] = currentTableEntry;
   const fallback = target || base;
 
@@ -179,7 +182,7 @@ export default function CRTableDetailPage() {
 
   return (
     <Box>
-      <SkipDatasource skipDataSource={false} />
+      {skipDataSource && <SkipDataSource />}
       <HStack alignItems="flex-start">
         <TableColumnHeader
           title={name}

diff --git a/static_report/src/pages/SRTableDetailPage.tsx b/static_report/src/pages/SRTableDetailPage.tsx
@@ -12,7 +12,8 @@ import {
 import { TableColumnHeader } from '../components/Tables/TableColumnHeader';
 import { useReportStore } from '../utils/store';
 import { useTableRoute } from '../utils/routes';
-import { SkipDatasource } from '../components/Common/SkipDatasource';
+import { SkipDataSource } from '../components/Common/SkipDataSource';
+import { sk } from 'date-fns/locale';
 
 export default function SRTableDetailPage() {
   let { tableName, uniqueId } = useTableRoute();
@@ -61,7 +62,7 @@ export default function SRTableDetailPage() {
 
   return (
     <>
-      <SkipDatasource skipDataSource={skipDataSource} />
+      {skipDataSource && <SkipDataSource />}
       <TableColumnHeader
         title={name}
         subtitle={'Table'}