IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Add instrumentation for query patterns (#95288)

Browse Source 
Prometheus: Add instrumentation for query patterns/kickstart your query
This commit is contained in:
Josh Hunt 2024-10-28 18:46:08 +00:00 committed by GitHub
parent 5717cb5055
commit c9abe04d46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
View File

@ -77,19 +77,26 @@ export const QueryPatternsModal = (props: Props) => {
Kick start your query by selecting one of these queries. You can then continue to complete your query. Kick start your query by selecting one of these queries. You can then continue to complete your query.
</div> </div>
{Object.values(PromQueryPatternType).map((patternType) => { {Object.values(PromQueryPatternType).map((patternType) => {
const isOpen = openTabs.includes(patternType);
return ( return (
<Collapse <Collapse
aria-label={`open and close ${patternType} query starter card`} aria-label={`open and close ${patternType} query starter card`}
key={patternType} key={patternType}
label={`${capitalize(patternType)} query starters`} label={`${capitalize(patternType)} query starters`}
isOpen={openTabs.includes(patternType)} isOpen={isOpen}
collapsible={true} collapsible={true}
onToggle={() => onToggle={() => {
const action = isOpen ? 'close' : 'open';
reportInteraction(`grafana_prom_kickstart_toggle_pattern_card`, {
action,
patternType,
});
setOpenTabs((tabs) => setOpenTabs((tabs) =>
// close tab if it's already open, otherwise open it // close tab if it's already open, otherwise open it
tabs.includes(patternType) ? tabs.filter((t) => t !== patternType) : [...tabs, patternType] tabs.includes(patternType) ? tabs.filter((t) => t !== patternType) : [...tabs, patternType]
) );
} }}
> >
<div className={styles.cardsContainer}> <div className={styles.cardsContainer}>
{promQueryModeller {promQueryModeller

9
packages/grafana-prometheus/src/querybuilder/components/PromQueryEditorSelector.tsx
View File

@ -94,6 +94,13 @@ export const PromQueryEditorSelector = memo<Props>((props) => {
setExplain(e.currentTarget.checked); setExplain(e.currentTarget.checked);
}; };
const handleOpenQueryPatternsModal = useCallback(() => {
reportInteraction('grafana_prometheus_open_kickstart_clicked', {
app: app ?? '',
});
setQueryPatternsModalOpen(true);
}, [app]);
return ( return (
<> <>
<ConfirmModal <ConfirmModal
@ -121,7 +128,7 @@ export const PromQueryEditorSelector = memo<Props>((props) => {
data-testid={selectors.components.QueryBuilder.queryPatterns} data-testid={selectors.components.QueryBuilder.queryPatterns}
variant="secondary" variant="secondary"
size="sm" size="sm"
onClick={() => setQueryPatternsModalOpen((prevValue) => !prevValue)} onClick={handleOpenQueryPatternsModal}
> >
Kick start your query Kick start your query
</Button> </Button>