Fix consistency issues across components

Resolves jaegertracing#2596 Updated the components to fix broken working. Signed-off-by: Abhishek <[email protected]>
its-me-abhishek · Jan 19, 2025 · d9bbda9 · d9bbda9
1 parent 6b7e09e
commit d9bbda9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 45 deletions.
diff --git a/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.tsx b/packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.tsx
@@ -38,46 +38,38 @@ type TProps = {
   targetRadius?: number;
 };
 
-const linkId = (link: TLink) => {
+function linkId(link: TLink) {
   const { source, target } = link;
   const srcId = typeof source === 'string' ? source : source.id;
   const targetId = typeof target === 'string' ? target : target.id;
   return `${srcId}=>${targetId}`;
-};
-
-const ForceGraphArrowLink: React.FC<TProps> = ({
-  className = '',
-  edgeOffset = 2,
-  opacity = 0.6,
-  stroke = '#999',
-  strokeWidth = 1,
-  targetRadius = 2,
-  link,
-  color,
-  ...spreadable
-}) => {
-  const id = `arrow-${linkId(link)}`;
-  return (
-    <g>
-      <defs>
-        <marker
-          id={id}
-          markerWidth={6}
-          markerHeight={4}
-          refX={5 + (targetRadius || 0)}
-          refY={2}
-          orient="auto"
-          markerUnits="strokeWidth"
-        >
-          {Number(targetRadius) > 0 && (
-            <path d="M0,0 L0,4 L6,2 z" fill={stroke || color} />
-          )}
-        </marker>
-      </defs>
+}
 
-      <ForceGraphLink {...spreadable} link={link} markerEnd={`url(#${id})`} />
-    </g>
-  );
-};
+export default class ForceGraphArrowLink extends React.PureComponent<TProps> {
+  render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { className = '', edgeOffset = 2, opacity = 0.6, strokeWidth = 1, link, targetRadius = 2, edgeOffset: _, ...spreadable } = this.props;
+    const id = `arrow-${linkId(link)}`;
+    return (
+      <g>
+        <defs>
+          <marker
+            id={id}
+            markerWidth={6}
+            markerHeight={4}
+            refX={5 + (targetRadius || 0)}
+            refY={2}
+            orient="auto"
+            markerUnits="strokeWidth"
+          >
+            {Number(targetRadius) > 0 && (
+              <path d="M0,0 L0,4 L6,2 z" fill={spreadable.stroke === undefined ? '#999' : spreadable.stroke || spreadable.color} />
+            )}
+          </marker>
+        </defs>
 
-export default ForceGraphArrowLink;
+        <ForceGraphLink {...spreadable} link={link} markerEnd={`url(#${id})`} />
+      </g>
+    );
+  }
+}
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx
@@ -1,3 +1,5 @@
+// TODO: @ flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -133,10 +135,10 @@ export class UnconnectedSearchResults extends React.PureComponent<SearchResultsP
       loading,
       location,
       maxTraceDuration,
-      queryOfResults,
+      queryOfResults = undefined,
       showStandaloneLink,
-      skipMessage,
-      spanLinks,
+      skipMessage = false,
+      spanLinks = undefined,
       traces,
       sortBy,
       handleSortChange,

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
@@ -27,15 +27,15 @@ import './AccordianLogs.css';
 type AccordianLogsProps = {
   interactive?: boolean;
   isOpen: boolean;
-  linksGetter?: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil | undefined;
+  linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil;
   logs: Log[];
   onItemToggle?: (log: Log) => void;
   onToggle?: () => void;
   openedItems?: Set<Log>;
   timestamp: number;
 };
 
-export default function AccordianLogs({ interactive = true, isOpen, linksGetter, logs, openedItems = undefined, onItemToggle = undefined, onToggle = undefined, timestamp }: AccordianLogsProps) {
+export default function AccordianLogs({ interactive = true, isOpen, linksGetter = undefined, logs, openedItems = undefined, onItemToggle = undefined, onToggle = undefined, timestamp }: AccordianLogsProps) {
   let arrow: React.ReactNode | null = null;
   let HeaderComponent: 'span' | 'a' = 'span';
   let headerProps: object | null = null;

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.tsx
@@ -26,9 +26,7 @@ type TicksProps = {
   startTime?: number | TNil;
 };
 
-export default function Ticks(props: TicksProps) {
-  const { endTime = null, numTicks, showLabels = null, startTime = null } = props;
-
+export default function Ticks({ endTime = null, numTicks, showLabels = null, startTime = null }: TicksProps) {
   let labels: undefined | string[];
   if (showLabels) {
     labels = [];