From 9614126cb7b3e0608ab57280afc8ebfc954ae20c Mon Sep 17 00:00:00 2001
From: Konrad Lalik <konrad.lalik@grafana.com>
Date: Thu, 18 Apr 2024 08:56:30 +0200
Subject: [PATCH] Alerting: Fix instances link when served from subpath
 (#86432)

Fix instances link when served from subpath
---
 .../unified/components/DynamicTable.tsx       |  2 +-
 .../components/rules/AlertInstancesTable.tsx  |  2 +-
 .../rules/RuleDetailsMatchingInstances.tsx    | 30 +++++++++++--------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/public/app/features/alerting/unified/components/DynamicTable.tsx b/public/app/features/alerting/unified/components/DynamicTable.tsx
index 8253423dae6..1665ee8e6fe 100644
--- a/public/app/features/alerting/unified/components/DynamicTable.tsx
+++ b/public/app/features/alerting/unified/components/DynamicTable.tsx
@@ -54,7 +54,7 @@ export interface DynamicTableProps<T = unknown> {
     items: Array<DynamicTableItemProps<T>>
   ) => ReactNode;
 
-  footerRow?: JSX.Element;
+  footerRow?: React.ReactNode;
 }
 
 export const DynamicTable = <T extends object>({
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
index d701a62f0ee..fd32c83574f 100644
--- a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
@@ -15,7 +15,7 @@ interface Props {
   rule?: CombinedRule;
   instances: Alert[];
   pagination?: PaginationProps;
-  footerRow?: JSX.Element;
+  footerRow?: React.ReactNode;
 }
 
 interface AlertWithCommonLabels extends Alert {
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx
index fcc1a0ac7fb..70b67368ba9 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx
@@ -1,10 +1,9 @@
 import { css, cx } from '@emotion/css';
 import { countBy, sum } from 'lodash';
 import React, { useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, useStyles2 } from '@grafana/ui';
+import { LinkButton, useStyles2 } from '@grafana/ui';
 import { MatcherFilter } from 'app/features/alerting/unified/components/alert-groups/MatcherFilter';
 import {
   AlertInstanceStateFilter,
@@ -34,24 +33,28 @@ interface ShowMoreStats {
   visibleItemsCount: number;
 }
 
-function ShowMoreInstances(props: { onClick: () => void; stats: ShowMoreStats }) {
+interface ShowMoreInstancesProps {
+  stats: ShowMoreStats;
+  onClick?: React.ComponentProps<typeof LinkButton>['onClick'];
+  href?: React.ComponentProps<typeof LinkButton>['href'];
+}
+
+function ShowMoreInstances({ stats, onClick, href }: ShowMoreInstancesProps) {
   const styles = useStyles2(getStyles);
-  const { onClick, stats } = props;
 
   return (
     <div className={styles.footerRow}>
       <div>
         Showing {stats.visibleItemsCount} out of {stats.totalItemsCount} instances
       </div>
-      <Button size="sm" variant="secondary" data-testid="show-all" onClick={onClick}>
+      <LinkButton size="sm" variant="secondary" data-testid="show-all" onClick={onClick} href={href}>
         Show all {stats.totalItemsCount} alert instances
-      </Button>
+      </LinkButton>
     </div>
   );
 }
 
-export function RuleDetailsMatchingInstances(props: Props): JSX.Element | null {
-  const history = useHistory();
+export function RuleDetailsMatchingInstances(props: Props) {
   const { rule, itemsDisplayLimit = Number.POSITIVE_INFINITY, pagination, enableFiltering = false } = props;
   const { promRule, namespace, instanceTotals } = rule;
 
@@ -97,16 +100,19 @@ export function RuleDetailsMatchingInstances(props: Props): JSX.Element | null {
     visibleItemsCount: visibleInstances.length,
   };
 
+  // createViewLink returns a link containing the app subpath prefix hence cannot be used
+  // in locationService.push as it will result in a double prefix
   const ruleViewPageLink = createViewLink(namespace.rulesSource, props.rule, location.pathname + location.search);
   const statsComponents = getComponentsFromStats(instanceTotals);
 
   const resetFilter = () => setAlertState(undefined);
-  const navigateToDetailView = () => history.push(ruleViewPageLink);
-
-  const onShowMoreInstances = enableFiltering ? resetFilter : navigateToDetailView;
 
   const footerRow = hiddenInstancesCount ? (
-    <ShowMoreInstances stats={stats} onClick={onShowMoreInstances} />
+    <ShowMoreInstances
+      stats={stats}
+      onClick={enableFiltering ? resetFilter : undefined}
+      href={!enableFiltering ? ruleViewPageLink : undefined}
+    />
   ) : undefined;
 
   return (