Static graph workflow versions (flyteorg#205)

* feat: add workflow versions table Signed-off-by: csirius <[email protected]> Signed-off-by: Jason Porter <[email protected]> * chore(release): Release 0.25.0 [skip ci] # [0.25.0](http://github.com/lyft/flyteconsole/compare/v0.24.0...v0.25.0) (2021-08-31) ### Features * add workflow versions table ([flyteorg#193](http://github.com/lyft/flyteconsole/issues/193)) ([6fff87e](http://github.com/lyft/flyteconsole/commit/6fff87e40007fd15faae634eb6402045c067dd2c)) Signed-off-by: Jason Porter <[email protected]> * improvement: show proper error message for aborted workflows (flyteorg#195) * improvement: show proper error message for aborted workflows Signed-off-by: Pianist038801 <[email protected]> * improvement: show abort message in the execution list Signed-off-by: Pianist038801 <[email protected]> Co-authored-by: Pianist038801 <[email protected]> Signed-off-by: Jason Porter <[email protected]> * Fix/versions executions gap (flyteorg#197) * feat: add workflow versions table Signed-off-by: csirius <[email protected]> * fix: space between versions and executions table Signed-off-by: csirius <[email protected]> Signed-off-by: Jason Porter <[email protected]> * feat: workflow version details page Signed-off-by: csirius <[email protected]> Signed-off-by: Jason Porter <[email protected]> * Pre merge checkin Signed-off-by: Jason Porter <[email protected]> * fix: this is rfc, do not deploy until resolved; details in comments (flyteorg#172) * fix: this is rfc, do not deploy until resolved; details in comments Signed-off-by: Jason Porter <[email protected]> * fix: this is rfc, do not deploy until resolved; details in comments note: deploying with caution; the believe if that it was incorrect to use meta. Signed-off-by: Jason Porter <[email protected]> * fix: show field types on json launch form (flyteorg#199) Signed-off-by: Pianist038801 <[email protected]> Co-authored-by: Pianist038801 <[email protected]> Signed-off-by: Jason Porter <[email protected]> * chore(release): Release 0.25.1 [skip ci] ## [0.25.1](http://github.com/lyft/flyteconsole/compare/v0.25.0...v0.25.1) (2021-09-13) ### Bug Fixes * show field types on json launch form ([flyteorg#199](http://github.com/lyft/flyteconsole/issues/199)) ([a42b9f8](http://github.com/lyft/flyteconsole/commit/a42b9f8520fcd24dee752111e606ad9ae9bd88f5)) * this is rfc, do not deploy until resolved; details in comments ([flyteorg#172](http://github.com/lyft/flyteconsole/issues/172)) ([67dd183](http://github.com/lyft/flyteconsole/commit/67dd18397caf40e350da40e0672e500eaa9f338a)) Signed-off-by: Jason Porter <[email protected]> * Minor fixes Signed-off-by: Jason Porter <[email protected]> * Feat/version details (flyteorg#198) * feat: add workflow versions table Signed-off-by: csirius <[email protected]> * feat: workflow version details page Signed-off-by: csirius <[email protected]> Signed-off-by: Jason Porter <[email protected]> * fix: repopulate struct input fields on relaunch form (flyteorg#201) Signed-off-by: Pianist038801 <[email protected]> Co-authored-by: Pianist038801 <[email protected]> Signed-off-by: Jason Porter <[email protected]> * Graph ux feature add legend (flyteorg#196) * Checkin and merge to master Signed-off-by: Jason Porter <[email protected]> * fixed one more Signed-off-by: Jason Porter <[email protected]> * chore(release): Release 0.25.2 [skip ci] ## [0.25.2](http://github.com/lyft/flyteconsole/compare/v0.25.1...v0.25.2) (2021-09-16) ### Bug Fixes * repopulate struct input fields on relaunch form ([flyteorg#201](http://github.com/lyft/flyteconsole/issues/201)) ([950e080](http://github.com/lyft/flyteconsole/commit/950e080a2c52c6294630f0ffd1410b0e45b50a8d)) Signed-off-by: Jason Porter <[email protected]> * final before pr Signed-off-by: Jason Porter <[email protected]> * Fixed issues created by bad rebase Signed-off-by: Jason Porter <[email protected]> * Fixed more merge issues Signed-off-by: Jason Porter <[email protected]> Co-authored-by: csirius <[email protected]> Co-authored-by: flyte bot <[email protected]> Co-authored-by: pianist <[email protected]> Co-authored-by: Pianist038801 <[email protected]> Co-authored-by: csirius <[email protected]>
eapolinario · Sep 17, 2021 · 0794e3c · 0794e3c
1 parent a890e72
commit 0794e3c
Show file tree

Hide file tree

Showing 11 changed files with 332 additions and 114 deletions.
diff --git a/src/components/Entities/EntityDetails.tsx b/src/components/Entities/EntityDetails.tsx
@@ -13,6 +13,8 @@ import { EntityExecutions } from './EntityExecutions';
 import { EntitySchedules } from './EntitySchedules';
 import { EntityVersions } from './EntityVersions';
 import classNames from 'classnames';
+import { StaticGraphContainer } from 'components/Workflow/StaticGraphContainer';
+import { WorkflowId } from 'models/Workflow/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
     metadataContainer: {
@@ -48,6 +50,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export interface EntityDetailsProps {
     id: ResourceIdentifier;
     versionView?: boolean;
+    showStaticGraph?: boolean;
 }
 
 function getLaunchProps(id: ResourceIdentifier) {
@@ -67,9 +70,11 @@ function getLaunchProps(id: ResourceIdentifier) {
  */
 export const EntityDetails: React.FC<EntityDetailsProps> = ({
     id,
-    versionView = false
+    versionView = false,
+    showStaticGraph = false
 }) => {
     const sections = entitySections[id.resourceType];
+    const workflowId = id as WorkflowId;
     const project = useProject(id.project);
     const styles = useStyles();
     const [showLaunchForm, setShowLaunchForm] = React.useState(false);
@@ -99,13 +104,18 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
                 </div>
             )}
             {sections.versions ? (
-                <div
-                    className={classNames(styles.versionsContainer, {
-                        [styles.versionView]: versionView
-                    })}
-                >
-                    <EntityVersions id={id} versionView={versionView} />
-                </div>
+                <>
+                    {showStaticGraph ? (
+                        <StaticGraphContainer workflowId={workflowId} />
+                    ) : null}
+                    <div
+                        className={classNames(styles.versionsContainer, {
+                            [styles.versionView]: versionView
+                        })}
+                    >
+                        <EntityVersions id={id} versionView={versionView} />
+                    </div>
+                </>
             ) : null}
             {sections.executions && !versionView ? (
                 <div className={styles.executionsContainer}>

diff --git a/src/components/Workflow/StaticGraphContainer.tsx b/src/components/Workflow/StaticGraphContainer.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Workflow, WorkflowId } from 'models/Workflow/types';
+import { useQuery, useQueryClient } from 'react-query';
+import { makeWorkflowQuery } from './workflowQueries';
+import { WaitForQuery } from 'components/common/WaitForQuery';
+import { DataError } from 'components/Errors/DataError';
+import { transformerWorkflowToDAG } from 'components/WorkflowGraph/transformerWorkflowToDAG';
+import { ReactFlowWrapper } from 'components/flytegraph/ReactFlow/ReactFlowWrapper';
+import { ConvertFlyteDagToReactFlows } from 'components/flytegraph/ReactFlow/transformerDAGToReactFlow';
+import { dNode } from 'models/Graph/types';
+import { getRFBackground } from 'components/flytegraph/ReactFlow/utils';
+import {
+    ConvertDagProps,
+    RFGraphTypes,
+    RFWrapperProps
+} from 'components/flytegraph/ReactFlow/types';
+
+export const renderStaticGraph = props => {
+    const workflow = props.closure.compiledWorkflow;
+    const version = props.id.version;
+
+    const dag: dNode = transformerWorkflowToDAG(workflow);
+    const rfGraphJson = ConvertFlyteDagToReactFlows({
+        root: dag,
+        maxRenderDepth: 0,
+        isStaticGraph: true
+    } as ConvertDagProps);
+    const backgroundStyle = getRFBackground().static;
+    const ReactFlowProps: RFWrapperProps = {
+        backgroundStyle,
+        rfGraphJson: rfGraphJson,
+        type: RFGraphTypes.static,
+        version: version
+    };
+    return <ReactFlowWrapper {...ReactFlowProps} />;
+};
+
+export interface StaticGraphContainerProps {
+    workflowId: WorkflowId;
+}
+
+export const StaticGraphContainer: React.FC<StaticGraphContainerProps> = ({
+    workflowId
+}) => {
+    const containerStyle = {
+        width: '100%',
+        height: '30%',
+        maxHeight: '400px',
+        minHeight: '220px'
+    };
+    const workflowQuery = useQuery<Workflow, Error>(
+        makeWorkflowQuery(useQueryClient(), workflowId)
+    );
+
+    return (
+        <div style={containerStyle}>
+            <WaitForQuery query={workflowQuery} errorComponent={DataError}>
+                {renderStaticGraph}
+            </WaitForQuery>
+        </div>
+    );
+};
diff --git a/src/components/Workflow/WorkflowVersionDetails.tsx b/src/components/Workflow/WorkflowVersionDetails.tsx
@@ -7,6 +7,7 @@ export interface WorkflowVersionDetailsRouteParams {
     projectId: string;
     domainId: string;
     workflowName: string;
+    workflowVersion: string;
 }
 export type WorkflowDetailsProps = WorkflowVersionDetailsRouteParams;
 
@@ -19,18 +20,20 @@ export type WorkflowDetailsProps = WorkflowVersionDetailsRouteParams;
 export const WorkflowVersionDetailsContainer: React.FC<WorkflowVersionDetailsRouteParams> = ({
     projectId,
     domainId,
-    workflowName
+    workflowName,
+    workflowVersion
 }) => {
     const id = React.useMemo<ResourceIdentifier>(
         () => ({
             resourceType: ResourceType.WORKFLOW,
             project: projectId,
             domain: domainId,
-            name: workflowName
+            name: workflowName,
+            version: workflowVersion
         }),
-        [projectId, domainId, workflowName]
+        [projectId, domainId, workflowName, workflowVersion]
     );
-    return <EntityDetails id={id} versionView />;
+    return <EntityDetails id={id} versionView showStaticGraph />;
 };
 
 export const WorkflowVersionDetails = withRouteParams<

diff --git a/src/components/flytegraph/ReactFlow/NodeStatusLegend.tsx b/src/components/flytegraph/ReactFlow/NodeStatusLegend.tsx
@@ -39,7 +39,7 @@ export const Legend = () => {
     const positionStyle: CSSProperties = {
         bottom: '1rem',
         right: '1rem',
-        zIndex: 10000,
+        zIndex: 10,
         position: 'absolute',
         width: '150px'
     };

diff --git a/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx b/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx
@@ -1,6 +1,6 @@
 import { ConvertFlyteDagToReactFlows } from 'components/flytegraph/ReactFlow/transformerDAGToReactFlow';
 import * as React from 'react';
-import { RFWrapperProps, RFGraphTypes } from './types';
+import { RFWrapperProps, RFGraphTypes, ConvertDagProps } from './types';
 import { getRFBackground } from './utils';
 import { ReactFlowWrapper } from './ReactFlowWrapper';
 import { Legend } from './NodeStatusLegend';
@@ -12,11 +12,12 @@ import { Legend } from './NodeStatusLegend';
  */
 const ReactFlowGraphComponent = props => {
     const { data, onNodeSelectionChanged, nodeExecutionsById } = props;
-    const rfGraphJson = ConvertFlyteDagToReactFlows(
-        data,
-        nodeExecutionsById,
-        onNodeSelectionChanged
-    );
+    const rfGraphJson = ConvertFlyteDagToReactFlows({
+        root: data,
+        nodeExecutionsById: nodeExecutionsById,
+        onNodeSelectionChanged: onNodeSelectionChanged,
+        maxRenderDepth: 2
+    } as ConvertDagProps);
 
     const backgroundStyle = getRFBackground().nested;
     const ReactFlowProps: RFWrapperProps = {

diff --git a/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx
@@ -13,7 +13,9 @@ import {
     ReactFlowCustomStartNode,
     ReactFlowCustomTaskNode,
     ReactFlowCustomSubworkflowNode,
-    ReactFlowCustomMaxNested
+    ReactFlowCustomMaxNested,
+    ReactFlowStaticNested,
+    ReactFlowStaticNode
 } from './customNodeComponents';
 import setReactFlowGraphLayout from './utils';
 
@@ -28,7 +30,9 @@ const CustomNodeTypes = {
     FlyteNode_end: ReactFlowCustomEndNode,
     FlyteNode_nestedStart: ReactFlowCustomNestedPoint,
     FlyteNode_nestedEnd: ReactFlowCustomNestedPoint,
-    FlyteNode_nestedMaxDepth: ReactFlowCustomMaxNested
+    FlyteNode_nestedMaxDepth: ReactFlowCustomMaxNested,
+    FlyteNode_staticNode: ReactFlowStaticNode,
+    FlyteNode_staticNestedNode: ReactFlowStaticNested
 };
 
 /**
@@ -39,7 +43,8 @@ const CustomNodeTypes = {
  */
 const LayoutRC: React.FC<LayoutRCProps> = ({
     setElements,
-    setLayout
+    setLayout,
+    hasLayout
 }: LayoutRCProps) => {
     /* strore is only populated onLoad for each flow */
     const nodes = useStoreState(store => store.nodes);
@@ -53,6 +58,12 @@ const LayoutRC: React.FC<LayoutRCProps> = ({
         }
     }
 
+    useEffect(() => {
+        if (!hasLayout && !computeLayout) {
+            setComputeLayout(true);
+        }
+    }, [hasLayout, computeLayout]);
+
     useEffect(() => {
         if (!computeLayout) {
             const nodesAndEdges = (nodes as any[]).concat(edges);
@@ -82,10 +93,12 @@ const LayoutRC: React.FC<LayoutRCProps> = ({
  */
 export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
     rfGraphJson,
-    backgroundStyle
+    backgroundStyle,
+    version
 }) => {
     const [elements, setElements] = useState(rfGraphJson);
-    const [layedOut, setLayout] = useState(false);
+    const [currentVersion, setCurrentVersion] = useState(version);
+    const [hasLayout, setHasLayout] = useState(false);
     const [reactFlowInstance, setReactFlowInstance] = useState<null | any>(
         null
     );
@@ -94,15 +107,22 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
         setReactFlowInstance(rf);
     };
 
+    useEffect(() => {
+        if (version != currentVersion) {
+            setHasLayout(false);
+            setElements(rfGraphJson);
+        }
+    }, [version, rfGraphJson, currentVersion]);
+
     /**
      * Note: setLayout passed/called by <LayoutRC>
      */
     useEffect(() => {
-        if (layedOut && reactFlowInstance) {
-            reactFlowInstance?.fitView({ padding: 0.15 });
-            false;
+        if (hasLayout && reactFlowInstance) {
+            reactFlowInstance?.fitView({ padding: 0 });
+            setCurrentVersion(version);
         }
-    }, [layedOut, reactFlowInstance]);
+    }, [hasLayout, reactFlowInstance]);
     /**
      * STEPS:
      *  - have each node click return nodes {text.data}
@@ -124,7 +144,8 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
                 />
             </ReactFlow>
             <LayoutRC
-                setLayout={setLayout}
+                hasLayout={hasLayout}
+                setLayout={setHasLayout}
                 setElements={setElements}
             ></LayoutRC>
         </ReactFlowProvider>

diff --git a/src/components/flytegraph/ReactFlow/customNodeComponents.tsx b/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
@@ -171,13 +171,90 @@ export const ReactFlowCustomMaxNested = ({ data }: any) => {
     );
 };
 
+export const ReactFlowStaticNested = ({ data }: any) => {
+    const styles = getGraphNodeStyle(dTypes.staticNestedNode);
+    const containerStyle = {};
+    const taskContainerStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: '-.55rem',
+        zIndex: 0,
+        right: '.15rem'
+    };
+    const taskTypeStyle: React.CSSProperties = {
+        backgroundColor: COLOR_GRAPH_BACKGROUND,
+        color: 'white',
+        padding: '.1rem .2rem',
+        fontSize: '.3rem'
+    };
+
+    const renderTaskType = () => {
+        return (
+            <div style={taskContainerStyle}>
+                <div style={taskTypeStyle}>{data.taskType}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div style={containerStyle}>
+            {data.taskType ? renderTaskType() : null}
+            <div style={styles}>{data.text}</div>
+            {renderDefaultHandles(
+                data.scopedId,
+                getGraphHandleStyle('source'),
+                getGraphHandleStyle('target')
+            )}
+        </div>
+    );
+};
+
+export const ReactFlowStaticNode = ({ data }: any) => {
+    const styles = getGraphNodeStyle(dTypes.staticNode);
+    const containerStyle = {};
+    const taskContainerStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: '-.55rem',
+        zIndex: 0,
+        right: '.15rem'
+    };
+    const taskTypeStyle: React.CSSProperties = {
+        backgroundColor: COLOR_GRAPH_BACKGROUND,
+        color: 'white',
+        padding: '.1rem .2rem',
+        fontSize: '.3rem'
+    };
+
+    const renderTaskType = () => {
+        return (
+            <div style={taskContainerStyle}>
+                <div style={taskTypeStyle}>{data.taskType}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div style={containerStyle}>
+            {data.taskType ? renderTaskType() : null}
+            <div style={styles}>{data.text}</div>
+            {renderDefaultHandles(
+                data.scopedId,
+                getGraphHandleStyle('source'),
+                getGraphHandleStyle('target')
+            )}
+        </div>
+    );
+};
+
 /**
  * Custom component used by ReactFlow.  Renders a label (text)
  * and any edge handles.
  * @param props.data data property of ReactFlowGraphNodeData
  */
 
 export const ReactFlowCustomTaskNode = ({ data }: any) => {
+    // console.log(`\n\n@ReactFlowCustomTaskNode: ${data.text}`);
+    // console.log('\t data.nodeType:', dTypes[data.nodeType]);
+    // console.log('\t data.nodeExecutionStatus:', data.nodeExecutionStatus);
     const styles = getGraphNodeStyle(data.nodeType, data.nodeExecutionStatus);
     const onNodeSelectionChanged = data.onNodeSelectionChanged;
     const [selectedNode, setSelectedNode] = useState(false);
@@ -277,7 +354,7 @@ export const ReactFlowCustomSubworkflowNode = ({ data }: any) => {
  */
 export const ReactFlowCustomBranchNode = ({ data }: any) => {
     const { dag } = data;
-    console.log('@ReactFlowCustomBranchNode: data');
+    console.log('@ReactFlowCustomBranchNode: data', data);
     const backgroundStyle = getRFBackground().nested;
     const borderStyle = getNestedContainerStyle(data.nodeExecutionStatus);
     const { estimatedDimensions } = setReactFlowGraphLayout(dag, 'LR', true);