diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx index bbe445b3122..99fb6aba5e9 100644 --- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx +++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { createRef, PureComponent } from 'react'; import { Icon, Tooltip } from '@grafana/ui'; import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize'; import { getBackendSrv } from 'app/core/services/backend_srv'; @@ -19,6 +19,8 @@ interface State { export class DashboardLinksDashboard extends PureComponent { state: State = { resolvedLinks: [] }; + wrapperRef = createRef(); + listItemRef = createRef(); componentDidMount() { this.searchForDashboards(); @@ -43,7 +45,7 @@ export class DashboardLinksDashboard extends PureComponent { const { link } = this.props; return ( -
+
{link.tooltip && {linkElement}} {!link.tooltip && <>{linkElement}}
@@ -79,6 +81,16 @@ export class DashboardLinksDashboard extends PureComponent { ); }; + getDropdownLocationCssClass = (): string => { + const [pullLeftCssClass, pullRightCssClass] = ['pull-left', 'pull-right']; + const wrapper = this.wrapperRef.current; + const list = this.listItemRef.current; + if (!wrapper || !list) { + return pullRightCssClass; + } + return wrapper.offsetLeft > list.offsetWidth - wrapper.offsetWidth ? pullRightCssClass : pullLeftCssClass; + }; + renderDropdown = () => { const { link, linkInfo } = this.props; const { resolvedLinks } = this.state; @@ -94,7 +106,7 @@ export class DashboardLinksDashboard extends PureComponent { {linkInfo.title} -
    +
      {resolvedLinks.length > 0 && resolvedLinks.map((resolvedLink, index) => { return (