External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 09:27:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fix zoom on scroll.

Browse Source
This commit is contained in:
Kia Lam
2022-02-02 20:09:03 -08:00
parent 8090cd3032
commit 3cfab418d1
1 changed files with 233 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,96 +7,234 @@ import * as d3 from 'd3';
import Legend from './Legend'; import Legend from './Legend';
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
function MeshGraph({ data }) { // function MeshGraph({ data }) {
// function MeshGraph() { function MeshGraph() {
const [isNodeSelected, setIsNodeSelected] = useState(false); const [isNodeSelected, setIsNodeSelected] = useState(false);
const [selectedNode, setSelectedNode] = useState(null); const [selectedNode, setSelectedNode] = useState(null);
const [nodeDetail, setNodeDetail] = useState(null); const [nodeDetail, setNodeDetail] = useState(null);
const history = useHistory(); const history = useHistory();
const draw = () => { const draw = () => {
// const data = { const data = {
// nodes: [ nodes: [
// { {
// id: 1, id: 1,
// hostname: 'awx_1', hostname: 'awx_1',
// node_type: 'hybrid', node_type: 'hybrid',
// node_state: 'healthy', node_state: 'healthy',
// }, },
// { {
// id: 3, id: 3,
// hostname: 'receptor-1', hostname: 'receptor-1',
// node_type: 'execution', node_type: 'execution',
// node_state: 'healthy', node_state: 'healthy',
// }, },
// { {
// id: 4, id: 4,
// hostname: 'receptor-2', hostname: 'receptor-2',
// node_type: 'execution', node_type: 'execution',
// node_state: 'healthy', node_state: 'healthy',
// }, },
// { {
// id: 2, id: 2,
// hostname: 'receptor-hop', hostname: 'receptor-hop',
// node_type: 'hop', node_type: 'hop',
// node_state: 'healthy', node_state: 'healthy',
// }, },
// { {
// id: 5, id: 5,
// hostname: 'receptor-hop-1', hostname: 'receptor-hop-1',
// node_type: 'hop', node_type: 'hop',
// node_state: 'healthy', node_state: 'healthy',
// }, },
// { {
// id: 6, id: 6,
// hostname: 'receptor-hop-2', hostname: 'receptor-hop-2',
// node_type: 'hop', node_type: 'hop',
// node_state: 'disabled', node_state: 'disabled',
// }, },
// { {
// id: 7, id: 7,
// hostname: 'receptor-hop-3', hostname: 'receptor-hop-3',
// node_type: 'hop', node_type: 'hop',
// node_state: 'error', node_state: 'error',
// }, },
// { {
// id: 8, id: 8,
// hostname: 'receptor-hop-4', hostname: 'receptor-hop-4',
// node_type: 'hop', node_type: 'hop',
// node_state: 'healthy', node_state: 'healthy',
// }, },
// ], {
// links: [ id: 9,
// { hostname: 'receptor-hop-5',
// source: 'receptor-hop', node_type: 'hop',
// target: 'awx_1', node_state: 'healthy',
// }, },
// { {
// source: 'receptor-1', id: 10,
// target: 'receptor-hop', hostname: 'receptor-hop-5',
// }, node_type: 'hop',
// { node_state: 'healthy',
// source: 'receptor-2', },
// target: 'receptor-hop', {
// }, id: 11,
// { hostname: 'receptor-hop-6',
// source: 'receptor-hop-3', node_type: 'hop',
// target: 'receptor-hop', node_state: 'healthy',
// }, },
// // { {
// // "source": "receptor-hop", id: 12,
// // "target": "receptor-hop-1" hostname: 'awx_1',
// // }, node_type: 'hybrid',
// // { node_state: 'healthy',
// // "source": "receptor-1", },
// // "target": "receptor-hop-2" {
// // }, id: 13,
// // { hostname: 'receptor-1',
// // "source": "awx_1", node_type: 'execution',
// // "target": "receptor-hop-4" node_state: 'healthy',
// // } },
// ], {
// }; id: 14,
hostname: 'receptor-2',
node_type: 'execution',
node_state: 'healthy',
},
{
id: 1,
hostname: 'receptor-hop',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 5,
hostname: 'receptor-hop-1',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 6,
hostname: 'receptor-hop-2',
node_type: 'hop',
node_state: 'disabled',
},
{
id: 7,
hostname: 'receptor-hop-3',
node_type: 'hop',
node_state: 'error',
},
{
id: 8,
hostname: 'receptor-hop-4',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 9,
hostname: 'receptor-hop-5',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 10,
hostname: 'receptor-hop-5',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 11,
hostname: 'receptor-hop-6',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 14,
hostname: 'receptor-2',
node_type: 'execution',
node_state: 'healthy',
},
{
id: 1,
hostname: 'receptor-hop',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 5,
hostname: 'receptor-hop-1',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 6,
hostname: 'receptor-hop-2',
node_type: 'hop',
node_state: 'disabled',
},
{
id: 7,
hostname: 'receptor-hop-3',
node_type: 'hop',
node_state: 'error',
},
{
id: 8,
hostname: 'receptor-hop-4',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 9,
hostname: 'receptor-hop-5',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 10,
hostname: 'receptor-hop-5',
node_type: 'hop',
node_state: 'healthy',
},
{
id: 11,
hostname: 'receptor-hop-6',
node_type: 'hop',
node_state: 'healthy',
},
],
links: [
{
source: 'receptor-hop',
target: 'awx_1',
},
{
source: 'receptor-1',
target: 'receptor-hop',
},
{
source: 'receptor-2',
target: 'receptor-hop',
},
{
source: 'receptor-hop-3',
target: 'receptor-hop',
},
// {
// "source": "receptor-hop",
// "target": "receptor-hop-1"
// },
// {
// "source": "receptor-1",
// "target": "receptor-hop-2"
// },
// {
// "source": "awx_1",
// "target": "receptor-hop-4"
// }
],
};
const margin = 15; const margin = 15;
const defaultRadius = 16; const defaultRadius = 16;
const defaultCollisionFactor = 80; const defaultCollisionFactor = 80;
@@ -126,13 +264,7 @@ function MeshGraph({ data }) {
return width; return width;
}; };
const width = getWidth(); const width = getWidth();
const zoom = d3.zoom().scaleExtent([-40, 40]).on('zoom', zoomed);
// const zoom = d3
// .zoom()
// // .scaleExtent([1, 8])
// .on('zoom', (event) => {
// svg.attr('transform', event.transform);
// });
/* Add SVG */ /* Add SVG */
d3.selectAll(`#chart > svg`).remove(); d3.selectAll(`#chart > svg`).remove();
@@ -142,9 +274,10 @@ function MeshGraph({ data }) {
.append('svg') .append('svg')
.attr('width', `${width + margin}px`) .attr('width', `${width + margin}px`)
.attr('height', `${height + margin}px`) .attr('height', `${height + margin}px`)
.attr('viewBox', [0, 0, width, height]);
const mesh = svg
.append('g') .append('g')
.attr('transform', `translate(${margin}, ${margin})`); .attr('transform', `translate(${margin}, ${margin})`);
// .call(zoom);
const graph = data; const graph = data;
@@ -163,7 +296,7 @@ function MeshGraph({ data }) {
.force('forceY', d3.forceY(defaultForceY)) .force('forceY', d3.forceY(defaultForceY))
.force('center', d3.forceCenter(width / 2, height / 2)); .force('center', d3.forceCenter(width / 2, height / 2));
const link = svg const link = mesh
.append('g') .append('g')
.attr('class', `links`) .attr('class', `links`)
.attr('data-cy', 'links') .attr('data-cy', 'links')
@@ -181,7 +314,7 @@ function MeshGraph({ data }) {
d3.select(this).transition().style('cursor', 'pointer'); d3.select(this).transition().style('cursor', 'pointer');
}); });
const node = svg const node = mesh
.append('g') .append('g')
.attr('class', 'nodes') .attr('class', 'nodes')
.attr('data-cy', 'nodes') .attr('data-cy', 'nodes')
@@ -263,6 +396,8 @@ function MeshGraph({ data }) {
node.attr('transform', (d) => `translate(${d.x},${d.y})`); node.attr('transform', (d) => `translate(${d.x},${d.y})`);
} }
svg.call(zoom);
function renderStateColor(nodeState) { function renderStateColor(nodeState) {
const colorKey = { const colorKey = {
disabled: '#6A6E73', disabled: '#6A6E73',
@@ -340,6 +475,10 @@ function MeshGraph({ data }) {
setIsNodeSelected(true); setIsNodeSelected(true);
setSelectedNode(n); setSelectedNode(n);
} }
function zoomed({ transform }) {
mesh.attr('transform', transform);
}
}; };
async function redirectToDetailsPage() { async function redirectToDetailsPage() {