Skip to content

[ENHANCEMENT]: Add dashboard-level links support#67

Open
prakhar29jain wants to merge 1 commit intoperses:mainfrom
prakhar29jain:dashboard-links
Open

[ENHANCEMENT]: Add dashboard-level links support#67
prakhar29jain wants to merge 1 commit intoperses:mainfrom
prakhar29jain:dashboard-links

Conversation

@prakhar29jain
Copy link

@prakhar29jain prakhar29jain commented Feb 23, 2026

Description

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

perses/perses#3905

Screenshots

UX-1:

image

UX-2:

image

Working after Variables rendering -

image

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.

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

Signed-off-by: Prakhar JAIN <prakhar29jain@gmail.com>
@prakhar29jain prakhar29jain changed the title [ENHANCEMENT]: ^Cpport Dashboards links for internal and external nav… [ENHANCEMENT]: Add dashboard-level links support Feb 23, 2026
@prakhar29jain prakhar29jain changed the title [ENHANCEMENT]: Add dashboard-level links support [ENHANCEMENT]: Add dashboard-level links support #1642 Feb 23, 2026
@prakhar29jain prakhar29jain changed the title [ENHANCEMENT]: Add dashboard-level links support #1642 [ENHANCEMENT]: Add dashboard-level links support Feb 23, 2026
@Gladorme
Copy link
Member

Gladorme commented Feb 23, 2026

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

Comment on lines +46 to +62
// If there is only one link, show it directly as a chip
if (links.length === 1 && links[0]) {
const link = links[0];
return <DashboardLinkChip link={link} />;
}

// If there are 2-3 links, show them all as chips
if (links.length <= 3) {
return (
<Stack direction="row" spacing={0.5} alignItems="center">
{links.map((link) => (
<DashboardLinkChip key={link.url} link={link} />
))}
</Stack>
);
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's ok to remove the first return & go through the loop when there's only 1 link?

Suggested change
// If there is only one link, show it directly as a chip
if (links.length === 1 && links[0]) {
const link = links[0];
return <DashboardLinkChip link={link} />;
}
// If there are 2-3 links, show them all as chips
if (links.length <= 3) {
return (
<Stack direction="row" spacing={0.5} alignItems="center">
{links.map((link) => (
<DashboardLinkChip key={link.url} link={link} />
))}
</Stack>
);
}
// If there are a few links, show them all as chips
if (links.length <= 3) {
return (
<Stack direction="row" spacing={0.5} alignItems="center">
{links.map((link) => (
<DashboardLinkChip key={link.url} link={link} />
))}
</Stack>
);
}

}

// For more than 3 links, show a menu
return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this part is very similar to its PanelLinks counterpart; could you try to factorize & reuse here?

);
}

function DashboardLinkMenuItem({ link }: { link: Link }): ReactElement {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same remark as above

);
}

function useLink(link: Link): Link {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same remark as above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants