From a9099a56db3a0518c28e02b082988c66187e7471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A1ra=20Benc?= <jaroslav.benc@grafana.com>
Date: Tue, 26 Nov 2024 10:12:25 +0100
Subject: [PATCH] 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>
---
 .../components/rule-viewer/RuleViewer.tsx      | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx
index 157b723fd1c..88063a53d9a 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewer.tsx
@@ -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;