feat: add Usage tab to detail drawer for model blocks

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/detail/DrawerContentBody.tsx

@@ -3,13 +3,15 @@ import { Tab, TabTitleText } from "@patternfly/react-core"
 
 const BlockNotFound = lazy(() => import("./BlockNotFound"))
 const DefContent = lazy(() => import("./DefContent"))
+const UsageTabContent = lazy(() => import("./UsageTabContent"))
 const SourceTabContent = lazy(() => import("./SourceTabContent"))
 const ContextTabContent = lazy(() => import("./ContextTabContent"))
 const SummaryTabContent = lazy(() => import("./SummaryTabContent"))
 const RawTraceTabContent = lazy(() => import("./RawTraceTabContent"))
 
 import {
   hasContextInformation,
+  hasModelUsage,
   hasResult,
   type NonScalarPdlBlock as Model,
 } from "../../helpers"
@@ -54,6 +56,18 @@ function blockBody(block: Model) {
     )
   }
 
+  if (hasModelUsage(block)) {
+    tabs.splice(
+      1,
+      0,
+      <Tab key={4} eventKey={4} title={<TabTitleText>Usage</TabTitleText>}>
+        <Suspense>
+          <UsageTabContent block={block} />
+        </Suspense>
+      </Tab>,
+    )
+  }
+
   return tabs
 }
 

pdl-live-react/src/view/detail/UsageTabContent.tsx

@@ -0,0 +1,49 @@
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTerm,
+} from "@patternfly/react-core"
+
+import type { ModelBlockWithUsage, PdlBlockWithTiming } from "../../helpers"
+
+export default function UsageTabContent({
+  block,
+}: {
+  block: ModelBlockWithUsage & PdlBlockWithTiming
+}) {
+  return <DescriptionList>{descriptionItems(block)}</DescriptionList>
+}
+
+function descriptionItems(block: ModelBlockWithUsage & PdlBlockWithTiming) {
+  return (
+    <>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Rate of Model Execution</DescriptionListTerm>
+        <DescriptionListDescription>
+          {(
+            (block.pdl__usage.completion_tokens +
+              block.pdl__usage.prompt_tokens) /
+            ((block.pdl__timing.end_nanos - block.pdl__timing.start_nanos) /
+              1000000000)
+          ).toFixed(0)}{" "}
+          tokens/sec
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Completion Tokens Consumed</DescriptionListTerm>
+        <DescriptionListDescription>
+          {block.pdl__usage.completion_tokens}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Prompt Tokens Consumed</DescriptionListTerm>
+        <DescriptionListDescription>
+          {block.pdl__usage.prompt_tokens}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </>
+  )
+}