refactor(TagExplorer): Human friendly metric names in the Tag Explore…

…r page (#2787) * refactor(TagExplorerPage): Display human-friendly metric names in the Tag Explorer page * chore(ProfileMetricsDefinitions): Add missing definition
grafana · Dec 1, 2023 · 5dcea23 · 5dcea23
1 parent 71ffca5
commit 5dcea23
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/public/app/constants/profile-metrics.json b/public/app/constants/profile-metrics.json
@@ -20,6 +20,13 @@
     "group": "goroutine",
     "unit": "short"
   },
+  "goroutines:goroutine:count:goroutine:count": {
+    "id": "goroutine:goroutine:count:goroutine:count",
+    "description": "Current number of goroutines",
+    "type": "goroutine",
+    "group": "goroutine",
+    "unit": "short"
+  },
   "memory:alloc_in_new_tlab_bytes:bytes::": {
     "id": "memory:alloc_in_new_tlab_bytes:bytes::",
     "description": "Total bytes allocated inside Thread-Local Allocation Buffers (TLAB)",

diff --git a/public/app/pages/TagExplorerView.tsx b/public/app/pages/TagExplorerView.tsx
@@ -47,6 +47,7 @@ import {
 import styles from './TagExplorerView.module.scss';
 import { formatTitle } from './formatTitle';
 import { FlameGraphWrapper } from '@pyroscope/components/FlameGraphWrapper';
+import profileMetrics from '../constants/profile-metrics.json';
 
 const TIMELINE_SERIES_COLORS = [
   Color.rgb(242, 204, 12),
@@ -159,6 +160,15 @@ const TIMELINE_WRAPPER_ID = 'explore_timeline_wrapper';
 const getTimelineColor = (index: number, palette: Color[]): Color =>
   Color(palette[index % (palette.length - 1)]);
 
+const getProfileMetricTitle = (appName: Maybe<string>) => {
+  const name = appName.unwrapOr('');
+  const profileMetric = (profileMetrics as Record<string, any>)[name];
+
+  return profileMetric
+    ? `${profileMetric.type} (${profileMetric.group})`
+    : appName.unwrapOr('');
+};
+
 function TagExplorerView() {
   const { offset } = useTimeZone();
   const dispatch = useAppDispatch();
@@ -375,9 +385,7 @@ function TagExplorerView() {
         </Box>
         <CollapseBox
           isLoading={dataLoading}
-          title={appName
-            .map((a) => `${a} Tag Breakdown`)
-            .unwrapOr('Tag Breakdown')}
+          title={`${getProfileMetricTitle(appName)} Tag Breakdown`}
         >
           <div className={styles.statisticsBox}>
             <div className={styles.pieChartWrapper}>
@@ -680,7 +688,7 @@ function ExploreHeader({
 
   return (
     <div className={styles.header} data-testid="explore-header">
-      <span className={styles.title}>{appName.unwrapOr('')}</span>
+      <span className={styles.title}>{getProfileMetricTitle(appName)}</span>
       <div className={styles.queryGrouppedBy}>
         <span className={styles.selectName}>grouped by</span>
         <Dropdown