Improve asset rendering + sizes

getsentry · Nov 27, 2023 · e6e933e · e6e933e
1 parent 32cd740
commit e6e933e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
@@ -3,6 +3,7 @@ import { format as formatSQL } from 'sql-formatter';
 import SidePanel, { SidePanelHeader } from '~/components/SidePanel';
 import dataCache from '../data/sentryDataCache';
 import { SentryErrorEvent, Span, TraceContext } from '../types';
+import { formatBytes } from '../utils/bytes';
 import { getDuration } from '../utils/duration';
 import DateTime from './DateTime';
 import { ErrorTitle } from './Events/Error';
@@ -19,6 +20,14 @@ function formatSpanDescription(desc: string) {
   return desc;
 }
 
+function formatValue(name: string, value: unknown) {
+  if (typeof value === 'number') {
+    if (name.indexOf('size') !== -1 || name.indexOf('length') !== -1) return formatBytes(value);
+    return value.toLocaleString();
+  }
+  return value;
+}
+
 export default function SpanDetails({
   traceContext,
   span,
@@ -97,7 +106,12 @@ export default function SpanDetails({
         {span.op === 'resource.img' && span.description?.indexOf('/') === 0 && (
           <div>
             <h2 className="mb-2 font-bold uppercase">Preview</h2>
-            <img src={span.description} alt="preview" style={{ maxWidth: '50%', maxHeight: 400 }} />
+            <a
+              href={span.description}
+              className="-m-2 inline-block max-w-sm cursor-pointer rounded border border-indigo-950 p-1 hover:border-indigo-700"
+            >
+              <img src={span.description} alt="preview" style={{ maxHeight: 300 }} />
+            </a>
           </div>
         )}
 
@@ -159,6 +173,28 @@ export default function SpanDetails({
           </table>
         </div>
 
+        {span.data && (
+          <div>
+            <h2 className="mb-2 font-bold uppercase">Data</h2>
+            <table className="w-full">
+              <tbody>
+                {Object.entries(span.data).map(([key, value]) => {
+                  return (
+                    <tr key={key}>
+                      <th className="w-1/12 py-0.5 pr-4 text-left font-mono font-normal text-indigo-300">
+                        <div className="w-full truncate">{key}</div>
+                      </th>
+                      <td className="py-0.5">
+                        <pre className="whitespace-nowrap font-mono">{formatValue(key, value)}</pre>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+
         <div>
           <h2 className="mb-2 font-bold uppercase">Sub-tree</h2>
           <div className="-mx-3 border border-indigo-900 bg-indigo-950">

diff --git a/packages/overlay/src/integrations/sentry/types.ts b/packages/overlay/src/integrations/sentry/types.ts
@@ -102,6 +102,7 @@ export type Span = {
   status: 'ok' | string;
   transaction?: SentryTransactionEvent;
   children?: Span[];
+  data?: Record<string, unknown>;
 };
 
 export type SentryTransactionEvent = CommonEventAttrs & {

diff --git a/packages/overlay/src/integrations/sentry/utils/bytes.ts b/packages/overlay/src/integrations/sentry/utils/bytes.ts
@@ -0,0 +1,8 @@
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes == 0) return '0 B';
+  const k = 1024;
+  const dm = decimals;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}