mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Alerting: Fix runbook URL overflow (#93516)
* Fix runbook URL overflow * Re add truncate() * fix imports --------- Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
This commit is contained in:
parent
3990637af9
commit
a9099a56db
@ -1,9 +1,10 @@
|
|||||||
|
import { css } from '@emotion/css';
|
||||||
import { chain, isEmpty, truncate } from 'lodash';
|
import { chain, isEmpty, truncate } from 'lodash';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useMeasure } from 'react-use';
|
import { useMeasure } from 'react-use';
|
||||||
|
|
||||||
import { NavModelItem, UrlQueryValue } from '@grafana/data';
|
import { NavModelItem, UrlQueryValue } from '@grafana/data';
|
||||||
import { Alert, LinkButton, LoadingBar, Stack, TabContent, Text, TextLink } from '@grafana/ui';
|
import { Alert, LinkButton, LoadingBar, Stack, TabContent, Text, TextLink, useStyles2 } from '@grafana/ui';
|
||||||
import { t, Trans } from '@grafana/ui/src/utils/i18n';
|
import { t, Trans } from '@grafana/ui/src/utils/i18n';
|
||||||
import { PageInfoItem } from 'app/core/components/Page/types';
|
import { PageInfoItem } from 'app/core/components/Page/types';
|
||||||
import { useQueryParams } from 'app/core/hooks/useQueryParams';
|
import { useQueryParams } from 'app/core/hooks/useQueryParams';
|
||||||
@ -153,12 +154,13 @@ const createMetadata = (rule: CombinedRule): PageInfoItem[] => {
|
|||||||
const hasLabels = !isEmpty(labels);
|
const hasLabels = !isEmpty(labels);
|
||||||
|
|
||||||
const interval = group.interval;
|
const interval = group.interval;
|
||||||
|
const styles = useStyles2(getStyles);
|
||||||
|
|
||||||
if (runbookUrl) {
|
if (runbookUrl) {
|
||||||
/* TODO instead of truncating the string, we should use flex and text overflow properly to allow it to take up all of the horizontal space available */
|
/* TODO instead of truncating the string, we should use flex and text overflow properly to allow it to take up all of the horizontal space available */
|
||||||
const truncatedUrl = truncate(runbookUrl, { length: 42 });
|
const truncatedUrl = truncate(runbookUrl, { length: 42 });
|
||||||
const valueToAdd = isValidRunbookURL(runbookUrl) ? (
|
const valueToAdd = isValidRunbookURL(runbookUrl) ? (
|
||||||
<TextLink variant="bodySmall" href={runbookUrl} external>
|
<TextLink variant="bodySmall" className={styles.url} href={runbookUrl} external>
|
||||||
{truncatedUrl}
|
{truncatedUrl}
|
||||||
</TextLink>
|
</TextLink>
|
||||||
) : (
|
) : (
|
||||||
@ -410,6 +412,18 @@ export const calculateTotalInstances = (stats: CombinedRule['instanceTotals']) =
|
|||||||
.value();
|
.value();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getStyles = () => ({
|
||||||
|
title: css({
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 8,
|
||||||
|
minWidth: 0,
|
||||||
|
}),
|
||||||
|
url: css({
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
function isValidRunbookURL(url: string) {
|
function isValidRunbookURL(url: string) {
|
||||||
const isRelative = url.startsWith('/');
|
const isRelative = url.startsWith('/');
|
||||||
let isAbsolute = false;
|
let isAbsolute = false;
|
||||||
|
Loading…
Reference in New Issue
Block a user