feat(dashboard): dashboard card catalog

[tthvo]

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

---

Related to #468

Description of the change:

• Used gallery view for supported card view.
• Fix JVM detail card (needed a fix height since child node uses flex box). This, however, is a temporary fix. Final refactor should clean this up when we support vertical resize.
• JFR Metrics is marked as Beta so quickstarts should follow.
• Remove some unused css rules.

Motivation for the change:

See #727 (comment)

Screenshots

Empty

Some cards

Catalog

[tthvo]

Compared to the original comments, there are not actual card previews tho. This requires us to bundle more screenshots so its not very ideal as the number of possible card grows.

We can try design some icons for it but for now, its just a general icon. Labels are also supported so that should also help explain.

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-4e2f591ce1ca237dcb5eae1802fa1db3559405d4 sh smoketest.sh

[tthvo]

Check with darkmode:

The header is a little dark but overall everything looks fine.

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-c6554337935d497b2e446b465a94f0ac44eb74ab sh smoketest.sh

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-a747a891f8e1f5e5c7bda7964c0a41ca4f62ea6a sh smoketest.sh

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-d33d2b46decbd22b350f28eeafc50e09dc04a137 sh smoketest.sh

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-a5b99269c4b5ca4413e25e60eb249ba2d2a64021 sh smoketest.sh

[andrewazores]

Compared to the original comments, there are not actual card previews tho. This requires us to bundle more screenshots so its not very ideal as the number of possible card grows.

Maybe not - we could just render the actual components but with fake data.

[tthvo]

Something like this works? The view is not interactive :)) the elements are there but there is an invisible overlay to cover it, disabling click events.

[andrewazores]

Looks perfect functionally. I think ideally the card components themselves should not know anything about "being fake" or not, the fake data should simply be supplied to them from the outside. This could mean via their props or it could mean by wrapping a context provider that provides faked data around the gallery preview card, for example a fake ServiceContext with a fake ApiService that just returns mock data. This could be a refactoring for later if you think it will take a lot of effort.

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-727263ee9a85c54e756ac4650d553326abb38aa3 sh smoketest.sh

[tthvo]

I think ideally the card components themselves should not know anything about "being fake" or not, the fake data should simply be supplied to them from the outside.

Yehh this would be very nice! Just that each card has a different set of data and are mostly self-contained now. I will leave it for later refactoring then cuz i might mess up the chart controller.

EDIT: Oh wait actually, from ur latest comments, i can give it a try.

[andrewazores]

Sounds good.

Before I dive into the implementation review, I'm not sure how I feel about placing the AddCard as the first element in the layout. Maybe it's just against what I've become used to, but it feels "in the way" to me when it's first in the list and therefore feels like perhaps the most important element in the list. I think keeping it as last, or perhaps even removing it and just making it into an action button on the new dashboard toolbar could be better. Maybe the AddCard should only appear if the current layout is empty, and otherwise that function is instead provided by a toolbar action button? Not sure if this conforms to PF design guidelines.

[tthvo]

Actually, i placed the add card first following this example:

https://www.patternfly.org/v4/demos/card-view/react-demos/card-view/

[andrewazores]

Yea, I'm not sure if I like that PF guideline though. The cards they demo are very simple and static and all the cards are pretty small in comparison to our dashboard.

[tthvo]

ohh yeh...hmm the toolbar now is for dashboard layout. I will try to see how to put the button there.

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-71cc50cdee8dbee8dbbf9ed579f5ab9b21fae1b6 sh smoketest.sh

[maxcao13]

I think the dashboard quickstart needs to be updated.

The UI looks really nice!

[maxcao13]

Is it possible to make the height of the modal a bit bigger to make the catalog fit two cards without scrolling on a normal viewport? I tried using height prop to modal at height=50em but for some reason that didn't work. Not sure if there is a way without using css rules and className of modal.

[maxcao13]

Some localization keys missing it seems from some refactoring...

[tthvo]

Is it possible to make the height of the modal a bit bigger to make the catalog fit two cards without scrolling on a normal viewport? I tried using height prop to modal at height=50em

Yeh I think I can try using percentage height. Tho, there is no guarantee that it will show all cards as it depends on the current browser dimension. However, the grid is scrollable to it should not be too bad.

Some localization keys missing it seems from some refactoring...

Opps. Looking now..

[maxcao13]

Thoughts on moving the panel content body in the drawer head like this so that there is less white space since there is no header?

        <DrawerHead>
        <DrawerPanelBody className="card-catalog__detail-panel-body">
          <Stack hasGutter>
           ...omitted
          </Stack>
        </DrawerPanelBody>
          <DrawerActions>
            <DrawerCloseButton onClick={() => setToViewCard(undefined)} />
          </DrawerActions>
        </DrawerHead>

Maybe could use some negative padding too...

[tthvo]

Maybe could use some negative padding too...

Negative margin should do the tricks^^

[tthvo]

Ready for review again :)) Addressed all suggestions now^^ One new thing is that the MBean metric card actually have some moving data points so it looks like its real time.

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-937-552c1646092cf3459b0804b929002576953cbcff sh smoketest.sh

[maxcao13]

Everything looks good to me now, great job!