feat: add tooltip table text for when units is undefined (grafana#1341)

* feat: add tooltip text for unknown units
yzhaoyu · Aug 3, 2022 · a9fd5ac · a9fd5ac
1 parent e1efe9a
commit a9fd5ac
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.tsx b/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.tsx
@@ -214,13 +214,13 @@ const tooltipTitles: Record<
   },
   trace_samples: {
     percent: '% of time',
-    formattedValue: 'samples',
+    formattedValue: 'Samples',
     total: '% of total samples',
   },
   '': {
-    percent: '',
-    formattedValue: '',
-    total: '',
+    percent: 'Percentage',
+    formattedValue: 'Units',
+    total: '% of total units',
   },
 };
 

diff --git a/packages/pyroscope-flamegraph/src/format/format.spec.ts b/packages/pyroscope-flamegraph/src/format/format.spec.ts
@@ -22,7 +22,7 @@ describe('format', () => {
     it('its constructor should default to DurationFormatter', () => {
       const df = getFormatter(80, 2, '' as any);
 
-      expect(df.format(0.001, 100)).toBe('< 0.01 seconds');
+      expect(df.format(0.001, 100)).toBe('< 0.01  ');
     });
 
     describe('DurationFormatter', () => {

diff --git a/packages/pyroscope-flamegraph/src/format/format.ts b/packages/pyroscope-flamegraph/src/format/format.ts
@@ -29,10 +29,10 @@ export function getFormatter(max: number, sampleRate: number, unit: Units) {
     case 'lock_samples':
       return new ObjectsFormatter(max);
     case 'trace_samples':
-      return new DurationFormatter(max / sampleRate);
+      return new DurationFormatter(max / sampleRate, 'units');
     default:
-      console.warn(`Unsupported unit: '${unit}'. Defaulting to 'samples'`);
-      return new DurationFormatter(max / sampleRate);
+      console.warn(`Unsupported unit: '${unit}'. Defaulting to ''`);
+      return new DurationFormatter(max / sampleRate, ' ');
   }
 }
 
@@ -51,7 +51,10 @@ class DurationFormatter {
     [12, 'year'],
   ];
 
-  constructor(maxDur: number) {
+  units = '';
+
+  constructor(maxDur: number, units?: string) {
+    this.units = units || '';
     // eslint-disable-next-line no-plusplus
     for (let i = 0; i < this.durations.length; i++) {
       const level = this.durations[i];
@@ -81,7 +84,7 @@ class DurationFormatter {
       nStr = '< 0.01';
     }
 
-    return `${nStr} ${this.suffix}${n === 1 ? '' : 's'}`;
+    return `${nStr} ${this.units || `${this.suffix}${n === 1 ? '' : 's'}`}`;
   }
 }