Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add graph model generator and update UI components #750

Merged
merged 1 commit into from
Nov 18, 2019

Conversation

AlanGreene
Copy link
Member

@AlanGreene AlanGreene commented Nov 15, 2019

Changes

#675

  • add code to generate graph data model from set of Tekton resources
    representing a PipelineRun
  • simplify graph model to remove unecessary fields
  • add TaskRun / step status to nodes
  • update UI components to support dynamically redrawing the diagram
  • add click handlers so consumers can hook into graph interaction (Task / step
    selected)

Note: most of the diff (~600 lines) is sample data (examples/*.json) and can be ignored.

Submitter Checklist

These are the criteria that every PR should meet, please check them off as you
review them:

See the contribution guide
for more details.

@tekton-robot tekton-robot added the size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. label Nov 15, 2019
@AlanGreene AlanGreene force-pushed the graph_expand_status branch 2 times, most recently from 18bb6d3 to 6aa4b29 Compare November 15, 2019 20:56
packages/components/src/components/Graph/buildGraphData.js Outdated Show resolved Hide resolved
packages/components/src/components/Graph/buildGraphData.js Outdated Show resolved Hide resolved
packages/components/src/components/Graph/Graph.js Outdated Show resolved Hide resolved
@@ -93,7 +108,11 @@ export default class Graph extends PureComponent {
<VXGraph
graph={{ links, nodes }}
nodeComponent={c => (
<Node onClick={n => console.log('onClick', n)} {...c.node} />
<Node
onClick={isSubGraph ? onClickStep : onClickTask}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the three isSubGraph conditionals be in a single block outside the jsx ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what did you have in mind, something like this?

+let nodeOnClick = onClickTask;
+let nodeOnClickStep = onClickStep;
+let linkComponent = NodeLink;

+if (isSubGraph) {
+  nodeOnClick = onClickStep;
+  nodeOnClickStep = undefined;
+  linkComponent = () => null;
+}

...

  nodeComponent={c => (
    <Node
-      onClick={isSubGraph ? onClickStep : onClickTask}
+      onClick={nodeOnClick}
-      onClickStep={isSubGraph ? undefined : onClickStep}
+      onClickStep={nodeOnClickStep}
      {...c.node}
    />
  )}
-  linkComponent={isSubGraph ? () => null : NodeLink}
+  linkComponent={linkComponent}

not sure it's an improvement

packages/components/src/components/Graph/PipelineGraph.js Outdated Show resolved Hide resolved
- add code to generate graph data model from set of Tekton resources
  representing a PipelineRun
- simplify graph model to remove unecessary fields
- add TaskRun / step status to nodes
- update UI components to support dynamically redrawing the diagram
- add click handlers so consumers can hook into graph interaction (Task / step
  selected)
@AlanGreene
Copy link
Member Author

@steveodonovan thanks for the feedback, addressed it all bar the one still open above. Also refactored the main function in buildGraphData.js to extract the individual stages and hopefully make it a little more readable.

Copy link
Member

@steveodonovan steveodonovan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/approve
/lgtm

@tekton-robot tekton-robot added the lgtm Indicates that a PR is ready to be merged. label Nov 18, 2019
@tekton-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: steveodonovan

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@tekton-robot tekton-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Nov 18, 2019
@tekton-robot tekton-robot merged commit e95ee95 into tektoncd:master Nov 18, 2019
@AlanGreene AlanGreene deleted the graph_expand_status branch November 18, 2019 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. lgtm Indicates that a PR is ready to be merged. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants