add opsramp - detail page

[britt6612]

Deploy Preview

What does this PR do?

adds an example of OpsRamp to demo app figma

Where should the reviewer start?

sandbox/grommet-app/src/pages/layouts/kinds/OpsRamp

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• [ ] Small, medium, and large screen sizes
• [ ] Cross-browsers (FireFox, Chrome, and Safari)
• [ ] Light & dark modes
• [ ] All hyperlinks route properly

Accessibility Checks

• [ ] Keyboard interactions
• [ ] Screen reader experience
• [ ] Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• [ ] Console is free of warnings and errors
• [ ] Passes E2E commit checks
• [ ] Visual snapshots are reasonable

How should this be manually tested?

locally

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 771c2dc769f0d851907ff9aadcbf960199f86b55

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for rad-shortbread-897892 ready!

Name	Link
🔨 Latest commit	b62172f579c43e6eb897b52a578478f6e14bf51b
🔍 Latest deploy log	https://app.netlify.com/sites/rad-shortbread-897892/deploys/67da35f6c537570008995a83
😎 Deploy Preview	https://deploy-preview-4796--rad-shortbread-897892.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	771c2dc769f0d851907ff9aadcbf960199f86b55
🔍 Latest deploy log	https://app.netlify.com/sites/unrivaled-bublanina-3a9bae/deploys/67f899a53cb4050008e40fca
😎 Deploy Preview	https://deploy-preview-4796--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[britt6612]

few comments (need to look at how I can fix this for responsiveness)

[britt6612]

I almost wonder if maybe we should use the concept of mini chips here to align closer with design?

[taysea]

focus indicator being clipped -- this sometimes happens based on how boxes are nested/built up. Also, the whole "container" around the main content feels like it's not using "ContentPane" -- can we try using that component?

[taysea]

Should "Kubernetes" in sidebar nav be "active" since that's the page we're on?

[taysea]

The "upload" and "settings" buttons should also have kind="toolbar". Also, the space between toolbar and datatable feels quite tight.

[taysea]

Should undefined say "0" if there are none with undefined state? Also agree that our "Selector" feels a bit big. Would it help if the labels just read as "Down", "Up", "Unknown", "Undefined"? That would be more true to the original design wording.

[taysea]

On small screens, it feels like the sidebar nav should automatically close.

[taysea]

Can you adjust so the filters have more user friendly labels? (using properties on Data)

[taysea]

"OverView" --> "Overview"?

[taysea]

"Custom Attribute" --> "Custom Attributes"

[taysea]

Noticed one more thing, when I hit "Clear filters" should it also deselect the Selector?

https://github.com/user-attachments/assets/be4e169c-079b-4a00-84f1-00da8b0bb0f0

[britt6612]

Noticed one more thing, when I hit "Clear filters" should it also deselect the Selector?

Screen.Recording.2025-03-04.at.4.00.35.PM.mov

good catch will look into this it should clear

[taysea]

Now when I apply filters, the data isn't filtering based on it.

[britt6612]

Now when I apply filters, the data isn't filtering based on it.

should be fixed!

[britt6612]

Nice progress.

Mini quick filters are better. We need to ensure the selected state has enough affordance for accessibility. Border color on its own is not enough.

I was going to try and implement something along the lines to align with toggleGroup and the selected colors that use to visually see when something is selected

[netlify[bot]]

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	771c2dc769f0d851907ff9aadcbf960199f86b55
🔍 Latest deploy log	https://app.netlify.com/sites/hpe-theme-preview/deploys/67f899a5a21e0d0008d76f54
😎 Deploy Preview	https://deploy-preview-4796--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[britt6612]

Follow on work will be tracked here