From 2d6a5dd1af4c0253cf89d9653fc40c5181c073e2 Mon Sep 17 00:00:00 2001 From: ricoberger Date: Tue, 21 Jun 2022 18:29:00 +0200 Subject: [PATCH] [app] Fix usage of cytoscape in topology graph In the production build the topology graph was not rendered correctly, because the "layout.current.run()" function wasn't triggered. We now ensure that this function is executed by adding a timeout of 100ms before it should be run. The same fix was also applied for the "istio" and the "kiali" plugin, were we had the same issue. --- CHANGELOG.md | 1 + .../topology/ApplicationsTopologyGraph.tsx | 28 +++++++++---------- .../src/components/panel/TopologyGraph.tsx | 28 +++++++++---------- .../src/components/panel/Graph.tsx | 28 +++++++++---------- 4 files changed, 40 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ae6b3b1d..6b3415e29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan - [#358](https://github.com/kobsio/kobs/pull/#358): [app] Fix namespace handling, when multiple namespaces are selected. - [#359](https://github.com/kobsio/kobs/pull/#359): [app] Fix pagination, when the number of items per page is changed. - [#360](https://github.com/kobsio/kobs/pull/#360): [app] Fix static file handling, when url contains a dot (`.`). +- [#364](https://github.com/kobsio/kobs/pull/#364): [app] Fix usage of cytoscape in the topology graph. The fix was also applied for the `istio` and `kiali` plugin. ### Changed diff --git a/plugins/app/src/components/topology/ApplicationsTopologyGraph.tsx b/plugins/app/src/components/topology/ApplicationsTopologyGraph.tsx index c793ad050..160c10e43 100644 --- a/plugins/app/src/components/topology/ApplicationsTopologyGraph.tsx +++ b/plugins/app/src/components/topology/ApplicationsTopologyGraph.tsx @@ -138,19 +138,21 @@ const TopologyGraph: React.FunctionComponent = ({ ); useEffect(() => { - if (graph.current) { - if (layout.current) { - layout.current.stop(); - } + setTimeout(() => { + if (graph.current) { + if (layout.current) { + layout.current.stop(); + } - graph.current.add({ - edges: edges, - nodes: nodes, - }); + graph.current.add({ + edges: edges, + nodes: nodes, + }); - layout.current = graph.current.elements().makeLayout(dagreLayout); - layout.current.run(); - } + layout.current = graph.current.elements().makeLayout(dagreLayout); + layout.current.run(); + } + }, 100); }, [edges, nodes, size]); useEffect(() => { @@ -165,10 +167,6 @@ const TopologyGraph: React.FunctionComponent = ({ graph.current = cytoscape({ container: container.current, - elements: { - edges: edges, - nodes: nodes, - }, style: styleSheet, }); graph.current.on('tap', onTap); diff --git a/plugins/plugin-istio/src/components/panel/TopologyGraph.tsx b/plugins/plugin-istio/src/components/panel/TopologyGraph.tsx index 3586d5ff7..ba857f3d4 100644 --- a/plugins/plugin-istio/src/components/panel/TopologyGraph.tsx +++ b/plugins/plugin-istio/src/components/panel/TopologyGraph.tsx @@ -169,19 +169,21 @@ const TopologyGraph: React.FunctionComponent = ({ ); useEffect(() => { - if (graph.current) { - if (layout.current) { - layout.current.stop(); - } + setTimeout(() => { + if (graph.current) { + if (layout.current) { + layout.current.stop(); + } - graph.current.add({ - edges: edges, - nodes: nodes, - }); + graph.current.add({ + edges: edges, + nodes: nodes, + }); - layout.current = graph.current.elements().makeLayout(dagreLayout); - layout.current.run(); - } + layout.current = graph.current.elements().makeLayout(dagreLayout); + layout.current.run(); + } + }, 100); }, [edges, nodes, size]); useEffect(() => { @@ -196,10 +198,6 @@ const TopologyGraph: React.FunctionComponent = ({ graph.current = cytoscape({ container: container.current, - elements: { - edges: edges, - nodes: nodes, - }, style: styleSheet, }); graph.current.on('tap', onTap); diff --git a/plugins/plugin-kiali/src/components/panel/Graph.tsx b/plugins/plugin-kiali/src/components/panel/Graph.tsx index 1e7edd725..37d4a1c80 100644 --- a/plugins/plugin-kiali/src/components/panel/Graph.tsx +++ b/plugins/plugin-kiali/src/components/panel/Graph.tsx @@ -231,19 +231,21 @@ const Graph: React.FunctionComponent = ({ instance, times, edges, n ); useEffect(() => { - if (graph.current) { - if (layout.current) { - layout.current.stop(); - } + setTimeout(() => { + if (graph.current) { + if (layout.current) { + layout.current.stop(); + } - graph.current.add({ - edges: edges as cytoscape.EdgeDefinition[], - nodes: nodes as cytoscape.NodeDefinition[], - }); + graph.current.add({ + edges: edges as cytoscape.EdgeDefinition[], + nodes: nodes as cytoscape.NodeDefinition[], + }); - layout.current = graph.current.elements().makeLayout(dagreLayout); - layout.current.run(); - } + layout.current = graph.current.elements().makeLayout(dagreLayout); + layout.current.run(); + } + }, 100); }, [edges, nodes, size]); useEffect(() => { @@ -258,10 +260,6 @@ const Graph: React.FunctionComponent = ({ instance, times, edges, n graph.current = cytoscape({ container: container.current, - elements: { - edges: edges as cytoscape.EdgeDefinition[], - nodes: nodes as cytoscape.NodeDefinition[], - }, style: styleSheet, }); graph.current.on('tap', onTap);