[ENHANCEMENT]: Add dashboard-level links support by prakhar29jain · Pull Request #67 · perses/shared

prakhar29jain · 2026-02-23T06:28:46Z

Description

Adds support for dashboard-level links, allowing users to navigate between dashboards or external resources while preserving variable context.

Merge Panel level and Dashboard level Links support for scalability.

perses/perses#3905

Screenshots

UX-1:

UX-2:

Working after Variables rendering -

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

Gladorme · 2026-02-23T10:06:49Z

Only checked screenshot, please use the same layout as others drawers / editors

dashboards/src/components/DashboardLinks/DashboardLinks.tsx

dashboards/src/components/LinksDisplay/LinksDisplay.tsx

AntoineThebaud · 2026-02-23T10:18:07Z

dashboards/src/components/DashboardLinks/DashboardLinks.tsx

+  );
+}
+
+function DashboardLinkMenuItem({ link }: { link: Link }): ReactElement {


Same remark as above

AntoineThebaud · 2026-02-23T10:18:22Z

dashboards/src/components/DashboardLinks/DashboardLinks.tsx

+  );
+}
+
+function useLink(link: Link): Link {


same remark as above

prakhar29jain · 2026-02-26T07:04:12Z

I became more ambitious and went forward create a single component for Displaying Links...
This covers both Panel and Dashboard level links
@AntoineThebaud

dashboards/src/components/LinksDisplay/LinksDisplay.tsx

AntoineThebaud · 2026-02-27T14:44:16Z

Remarks for the UI after trying out locally:

links should also be displayed in edit mode imho
the theming isnt great in dark mode:

-> I'd say the simplest solution is to change the icon color to white
the theming here is also "too much" in case of invalid link imho

just the strings displayed in red is enough imho, but the rendering in white them is ok

so maybe you can try to find a background color that has less contrast with the rest of the popup
it lacks a bit of spacing between the chips
I played the mean QA here and it doesnt like it :D

-> I guess for the switch from chips to dropdown button, it could as well apply when the links container exceeds a certain width
there's some useless empty space in the editor that could be used to show more of the links:

prakhar29jain · 2026-03-03T09:16:13Z

Dark Mode UI with proper spacing in chips ✅:

Small Size of tables rows and Links now can be viewed in edit mode ✅:

Conditional/Dynamic chips rendering ✅:
Max character limit for the name(30) and url(70)to prevent overflow in the dashboard title area, but if either the name or url is too long, we will fall back to showing the links in a dropdown menu

Error contrast fixed ✅:

AntoineThebaud · 2026-03-03T10:59:39Z

Sorry I wasnt clear when I mentioned "useless empty space", I actually meant horizontal space between columns, not vertical space between each row (though I like the new design that is more compact)

It'd be good to display more of the URLs by shrinking the other columns that have quite some unused empty space.

Otherwise looks good!

prakhar29jain · 2026-03-04T05:23:10Z

New Design I believe that the name should be at least shown completely for better accesibility :

Gladorme

Nice PR, some comments ;)

Gladorme · 2026-03-04T14:57:48Z

dashboards/src/components/DashboardToolbar/DashboardToolbar.tsx

          sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}
        >
          {dashboardTitle}
