IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard links: Places drop down list so it's always visible (#28330)

Browse Source 
* calculating whether to place the list on the right or left edge of the parent

* change naming and add import of createRef
This commit is contained in:
maknik 2020-10-19 06:16:10 +02:00 committed by GitHub
parent 77b1e6311f
commit cdab6028e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
View File

@ -1,4 +1,4 @@
import React, { PureComponent } from 'react'; import React, { createRef, PureComponent } from 'react';
import { Icon, Tooltip } from '@grafana/ui'; import { Icon, Tooltip } from '@grafana/ui';
import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize'; import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
import { getBackendSrv } from 'app/core/services/backend_srv'; import { getBackendSrv } from 'app/core/services/backend_srv';
@ -19,6 +19,8 @@ interface State {
export class DashboardLinksDashboard extends PureComponent<Props, State> { export class DashboardLinksDashboard extends PureComponent<Props, State> {
state: State = { resolvedLinks: [] }; state: State = { resolvedLinks: [] };
wrapperRef = createRef<HTMLDivElement>();
listItemRef = createRef<HTMLUListElement>();
componentDidMount() { componentDidMount() {
this.searchForDashboards(); this.searchForDashboards();
@ -43,7 +45,7 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
const { link } = this.props; const { link } = this.props;
return ( return (
<div className="gf-form" key={key} aria-label={selector}> <div className="gf-form" key={key} aria-label={selector} ref={this.wrapperRef}>
{link.tooltip && <Tooltip content={link.tooltip}>{linkElement}</Tooltip>} {link.tooltip && <Tooltip content={link.tooltip}>{linkElement}</Tooltip>}
{!link.tooltip && <>{linkElement}</>} {!link.tooltip && <>{linkElement}</>}
</div> </div>
@ -79,6 +81,16 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
); );
}; };
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 = () => { renderDropdown = () => {
const { link, linkInfo } = this.props; const { link, linkInfo } = this.props;
const { resolvedLinks } = this.state; const { resolvedLinks } = this.state;
@ -94,7 +106,7 @@ export class DashboardLinksDashboard extends PureComponent<Props, State> {
<Icon name="bars" /> <Icon name="bars" />
<span>{linkInfo.title}</span> <span>{linkInfo.title}</span>
</a> </a>
<ul className="dropdown-menu pull-right" role="menu"> <ul className={'dropdown-menu ' + this.getDropdownLocationCssClass()} role="menu" ref={this.listItemRef}>
{resolvedLinks.length > 0 && {resolvedLinks.length > 0 &&
resolvedLinks.map((resolvedLink, index) => { resolvedLinks.map((resolvedLink, index) => {
return ( return (