Resources with dots `.` in their name don't render correctly in the UI

[taylorsilva]

Discussed in https://github.com/concourse/concourse/discussions/7607

^{Originally posted by **HemangLavana** September 28, 2021}  After upgrading to concourse 7.5.0 version, the UI seems messed up in chrome and firefox. I tried clearing the cookies and reloading but it didn't help. Any idea if something is not setup correctly on my end.

Reproduce

Set this pipeline then view it in the UI

resources:
- name: a.resource.with.dots
  type: mock
- name: a-resource-with-dashes
  type: mock

jobs:
- name: job-with-dash
  plan:
  - get: a.resource.with.dots
  - get: a-resource-with-dashes
- name: job.with.dot
  plan:
  - get: a.resource.with.dots
  - get: a-resource-with-dashes

Confirmed with git bisect that this is caused by #7438

[HemangLavana]

In addition to the resource name with a dot in it, pls ensure that your validation setup also includes jobname with a dot in it - ex: job.A

[taylorsilva]

Update the post with that details too.

[jpalermo]

Seeing similar behavior, and getting errors like this in the Chrome console:

d3.v355.min.js:3 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '#node-job-unit-mysql-input-main-mysql-5.7-image-unconstrained' is not a valid selector.
    at Ma (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:3:9928)
    at SVGGElement.<anonymous> (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:1:2222)
    at Array._a.select (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:3:10492)
    at GraphNode.width (https://ci.bosh-ecosystem.cf-app.com/public/graph.mjs:629:28)
    at SVGTextElement.<anonymous> (https://ci.bosh-ecosystem.cf-app.com/public/index.mjs:157:114)
    at SVGTextElement.o (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:1:2522)
    at https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:3:14537
    at Y (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:1:4463)
    at Array._a.each (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:3:14512)
    at Array._a.attr (https://ci.bosh-ecosystem.cf-app.com/public/d3.v355.min.js:3:11364)

[klakin-pivotal]

To be painfully clear, the "similar behavior" that jpalermo reports is "You can see all of the Concourse GUI, except for the boxes-and-lines visualization of the pipeline, which isn't rendered. That area of the screen is just the background color, with no boxes and lines.". If you switch to another Job Group that doesn't contain resources with . in their name, those boxes and lines render, but when you switch back, the area is blank again.

One would assume that the Uncaught DOMException we're seeing in the console is interrupting the rendering of the boxes-and-lines pipeline visualization.

[taylorsilva]

@jpalermo @klakin-pivotal I was able to reproduce your issue and verify that the PR we made this morning will fix the issue.

[reneighbor]

@taylorsilva Hi!! Would you all be willing to cut a 7.5.1 so that we can deploy this fix? Or, if it's already out for the 7.5 line, let me know what I've missed. Thanks Taylor.

[taylorsilva]

Anything for you Renee! 😄 It's currently not out yet, it's sitting on master. We want to release a 7.6.0 but it's currently blocked by two things 😬 Hmm we don't patch OSS releases usually. I'll chat with the team to see if it's something we'd like to do though. If 7.6.0 seems a bit far off we'll try and push out a 7.5.1

[reneighbor]

Ah! Sounds good. Thanks Taylor!!

[klakin-pivotal]

Hmm we don't patch OSS releases usually.

Does this suggest that there's a commercial version of Concourse that we could have the company pay for that has this fix in it? (Or maybe that there's a commercial version of Concourse where bugs are addressed more quickly than in the OSS version?)

[taylorsilva]

Yes there's a commercial offering. It's no secret it's just that the our company (Pivotal -> VMware) focus on large companies (Fortune ~1000) as their customers, especially the business unit we're part of. Anybody can see it here: https://network.pivotal.io/products/p-concourse but you'll find there's no "Add to cart"/"Buy Now!" button cause you'd have to go through the sales team which likely won't want to talk to anyone that's part of a small/medium business.

That said, there are some folks who would probably be happy to provide paid support for small/medium businesses: https://concourse-ci.org/ecosystem.html#service-providers

Our current commercial version is 6.7.x. We're looking to make 7.4.x and then some future post-7.6.x version the next commercial versions.