fix: tts.cached boolValue does not showup on spain detail (#250)

* fix: tts.cached boolValue does not showup on spain detail * wip * wip * wip * add env to disable jaeger tracing view * fix: tts.cached boolValue does not showup on spain detail * wip * wip * wip * add env to disable jaeger tracing view * fix: review coments * fix review comment * fix review comment
2025-12-19 05:37:43 +00:00 · 2023-05-11 19:34:16 +07:00
parent 6cb1c50cf0
commit 683693ec0e
10 changed files with 5877 additions and 786 deletions
--- a/.env
+++ b/.env
@@ -7,4 +7,6 @@ VITE_DEV_BASE_URL=http://127.0.0.1:3000/v1
 # disables controls for default application routing to carrier for SP and account level users
 #VITE_APP_DISABLE_DEFAULT_TRUNK_ROUTING=true
 ## disables Least cost routing feature
-#VITE_APP_LCR_DISABLED=true
+#VITE_APP_LCR_DISABLED=true
+## disables Jaeger Tracing feature
+#VITE_APP_JAEGER_TRACING_DISABLED=true
--- a/server/sample-jaeger.json
+++ b/server/sample-jaeger.json
--- a/src/api/constants.ts
+++ b/src/api/constants.ts
@@ -43,6 +43,11 @@ export const DISABLE_LCR: boolean = JSON.parse(
  import.meta.env.VITE_APP_LCR_DISABLED || "false"
 );

+/** Disable jaeger tracing */
+export const DISABLE_JAEGER_TRACING: boolean = JSON.parse(
+  import.meta.env.VITE_APP_JAEGER_TRACING_DISABLED || "false"
+);
+
 /** TCP Max Port */
 export const TCP_MAX_PORT = 65535;

--- a/src/api/jaeger-types.ts
+++ b/src/api/jaeger-types.ts
@@ -40,6 +40,7 @@ export interface JaegerAttribute {
 export interface JaegerValue {
  stringValue: string;
  doubleValue: string;
+  boolValue: string;
 }

 export interface JaegerGroup {
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -91,9 +91,19 @@ export const ModalForm = ({

 export const ModalClose = ({ children, handleClose }: CloseProps) => {
  return ReactDOM.createPortal(
-    <div className="modal">
-      <div className="modal__box">
-        <div className="modal__stuff">{children}</div>
+    <div className="modal" role="presentation" onClick={handleClose}>
+      <div
+        className="modal__box"
+        role="presentation"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="modal__stuff"
+          role="presentation"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
        <ButtonGroup right>
          <Button type="button" small subStyle="grey" onClick={handleClose}>
            Close
--- a/src/containers/internal/views/recent-calls/call-tracing.tsx
+++ b/src/containers/internal/views/recent-calls/call-tracing.tsx
@@ -4,7 +4,6 @@ import { JaegerGroup, JaegerRoot, JaegerSpan } from "src/api/jaeger-types";
 import { getJaegerTrace } from "src/api";
 import { toastError } from "src/store";
 import { RecentCall } from "src/api/types";
-import { JaegerDetail } from "./jaeger/detail";

 function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
@@ -33,7 +32,6 @@ export type CallTracingProps = {
 export const CallTracing = ({ call }: CallTracingProps) => {
  const [jaegerRoot, setJaegerRoot] = useState<JaegerRoot>();
  const [jaegerGroup, setJaegerGroup] = useState<JaegerGroup>();
-  const [jaegerDetail, setJaegerDetail] = useState<JaegerGroup>();
  const windowSize = useWindowSize();

  const getSpansFromJaegerRoot = (trace: JaegerRoot) => {
@@ -125,7 +123,6 @@ export const CallTracing = ({ call }: CallTracingProps) => {
          rootGroup,
          groups
        );
-        setJaegerDetail(rootGroup);
        setJaegerGroup(rootGroup);
      }
    }
@@ -168,10 +165,9 @@ export const CallTracing = ({ call }: CallTracingProps) => {
      <>
        <div className="item__details">
          <div className="barGroup">
-            <Bar group={jaegerGroup} handleRowSelect={setJaegerDetail} />
+            <Bar group={jaegerGroup} />
          </div>
        </div>
-        {jaegerDetail && <JaegerDetail group={jaegerDetail} />}
      </>
    );
  }
--- a/src/containers/internal/views/recent-calls/details.tsx
+++ b/src/containers/internal/views/recent-calls/details.tsx
@@ -8,6 +8,7 @@ import type { RecentCall } from "src/api/types";
 import { Tabs, Tab } from "@jambonz/ui-kit";
 import CallDetail from "./call-detail";
 import CallTracing from "./call-tracing";
+import { DISABLE_JAEGER_TRACING } from "src/api/constants";

 type DetailsItemProps = {
  call: RecentCall;
@@ -58,7 +59,8 @@ export const DetailsItem = ({ call }: DetailsItemProps) => {
            </div>
          </div>
        </summary>
-        {call.trace_id === "00000000000000000000000000000000" ? (
+        {call.trace_id === "00000000000000000000000000000000" ||
+        DISABLE_JAEGER_TRACING ? (
          <CallDetail call={call} />
        ) : (
          <Tabs active={[activeTab, setActiveTab]}>
--- a/src/containers/internal/views/recent-calls/jaeger/bar.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/bar.tsx
@@ -1,21 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import { JaegerGroup } from "src/api/jaeger-types";

 import "./styles.scss";
 import { formattedDuration } from "./utils";
+import { JaegerDetail } from "./detail";
+import { ModalClose } from "src/components";
+import { P } from "@jambonz/ui-kit";

 type BarProps = {
  group: JaegerGroup;
-  handleRowSelect: (grp: JaegerGroup) => void;
 };

-export const Bar = ({ group, handleRowSelect }: BarProps) => {
+export const Bar = ({ group }: BarProps) => {
+  const [jaegerDetail, setJaegerDetail] = useState<JaegerGroup | null>(null);
  const titleMargin = group.level * 30;

-  const handleRowClick = () => {
-    handleRowSelect(group);
-  };
-
  const truncate = (str: string) => {
    if (str.length > 36) {
      return str.substring(0, 36) + "...";
@@ -24,33 +23,44 @@ export const Bar = ({ group, handleRowSelect }: BarProps) => {
  };

  return (
-    <div className="barWrapper">
+    <>
      <div
-        role="presentation"
-        className="barWrapper__row"
-        onClick={handleRowClick}
+        className="barWrapper"
+        role={"presentation"}
+        onClick={() => setJaegerDetail(group)}
      >
-        <div
-          className="barWrapper__header"
-          style={{ paddingLeft: `${titleMargin}px` }}
-        >
-          {truncate(group.name)}
-        </div>
-        <button
-          className="barWrapper__span"
-          style={{ marginLeft: `${group.startPx}px`, width: group.durationPx }}
-        />
-        <div className="barWrapper__duration">
-          {formattedDuration(group.durationMs)}
+        <div role="presentation" className="barWrapper__row">
+          <div
+            className="barWrapper__header"
+            style={{ paddingLeft: `${titleMargin}px` }}
+          >
+            {truncate(group.name)}
+          </div>
+          <button
+            className="barWrapper__span"
+            style={{
+              marginLeft: `${group.startPx}px`,
+              width: group.durationPx,
+            }}
+          />
+          <div className="barWrapper__duration">
+            {formattedDuration(group.durationMs)}
+          </div>
        </div>
      </div>
+      {jaegerDetail && (
+        <ModalClose handleClose={() => setJaegerDetail(null)}>
+          <div className="spanDetailsWrapper__header">
+            <P>
+              <strong>Span:</strong> {group.name.replaceAll(",", ", ")}
+            </P>
+          </div>
+          <JaegerDetail group={jaegerDetail} />
+        </ModalClose>
+      )}
      {group.children.map((value) => (
-        <Bar
-          key={value.spanId}
-          group={value}
-          handleRowSelect={handleRowSelect}
-        />
+        <Bar key={value.spanId} group={value} />
      ))}
-    </div>
+    </>
  );
 };
--- a/src/containers/internal/views/recent-calls/jaeger/detail.tsx
+++ b/src/containers/internal/views/recent-calls/jaeger/detail.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { JaegerGroup } from "src/api/jaeger-types";
+import { JaegerGroup, JaegerValue } from "src/api/jaeger-types";
 import dayjs from "dayjs";
 import "./styles.scss";
 import { formattedDuration } from "./utils";
@@ -8,17 +8,26 @@ type JaegerDetailProps = {
  group: JaegerGroup;
 };

+const extractSpanGroupValue = (value: JaegerValue): string => {
+  const ret = String(value.stringValue || value.doubleValue || value.boolValue);
+  // add white space for wrap the line
+  return ret.replaceAll(",", ", ");
+};
+
 export const JaegerDetail = ({ group }: JaegerDetailProps) => {
  return (
    <div className="spanDetailsWrapper">
-      <div className="spanDetailsWrapper__header">Span: {group.name}</div>
      <div className="spanDetailsWrapper__detailsWrapper">
        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">Span ID:</div>
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Span ID:</strong>
+          </div>
          <div className="spanDetailsWrapper__details_body">{group.spanId}</div>
        </div>
        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">Span Start:</div>
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Span Start:</strong>
+          </div>
          <div className="spanDetailsWrapper__details_body">
            {dayjs
              .unix(group.startTimeUnixNano / 1000000000)
@@ -26,7 +35,9 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
          </div>
        </div>
        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">Span End:</div>
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Span End:</strong>
+          </div>
          <div className="spanDetailsWrapper__details_body">
            {dayjs
              .unix(group.endTimeUnixNano / 1000000000)
@@ -34,7 +45,9 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
          </div>
        </div>
        <div className="spanDetailsWrapper__details">
-          <div className="spanDetailsWrapper__details_header">Duration:</div>
+          <div className="spanDetailsWrapper__details_header">
+            <strong>Duration:</strong>
+          </div>
          <div className="spanDetailsWrapper__details_body">
            {formattedDuration(group.durationMs)}
          </div>
@@ -42,10 +55,10 @@ export const JaegerDetail = ({ group }: JaegerDetailProps) => {
        {group.attributes.map((attribute) => (
          <div key={attribute.key} className="spanDetailsWrapper__details">
            <div className="spanDetailsWrapper__details_header">
-              {attribute.key}:
+              <strong>{attribute.key}</strong>:
            </div>
            <div className="spanDetailsWrapper__details_body">
-              {attribute.value.stringValue || attribute.value.doubleValue}
+              {extractSpanGroupValue(attribute.value)}
            </div>
          </div>
        ))}
--- a/src/containers/internal/views/recent-calls/jaeger/styles.scss
+++ b/src/containers/internal/views/recent-calls/jaeger/styles.scss
@@ -2,108 +2,6 @@
@use "src/styles/mixins";
@use "@jambonz/ui-kit/src/styles/vars" as ui-vars;

-.jaegerModal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  min-height: 100%;
-  min-width: 100%;
-  background-color: #fff;
-  z-index: vars.$zindex00;
-  overflow-y: hidden;
-}
-
-.modalHeader button {
-  min-height: 28px;
-
-  @media (max-width: 820px) {
-    height: 34px;
-  }
-
-  @media (min-width: 820px) {
-    height: 40px;
-  }
-}
-
-.modalHeader {
-  display: flex;
-  background-color: white;
-  padding: 20px;
-  vertical-align: middle;
-  justify-content: left;
-  height: 8vh;
-
-  @media (max-width: 380px) {
-    padding: 10px;
-    height: 10vh;
-    font-size: 0.9em;
-    font-weight: lighter;
-  }
-
-  @media (min-width: 410px) {
-    padding: 10px;
-    height: 8vh;
-    font-weight: lighter;
-  }
-
-  @media (min-width: 600px) {
-    padding: 20px;
-    font-weight: lighter;
-    font-size: small;
-  }
-
-  @media (min-width: 820px) {
-    padding: 20px;
-    font-weight: lighter;
-    font-size: small;
-  }
-
-  @media (min-width: 910px) {
-    font-weight: bolder;
-  }
-
-  &__header_item {
-    padding-top: 10px;
-    margin-left: 20px;
-    display: flex;
-    font-weight: bolder;
-
-    @media (max-width: 380px) {
-      padding-top: 8px;
-      margin-left: 15px;
-      font-size: 0.8em;
-    }
-
-    @media (min-width: 380px) {
-      padding-top: 12px;
-      margin-left: 15px;
-      font-size: 0.7em;
-      font-weight: lighter;
-    }
-
-    @media (min-width: 410px) {
-      padding-top: 11px;
-      margin-left: 15px;
-      font-size: 0.7em;
-      font-weight: lighter;
-    }
-
-    @media (min-width: 820px) {
-      padding-top: 10px;
-      font-weight: bolder;
-      font-size: medium;
-    }
-
-    @media (min-width: 910px) {
-      padding-top: 12px;
-      font-weight: bolder;
-      font-size: 1.2em;
-    }
-  }
-}
-
 .barGroup {
  border-radius: ui-vars.$px01;
  @include mixins.code();
@@ -176,15 +74,18 @@
  border-radius: ui-vars.$px01;
  @include mixins.code();
  text-align: left;
-  padding: ui-vars.$px03;
-  color: ui-vars.$pink;
-  background-color: ui-vars.$dark;
+  padding: ui-vars.$px01;
+  background-color: ui-vars.$white;
  border-radius: ui-vars.$px01;
-  margin-top: ui-vars.$px02;
+  color: ui-vars.$dark;
+  font-size: ui-vars.$mxs-size;
+  max-width: ui-vars.$width-tablet-2;
+  max-height: 500px;
+  overflow-y: scroll;

  &__detailsWrapper {
    height: 100%;
-    padding: 20px;
+    padding: 10px;
    font-size: 0.9em;

    @media (max-width: 600px) {
@@ -203,32 +104,21 @@
  }

  &__details_header {
-    padding: 5px;
-
-    @media (max-width: 600px) {
-      min-width: 160px;
-    }
-
-    @media (min-width: 600px) {
-      min-width: 200px;
-    }
-
-    @media (min-width: 900px) {
-      min-width: 300px;
-    }
+    padding: 3px;
+    min-width: 150px;
  }

  &__details_body {
    flex-grow: 1;
-    white-space: pre;
+    white-space: pre-line;
+    padding: 2px;
    width: 100%;
-    padding: 5px;
  }

  &__header {
-    background-color: #fff;
+    background-color: ui-vars.$white;
    color: ui-vars.$jambonz;
-    padding: 20px 20px 20px 30px;
-    border-bottom: thin solid #ccc;
+    padding: 5px 10px 10px 10px;
+    border-bottom: thin solid ui-vars.$grey;
  }
 }