Alerting: Improve instance count display (#114997)

* Update button text to Show All if filters are enabled

* Show state in text if filters enabled

* resolve PR comments
This commit is contained in:
Lauren
2025-12-11 11:01:53 +00:00
committed by GitHub
parent 9bec62a080
commit d568798c64
2 changed files with 34 additions and 12 deletions
@@ -40,26 +40,44 @@ interface ShowMoreInstancesProps {
stats: ShowMoreStats;
onClick?: React.ComponentProps<typeof LinkButton>['onClick'];
href?: React.ComponentProps<typeof LinkButton>['href'];
enableFiltering?: boolean;
alertState?: InstanceStateFilter;
}
function ShowMoreInstances({ stats, onClick, href }: ShowMoreInstancesProps) {
function ShowMoreInstances({ stats, onClick, href, enableFiltering, alertState }: ShowMoreInstancesProps) {
const styles = useStyles2(getStyles);
const { visibleItemsCount, totalItemsCount } = stats;
return (
<div className={styles.footerRow}>
<div>
<Trans
i18nKey="alerting.rule-details-matching-instances.showing-count"
values={{ visibleItemsCount, totalItemsCount }}
>
Showing {{ visibleItemsCount }} out of {{ totalItemsCount }} instances
</Trans>
{enableFiltering && alertState ? (
<Trans
i18nKey="alerting.rule-details-matching-instances.showing-count-with-state"
values={{ visibleItemsCount, alertState, totalItemsCount }}
>
Showing {{ visibleItemsCount }} {{ alertState }} out of {{ totalItemsCount }} instances
</Trans>
) : (
<Trans
i18nKey="alerting.rule-details-matching-instances.showing-count"
values={{ visibleItemsCount, totalItemsCount }}
>
Showing {{ visibleItemsCount }} out of {{ totalItemsCount }} instances
</Trans>
)}
</div>
<LinkButton size="sm" variant="secondary" data-testid="show-all" onClick={onClick} href={href}>
<Trans i18nKey="alerting.rule-details-matching-instances.button-show-all" values={{ totalItemsCount }}>
Show all {{ totalItemsCount }} alert instances
</Trans>
{enableFiltering ? (
<Trans i18nKey="alerting.rule-details-matching-instances.button-show-all">Show all</Trans>
) : (
<Trans
i18nKey="alerting.rule-details-matching-instances.button-show-all-instances"
values={{ totalItemsCount }}
>
Show all {{ totalItemsCount }} alert instances
</Trans>
)}
</LinkButton>
</div>
);
@@ -128,6 +146,8 @@ export function RuleDetailsMatchingInstances(props: Props) {
stats={stats}
onClick={enableFiltering ? resetFilter : undefined}
href={!enableFiltering ? ruleViewPageLink : undefined}
enableFiltering={enableFiltering}
alertState={alertState}
/>
) : undefined;
+4 -2
View File
@@ -2334,8 +2334,10 @@
"label-tenant-sources": "Tenant sources"
},
"rule-details-matching-instances": {
"button-show-all": "Show all {{totalItemsCount}} alert instances",
"showing-count": "Showing {{visibleItemsCount}} out of {{totalItemsCount}} instances"
"button-show-all": "Show all",
"button-show-all-instances": "Show all {{totalItemsCount}} alert instances",
"showing-count": "Showing {{visibleItemsCount}} out of {{totalItemsCount}} instances",
"showing-count-with-state": "Showing {{visibleItemsCount}} {{alertState}} out of {{totalItemsCount}} instances"
},
"rule-editor": {
"get-content": {