feat: Track nodeView tab in URL (#5300)

Signed-off-by: Simon Behar <simbeh7@gmail.com>
argoproj · Mar 8, 2021 · 95dd7f4 · 95dd7f4
1 parent a3c12df
commit 95dd7f4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -45,20 +45,22 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
     const [name, setName] = useState(match.params.name);
     const [tab, setTab] = useState(queryParams.get('tab') || 'workflow');
     const [nodeId, setNodeId] = useState(queryParams.get('nodeId'));
+    const [nodePanelView, setNodePanelView] = useState(queryParams.get('nodePanelView'));
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
 
     useEffect(
         useQueryParams(history, p => {
             setTab(p.get('tab') || 'workflow');
             setNodeId(p.get('nodeId'));
+            setNodePanelView(p.get('nodePanelView'));
             setSidePanel(p.get('sidePanel'));
         }),
         [history]
     );
 
     useEffect(() => {
-        history.push(historyUrl('workflows/{namespace}/{name}', {namespace, name, tab, nodeId, sidePanel}));
-    }, [namespace, name, tab, nodeId, sidePanel]);
+        history.push(historyUrl('workflows/{namespace}/{name}', {namespace, name, tab, nodeId, nodePanelView, sidePanel}));
+    }, [namespace, name, tab, nodeId, nodePanelView, sidePanel]);
 
     const [workflow, setWorkflow] = useState<Workflow>();
     const [links, setLinks] = useState<Link[]>();
@@ -262,6 +264,8 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                                 {selectedNode && (
                                     <WorkflowNodeInfo
                                         node={selectedNode}
+                                        onTabSelected={setNodePanelView}
+                                        selectedTabKey={nodePanelView}
                                         workflow={workflow}
                                         links={links}
                                         onShowContainerLogs={(_, container) => setSidePanel(`logs:${nodeId}:${container}`)}

diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -41,6 +41,8 @@ interface Props {
     onShowContainerLogs: (nodeId: string, container: string) => any;
     onShowEvents?: () => void;
     onShowYaml?: (nodeId: string) => any;
+    onTabSelected?: (tabSelected: string) => void;
+    selectedTabKey?: string;
 }
 
 const AttributeRow = (attr: {title: string; value: any}) => (
@@ -403,6 +405,8 @@ export const WorkflowNodeInfo = (props: Props) => (
         <Tabs
             navCenter={true}
             navTransparent={true}
+            onTabSelected={props.onTabSelected}
+            selectedTabKey={props.selectedTabKey}
             tabs={[
                 {
                     title: 'SUMMARY',