savedqueries

Centralize saved query management for Grafana Metrics Drilldown interfaces with localStorage persistence.

31|18|Updated Oct 15, 2024

Search Tags:#frontend #react #hooks #metrics #localstorage #saved-queries #query-management

Ready to run

npx skills add https://github.com/grafana/metrics-drilldown --skill savedqueries

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: savedqueries
Source: https://github.com/grafana/metrics-drilldown/tree/main/.claude/skills/generated/savedqueries
Command: npx skills add https://github.com/grafana/metrics-drilldown --skill savedqueries

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes management of saved queries for metrics-drilldown, enabling consistent discovery, storage, and retrieval of user-defined queries.

Core Features & Use Cases

Query discovery and validation with findExistingQuery, useHasSavedQueries, and useSavedQueries to locate and manage saved queries.
State persistence and refresh capabilities through refresh and narrowing of queries via narrowSavedQuery.
UI integration with SaveQueryModal and related components to create, edit, and present saved queries within the app.

Quick Start

Start by reviewing the SavedQueries utilities in src/shared/savedQueries to understand how queries are found, stored, and refreshed.

Frequently Asked Questions about savedqueries

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage saved metric queries consistently across a React UI?▼

Manage saved metric queries by centralizing discovery, storage, and retrieval of user-defined queries using React hooks and localStorage persistence. This ensures consistent query management across UI components and enables reliable retrieval of saved metrics queries.

What is the best way to persist saved metric queries locally in a frontend application?▼

Persisting saved metric queries locally relies on localStorage to store user-defined query parameters. Frontend React hooks interact with this storage layer to validate, refresh, and retrieve saved queries consistently across the application UI.

How do I find and validate an existing saved query in a metrics drilldown interface?▼

Find and validate existing saved queries using the findExistingQuery function within the saved queries utility layer. This function locates previously stored user-defined metrics queries to prevent duplicates and ensure consistent retrieval during drilldown operations.

Can I use React hooks to check if any saved queries exist before loading a metrics UI component?▼

Yes, you can check for existing saved queries using the useHasSavedQueries and useSavedQueries React hooks. These hooks query the localStorage-backed state to determine if user-defined metrics queries are present, enabling conditional UI rendering based on query availability.

How do I narrow down a saved query for specific metrics drilldown operations?▼

Narrow down a saved query by applying the narrowSavedQuery function to refine existing user-defined query parameters. This process adjusts the stored metrics query scope for targeted drilldown analysis while maintaining the original query structure in localStorage.

Does this saved query management approach require any external dependencies?▼

No, this saved query management approach requires zero external dependencies. It relies entirely on native browser localStorage for persistence and standard React hooks for state management, ensuring lightweight integration into frontend metrics drilldown interfaces.