From 803b87b0a7251d6dfb152143f18a9ff74f840eae Mon Sep 17 00:00:00 2001 From: Kent Huang Date: Tue, 31 Dec 2024 14:59:30 +0800 Subject: [PATCH 1/3] [Feature] DRC-1001 Hiden diff actions when signel env mode Signed-off-by: Kent Huang --- js/app/page.tsx | 23 +- .../components/lineage/LineageViewTopBar.tsx | 163 ++++---- js/src/components/lineage/NodeView.tsx | 351 ++++++++++-------- 3 files changed, 297 insertions(+), 240 deletions(-) diff --git a/js/app/page.tsx b/js/app/page.tsx index bc578d8c..44f5ed93 100644 --- a/js/app/page.tsx +++ b/js/app/page.tsx @@ -53,6 +53,7 @@ import { tooltipTheme } from "@theme/components/Tooltip"; import { trackInit } from "@/lib/api/track"; import { Filename } from "@/components/app/Filename"; import { StateSynchronizer } from "@/components/app/StateSynchronizer"; +import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag"; const RouteAlwaysMount = ({ children, @@ -206,6 +207,7 @@ interface TabProps { name: string; href: string; badge?: ReactNode; + disable?: boolean; } function TabBadge({ @@ -251,6 +253,7 @@ function NavBar() { const { isDemoSite, reviewMode, fileMode, cloudMode, isLoading } = useLineageGraphContext(); const [location, setLocation] = useLocation(); + const { data: flag, isLoading: flagLoading } = useRecceServerFlag(); const checklistBadge = ( @@ -264,8 +267,17 @@ function NavBar() { const tabs: TabProps[] = [ { name: "Lineage", href: "/lineage" }, - { name: "Query", href: "/query" }, - { name: "Checklist", href: "/checks", badge: checklistBadge }, + { + name: "Query", + href: "/query", + disable: flag?.single_env_onboarding === true, + }, + { + name: "Checklist", + href: "/checks", + badge: checklistBadge, + disable: flag?.single_env_onboarding === true, + }, ]; const tabIndex = _.findIndex(tabs, ({ href }) => location.startsWith(href)); @@ -274,13 +286,14 @@ function NavBar() { - {tabs.map(({ name, href, badge }) => { + {tabs.map(({ name, href, badge, disable }) => { return ( { setLocation(href); }} + isDisabled={disable} > {name} {badge} @@ -288,8 +301,8 @@ function NavBar() { ); })} - {!isLoading && !isDemoSite && } - {!isLoading && ( + {!isLoading && !flagLoading && !isDemoSite && } + {!isLoading && !flagLoading && ( {cloudMode && } diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx index d277af83..f353c43d 100644 --- a/js/src/components/lineage/LineageViewTopBar.tsx +++ b/js/src/components/lineage/LineageViewTopBar.tsx @@ -354,6 +354,8 @@ export const LineageViewTopBar = () => { const selectNodes = useMemo(() => { return nodes.filter((node) => node.data.isSelected); }, [nodes]); + const { data: flags } = useRecceServerFlag(); + const isSingleEnvOnboarding = flags?.single_env_onboarding; const isSingleSelect = selectMode === "single" && selectNodes.length === 1; const isMultiSelect = selectMode === "multi" && selectNodes.length >= 1; @@ -405,95 +407,100 @@ export const LineageViewTopBar = () => { )} - - - - } - > - Actions - - - - - } - onClick={() => { - lineageViewContext.runRowCountDiff(); - }} - > - Row Count Diff - - + {!isSingleEnvOnboarding && ( + + + + } + > + Actions + + + + } + onClick={() => { + lineageViewContext.runRowCountDiff(); + }} + > + Row Count Diff + + + } + onClick={() => { + lineageViewContext.runValueDiff(); + }} + > + Value Diff + + + + + + 1) + ) } - icon={} + icon={} onClick={() => { - lineageViewContext.runValueDiff(); + lineageViewContext.addLineageDiffCheck( + lineageViewContext.viewOptions.view_mode + ); }} > - Value Diff + Lineage Diff - - - - - 1)) - } - icon={} - onClick={() => { - lineageViewContext.addLineageDiffCheck( - lineageViewContext.viewOptions.view_mode - ); - }} - > - Lineage Diff - - } - onClick={() => { - lineageViewContext.addSchemaDiffCheck(); - }} - > - Schema Diff - - - - - - + } + onClick={() => { + lineageViewContext.addSchemaDiffCheck(); + }} + > + Schema Diff + + + + + + + )} ); diff --git a/js/src/components/lineage/NodeView.tsx b/js/src/components/lineage/NodeView.tsx index 45b1f9ce..68a723a9 100644 --- a/js/src/components/lineage/NodeView.tsx +++ b/js/src/components/lineage/NodeView.tsx @@ -47,6 +47,7 @@ import { run } from "node:test"; import { DisableTooltipMessages } from "@/constants/tooltipMessage"; import { PreviewChangeView } from "./PreviewChangeView"; import { trackPreviewChange } from "@/lib/api/track"; +import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag"; interface NodeViewProps { node: LineageGraphNode; @@ -83,6 +84,8 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) { { showForm: false, showLast: false } ); }; + const { data: flag } = useRecceServerFlag(); + const isSingleEnvOnboarding = flag?.single_env_onboarding; const addSchemaCheck = useCallback(async () => { const nodeId = node.id; @@ -109,179 +112,213 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) { const isAddedOrRemoved = node.changeStatus === "added" || node.changeStatus === "removed"; - return ( - - - - {node.name} - - - {(node.resourceType === "model" || - node.resourceType === "seed" || - node.resourceType === "snapshot") && ( - - - Explore Change - - + function ExploreChangeMenuButton() { + if ( + node.resourceType === "model" || + node.resourceType === "seed" || + node.resourceType === "snapshot" + ) { + return ( + + + Explore Change + + + } + fontSize="14px" + onClick={() => { + if (envInfo?.adapterType === "dbt") { + setSqlQuery(`select * from {{ ref("${node.name}") }}`); + } else if (envInfo?.adapterType === "sqlmesh") { + setSqlQuery(`select * from ${node.name}`); + } + if (isActionAvailable("query_diff_with_primary_key")) { + // Only set primary key if the action is available + setPrimaryKeys( + primaryKey !== undefined ? [primaryKey] : undefined + ); + } + setLocation("/query"); + }} + > + Query + + } + onClick={() => { + if (isActionAvailable("query_diff_with_primary_key")) { + // Only set primary key if the action is available + setPrimaryKeys( + primaryKey !== undefined ? [primaryKey] : undefined + ); + } + onPreviewChangeOpen(); + trackPreviewChange({ action: "explore", node: node.name }); + }} + > + Preview Change (Experiment) + + + + {(node.resourceType === "model" || + node.resourceType === "snapshot") && ( + } + fontSize="14px" + > + Code Diff + + )} } + icon={} fontSize="14px" - onClick={() => { - if (envInfo?.adapterType === "dbt") { - setSqlQuery(`select * from {{ ref("${node.name}") }}`); - } else if (envInfo?.adapterType === "sqlmesh") { - setSqlQuery(`select * from ${node.name}`); - } - if (isActionAvailable("query_diff_with_primary_key")) { - // Only set primary key if the action is available - setPrimaryKeys( - primaryKey !== undefined ? [primaryKey] : undefined - ); - } - setLocation("/query"); - }} + onClick={() => refetchRowCount()} > - Query + Row Count Diff - } - onClick={() => { - if (isActionAvailable("query_diff_with_primary_key")) { - // Only set primary key if the action is available - setPrimaryKeys( - primaryKey !== undefined ? [primaryKey] : undefined - ); - } - onPreviewChangeOpen(); - trackPreviewChange({ action: "explore", node: node.name }); - }} + - Preview Change (Experiment) - - - - {(node.resourceType === "model" || - node.resourceType === "snapshot") && ( - } - fontSize="14px" - > - Code Diff - - )} } + icon={} fontSize="14px" - onClick={() => refetchRowCount()} + isDisabled={ + isAddedOrRemoved || !isActionAvailable("profile_diff") + } + onClick={() => { + runAction( + "profile_diff", + { + model: node.name, + }, + { showForm: false, showLast: false } + ); + }} > - Row Count Diff + Profile Diff - - } - fontSize="14px" - isDisabled={ - isAddedOrRemoved || !isActionAvailable("profile_diff") - } - onClick={() => { - runAction( - "profile_diff", - { - model: node.name, - }, - { showForm: false, showLast: false } - ); - }} - > - Profile Diff - - - - } - fontSize="14px" - isDisabled={ - isAddedOrRemoved || !isActionAvailable("value_diff") - } - onClick={() => { - runAction( - "value_diff", - { - model: node.name, - }, - { showForm: true, showLast: false } - ); - }} - > - Value Diff - - - + + } + fontSize="14px" + isDisabled={ + isAddedOrRemoved || !isActionAvailable("value_diff") + } + onClick={() => { + runAction( + "value_diff", + { + model: node.name, + }, + { showForm: true, showLast: false } + ); + }} > - } - fontSize="14px" - isDisabled={isAddedOrRemoved} - onClick={() => { - runAction( - "top_k_diff", - { model: node.name, column_name: "", k: 50 }, - { showForm: true } - ); - }} - > - Top-K Diff - - - + + + } + fontSize="14px" + isDisabled={isAddedOrRemoved} + onClick={() => { + runAction( + "top_k_diff", + { model: node.name, column_name: "", k: 50 }, + { showForm: true } + ); + }} > - } - fontSize="14px" - isDisabled={isAddedOrRemoved} - onClick={() => { - runAction( - "histogram_diff", - { - model: node.name, - column_name: "", - column_type: "", - }, - { showForm: true } - ); - }} - > - Histogram Diff - - - - - + Top-K Diff + + + } + icon={} fontSize="14px" - onClick={addSchemaCheck} + isDisabled={isAddedOrRemoved} + onClick={() => { + runAction( + "histogram_diff", + { + model: node.name, + column_name: "", + column_type: "", + }, + { showForm: true } + ); + }} > - Schema Diff + Histogram Diff - - - + + + + + } + fontSize="14px" + onClick={addSchemaCheck} + > + Schema Diff + + + + + ); + } else { + return <>; + } + } + + function PreviewChangeButton() { + return ( + + ); + } + + return ( + + + + {node.name} + + + {isSingleEnvOnboarding ? ( + + ) : ( + )} - {/* )} */} + From c7b58e5fb25a381518c3b2a82ac4546e8eab32f3 Mon Sep 17 00:00:00 2001 From: Kent Huang Date: Tue, 31 Dec 2024 15:30:48 +0800 Subject: [PATCH 2/3] [Refine] rename variable Signed-off-by: Kent Huang --- js/app/page.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/app/page.tsx b/js/app/page.tsx index 44f5ed93..602c7dd4 100644 --- a/js/app/page.tsx +++ b/js/app/page.tsx @@ -253,7 +253,7 @@ function NavBar() { const { isDemoSite, reviewMode, fileMode, cloudMode, isLoading } = useLineageGraphContext(); const [location, setLocation] = useLocation(); - const { data: flag, isLoading: flagLoading } = useRecceServerFlag(); + const { data: flag, isLoading: isFlagLoading } = useRecceServerFlag(); const checklistBadge = ( @@ -293,7 +293,8 @@ function NavBar() { onClick={() => { setLocation(href); }} - isDisabled={disable} + isDisabled={isLoading || isFlagLoading || disable} + hidden={disable} > {name} {badge} @@ -301,8 +302,8 @@ function NavBar() { ); })} - {!isLoading && !flagLoading && !isDemoSite && } - {!isLoading && !flagLoading && ( + {!isLoading && !isFlagLoading && !isDemoSite && } + {!isLoading && !isFlagLoading && ( {cloudMode && } From 139aeef22f00ddb48a0c31fbbc6f9c98f0698903 Mon Sep 17 00:00:00 2001 From: Kent Huang Date: Tue, 31 Dec 2024 15:49:50 +0800 Subject: [PATCH 3/3] [Fix] Code review issues - remove unused code Signed-off-by: Kent Huang --- js/app/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/app/page.tsx b/js/app/page.tsx index 602c7dd4..76c8a7b6 100644 --- a/js/app/page.tsx +++ b/js/app/page.tsx @@ -302,8 +302,8 @@ function NavBar() { ); })} - {!isLoading && !isFlagLoading && !isDemoSite && } - {!isLoading && !isFlagLoading && ( + {!isLoading && !isDemoSite && } + {!isLoading && ( {cloudMode && }