Add telemetry for vp

ui/lib/apps/SlowQuery/pages/Detail/index.tsx

@@ -21,6 +21,7 @@ import {
   TreeDiagramView,
 } from '@lib/components'
 import { useVersionedLocalStorageState } from '@lib/utils/useVersionedLocalStorageState'
+import { telemetry } from '@lib/apps/SlowQuery/utils/telemetry'
 
 import DetailTabs from './DetailTabs'
 
@@ -69,7 +70,8 @@ function DetailPage() {
     setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
 
   const [isVpVisible, setIsVpVisable] = useState(false)
-  const toggleVisualPlan = () => {
+  const toggleVisualPlan = (action: 'open' | 'close') => {
+    telemetry.toggleVisualPlanModal(action)
     setIsVpVisable(!isVpVisible)
   }
 
@@ -168,6 +170,9 @@ function DetailPage() {
                               ? 'binary_plan'
                               : 'text_plan'
                           }
+                          onTabClick={(key) =>
+                            telemetry.clickPlanTabs(key, data.digest!)
+                          }
                         >
                           {binaryPlan &&
                             !binaryPlan.main.discardedDueToTooLong && (
@@ -182,7 +187,7 @@ function DetailPage() {
                                   centered
                                   visible={isVpVisible}
                                   width={window.innerWidth}
-                                  onCancel={toggleVisualPlan}
+                                  onCancel={() => toggleVisualPlan('close')}
                                   footer={null}
                                   destroyOnClose={true}
                                   bodyStyle={{
@@ -203,7 +208,9 @@ function DetailPage() {
                                 </Modal>
                                 <Descriptions>
                                   <Descriptions.Item span={2}>
-                                    <div onClick={toggleVisualPlan}>
+                                    <div
+                                      onClick={() => toggleVisualPlan('open')}
+                                    >
                                       <TreeDiagramView
                                         data={
                                           binaryPlan.ctes

ui/lib/apps/SlowQuery/utils/telemetry.ts

@@ -0,0 +1,20 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+import { mixpanel } from '@lib/utils/telemetry'
+
+export const telemetry = {
+  clickPlanTabs(tab: string, queryDigest: string) {
+    mixpanel.track('Slowquery: Plan Tab Clicked', { tab, queryDigest })
+  },
+  toggleVisualPlanModal(action: 'open' | 'close') {
+    mixpanel.track('Slowquery: Visual Plan Modal Toggled', { action })
+  },
+  toggleExpandBtnOnNode(nodeName: string) {
+    mixpanel.track('Slowquery: Node Button Toggled', { nodeName })
+  },
+  clickNode(nodeName: string) {
+    mixpanel.track('Slowquery: Node Clicked', { nodeName })
+  },
+  clickTabOnNodeDetail(tab: string) {
+    mixpanel.track('Slowquery: Detail Tab on Node Clicked', { tab })
+  },
+}

ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx

@@ -21,6 +21,7 @@ import { useVersionedLocalStorageState } from '@lib/utils/useVersionedLocalStora
 import type { IPageQuery } from '.'
 import DetailTabs from './PlanDetailTabs'
 import { useSchemaColumns } from '../../utils/useSchemaColumns'
+import { telemetry } from '@lib/apps/Statement/utils/telemetry'
 
 export interface IQuery extends IPageQuery {
   plans: string[]
@@ -54,7 +55,8 @@ function PlanDetail({ query }: IPlanDetailProps) {
   const binaryPlan = data?.binary_plan && JSON.parse(data.binary_plan)
 
   const [isVpVisible, setIsVpVisable] = useState(false)
-  const toggleVisualPlan = () => {
+  const toggleVisualPlan = (action: 'open' | 'close') => {
+    telemetry.toggleVisualPlanModal(action)
     setIsVpVisable(!isVpVisible)
   }
 
@@ -177,6 +179,9 @@ function PlanDetail({ query }: IPlanDetailProps) {
                             ? 'binary_plan'
                             : 'text_plan'
                         }
+                        onTabClick={(key) =>
+                          telemetry.clickPlanTabs(key, data.digest!)
+                        }
                       >
                         {binaryPlan && !binaryPlan.main.discardedDueToTooLong && (
                           <Tabs.TabPane
@@ -188,7 +193,7 @@ function PlanDetail({ query }: IPlanDetailProps) {
                               centered
                               visible={isVpVisible}
                               width={window.innerWidth}
-                              onCancel={toggleVisualPlan}
+                              onCancel={() => toggleVisualPlan('close')}
                               footer={null}
                               destroyOnClose={true}
                               bodyStyle={{
@@ -207,7 +212,7 @@ function PlanDetail({ query }: IPlanDetailProps) {
                             </Modal>
                             <Descriptions>
                               <Descriptions.Item span={2}>
-                                <div onClick={toggleVisualPlan}>
+                                <div onClick={() => toggleVisualPlan('open')}>
                                   <TreeDiagramView
                                     data={
                                       binaryPlan.ctes

ui/lib/apps/Statement/utils/telemetry.ts

@@ -0,0 +1,20 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+import { mixpanel } from '@lib/utils/telemetry'
+
+export const telemetry = {
+  clickPlanTabs(tab: string, queryDigest: string) {
+    mixpanel.track('Statement: Plan Tab Clicked', { tab, queryDigest })
+  },
+  toggleVisualPlanModal(action: 'open' | 'close') {
+    mixpanel.track('Statement: Visual Plan Modal Toggled', { action })
+  },
+  toggleExpandBtnOnNode(nodeName: string) {
+    mixpanel.track('Statement: Node Button Toggled', { nodeName })
+  },
+  clickNode(nodeName: string) {
+    mixpanel.track('Statement: Node Clicked', { nodeName })
+  },
+  clickTabOnNodeDetail(tab: string) {
+    mixpanel.track('Statement: Detail Tab on Node Clicked', { tab })
+  },
+}

ui/lib/components/TreeDiagram/Node/DefaultNode.tsx

@@ -6,6 +6,7 @@ import {
   ExclamationCircleFilled,
 } from '@ant-design/icons'
 import { toFixed } from '@baurine/grafana-value-formats'
+import { telemetry } from '@lib/apps/Statement/utils/telemetry'
 
 import styles from './DefaultNode.module.less'
 
@@ -32,10 +33,12 @@ export const DefaultNode = (nodeProps) => {
   }
 
   const handleExpandBtnToggleOnClick = (e, node) => {
+    telemetry.toggleExpandBtnOnNode(node.name)
     onNodeExpandBtnToggle(node.__node_attrs.id)
   }
 
   const handleOnNodeDetailClick = (e, node) => {
+    telemetry.clickNode(node.name)
     onNodeDetailClick(node)
   }
 

ui/lib/components/TreeDiagram/NodeDetail/DefaultNodeDetail.tsx

@@ -8,6 +8,7 @@ import { InfoCircleTwoTone } from '@ant-design/icons'
 import { addTranslations } from '@lib/utils/i18n'
 import { useTranslation } from 'react-i18next'
 import translations from '../translations'
+import { telemetry } from '@lib/apps/Statement/utils/telemetry'
 
 addTranslations(translations)
 
@@ -16,7 +17,12 @@ export const DefaultNodeDetail = (nodeDetailProps) => {
   const { t } = useTranslation()
 
   return (
-    <Tabs defaultActiveKey="1" type="card" size="middle">
+    <Tabs
+      defaultActiveKey="1"
+      type="card"
+      size="middle"
+      onTabClick={(key) => telemetry.clickTabOnNodeDetail(key)}
+    >
       <Tabs.TabPane
         tab={t(`binary_plan.tabs.general`)}
         key="1"