Alerting: Fix instances link when served from subpath (#86432)

Fix instances link when served from subpath
This commit is contained in:
Konrad Lalik 2024-04-18 08:56:30 +02:00 committed by GitHub
parent 1327bdf575
commit 9614126cb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 14 deletions

View File

@ -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>({

View File

@ -15,7 +15,7 @@ interface Props {
rule?: CombinedRule;
instances: Alert[];
pagination?: PaginationProps;
footerRow?: JSX.Element;
footerRow?: React.ReactNode;
}
interface AlertWithCommonLabels extends Alert {

View File

@ -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 (