grafana · laurenashleigh · Nov 5, 2025 · Nov 3, 2025 · Nov 4, 2025 · Nov 4, 2025
@@ -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 { 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,14 +118,18 @@ 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();
   const [pageIndex, setPageIndex] = useState<number>(1);
 
   // 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,17 +155,20 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
         <div {...splitter.primaryProps}>
           <div ref={leftColumnRef} className={cx(styles.flexFull, styles.minColumnWidth)} />
         </div>
-        <div {...splitter.splitterProps} />
+        {!showEmptyState && <div {...splitter.splitterProps} />}
         <div {...splitter.secondaryProps}>
           <div ref={rightColumnRef} className={cx(styles.flexFull, styles.minColumnWidth)} />
         </div>
       </div>
       {/* content goes here */}
       <div data-testid="groups-container" className={cx(splitter.containerProps.className, styles.groupsContainer)}>
-        <div className={cx(styles.groupItemWrapper(leftColumnWidth), styles.summaryContainer)}>
-          <SummaryStatsReact />
-          <SummaryChartReact />
-        </div>
+        {/* Only show summary stats and chart when we have data or are loading */}
+        {!showEmptyState && (
+          <div className={cx(styles.groupItemWrapper(leftColumnWidth), styles.summaryContainer)}>
+            <SummaryStatsReact />
+            <SummaryChartReact />
+          </div>
+        )}
         {/* Render actual data */}
         <div className={styles.virtualizedContainer}>
           <WorkbenchProvider
@@ -168,19 +177,37 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
             domain={domain}
             queryRunner={queryRunner}
           >
-            <ScrollContainer height="100%" width="100%" scrollbarWidth="none" showScrollIndicators>
-              {isLoading ? (
+            <ScrollContainer height="100%" width="100%" scrollbarWidth="none" showScrollIndicators={showData}>
+              {isLoading && (
                 <>
                   <GenericRowSkeleton key="skeleton-1" width={leftColumnWidth} depth={0} />
                   <GenericRowSkeleton key="skeleton-2" width={leftColumnWidth} depth={0} />
                   <GenericRowSkeleton key="skeleton-3" width={leftColumnWidth} depth={0} />
                 </>
-              ) : (
+              )}
+              {showEmptyState && (
+                <div className={styles.emptyStateContainer}>
+                  <EmptyState
+                    variant="not-found"
+                    message={hasActiveFilters ? 'No matching instances found' : 'No firing or pending instances'}
+                  >
+                    {hasActiveFilters ? (
+                      <Trans i18nKey="alerting.triage.no-matching-instances-with-filters">
+                        No alert instances match your current set of filters for the selected time range.
+                      </Trans>
+                    ) : (
+                      <Trans i18nKey="alerting.triage.no-firing-or-pending-instances">
+                        You have no alert instances in a firing or pending state.
+                      </Trans>
+                    )}
+                  </EmptyState>
+                </div>
+              )}
+              {showData &&
                 dataSlice.map((row, index) => {
                   const rowKey = generateRowKey(row, index);
                   return renderWorkbenchRow(row, leftColumnWidth, domain, rowKey, enableFolderMeta);
-                })
-              )}
+                })}
               {hasMore && <LoadMoreHelper handleLoad={() => setPageIndex((prevIndex) => prevIndex + 1)} />}
             </ScrollContainer>
           </WorkbenchProvider>
@@ -226,5 +253,14 @@ export const getStyles = (theme: GrafanaTheme2) => {
     minColumnWidth: css({
       minWidth: 300,
     }),
+    emptyStateContainer: css({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%',
+      minHeight: '400px',
+      overflow: 'hidden',
+    }),
   };
 };
@@ -34,7 +34,20 @@ export function WorkbenchRenderer() {
   const { data } = runner.useState();
   const rows = data ? convertToWorkbenchRows(data, groupByKeys) : [];
 
-  return <Workbench data={rows} domain={domain} queryRunner={runner} groupBy={groupByKeys} />;
+  // Check if filters or non-default time range are applied
+  const hasFiltersApplied = queryFilter.length > 0;
+  const hasCustomTimeRange = timeRange.raw.from !== 'now-4h' || timeRange.raw.to !== 'now';
+  const hasActiveFilters = hasFiltersApplied || hasCustomTimeRange;
+
+  return (
+    <Workbench
+      data={rows}
+      domain={domain}
+      queryRunner={runner}
+      groupBy={groupByKeys}
+      hasActiveFilters={hasActiveFilters}
+    />
+  );
 }
 
 type DataPoint = Record<ArrayValues<typeof DEFAULT_FIELDS>, string> & Record<string, string | undefined>;

diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
@@ -2949,8 +2949,10 @@
       "instance-details-drawer": {
         "instance-details": "Instance details"
       },
+      "no-firing-or-pending-instances": "You have no alert instances in a firing or pending state.",
       "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",
       "pending-instances-count": "{{pendingCount}} pending instances",