db-console: add analytics to hot ranges page

So that we can better understand when the hot ranges page is being used,
we want analytics on filters, sort and pagination state anytime the page
is rendered.

This PR achieves this, by deduplicating with a useEffect.

Fixes: #144395
Epic: none
Release note: none

Author: angles-n-daemons

pkg/ui/workspaces/db-console/src/views/hotRanges/hotRangesTable.tsx

@@ -12,11 +12,12 @@ import {
   Anchor,
   EmptyTable,
   util,
+  ISortedTablePagination,
 } from "@cockroachlabs/cluster-ui";
 import { Tooltip } from "antd";
 import classNames from "classnames/bind";
 import round from "lodash/round";
-import React from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 
@@ -47,6 +48,10 @@ interface HotRangesTableProps {
   clearFilterContainer: React.ReactNode;
   sortSetting?: SortSetting;
   onSortChange?: (ss: SortSetting) => void;
+  onViewPropertiesChange?: (vp: {
+    sortSetting: SortSetting;
+    pagination: ISortedTablePagination;
+  }) => void;
   emptyMessage?: EmptyMessage;
 }
 
@@ -57,6 +62,7 @@ const HotRangesTable = ({
   clearFilterContainer,
   sortSetting,
   onSortChange,
+  onViewPropertiesChange,
   emptyMessage,
 }: HotRangesTableProps) => {
   const [pagination, updatePagination] = util.usePagination(1, PAGE_SIZE);
@@ -278,6 +284,13 @@ const HotRangesTable = ({
       },
     ];
 
+  useEffect(() => {
+    onViewPropertiesChange?.({
+      sortSetting,
+      pagination,
+    });
+  }, [sortSetting, pagination, onViewPropertiesChange]);
+
   return (
     <div className="section">
       <div className={cx("hotranges-heading-container")}>

pkg/ui/workspaces/db-console/src/views/hotRanges/index.tsx

@@ -3,19 +3,24 @@
 // Use of this software is governed by the CockroachDB Software License
 // included in the /LICENSE file.
 
+import { createHash } from "crypto";
+
 import {
   Loading,
   Text,
   Anchor,
   util,
   TimezoneContext,
+  SortSetting,
+  ISortedTablePagination,
 } from "@cockroachlabs/cluster-ui";
 import classNames from "classnames/bind";
-import React, { useRef, useMemo, useEffect, useContext } from "react";
+import React, { useRef, useMemo, useEffect, useContext, useState } from "react";
 import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
 
 import { cockroach } from "src/js/protos";
+import { analytics } from "src/redux/analytics";
 import {
   refreshHotRanges,
   clearHotRanges,
@@ -63,6 +68,8 @@ const HotRangesPage = () => {
   const timezone = useContext(TimezoneContext);
 
   const { filters, applyFilters } = useFilters();
+  const [sortSetting, setSortSetting] = useState<SortSetting>(null);
+  const [pagination, setPagination] = useState<ISortedTablePagination>(null);
 
   // dispatch hot ranges call whenever the filters change and are not empty
   useEffect(() => {
@@ -77,6 +84,28 @@ const HotRangesPage = () => {
     }
   }, [filters.nodeIds, dispatch]);
 
+  // track analytics on filters, pagination and sort.
+  const analyticsKey = createHash("md5")
+    .update(JSON.stringify([filters, sortSetting, pagination]))
+    .digest("hex");
+  useEffect(() => {
+    if (!filters.nodeIds.length || !pagination || !sortSetting) {
+      return;
+    }
+    analytics.track({
+      event: "Hot Ranges Page Load",
+      properties: {
+        filters,
+        pagination,
+        sortSetting,
+      },
+    });
+    // this is keyed on a hash of the contents for filters, pagination and sortSetting
+    // as opposed to the references themselves, as we don't want to re-run this effect
+    // when the contents haven't changed, but the references have.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analyticsKey]);
+
   // load the databases if possible.
   useEffect(() => {
     dispatch(refreshDatabases());
@@ -129,6 +158,16 @@ const HotRangesPage = () => {
               nodeIdToLocalityMap={nodeIdToLocalityMap}
               clearFilterContainer={<span ref={clearButtonRef} />}
               emptyMessage={emptyMessage}
+              onViewPropertiesChange={({
+                sortSetting,
+                pagination,
+              }: {
+                sortSetting: SortSetting;
+                pagination: ISortedTablePagination;
+              }) => {
+                setSortSetting(sortSetting);
+                setPagination(pagination);
+              }}
             />
           )}
           page={undefined}