mirror of https://github.com/grafana/grafana
DashboardScene: Support dashboard links (#77855)
* MenuItem: Allow react node as label * LinkButton: Expose ButtonLinkProps * Typecheck fix * DashboardLinks: Refactor and use LinkButton and menu * DashbaordLinks scene object * Use flex layout for dashboard controls * Update public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * fix keepTime and includeVars * Add ellipsis to menu item label and description * Use DashboardLink type from grafana/schema * Update dashboard scene controls layout * Fix e2e * Test fix * Bring back keyboard navigation * Remove unused code * One more fix --------- Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> Co-authored-by: Torkel Ödegaard <torkel@grafana.com>pull/78179/head^2
Dominik Prokop
2 years ago
committed by
GitHub
parent
dfa506857a
commit
0122f7ccad
@ -0,0 +1,42 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { SceneObjectState, SceneObject, SceneObjectBase, SceneComponentProps } from '@grafana/scenes'; |
||||||
|
import { Box, Stack } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { DashboardLinksControls } from './DashboardLinksControls'; |
||||||
|
|
||||||
|
interface DashboardControlsState extends SceneObjectState { |
||||||
|
variableControls: SceneObject[]; |
||||||
|
timeControls: SceneObject[]; |
||||||
|
linkControls: DashboardLinksControls; |
||||||
|
} |
||||||
|
export class DashboardControls extends SceneObjectBase<DashboardControlsState> { |
||||||
|
static Component = DashboardControlsRenderer; |
||||||
|
} |
||||||
|
|
||||||
|
function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardControls>) { |
||||||
|
const { variableControls, linkControls, timeControls } = model.useState(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Stack |
||||||
|
grow={1} |
||||||
|
direction={{ |
||||||
|
md: 'row', |
||||||
|
xs: 'column', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Stack grow={1} wrap={'wrap'}> |
||||||
|
{variableControls.map((c) => ( |
||||||
|
<c.Component model={c} key={c.state.key} /> |
||||||
|
))} |
||||||
|
<Box grow={1} /> |
||||||
|
<linkControls.Component model={linkControls} /> |
||||||
|
</Stack> |
||||||
|
<Stack justifyContent={'flex-end'}> |
||||||
|
{timeControls.map((c) => ( |
||||||
|
<c.Component model={c} key={c.state.key} /> |
||||||
|
))} |
||||||
|
</Stack> |
||||||
|
</Stack> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { sanitizeUrl } from '@grafana/data/src/text/sanitize'; |
||||||
|
import { selectors } from '@grafana/e2e-selectors'; |
||||||
|
import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes'; |
||||||
|
import { DashboardLink } from '@grafana/schema'; |
||||||
|
import { Tooltip } from '@grafana/ui'; |
||||||
|
import { linkIconMap } from 'app/features/dashboard/components/LinksSettings/LinkSettingsEdit'; |
||||||
|
import { |
||||||
|
DashboardLinkButton, |
||||||
|
DashboardLinksDashboard, |
||||||
|
} from 'app/features/dashboard/components/SubMenu/DashboardLinksDashboard'; |
||||||
|
import { getLinkSrv } from 'app/features/panel/panellinks/link_srv'; |
||||||
|
|
||||||
|
interface DashboardLinksControlsState extends SceneObjectState { |
||||||
|
links: DashboardLink[]; |
||||||
|
dashboardUID: string; |
||||||
|
} |
||||||
|
|
||||||
|
export class DashboardLinksControls extends SceneObjectBase<DashboardLinksControlsState> { |
||||||
|
static Component = DashboardLinksControlsRenderer; |
||||||
|
} |
||||||
|
|
||||||
|
function DashboardLinksControlsRenderer({ model }: SceneComponentProps<DashboardLinksControls>) { |
||||||
|
const { links, dashboardUID } = model.useState(); |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{links.map((link: DashboardLink, index: number) => { |
||||||
|
const linkInfo = getLinkSrv().getAnchorInfo(link); |
||||||
|
const key = `${link.title}-$${index}`; |
||||||
|
|
||||||
|
if (link.type === 'dashboards') { |
||||||
|
return <DashboardLinksDashboard key={key} link={link} linkInfo={linkInfo} dashboardUID={dashboardUID} />; |
||||||
|
} |
||||||
|
|
||||||
|
const icon = linkIconMap[link.icon]; |
||||||
|
|
||||||
|
const linkElement = ( |
||||||
|
<DashboardLinkButton |
||||||
|
icon={icon} |
||||||
|
href={sanitizeUrl(linkInfo.href)} |
||||||
|
target={link.targetBlank ? '_blank' : undefined} |
||||||
|
rel="noreferrer" |
||||||
|
data-testid={selectors.components.DashboardLinks.link} |
||||||
|
> |
||||||
|
{linkInfo.title} |
||||||
|
</DashboardLinkButton> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div key={key} data-testid={selectors.components.DashboardLinks.container}> |
||||||
|
{link.tooltip ? <Tooltip content={linkInfo.tooltip}>{linkElement}</Tooltip> : linkElement} |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue