External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-11 10:00:01 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix enable/disable node state on browser resize.

Browse Source
This commit is contained in:
Kia Lam 2022-10-11 16:26:24 -07:00
parent 22b6ae6903
commit 8a959e9586
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
awx/ui/src/screens/TopologyView/MeshGraph.js
View File

@ -40,8 +40,13 @@ const Loader = styled(ContentLoading)`
width: 100%;
background: white;
`;
function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
const [storedNodes, setStoredNodes] = useState(null);
function MeshGraph({
data,
showLegend,
zoom,
setShowZoomControls,
storedNodes,
}) {
const [isNodeSelected, setIsNodeSelected] = useState(false);
const [selectedNode, setSelectedNode] = useState(null);
const [simulationProgress, setSimulationProgress] = useState(null);
@ -100,19 +105,14 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
// update mesh when user toggles enabled/disabled slider
useEffect(() => {
if (instance?.id) {
const updatedNodes = storedNodes.map((n) =>
const updatedNodes = storedNodes.current.map((n) =>
n.id === instance.id ? { ...n, enabled: instance.enabled } : n
);
setStoredNodes(updatedNodes);
storedNodes.current = updatedNodes;
updateNodeSVG(storedNodes.current);
}
}, [instance]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
if (storedNodes) {
updateNodeSVG(storedNodes);
}
}, [storedNodes]);
const draw = () => {
let width;
let height;
@ -137,6 +137,9 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
const mesh = svg.append('g').attr('class', 'mesh');
const graph = data;
if (storedNodes?.current) {
graph.nodes = storedNodes.current;
}
/* WEB WORKER */
const worker = webWorker();
@ -162,7 +165,6 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
}
function ended({ nodes, links }) {
setStoredNodes(nodes);
// Remove loading screen
d3.select('.simulation-loader').style('visibility', 'hidden');
setShowZoomControls(true);
@ -247,7 +249,6 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
.attr('fill', DEFAULT_NODE_COLOR)
.attr('stroke-dasharray', (d) => (d.enabled ? `1 0` : `5`))
.attr('stroke', DEFAULT_NODE_STROKE_COLOR);
// node type labels
node
.append('text')

5
awx/ui/src/screens/TopologyView/TopologyView.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useCallback, useState } from 'react';
import React, { useEffect, useCallback, useState, useRef } from 'react';
import { t } from '@lingui/macro';
import { PageSection, Card, CardBody } from '@patternfly/react-core';
import ContentError from 'components/ContentError';
@ -10,6 +10,7 @@ import useZoom from './utils/useZoom';
import { CHILDSELECTOR, PARENTSELECTOR } from './constants';
function TopologyView() {
const storedNodes = useRef(null);
const [showLegend, setShowLegend] = useState(true);
const [showZoomControls, setShowZoomControls] = useState(false);
const {
@ -20,6 +21,7 @@ function TopologyView() {
} = useRequest(
useCallback(async () => {
const { data } = await MeshAPI.read();
storedNodes.current = data.nodes;
return {
meshData: data,
};
@ -64,6 +66,7 @@ function TopologyView() {
showLegend={showLegend}
zoom={zoom}
setShowZoomControls={setShowZoomControls}
storedNodes={storedNodes}
/>
)}
</CardBody>