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:
+30
-10
@@ -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;
|
||||
|
||||
|
||||
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user