Clarifies logging instructions for insights tab

DAGWorks-Inc · Aug 28, 2024 · b51b221 · b51b221
1 parent 32a2347
commit b51b221
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/telemetry/ui/src/components/routes/app/InsightsView.tsx b/telemetry/ui/src/components/routes/app/InsightsView.tsx
@@ -252,12 +252,11 @@ const InsightSubTable = (props: {
 
 export const InsightsView = (props: { steps: Step[] }) => {
   const allAttributes: AttributeModel[] = props.steps.flatMap((step) => step.attributes);
-  let noInsights = true;
 
   const allSpans = props.steps.flatMap((step) => step.spans);
 
   const out = (
-    <div className="pt-0">
+    <div className="pt-0 flex flex-col">
       <Table dense={1}>
         <TableHead>
           <TableRow className="hover:bg-gray-100">
@@ -271,7 +270,6 @@ export const InsightsView = (props: { steps: Step[] }) => {
         <TableBody>
           {REGISTERED_INSIGHTS.map((insight) => {
             if (insight.hasInsight(allAttributes)) {
-              noInsights = false;
               return (
                 <InsightSubTable
                   key={insight.insightName}
@@ -285,14 +283,17 @@ export const InsightsView = (props: { steps: Step[] }) => {
           })}
         </TableBody>
       </Table>
-    </div>
-  );
-  if (noInsights) {
-    return (
       <div>
-        <h2 className="text-gray-500 max-w-xl">
-          Use this tab to view summaries of your application -- E.G. LLM call data. To instrument,
-          and start collecting, see{' '}
+        <h2 className="text-gray-500 pl-2 pt-4">
+          Use this tab to view summaries of your application. This automatically picks up on a
+          variety of attributes, including those populated by{' '}
+          <a
+            className="text-dwlightblue"
+            href={'https://www.traceloop.com/docs/openllmetry/tracing/without-sdk'}
+          >
+            opentelemetry instrumentation.
+          </a>{' '}
+          -- E.G. LLM call data. To instrument, and start collecting, see{' '}
           <a
             className="text-dwlightblue"
             href={'https://burr.dagworks.io/concepts/additional-visibility/#quickstart'}
@@ -301,7 +302,7 @@ export const InsightsView = (props: { steps: Step[] }) => {
           </a>
         </h2>
       </div>
-    );
-  }
+    </div>
+  );
   return out;
 };
diff --git a/telemetry/ui/src/components/routes/app/ReproduceView.tsx b/telemetry/ui/src/components/routes/app/ReproduceView.tsx
@@ -48,7 +48,7 @@ export const ReproduceView = (props: {
           onClose={() => setIsFlashVisible(false)}
         />
       )}
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row justify-between text-gray-700">
         <p>
           To generate a test case for this step, run the following command.
           <a