fix edge labels error

janus-idp · Jun 14, 2024 · 2afb71a · 2afb71a
1 parent 9307910
commit 2afb71a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 59 deletions.
diff --git a/plugins/kiali/src/pages/TrafficGraph/TrafficGraphPage.tsx b/plugins/kiali/src/pages/TrafficGraph/TrafficGraphPage.tsx
@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { useApi } from '@backstage/core-plugin-api';
 
@@ -22,16 +29,14 @@ import { KialiLayoutFactory } from './factories/KialiLayoutFactory';
 import { decorateGraphData } from './util/GraphDecorator';
 import { generateDataModel } from './util/GraphGenerator';
 
-function TrafficGraphPage(props: { view?: string }) {
+function TrafficGraphPage(props: { view: string }) {
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
-  const [duration, setDuration] = React.useState<number>(
-    FilterHelper.currentDuration(),
-  );
-  const [loadingData, setLoadingData] = React.useState<boolean>(false);
-
+  const [duration, setDuration] = useState(FilterHelper.currentDuration());
+  const [loadingData, setLoadingData] = useState(false);
   const visualizationRef = React.useRef<Visualization>();
   const activeNamespaces = kialiState.namespaces.activeNamespaces;
+
   if (!visualizationRef.current) {
     visualizationRef.current = new Visualization();
     visualizationRef.current.registerLayoutFactory(KialiLayoutFactory);
@@ -41,16 +46,17 @@ function TrafficGraphPage(props: { view?: string }) {
 
   const controller = visualizationRef.current;
 
-  const graphConfig = useMemo(() => {
-    return {
+  const graphConfig = useMemo(
+    () => ({
       id: 'g1',
       type: 'graph',
       layout: 'Dagre',
-    };
-  }, []);
+    }),
+    [],
+  );
 
-  const graphQueryElements = useMemo(() => {
-    return {
+  const graphQueryElements = useMemo(
+    () => ({
       activeNamespaces: activeNamespaces.map(ns => ns.name).join(','),
       namespaces: activeNamespaces.map(ns => ns.name).join(','),
       graphType: GraphType.VERSIONED_APP,
@@ -69,17 +75,18 @@ function TrafficGraphPage(props: { view?: string }) {
         TrafficRate.GRPC_TOTAL,
         TrafficRate.TCP_TOTAL,
       ],
-    };
-  }, [activeNamespaces]);
+    }),
+    [activeNamespaces],
+  );
 
   useEffect(() => {
     const d = HistoryManager.getDuration();
     if (d !== undefined) {
-      setDuration(d);
+      setDuration(60);
     } else {
       setDuration(FilterHelper.currentDuration());
     }
-  }, [duration]);
+  }, []);
 
   const timeDuration = (
     <TimeDurationComponent
@@ -92,10 +99,9 @@ function TrafficGraphPage(props: { view?: string }) {
     />
   );
 
-  const elements = [timeDuration];
-
-  const fetchGraph = useCallback(async () => {
+  const fetchGraph = async () => {
     setLoadingData(true);
+    ('Fetching graph data');
     if (activeNamespaces.length === 0) {
       controller.fromModel(
         {
@@ -109,30 +115,29 @@ function TrafficGraphPage(props: { view?: string }) {
       return;
     }
 
-    const data = await kialiClient.getGraphElements(graphQueryElements);
-    const graphData = decorateGraphData(data.elements, data.duration);
-    const g = generateDataModel(graphData, graphQueryElements);
-
-    controller.fromModel(
-      {
-        nodes: g.nodes,
-        edges: g.edges,
-        graph: graphConfig,
-      },
-      false,
-    );
-    setLoadingData(false);
-  }, [
-    controller,
-    activeNamespaces,
-    kialiClient,
-    graphQueryElements,
-    graphConfig,
-  ]);
+    try {
+      const data = await kialiClient.getGraphElements(graphQueryElements);
+      const graphData = decorateGraphData(data.elements, data.duration);
+      const g = generateDataModel(graphData, graphQueryElements);
+      controller.fromModel(
+        {
+          nodes: g.nodes,
+          edges: g.edges,
+          graph: graphConfig,
+        },
+        false,
+      );
+    } catch (error) {
+      console.error('Error fetching graph data:', error);
+    } finally {
+      setLoadingData(false);
+    }
+  };
 
   useEffect(() => {
+    console.log('Running fetchGraph');
     fetchGraph();
-  }, [fetchGraph, duration, activeNamespaces]);
+  }, [duration, activeNamespaces]);
 
   if (loadingData) {
     return <CircularProgress />;
@@ -142,13 +147,10 @@ function TrafficGraphPage(props: { view?: string }) {
     <>
       {props.view !== ENTITY && (
         <DefaultSecondaryMasthead
-          elements={elements}
-          onRefresh={() => {
-            fetchGraph();
-          }}
+          elements={[timeDuration]}
+          onRefresh={fetchGraph}
         />
       )}
-
       <VisualizationProvider controller={controller}>
         <VisualizationSurface state={{ duration }} />
       </VisualizationProvider>

diff --git a/plugins/kiali/src/pages/TrafficGraph/util/EdgeLabels.ts b/plugins/kiali/src/pages/TrafficGraph/util/EdgeLabels.ts
@@ -19,14 +19,14 @@ import { GraphPFSettings } from '../types/GraphPFSettings';
 import { NodeMap } from '../types/NodeMap';
 
 export const trimFixed = (fixed: string): string => {
-  let newFixed = fixed;
   if (!fixed.includes('.')) {
-    return newFixed;
+    return fixed;
   }
-  while (fixed.endsWith('0')) {
-    newFixed = fixed.slice(0, -1);
+  let newFixed = fixed;
+  while (newFixed.endsWith('0')) {
+    newFixed = newFixed.slice(0, -1);
   }
-  return newFixed.endsWith('.') ? (newFixed = fixed.slice(0, -1)) : newFixed;
+  return newFixed.endsWith('.') ? newFixed.slice(0, -1) : newFixed;
 };
 
 // This is due to us never having figured out why a tiny fraction of what-we-expect-to-be-numbers
@@ -79,7 +79,7 @@ export const toFixedByteRate = (num: number, includeUnits: boolean): string => {
   return includeUnits ? `${rate}kps` : rate;
 };
 
-export const getEdgeLabel = (
+const getEdgeLabel = (
   edge: EdgeModel,
   nodeMap: NodeMap,
   settings: GraphPFSettings,
@@ -88,7 +88,7 @@ export const getEdgeLabel = (
   const edgeLabels = settings.edgeLabels;
   const isVerbose = data.isSelected;
   const includeUnits = isVerbose || numLabels(edgeLabels) > 1;
-  const labels = [] as string[];
+  let labels = [] as string[];
 
   if (edgeLabels.includes(EdgeLabelMode.TRAFFIC_RATE)) {
     let rate = 0;
@@ -129,15 +129,15 @@ export const getEdgeLabel = (
   }
 
   if (edgeLabels.includes(EdgeLabelMode.RESPONSE_TIME_GROUP)) {
-    const responseTime = data.responseTime;
+    let responseTime = data.responseTime;
 
     if (responseTime > 0) {
       labels.push(toFixedDuration(responseTime));
     }
   }
 
   if (edgeLabels.includes(EdgeLabelMode.THROUGHPUT_GROUP)) {
-    const rate = data.throughput;
+    let rate = data.throughput;
 
     if (rate > 0) {
       labels.push(toFixedByteRate(rate, includeUnits));
@@ -175,7 +175,7 @@ export const getEdgeLabel = (
   if (data.hasTraffic && data.responses) {
     if (nodeMap.get(edge.target!)?.data?.hasCB) {
       const responses = data.responses;
-      for (const code of _.keys(responses)) {
+      for (let code of _.keys(responses)) {
         // TODO: Not 100% sure we want "UH" code here ("no healthy upstream hosts") but based on timing I have
         // seen this code returned and not "UO". "UO" is returned only when the circuit breaker is caught open.
         // But if open CB is responsible for removing possible destinations the "UH" code seems preferred.
@@ -187,11 +187,9 @@ export const getEdgeLabel = (
         }
       }
     }
-
-    return label;
   }
 
-  return '';
+  return label;
 };
 
 const EdgeColor = PFColors.Success;