Alerting: add support for absolute URLs in ActionIcon (#43367)

public/app/features/alerting/unified/components/rules/ActionIcon.tsx

@@ -41,20 +41,37 @@ export const ActionIcon: FC<Props> = ({
 
   return (
     <Tooltip content={tooltip} placement={tooltipPlacement}>
-      {(() => {
-        if (to) {
-          return (
-            <Link 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;
 `;

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>

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}>