+          {dashboardLinks.length > 0 && (


We need to check if isLinksEnabled is enabled here too

Well agreed I missed this :)

Gladorme · 2026-03-04T14:59:20Z

dashboards/src/components/LinksDisplay/LinksDisplay.tsx

+  // Default: show dropdown menu for multiple links
  return (
    <>
      <InfoTooltip description={`${links.length} links`} enterDelay={100}>


IMO, if there is only one link, it should not display a menu on the dashboard, the link could be directly clickable. Can be improved later in another PR, if others are fine with that

We already have that check just above the default return that you mentioned with proper comments.

// Dashboard variant: 1-3 links show as chips // Max character limit for the name and url to prevent overflow // in the dashboard title area, but if either the name or url is too long, // we will fall back to showing the links in a dropdown menu if (variant === 'dashboard' && links.length <= 3) { const canRenderAsChips = links.every((link) => { if (link.name) { return link.name.length < 30; } if (link.url) { return link.url.length < 70; } return false; }); if (canRenderAsChips) { return ( <Stack direction="row" spacing={1}> {links.map((link: Link) => ( <LinkChip key={link.url} link={link} /> ))} </Stack> ); } }

Ok, mb, I only tried with long name

Gladorme · 2026-03-04T15:14:08Z

dashboards/src/components/DashboardLinks/DashboardLinksEditor.tsx

+          <TableContainer>
+            <Table size="small" sx={{ tableLayout: 'fixed', width: '100%' }} aria-label="table of dashboard links">
+              <TableHead>
+                <TableRow>


Let's use all the place available

<TableRow> <TableCell>Name</TableCell> <TableCell>URL</TableCell> <TableCell width={80}>New Tab</TableCell> <TableCell align="right" width={180}> Actions </TableCell> </TableRow>

Well I think it is better to enforce css here as they waste a lot of space, since title is explaining the most what the URL. But even so wasting the space just does not makes sense to me.

Your suggestion:

with this:

<TableCell sx={{ width: 180 }}>Name</TableCell> <TableCell>URL</TableCell> <TableCell sx={{ width: 40 }}>New Tab</TableCell> <TableCell align="right" sx={{ width: 180 }}>

On wide screen, 180px is too small. That why I don't want hardcoded values for these fields

Gladorme · 2026-03-04T15:16:34Z

dashboards/src/components/DashboardLinks/DashboardLinksEditor.tsx

+        <TableCell component="th" scope="row" sx={{ fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {displayName}
+        </TableCell>
+        <TableCell


URL is wrap, title will help to see all url on hover, we could use tooltip, but I think title is enough

<TableCell title={link.url || '(no URL)'} ...

I do not understand said by we could use tooltip... it is already there right ? :)

There is currently no tooltip on hover of the url. If url is too long, user will not be able to know to end of it because of ellipsis

Gladorme · 2026-03-04T15:22:44Z

dashboards/src/context/DashboardProvider/DashboardProvider.tsx

  display?: Display;
  datasources?: Record<string, DatasourceSpec>;
+  links?: Link[];
+  setLinks: (links: Link[]) => void;


In readonly mode with embedded usage, it not useful to useful to define this method. Make it optional

setLinks?: (links: Link[]) => void;

I wonder if we should not use Slice instead too 🤔

Well I made it optional but do you really think we need a new file for the links-slice as I do not see much gain in that making the code more complex.
But If you insist I can refactor the code required.

Not a big fan of slices myself, but everything touching dashboard props is using slice, so let's continue to use it

…iagtion Signed-off-by: Prakhar JAIN <prakhar29jain@gmail.com>

prakhar29jain requested a review from a team as a code owner February 23, 2026 06:28

prakhar29jain force-pushed the dashboard-links branch 2 times, most recently from 73a717c to 5c0ea97 Compare February 23, 2026 06:37

prakhar29jain changed the title ~~[ENHANCEMENT]: ^Cpport Dashboards links for internal and external nav…~~ [ENHANCEMENT]: Add dashboard-level links support Feb 23, 2026

prakhar29jain changed the title ~~[ENHANCEMENT]: Add dashboard-level links support~~ [ENHANCEMENT]: Add dashboard-level links support #1642 Feb 23, 2026

prakhar29jain changed the title ~~[ENHANCEMENT]: Add dashboard-level links support #1642~~ [ENHANCEMENT]: Add dashboard-level links support Feb 23, 2026

AntoineThebaud reviewed Feb 23, 2026

View reviewed changes

This was referenced Feb 24, 2026

[ENHANCEMENT]: Update model for Dashboard links support perses/perses#3904

Closed

[ENHANCEMENT]: Update model for Dashboard links support perses/perses#3905

Merged

prakhar29jain force-pushed the dashboard-links branch from 5c0ea97 to b8b4d6b Compare February 26, 2026 07:00

AntoineThebaud reviewed Feb 27, 2026

View reviewed changes

dashboards/src/components/LinksDisplay/LinksDisplay.tsx Outdated Show resolved Hide resolved

dashboards/src/components/LinksDisplay/LinksDisplay.tsx Outdated Show resolved Hide resolved

prakhar29jain force-pushed the dashboard-links branch from b8b4d6b to 8b97c01 Compare March 3, 2026 09:16

prakhar29jain requested a review from AntoineThebaud March 3, 2026 10:19

prakhar29jain force-pushed the dashboard-links branch from 8b97c01 to 907b536 Compare March 4, 2026 05:22

Gladorme reviewed Mar 4, 2026

View reviewed changes

prakhar29jain force-pushed the dashboard-links branch from 907b536 to 400af9d Compare March 9, 2026 09:41

[ENHANCEMENT]: Support Dashboards links for internal and external nav…

2ed82a6

…iagtion Signed-off-by: Prakhar JAIN <prakhar29jain@gmail.com>

prakhar29jain force-pushed the dashboard-links branch from 400af9d to 2ed82a6 Compare March 9, 2026 09:52

prakhar29jain requested a review from Gladorme March 9, 2026 12:09

Conversation

prakhar29jain commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Checklist

UI Changes

Uh oh!

Gladorme commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prakhar29jain commented Feb 26, 2026

Uh oh!

Uh oh!

Uh oh!

AntoineThebaud commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

prakhar29jain commented Mar 3, 2026

Uh oh!

AntoineThebaud commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

prakhar29jain commented Mar 4, 2026

Uh oh!

Gladorme left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prakhar29jain Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Gladorme Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

prakhar29jain commented Feb 23, 2026 •

edited

Loading

Gladorme commented Feb 23, 2026 •

edited

Loading

AntoineThebaud commented Feb 27, 2026 •

edited

Loading

AntoineThebaud commented Mar 3, 2026 •

edited

Loading

prakhar29jain Mar 5, 2026 •

edited

Loading

Gladorme Mar 5, 2026 •

edited

Loading