3e626d3aa5
## Summary Adds a non-intrusive warning banner in the query editor that alerts users when their query matches a large number of items (>= 500). This helps users understand that their query may return a large amount of data and suggests using more specific filters. Part of https://github.com/grafana/oss-big-tent-squad/issues/127 ## Changes - Added `ITEM_COUNT_WARNING_THRESHOLD` constant (500 items) in `src/datasource/constants.ts` - Created new `ItemCountWarning` component in `src/datasource/components/ItemCountWarning.tsx` - Updated `MetricsQueryEditor` to track and report the count of items matching the current filter - Integrated the warning component into the main `QueryEditor` component ## How it works - When items are loaded for the dropdown in the Metrics query editor, the component counts how many items match the current item filter - If using a regex filter like `/.*/`, it applies the regex to count matching items - If the count is >= 500, a warning banner appears at the top of the query editor - The warning is purely informational - queries still execute normally - The warning only appears for the "Metrics" query type ## Screenshot The warning appears as a subtle banner with a warning icon: > I set the limit as 5 just to show the warning <img width="901" height="298" alt="grafik" src="https://github.com/user-attachments/assets/a9be8563-1b90-4581-ad15-4e7035b4166e" /> ## Why Queries that match thousands of items via wildcard filters (e.g., `/.*/`) can return massive amounts of data and potentially overload the Zabbix server. This proactive warning helps users make informed decisions about their query scope without adding friction to the normal query flow.
28 lines
756 B
TypeScript
28 lines
756 B
TypeScript
import React from 'react';
|
|
import { Alert } from '@grafana/ui';
|
|
import { ITEM_COUNT_WARNING_THRESHOLD } from '../constants';
|
|
|
|
interface ItemCountWarningProps {
|
|
itemCount: number;
|
|
threshold?: number;
|
|
}
|
|
|
|
/**
|
|
* A warning banner that displays when the query matches too many items.
|
|
* This is a non-intrusive warning that doesn't block the query flow.
|
|
*/
|
|
export const ItemCountWarning: React.FC<ItemCountWarningProps> = ({
|
|
itemCount,
|
|
threshold = ITEM_COUNT_WARNING_THRESHOLD,
|
|
}) => {
|
|
if (itemCount < threshold) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Alert title="Large number of items" severity="warning">
|
|
This query matches {itemCount} items and may return a large amount of data. Consider using more specific filters.
|
|
</Alert>
|
|
);
|
|
};
|