feat(dashboards): Add string value support to BigNumberWidget (#79293)

That's right, it's _actually_ a `BigValueWidget`. Some fields (notably `timestamp`) can be queries for big numbers and they should work! This PR adds handling for possible string data.
getsentry · Oct 18, 2024 · 97ed590 · 97ed590
1 parent 6a8ff4c
commit 97ed590
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 23 deletions.
diff --git a/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx b/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx
@@ -65,6 +65,47 @@ describe('BigNumberWidget', () => {
       expect(screen.getByText('Value is not a finite number.')).toBeInTheDocument();
     });
 
+    it('Formats dates', () => {
+      render(
+        <BigNumberWidget
+          data={[
+            {
+              'max(timestamp)': '2024-10-17T16:08:07+00:00',
+            },
+          ]}
+          meta={{
+            fields: {
+              'max(timestamp)': 'date',
+            },
+            units: {
+              'max(timestamp)': null,
+            },
+          }}
+        />
+      );
+
+      expect(screen.getByText('Oct 17, 2024 4:08:07 PM UTC')).toBeInTheDocument();
+    });
+
+    it('Renders strings', () => {
+      render(
+        <BigNumberWidget
+          data={[
+            {
+              'any(transaction)': '/api/0/fetch',
+            },
+          ]}
+          meta={{
+            fields: {
+              'max(timestamp)': 'string',
+            },
+          }}
+        />
+      );
+
+      expect(screen.getByText('/api/0/fetch')).toBeInTheDocument();
+    });
+
     it('Formats duration data', () => {
       render(
         <BigNumberWidget

diff --git a/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.stories.tsx b/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.stories.tsx
@@ -31,6 +31,12 @@ export default storyBook(BigNumberWidget, story => {
           visualization shows a tooltip with the full value.
         </p>
 
+        <p>
+          <JSXNode name="BigNumberWidget" /> also supports string values. This is not
+          commonly used, but it's capable of rendering timestamps and in fact most fields
+          defined in our field renderer pipeline
+        </p>
+
         <SideBySide>
           <SmallSizingWindow>
             <BigNumberWidget
@@ -95,6 +101,25 @@ export default storyBook(BigNumberWidget, story => {
               }}
             />
           </SmallSizingWindow>
+          <SmallSizingWindow>
+            <BigNumberWidget
+              title="Latest Timestamp"
+              description=""
+              data={[
+                {
+                  'max(timestamp)': '2024-10-17T16:08:07+00:00',
+                },
+              ]}
+              meta={{
+                fields: {
+                  'max(timestamp)': 'date',
+                },
+                units: {
+                  'max(timestamp)': null,
+                },
+              }}
+            />
+          </SmallSizingWindow>
         </SideBySide>
         <p>
           The <code>maximumValue</code> prop allows setting the maximum displayable value.
@@ -139,12 +164,6 @@ export default storyBook(BigNumberWidget, story => {
           <NormalWidget>
             <BigNumberWidget title="Loading Count" isLoading />
           </NormalWidget>
-          <NormalWidget>
-            <BigNumberWidget
-              title="Text"
-              data={[{'max(user.email)': 'bufo@example.com'}]}
-            />
-          </NormalWidget>
           <NormalWidget>
             <BigNumberWidget title="Missing Count" data={[{}]} />
           </NormalWidget>

diff --git a/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.tsx b/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.tsx
@@ -43,7 +43,10 @@ export function BigNumberWidget(props: Props) {
 
   if (!defined(value)) {
     parsingError = MISSING_DATA_MESSAGE;
-  } else if (!Number.isFinite(value) || Number.isNaN(value)) {
+  } else if (
+    (typeof value === 'number' && !Number.isFinite(value)) ||
+    Number.isNaN(value)
+  ) {
     parsingError = NON_FINITE_NUMBER_MESSAGE;
   }
 
@@ -57,17 +60,19 @@ export function BigNumberWidget(props: Props) {
       error={error}
       onRetry={props.onRetry}
     >
-      <BigNumberResizeWrapper>
-        <BigNumberWidgetVisualization
-          value={Number(value)}
-          previousPeriodValue={Number(previousPeriodValue)}
-          field={field}
-          maximumValue={props.maximumValue}
-          preferredPolarity={props.preferredPolarity}
-          meta={props.meta}
-          thresholds={props.thresholds}
-        />
-      </BigNumberResizeWrapper>
+      {defined(value) && (
+        <BigNumberResizeWrapper>
+          <BigNumberWidgetVisualization
+            value={value}
+            previousPeriodValue={previousPeriodValue}
+            field={field}
+            maximumValue={props.maximumValue}
+            preferredPolarity={props.preferredPolarity}
+            meta={props.meta}
+            thresholds={props.thresholds}
+          />
+        </BigNumberResizeWrapper>
+      )}
     </WidgetFrame>
   );
 }

diff --git a/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidgetVisualization.tsx b/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidgetVisualization.tsx
@@ -20,12 +20,12 @@ import {DEFAULT_FIELD} from '../common/settings';
 import {ThresholdsIndicator} from './thresholdsIndicator';
 
 export interface BigNumberWidgetVisualizationProps {
-  value: number;
+  value: number | string;
   field?: string;
   maximumValue?: number;
   meta?: Meta;
   preferredPolarity?: Polarity;
-  previousPeriodValue?: number;
+  previousPeriodValue?: number | string;
   thresholds?: Thresholds;
 }
 
@@ -48,9 +48,6 @@ export function BigNumberWidgetVisualization(props: BigNumberWidgetVisualization
       ? getFieldRenderer(field, meta as MetaType, false)
       : renderableValue => renderableValue.toString();
 
-  const doesValueHitMaximum = maximumValue ? value >= maximumValue : false;
-  const clampedValue = Math.min(value, maximumValue);
-
   const unit = meta?.units?.[field];
   const type = meta?.fields?.[field];
 
@@ -60,6 +57,25 @@ export function BigNumberWidgetVisualization(props: BigNumberWidgetVisualization
     unit: unit ?? undefined, // TODO: Field formatters think units can't be null but they can
   };
 
+  // String values don't support differences, thresholds, max values, or anything else.
+  if (typeof value === 'string') {
+    return (
+      <Wrapper>
+        <NumberAndDifferenceContainer>
+          {fieldRenderer(
+            {
+              [field]: value,
+            },
+            baggage
+          )}
+        </NumberAndDifferenceContainer>
+      </Wrapper>
+    );
+  }
+
+  const doesValueHitMaximum = maximumValue ? value >= maximumValue : false;
+  const clampedValue = Math.min(value, maximumValue);
+
   return (
     <Wrapper>
       <NumberAndDifferenceContainer>
@@ -92,6 +108,7 @@ export function BigNumberWidgetVisualization(props: BigNumberWidgetVisualization
         </NumberContainerOverride>
 
         {defined(previousPeriodValue) &&
+          typeof previousPeriodValue === 'number' &&
           Number.isFinite(previousPeriodValue) &&
           !Number.isNaN(previousPeriodValue) &&
           !doesValueHitMaximum && (