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: add support for absolute URLs in ActionIcon (#43367)

Browse Source
This commit is contained in:
Gilles De Mey 2022-01-10 13:11:43 +01:00 committed by GitHub
parent 0003bf7cc2
commit be61f192c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
public/app/features/alerting/unified/components/rules/ActionIcon.tsx
View File

@ -41,20 +41,37 @@ export const ActionIcon: FC<Props> = ({
return ( return (
<Tooltip content={tooltip} placement={tooltipPlacement}> <Tooltip content={tooltip} placement={tooltipPlacement}>
{(() => { {to ? (
if (to) { <GoTo url={to} label={ariaLabel} target={target}>
return ( {iconEl}
<Link to={to} target={target}> </GoTo>
{iconEl} ) : (
</Link> iconEl
); )}
}
return iconEl;
})()}
</Tooltip> </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` export const getStyle = () => css`
cursor: pointer; cursor: pointer;
`; `;

2
public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
View File

@ -22,7 +22,6 @@ const SilencedAlertsTable: FC<Props> = ({ silencedAlerts }) => {
<col className={styles.colState} /> <col className={styles.colState} />
<col /> <col />
<col className={styles.colName} /> <col className={styles.colName} />
<col />
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@ -30,7 +29,6 @@ const SilencedAlertsTable: FC<Props> = ({ silencedAlerts }) => {
<th>State</th> <th>State</th>
<th></th> <th></th>
<th>Alert name</th> <th>Alert name</th>
<th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

7
public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
View File

@ -1,9 +1,6 @@
import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types'; import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types';
import React, { FC, useState } from 'react'; import React, { FC, useState } from 'react';
import { CollapseToggle } from '../CollapseToggle'; 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 { intervalToAbbreviatedDurationString } from '@grafana/data';
import { AlertLabels } from '../AlertLabels'; import { AlertLabels } from '../AlertLabels';
import { AmAlertStateTag } from './AmAlertStateTag'; import { AmAlertStateTag } from './AmAlertStateTag';
@ -15,7 +12,6 @@ interface Props {
export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => { export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => {
const [isCollapsed, setIsCollapsed] = useState(true); const [isCollapsed, setIsCollapsed] = useState(true);
const tableStyles = useStyles2(getAlertTableStyles);
const duration = intervalToAbbreviatedDurationString({ const duration = intervalToAbbreviatedDurationString({
start: new Date(alert.startsAt), start: new Date(alert.startsAt),
@ -38,9 +34,6 @@ export const SilencedAlertsTableRow: FC<Props> = ({ alert, className }) => {
</td> </td>
<td>for {duration} seconds</td> <td>for {duration} seconds</td>
<td>{alertName}</td> <td>{alertName}</td>
<td className={tableStyles.actionsCell}>
<ActionIcon icon="chart-line" to={alert.generatorURL} tooltip="View in explorer" />
</td>
</tr> </tr>
{!isCollapsed && ( {!isCollapsed && (
<tr className={className}> <tr className={className}>