Add UI for instrumented spans of Cloudflare bindings (#217)

* Add Cloudflare assets

* Add logic to put cloudflare binding icons in UI when a span comes from a cf binding

* Fix some layout on the timeline

* Add D1 sql query

* Another layout fix for rendering json bodies from history

* Start adding richer data to CF spans

* Start adding more smarts to the cf binding sections

* Add args sections for r2 ai etc

* Remove unused imports

* Fix CloudflareAI logo import

* Update wrangler across projects

* Add model smarts to the ai spans

* Factor out the cloudflare spans into separate files

* Improve KV span component

* Format and typecheck

* Update beta version of client lib

* Remove cl

examples/ai-request-generation/package.json

@@ -11,6 +11,6 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240821.1",
-    "wrangler": "^3.72.3"
+    "wrangler": "^3.73.0"
   }
 }

examples/goose-quotes/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240821.1",
     "drizzle-kit": "^0.23.0",
-    "wrangler": "^3.72.3"
+    "wrangler": "^3.73.0"
   },
   "homepage": "https://github.com/fiberplane/fpx/examples/goose-quotes#readme"
 }

examples/goosify/package.json

@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240821.1",
-    "wrangler": "^3.72.3"
+    "wrangler": "^3.73.0"
   }
 }

package.json

@@ -31,6 +31,6 @@
     "pkg-pr-new": "^0.0.20",
     "rimraf": "^5.0.7",
     "typescript": "^5.5.4",
-    "wrangler": "^3.62.0"
+    "wrangler": "^3.73.0"
   }
 }

packages/client-library-otel/package.json

@@ -4,7 +4,7 @@
   "author": "Fiberplane<[email protected]>",
   "type": "module",
   "main": "dist/index.js",
-  "version": "0.1.0-beta.11",
+  "version": "0.1.0-beta.12",
   "dependencies": {
     "@opentelemetry/api": "~1.9.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.52.1",

packages/client-library-otel/src/patch/cf-bindings.ts

@@ -145,7 +145,7 @@ function proxyD1Binding(o: object, bindingName: string) {
       if (typeof d1Value === "function" && isSendingQuery) {
         return measure(
           {
-            name: "D1 Call",
+            name: "D1 Query",
             attributes: getCfBindingAttributes(
               "D1Database",
               bindingName,

studio/package.json

@@ -80,7 +80,6 @@
     "vite": "^5.2.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0",
-    "wrangler": "^3.57.0"
+    "vitest": "^1.6.0"
   }
 }

studio/src/components/Timeline/DetailsList/KeyValueTableV2/KeyValueRow.tsx

@@ -13,10 +13,12 @@ export const KeyValueRow = ({
   entry,
   sensitiveKeys = [],
   keyCellClassName,
+  valueCellClassName,
 }: {
   entry: [string | ReactNode, string | ReactNode];
   sensitiveKeys?: string[] | ((key: string) => boolean);
   keyCellClassName?: string;
+  valueCellClassName?: string;
 }) => {
   const [key, value] = entry;
 
@@ -40,7 +42,9 @@ export const KeyValueRow = ({
       >
         {key}
       </TableCell>
-      <TableCell className="font-mono align-middle h-full">
+      <TableCell
+        className={cn("font-mono align-middle h-full", valueCellClassName)}
+      >
         <div className="flex items-center w-full">
           {isSensitive && (
             <Tooltip>

studio/src/components/Timeline/DetailsList/KeyValueTableV2/KeyValueTable.tsx

@@ -17,6 +17,7 @@ export function KeyValueTable({
   className,
   sensitiveKeys = [],
   keyCellClassName,
+  valueCellClassName,
 }: {
   keyValue:
     | Record<string, string>
@@ -25,6 +26,7 @@ export function KeyValueTable({
   className?: string;
   sensitiveKeys?: string[] | ((key: string) => boolean);
   keyCellClassName?: string;
+  valueCellClassName?: string;
 }) {
   const isEmpty = Array.isArray(keyValue)
     ? keyValue.length === 0
@@ -41,6 +43,7 @@ export function KeyValueTable({
                 entry={entry}
                 sensitiveKeys={sensitiveKeys}
                 keyCellClassName={keyCellClassName}
+                valueCellClassName={valueCellClassName}
               />
             ))
           ) : (

studio/src/components/Timeline/DetailsList/TimelineDetailsList.tsx

@@ -60,7 +60,13 @@ const Content = ({ item }: { item: Waterfall[0] }) => {
     );
   }
 
-  return <GenericSpan span={item.span} key={item.span.span_id} />;
+  return (
+    <GenericSpan
+      span={item.span}
+      key={item.span.span_id}
+      vendorInfo={item.vendorInfo}
+    />
+  );
 };
 
 function getId(item: Waterfall[0]) {