Prometheus: Add instrumentation for query patterns (#95288)

Prometheus: Add instrumentation for query patterns/kickstart your query

packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx

@@ -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

packages/grafana-prometheus/src/querybuilder/components/PromQueryEditorSelector.tsx

@@ -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>