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

Dashboard: Fixes setting long links overflow (#72428)

Browse Source
This commit is contained in:
Krishna Dhakal 2023-07-28 18:53:41 +05:45 committed by GitHub
parent 0fa20b7152
commit c4731efb62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
View File

@ -1,7 +1,8 @@
import { css } from '@emotion/css';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { arrayUtils } from '@grafana/data'; import { arrayUtils } from '@grafana/data';
import { DeleteButton, HorizontalGroup, Icon, IconButton, TagList } from '@grafana/ui'; import { DeleteButton, HorizontalGroup, Icon, IconButton, TagList, useStyles2 } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { DashboardModel, DashboardLink } from '../../state/DashboardModel'; import { DashboardModel, DashboardLink } from '../../state/DashboardModel';
@ -14,6 +15,8 @@ type LinkSettingsListProps = {
}; };
export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => { export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => {
const styles = useStyles2(getStyles);
const [links, setLinks] = useState(dashboard.links); const [links, setLinks] = useState(dashboard.links);
const moveLink = (idx: number, direction: number) => { const moveLink = (idx: number, direction: number) => {
@ -69,8 +72,8 @@ export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListP
</td> </td>
<td role="gridcell"> <td role="gridcell">
<HorizontalGroup> <HorizontalGroup>
{link.title && <span>{link.title}</span>} {link.title && <span className={styles.titleWrapper}>{link.title}</span>}
{link.type === 'link' && <span>{link.url}</span>} {link.type === 'link' && <span className={styles.urlWrapper}>{link.url}</span>}
{link.type === 'dashboards' && <TagList tags={link.tags ?? []} />} {link.type === 'dashboards' && <TagList tags={link.tags ?? []} />}
</HorizontalGroup> </HorizontalGroup>
</td> </td>
@ -100,3 +103,16 @@ export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListP
</> </>
); );
}; };
const getStyles = () => ({
titleWrapper: css`
width: 20vw;
text-overflow: ellipsis;
overflow: hidden;
`,
urlWrapper: css`
width: 40vw;
text-overflow: ellipsis;
overflow: hidden;
`,
});