From 59c2ffec0b4230e34d0ee1e16b119e9bd3ac1da7 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 12 Jan 2022 14:16:51 +0100
Subject: [PATCH] Alerting: manual backport of #43367

---
 .../unified/components/rules/ActionIcon.tsx   | 37 ++++++++++++++-----
 .../silences/SilencedAlertsTable.tsx          |  2 -
 .../silences/SilencedAlertsTableRow.tsx       |  7 ----
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
index dee4d21887a..eeff5435a16 100644
--- a/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
+++ b/public/app/features/alerting/unified/components/rules/ActionIcon.tsx
@@ -34,20 +34,37 @@ export const ActionIcon: FC<Props> = ({
   const ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;
   return (
     <Tooltip content={tooltip} placement={tooltipPlacement}>
-      {(() => {
-        if (to) {
-          return (
-            <Link aria-label={ariaLabel} to={to} target={target}>
-              {iconEl}
-            </Link>
-          );
-        }
-        return iconEl;
-      })()}
+      {to ? (
+        <GoTo url={to} label={ariaLabel} target={target}>
+          {iconEl}
+        </GoTo>
+      ) : (
+        iconEl
+      )}
     </Tooltip>
   );
 };
 
+interface GoToProps {
+  url: string;
+  label?: string;
+  target?: string;
+}
+
+const GoTo: FC<GoToProps> = ({ url, label, target, children }) => {
+  const absoluteUrl = url?.startsWith('http');
+
+  return absoluteUrl ? (
+    <a aria-label={label} href={url} target={target}>
+      {children}
+    </a>
+  ) : (
+    <Link aria-label={label} to={url} target={target}>
+      {children}
+    </Link>
+  );
+};
+
 export const getStyle = () => css`
   cursor: pointer;
 `;
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
index 0fc2376367a..14b08b8dc8f 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
@@ -22,7 +22,6 @@ const SilencedAlertsTable: FC<Props> = ({ silencedAlerts }) => {
           <col className={styles.colState} />
           <col />
           <col className={styles.colName} />
-          <col />
         </colgroup>
         <thead>
           <tr>
@@ -30,7 +29,6 @@ const SilencedAlertsTable: FC<Props> = ({ silencedAlerts }) => {
             <th>State</th>
             <th></th>
             <th>Alert name</th>
-            <th>Actions</th>
           </tr>
         </thead>
         <tbody>
diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
index 9cdb73ec3d1..3b14a25436b 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
@@ -1,9 +1,6 @@
 import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
 import React, { FC, useState } from 'react';
 import { CollapseToggle } from '../CollapseToggle';
-import { ActionIcon } from '../rules/ActionIcon';
-import { getAlertTableStyles } from '../../styles/table';
-import { useStyles2 } from '@grafana/ui';
 import { intervalToAbbreviatedDurationString } from '@grafana/data';
 import { AlertLabels } from '../AlertLabels';
 import { AmAlertStateTag } from './AmAlertStateTag';
@@ -15,7 +12,6 @@ interface Props {
 
 export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
-  const tableStyles = useStyles2(getAlertTableStyles);
 
   const duration = intervalToAbbreviatedDurationString({
     start: new Date(alert.startsAt),
@@ -38,9 +34,6 @@ export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => {
         </td>
         <td>for {duration} seconds</td>
         <td>{alertName}</td>
-        <td className={tableStyles.actionsCell}>
-          <ActionIcon icon="chart-line" to={alert.generatorURL} tooltip="View in explorer" />
-        </td>
       </tr>
       {!isCollapsed && (
         <tr className={className}>