From 4df5709c1067e8e97d9e302568e740eb372d6b96 Mon Sep 17 00:00:00 2001
From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:15:52 +0700
Subject: [PATCH] print streaming tts span details (#426)

* print streaming tts span details

* wip
---
 .../views/recent-calls/jaeger/detail.tsx      | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/containers/internal/views/recent-calls/jaeger/detail.tsx b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
index f4b81af..5186f20 100644
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -3,6 +3,7 @@ import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
 import dayjs from "dayjs";
 import "./styles.scss";
 import { formattedDuration } from "./utils";
+import { getSpansByNameRegex } from "../utils";
 
 type JaegerDetailProps = {
   group: JaegerGroup;
@@ -65,6 +66,37 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
             </div>
           </div>
         ))}
+
+        {/* TTS Streaming Attrs */}
+        {group.children.length &&
+          getSpansByNameRegex(group.children, /tts-generation/)?.map((span) => {
+            return span.attributes.map((attribute) => {
+              if (
+                ![
+                  "tts.vendor",
+                  "tts.language",
+                  "tts.voice",
+                  "tts.cached",
+                  "engine",
+                  "voice",
+                ].includes(attribute.key)
+              ) {
+                return (
+                  <div
+                    key={attribute.key}
+                    className="spanDetailsWrapper__details"
+                  >
+                    <div className="spanDetailsWrapper__details_header">
+                      <strong>{attribute.key}</strong>:
+                    </div>
+                    <div className="spanDetailsWrapper__details_body">
+                      {extractSpanGroupValue(attribute.value)}
+                    </div>
+                  </div>
+                );
+              }
+            });
+          })}
       </div>
     </div>
   );