Adds to telemetry UI view

1. Adds horizontal line separators for sections. This makes it simpler to scan. 2. Adds Insights tab for stats. 3. Adds test case creation command copy.
DAGWorks-Inc · Aug 14, 2024 · 6d40907 · 6d40907
1 parent 64b3e5f
commit 6d40907
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 4 deletions.
diff --git a/telemetry/ui/src/components/routes/app/DataView.tsx b/telemetry/ui/src/components/routes/app/DataView.tsx
@@ -5,7 +5,7 @@ import { Button } from '../../common/button';
 import { Switch, SwitchField } from '../../common/switch';
 import { Label } from '../../common/fieldset';
 import { classNames } from '../../../utils/tailwind';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid';
+import { ChevronDownIcon, ChevronUpIcon, QuestionMarkCircleIcon } from '@heroicons/react/20/solid';
 import { getUniqueAttributeID } from '../../../utils';
 import { AppViewHighlightContext } from './AppView';
 import { MinusIcon } from '@heroicons/react/24/outline';
@@ -121,7 +121,7 @@ const SectionHeaderWithExpand = (props: {
         ? MinusIcon
         : ChevronDownIcon;
   return (
-    <div className="flex flex-row items-center gap-1">
+    <div className="flex flex-row items-center gap-1 border-t">
       <h1 className="text-2xl text-gray-900 font-semibold">{props.name}</h1>
       <MinimizeMaximizeIcon
         className={classNames(
@@ -140,6 +140,27 @@ const SectionHeaderWithExpand = (props: {
   );
 };
 
+const FlashMessage = ({
+  message,
+  duration,
+  onClose
+}: {
+  message: string;
+  duration: number;
+  onClose: () => void;
+}) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  return (
+    <div className="fixed bottom-4 right-4 bg-blue-500 text-white p-2 rounded shadow-lg">
+      {message}
+    </div>
+  );
+};
+
 export const DataView = (props: { currentStep: Step | undefined; priorStep: Step | undefined }) => {
   const [whichState, setWhichState] = useState<'after' | 'before' | 'compare'>('after');
   const stepToExamine = whichState !== 'before' ? props.currentStep : props.priorStep;
@@ -158,7 +179,18 @@ export const DataView = (props: { currentStep: Step | undefined; priorStep: Step
     useState<EXPANDED_TOGGLE>('default_expanded');
 
   const attributes = stepToExamine?.attributes || [];
-
+  const step = props.currentStep || props.priorStep;
+  const [isFlashVisible, setIsFlashVisible] = useState(false);
+  const url = window.location.href;
+  const parts = url.split('/');
+  const [projectName, partitionKey, appID] = parts.slice(-3);
+  const cmd =
+    'burr-test-case create  \\\n' +
+    `  --project-name "${projectName}" \\\n` +
+    `  --partition-key "${partitionKey}" \\\n` +
+    `  --app-id "${appID}" \\\n` +
+    `  --sequence-id ${step ? step.step_start_log.sequence_id : '?'} \\\n` +
+    '  --target-file-name YOUR_FIXTURE_FILE.json \n';
   return (
     <div className="pl-1 flex flex-col gap-2 hide-scrollbar">
       <div className="flex flex-row justify-between sticky top-0 z-20 bg-white">
@@ -168,6 +200,32 @@ export const DataView = (props: { currentStep: Step | undefined; priorStep: Step
           setDefaultExpanded={setAllStateExpanded}
           dualToggle={viewRawData === 'raw'}
         />
+        <div className="text-xs pt-3 flex items-center">
+          {' '}
+          <span
+            className="cursor-pointer"
+            onClick={() => {
+              navigator.clipboard.writeText(cmd);
+              setIsFlashVisible(true);
+              // alert(`Copied ${cmd} to clipboard`);
+            }}
+          >
+            Step {step ? step.step_start_log.sequence_id : '?'} Test Case 📋
+          </span>
+          <QuestionMarkCircleIcon
+            className="h-3 w-3 text-gray-500 hover:text-gray-700 cursor-pointer"
+            onClick={() =>
+              window.open('https://burr.dagworks.io/examples/creating_tests/', '_blank')
+            }
+          />
+          {isFlashVisible && (
+            <FlashMessage
+              message={`${cmd} copied to clipboard!`}
+              duration={3000}
+              onClose={() => setIsFlashVisible(false)}
+            />
+          )}
+        </div>
         <div className="flex flex-row justify-end gap-2 pr-2">
           <SwitchField>
             <Switch

diff --git a/telemetry/ui/src/components/routes/app/InsightsView.tsx b/telemetry/ui/src/components/routes/app/InsightsView.tsx
@@ -0,0 +1,52 @@
+import { Step } from '../../../api';
+
+export const InsightsView = (props: { steps: Step[] }) => {
+  // Initialize a variable to hold the total sum
+  let totalPromptTokens = 0;
+  let totalCompletionTokens = 0;
+  const openaiPromptTokenCost = 500 / 1_000_000;
+  const openaiCompletionTokenCost = 1500 / 1_000_000;
+  let totalLLMCalls = 0;
+
+  // Iterate over each step
+  props.steps.forEach((step) => {
+    let hasPromptCall = false;
+    // Iterate over each attribute in the step
+    step.attributes.forEach((attribute) => {
+      // Check if the attribute name ends with '_tokens'
+      if (attribute.key.endsWith('prompt_tokens')) {
+        hasPromptCall = true;
+        // Add the attribute value to the total sum
+        totalPromptTokens += attribute.value as number;
+      } else if (attribute.key.endsWith('completion_tokens')) {
+        totalCompletionTokens += attribute.value as number;
+      }
+    });
+    if (hasPromptCall) {
+      totalLLMCalls += 1;
+    }
+  });
+
+  const totalCost =
+    (totalPromptTokens * openaiPromptTokenCost +
+      totalCompletionTokens * openaiCompletionTokenCost) /
+    100.0;
+
+  if (totalLLMCalls > 0) {
+    // Display the total sum
+    return (
+      <div>
+        <h2>Total Prompt Tokens: {totalPromptTokens}</h2>
+        <h2>Total Completion Tokens: {totalCompletionTokens}</h2>
+        <h2>Total Cost: ${totalCost}</h2>
+        <h2>Total LLM Calls: {totalLLMCalls}</h2>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <h2>No LLM calls found.</h2>
+      </div>
+    );
+  }
+};
diff --git a/telemetry/ui/src/components/routes/app/StateMachine.tsx b/telemetry/ui/src/components/routes/app/StateMachine.tsx
@@ -3,6 +3,7 @@ import { Tabs } from '../../common/tabs';
 import { DataView } from './DataView';
 import { ActionView } from './ActionView';
 import { GraphView } from './GraphView';
+import { InsightsView } from './InsightsView';
 
 export const AppStateView = (props: {
   steps: Step[];
@@ -27,7 +28,8 @@ export const AppStateView = (props: {
   );
   const tabs = [
     { id: 'data', displayName: 'Data' },
-    { id: 'action', displayName: 'Action' }
+    { id: 'action', displayName: 'Action' },
+    { id: 'insights', displayName: 'Insights' }
   ];
   if (props.displayGraphAsTab) {
     tabs.push({ id: 'graph', displayName: 'Graph' });
@@ -48,6 +50,7 @@ export const AppStateView = (props: {
             hoverAction={props.hoverAction}
           />
         )}
+        {currentTab === 'insights' && <InsightsView steps={props.steps} />}
       </div>
     </>
   );