fix(cards): replace instances of card.component.name

[maxcao13]

Welcome to Cryostat! 👋

Before contributing, make sure you have:

• Read the contributing guidelines
• Linked a relevant issue which this PR resolves
• Linked any other relevant issues, PR's, or documentation, if any
• Resolved all conflicts, if any
• Rebased your branch PR on top of the latest upstream main branch
• Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
• Signed the last commit: git commit --amend --signoff

---

Fixes: #1079

Description of the change:

With help from Thuan, we figure out the bug. This change replaces all instances where we reference the Functional component name as data related to the dashboard. We need to do this because, it seems like Webpack minifys all instances of the component name in production mode: https://stackoverflow.com/questions/43800784/get-component-name-in-react. And then we end up with weird names and bad states because of this. That's also why there was no bug if running the yarn start:dev dev server.

How to manually test:

1. CD to a cryostat repo.
2. cd web-client and checkout this branch in that submodule e.g. git checkout f8592d891067c18a1f61f0cdbabc995974e56944
3. cd back to .. and run mvn clean -DskipTests package
4. Clear browser localstorage on https://localhost:8181
5. Should be solved if creating a new layout template.

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-1081-8b4b28d35523f57e16ade89994affceaf21492f3 sh smoketest.sh

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-1081-89b8d24d9c193a931acecace3426b7b5a6354aea sh smoketest.sh

[tthvo]

Looks good to me! Fixed the issue!

[andrewazores]

The minification explanation makes a lot of sense. I just ran into this, too (before this PR):

[andrewazores]

@aali309 and @mwangggg could you verify that this bug does not occur in the 2.3.0 released images? I checked yesterday and didn't seem to run into this issue. You can run that image to check the behaviour, as well as you can review the release branch source code and see if it looks like the same bug could be present.

[tthvo]

I can confirm that 2.3.0 image does not run into this bug. Seems like in 2.3.0, these functions are not minified and was allowed to keep source name.

I believe since we remove source map in production build after:

b9d9557#diff-d3465f3a71d5cc473d32d3919bb34796e47f195e78b453d88c727c3f5ad80e6e

The production code is now fully minified as desired, and also causes this bug to show up.

Here is a quick inspection of the production build of app....bundle.js. Notice, how the second one is minified and first one is just like source code (i.e. compiled to JS).

2.3.0 Build

var MBeanMetricsChartCardDescriptor = {\n    featureLevel: Settings_service/* FeatureLevel.PRODUCTION */.Lu.PRODUCTION,\n    title: \'CHART_CARD.MBEAN_METRICS_CARD_TITLE\',\n    cardSizes: MBeanMetricsChartCardSizes,\n    description: \'CHART_CARD.MBEAN_METRICS_CARD_DESCRIPTION\',\n    descriptionFull: "CHART_CARD.MBEAN_METRICS_CARD_DESCRIPTION_FULL",\n    component: MBeanMetricsChartCard,

Latest build

rd={featureLevel:Jt.Lu.PRODUCTION,title:"CHART_CARD.MBEAN_METRICS_CARD_TITLE",cardSizes:nd,description:"CHART_CARD.MBEAN_METRICS_CARD_DESCRIPTION",descriptionFull:"CHART_CARD.MBEAN_METRICS_CARD_DESCRIPTION_FULL",component:td,propControls:[{name:"CHART_CARD.PROP_CONTROLS.PERFORMANCE_METRIC.NAME",key:"chartKind",values:Xu.map((function(e){return e.displayName})),defaultValue:Xu[0].displayName