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

Alerting: Fix runbook URL overflow (#93516)

Browse Source 
* 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:
Jára Benc 2024-11-26 10:12:25 +01:00 committed by GitHub
parent 3990637af9
commit a9099a56db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx
View File

@ -1,9 +1,10 @@
import { css } from '@emotion/css';
import { chain, isEmpty, truncate } from 'lodash';
import { useState } from 'react';
import { useMeasure } from 'react-use';
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 { PageInfoItem } from 'app/core/components/Page/types';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
@ -153,12 +154,13 @@ const createMetadata = (rule: CombinedRule): PageInfoItem[] => {
const hasLabels = !isEmpty(labels);
const interval = group.interval;
const styles = useStyles2(getStyles);
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 */
const truncatedUrl = truncate(runbookUrl, { length: 42 });
const valueToAdd = isValidRunbookURL(runbookUrl) ? (
<TextLink variant="bodySmall" href={runbookUrl} external>
<TextLink variant="bodySmall" className={styles.url} href={runbookUrl} external>
{truncatedUrl}
</TextLink>
) : (
@ -410,6 +412,18 @@ export const calculateTotalInstances = (stats: CombinedRule['instanceTotals']) =
.value();
};
const getStyles = () => ({
title: css({
display: 'flex',
alignItems: 'center',
gap: 8,
minWidth: 0,
}),
url: css({
wordBreak: 'break-all',
}),
});
function isValidRunbookURL(url: string) {
const isRelative = url.startsWith('/');
let isAbsolute = false;