Update node symbols

[janfaracik]

Raised at the recent Contributor Summit, it'd be cool if we could CMD click nodes in the graph. This PR does just that, as well as a few tidy ups along the way.

What's changed?

• Nodes are now links, meaning they're more accessible, focus navigable and CMD clickable
• We now use symbols from Jenkins core
• Minor tidy ups

Before

After

Testing done

• Tried with a basic pipeline, looks fine.
• If there's test data I can use I'm happy to try that.

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests - that demonstrates feature works or fixes the issue

[timja]

Stage view is broke (multi-pipeline-graph) Click stages from the job. Can also be shown on the job page if enabled on the appearance page.

[janfaracik]

Stage view is broke (multi-pipeline-graph) Click stages from the job. Can also be shown on the job page if enabled on the appearance page.

Fixed now -

[mikedld]

On the screenshots, the new icons look slightly misaligned vertically, shifted to the top.

[janfaracik]

On the screenshots, the new icons look slightly misaligned vertically, shifted to the top.

Good spot, fixed.

[timja]

404 when clicking on a stage from either the job page or the Stages page

[janfaracik]

          const currentPath = this.props.path;
          let nodeUrl = "";

          if (currentPath) {
            const runId = currentPath.split("=")[1];
            if (currentPath.startsWith("multi-pipeline-graph/")) {
              nodeUrl = `${runId}/pipeline-console?selected-node=${node.id}`
            } else {
              nodeUrl = `../${runId}/pipeline-console?selected-node=${node.id}`
            }

            nodes.push({...node, url: nodeUrl});
            continue;
          }

          const newPath = this.getTreePath();
          if (newPath.startsWith("pipeline-graph/tree")) {
            nodeUrl = `pipeline-console?selected-node=${node.id}`
          } else {
            nodeUrl = `../pipeline-console?selected-node=${node.id}`
          }

          nodes.push({...node, url: nodeUrl});

I've put in a very hacky (working) way of pulling the URL - happy to move it to the API (and provide absolute urls in the payload) if thats cleaner?

[timja]

Absolute URLs in the API would be cleaner if not too hard, currently its a pain, source of mistakes and has been broken before.

[janfaracik]

Added a url field to nodes, it's working now. Still feels a little hacky, any thoughts on the implementation?

[timja]

Added a url field to nodes, it's working now. Still feels a little hacky, any thoughts on the implementation?

Seems fine, can you take a look at the build failure please?

[timja]

Re-tested all LGTM! Thanks