Prometheus: Add instrumentation for query patterns (#95288)

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

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.
</div>
{Object.values(PromQueryPatternType).map((patternType) => {
const isOpen = openTabs.includes(patternType);
return (
<Collapse
aria-label={`open and close ${patternType} query starter card`}
key={patternType}
label={`${capitalize(patternType)} query starters`}
isOpen={openTabs.includes(patternType)}
isOpen={isOpen}
collapsible={true}
onToggle={() =>
onToggle={() => {
const action = isOpen ? 'close' : 'open';
reportInteraction(`grafana_prom_kickstart_toggle_pattern_card`, {
action,
patternType,
});
setOpenTabs((tabs) =>
// close tab if it's already open, otherwise open it
tabs.includes(patternType) ? tabs.filter((t) => t !== patternType) : [...tabs, patternType]
)
}
);
}}
>
<div className={styles.cardsContainer}>
{promQueryModeller

View File

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