diff --git a/public/app/features/alerting/unified/triage/Workbench.tsx b/public/app/features/alerting/unified/triage/Workbench.tsx
index 64e39d64775..1d28aa3e285 100644
--- a/public/app/features/alerting/unified/triage/Workbench.tsx
+++ b/public/app/features/alerting/unified/triage/Workbench.tsx
@@ -4,8 +4,9 @@ import { useState } from 'react';
import { useMeasure } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
import { SceneQueryRunner } from '@grafana/scenes';
-import { ScrollContainer, useSplitter, useStyles2 } from '@grafana/ui';
+import { Box, EmptyState, ScrollContainer, useSplitter, useStyles2 } from '@grafana/ui';
import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
import LoadMoreHelper from '../rule-list/LoadMoreHelper';
@@ -26,6 +27,7 @@ type WorkbenchProps = {
groupBy?: string[];
filterBy?: Filter[];
queryRunner: SceneQueryRunner;
+ hasActiveFilters?: boolean;
};
const initialSize = 1 / 3;
@@ -116,7 +118,7 @@ function renderWorkbenchRow(
│ │ │ │
└─────────────────────────┘ └───────────────────────────────────┘
*/
-export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps) {
+export function Workbench({ domain, data, queryRunner, groupBy, hasActiveFilters = false }: WorkbenchProps) {
const styles = useStyles2(getStyles);
const isLoading = !queryRunner.isDataReadyToDisplay();
@@ -124,6 +126,10 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
// Calculate once: show folder metadata only if not grouping by grafana_folder
const enableFolderMeta = !groupBy?.includes('grafana_folder');
+
+ // Determine UI state
+ const showEmptyState = !isLoading && data.length === 0;
+ const showData = !isLoading && data.length > 0;
// splitter for template and payload editor
const splitter = useSplitter({
direction: 'row',
@@ -149,42 +155,62 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
-
+ {!showEmptyState && }
{/* content goes here */}
-
-
-
-
- {/* Render actual data */}
-
-
-
- {isLoading ? (
- <>
-
-
-
- >
+ {showEmptyState ? (
+
+
+ {hasActiveFilters ? (
+
+ No alert instances match your current set of filters for the selected time range.
+
) : (
- dataSlice.map((row, index) => {
- const rowKey = generateRowKey(row, index);
- return renderWorkbenchRow(row, leftColumnWidth, domain, rowKey, enableFolderMeta);
- })
+
+ You have no alert instances in a firing or pending state for the selected time range.
+
)}
- {hasMore && setPageIndex((prevIndex) => prevIndex + 1)} />}
-
-
-
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ {isLoading && (
+ <>
+
+
+
+ >
+ )}
+ {showData &&
+ dataSlice.map((row, index) => {
+ const rowKey = generateRowKey(row, index);
+ return renderWorkbenchRow(row, leftColumnWidth, domain, rowKey, enableFolderMeta);
+ })}
+ {hasMore && setPageIndex((prevIndex) => prevIndex + 1)} />}
+
+
+
+ >
+ )}
);
diff --git a/public/app/features/alerting/unified/triage/scene/Workbench.tsx b/public/app/features/alerting/unified/triage/scene/Workbench.tsx
index d83908c2e91..7df0b354c13 100644
--- a/public/app/features/alerting/unified/triage/scene/Workbench.tsx
+++ b/public/app/features/alerting/unified/triage/scene/Workbench.tsx
@@ -34,7 +34,17 @@ export function WorkbenchRenderer() {
const { data } = runner.useState();
const rows = data ? convertToWorkbenchRows(data, groupByKeys) : [];
- return ;
+ const hasFiltersApplied = queryFilter.length > 0;
+
+ return (
+
+ );
}
type DataPoint = Record, string> & Record;
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index d95bf14de31..d185a8ca321 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -2948,8 +2948,10 @@
"instance-details-drawer": {
"instance-details": "Instance details"
},
+ "no-firing-or-pending-instances": "You have no alert instances in a firing or pending state for the selected time range.",
"no-instances-found": "No alert instances found for rule: {{ruleUID}}",
"no-labels": "No labels",
+ "no-matching-instances-with-filters": "No alert instances match your current set of filters for the selected time range.",
"open-in-sidebar": "Open in sidebar",
"open-rule-details": "Open rule details",
"rule-details": {