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

Lint.

Browse Source
This commit is contained in:
Kia Lam 2022-01-19 14:43:33 -08:00
parent 826a069be0
commit 73a5802c11
2 changed files with 165 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,102 +1,102 @@
import React, { useEffect, useCallback } from 'react';
import { t } from '@lingui/macro';
// import { t } from '@lingui/macro';
import * as d3 from 'd3';
// function MeshGraph({ data }) {
function MeshGraph() {
const data = {
nodes: [
{
hostname: "aapc1.local",
node_state: "healthy",
node_type: "control",
id: 1
},
{
hostname: "aapc2.local",
node_type: "control",
node_state: "disabled",
id: 2
},
{
hostname: "aapc3.local",
node_type: "control",
node_state: "healthy",
id: 3
},
{
hostname: "aape1.local",
node_type: "execution",
node_state: "error",
id: 4
},
{
hostname: "aape2.local",
node_type: "execution",
node_state: "error",
id: 5
},
{
hostname: "aape3.local",
node_type: "execution",
node_state: "healthy",
id: 6
},
{
hostname: "aape4.local",
node_type: "execution",
node_state: "healthy",
id: 7
},
{
hostname: "aaph1.local",
node_type: "hop",
node_state: "disabled",
id: 8
},
{
hostname: "aaph2.local",
node_type: "hop",
node_state: "healthy",
id: 9
},
{
hostname: "aaph3.local",
node_type: "hop",
node_state: "error",
id: 10
}
],
links: [
{ source: "aapc1.local", target: "aapc2.local" },
{ source: "aapc1.local", target: "aapc3.local" },
{ source: "aapc1.local", target: "aape1.local" },
{ source: "aapc1.local", target: "aape2.local" },
function MeshGraph({ data }) {
// function MeshGraph() {
// const data = {
// nodes: [
// {
// hostname: 'aapc1.local',
// node_state: 'healthy',
// node_type: 'control',
// id: 1,
// },
// {
// hostname: 'aapc2.local',
// node_type: 'control',
// node_state: 'disabled',
// id: 2,
// },
// {
// hostname: 'aapc3.local',
// node_type: 'control',
// node_state: 'healthy',
// id: 3,
// },
// {
// hostname: 'aape1.local',
// node_type: 'execution',
// node_state: 'error',
// id: 4,
// },
// {
// hostname: 'aape2.local',
// node_type: 'execution',
// node_state: 'error',
// id: 5,
// },
// {
// hostname: 'aape3.local',
// node_type: 'execution',
// node_state: 'healthy',
// id: 6,
// },
// {
// hostname: 'aape4.local',
// node_type: 'execution',
// node_state: 'healthy',
// id: 7,
// },
// {
// hostname: 'aaph1.local',
// node_type: 'hop',
// node_state: 'disabled',
// id: 8,
// },
// {
// hostname: 'aaph2.local',
// node_type: 'hop',
// node_state: 'healthy',
// id: 9,
// },
// {
// hostname: 'aaph3.local',
// node_type: 'hop',
// node_state: 'error',
// id: 10,
// },
// ],
// links: [
// { source: 'aapc1.local', target: 'aapc2.local' },
// { source: 'aapc1.local', target: 'aapc3.local' },
// { source: 'aapc1.local', target: 'aape1.local' },
// { source: 'aapc1.local', target: 'aape2.local' },
{ source: "aapc2.local", target: "aapc3.local" },
{ source: "aapc2.local", target: "aape1.local" },
{ source: "aapc2.local", target: "aape2.local" },
// { source: 'aapc2.local', target: 'aapc3.local' },
// { source: 'aapc2.local', target: 'aape1.local' },
// { source: 'aapc2.local', target: 'aape2.local' },
{ source: "aapc3.local", target: "aape1.local" },
{ source: "aapc3.local", target: "aape2.local" },
// { source: 'aapc3.local', target: 'aape1.local' },
// { source: 'aapc3.local', target: 'aape2.local' },
{ source: "aape3.local", target: "aaph1.local" },
{ source: "aape3.local", target: "aaph2.local" },
// { source: 'aape3.local', target: 'aaph1.local' },
// { source: 'aape3.local', target: 'aaph2.local' },
{ source: "aape4.local", target: "aaph3.local" },
// { source: 'aape4.local', target: 'aaph3.local' },
{ source: "aaph1.local", target: "aapc1.local" },
{ source: "aaph1.local", target: "aapc2.local" },
{ source: "aaph1.local", target: "aapc3.local" },
// { source: 'aaph1.local', target: 'aapc1.local' },
// { source: 'aaph1.local', target: 'aapc2.local' },
// { source: 'aaph1.local', target: 'aapc3.local' },
{ source: "aaph2.local", target: "aapc1.local" },
{ source: "aaph2.local", target: "aapc2.local" },
{ source: "aaph2.local", target: "aapc3.local" },
// { source: 'aaph2.local', target: 'aapc1.local' },
// { source: 'aaph2.local', target: 'aapc2.local' },
// { source: 'aaph2.local', target: 'aapc3.local' },
{ source: "aaph3.local", target: "aaph1.local" },
{ source: "aaph3.local", target: "aaph2.local" }
]
};
// { source: 'aaph3.local', target: 'aaph1.local' },
// { source: 'aaph3.local', target: 'aaph2.local' },
// ],
// };
const draw = useCallback(() => {
const margin = 80;
@ -122,7 +122,7 @@ function MeshGraph() {
const zoom = d3
.zoom()
.scaleExtent([1, 8])
.on('zoom', function (event) {
.on('zoom', (event) => {
svg.selectAll('.links, .nodes').attr('transform', event.transform);
});
@ -145,18 +145,14 @@ function MeshGraph() {
.forceSimulation()
.force(
'link',
d3.forceLink().id(function (d) {
return d.hostname;
})
d3.forceLink().id((d) => d.hostname)
)
.force('charge', d3.forceManyBody().strength(-350))
.force(
'collide',
d3.forceCollide(function (d) {
return d.node_type === 'execution' || d.node_type === 'hop'
? 75
: 100;
})
d3.forceCollide((d) =>
d.node_type === 'execution' || d.node_type === 'hop' ? 75 : 100
)
)
.force('center', d3.forceCenter(width / 2, height / 2));
@ -172,19 +168,8 @@ function MeshGraph() {
.style('stroke', '#ccc')
.style('stroke-width', '2px')
.attr('pointer-events', 'none')
.on('mouseover', function (event, d) {
// tooltip
// .html(`source: ${d.source.hostname} <br>target: ${d.target.hostname}`)
// .style('visibility', 'visible');
.on('mouseover', function showPointer() {
d3.select(this).transition().style('cursor', 'pointer');
})
.on('mousemove', function () {
// tooltip
// .style('top', event.pageY - 10 + 'px')
// .style('left', event.pageX + 10 + 'px');
})
.on('mouseout', function () {
// tooltip.html(``).style('visibility', 'hidden');
});
const node = svg
@ -194,53 +179,42 @@ function MeshGraph() {
.data(graph.nodes)
.enter()
.append('g')
.on('mouseenter', function (event, d) {
.on('mouseenter', function handleNodeHover(_, d) {
d3.select(this).transition().style('cursor', 'pointer');
highlightSiblings(d)
highlightSiblings(d);
tooltip
.html(
`<h3>Details</h3> <hr>name: ${d.hostname} <br>type: ${d.node_type} <br>status: ${d.node_state} <br> <a>Click on a node to view the details</a>`
)
.style('visibility', 'visible')
// .style('visibility', 'visible');
// d3.select(this).transition().attr('r', 9).style('cursor', 'pointer');
.style('visibility', 'visible');
})
.on('mousemove', function () {
// tooltip
// .style('top', event.pageY - 10 + 'px')
// .style('left', event.pageX + 10 + 'px');
})
.on('mouseleave', function (event, d) {
deselectSiblings(d)
.on('mouseleave', (_, d) => {
deselectSiblings(d);
tooltip.html(``).style('visibility', 'hidden');
// d3.select(this).attr('r', 6);
});
const healthRings = node
// health rings on nodes
node
.append('circle')
.attr('r', 8)
.attr('class', (d) => d.node_state)
.attr('stroke', d => renderHealthColor(d.node_state))
.attr('fill', d => renderHealthColor(d.node_state));
.attr('stroke', (d) => renderHealthColor(d.node_state))
.attr('fill', (d) => renderHealthColor(d.node_state));
const nodeRings = node
// inner node ring
node
.append('circle')
.attr('r', defaultRadius)
.attr('class', (d) => d.node_type)
.attr('class', (d) => `id-${d.id}`)
.attr('fill', function (d) {
return color(d.node_type);
})
.attr('fill', (d) => color(d.node_type))
.attr('stroke', 'white');
svg.call(expandGlow);
const legend = svg
.append('text')
.attr('x', 10)
.attr('y', 20)
.text('Legend')
// legend
svg.append('text').attr('x', 10).attr('y', 20).text('Legend');
svg
svg
.append('g')
.selectAll('g')
.attr('class', 'chart-legend')
@ -248,16 +222,13 @@ function MeshGraph() {
.enter()
.append('circle')
.attr('cx', 10)
.attr('cy', function (d, i) {
return 50 + i * 25;
})
.attr('cy', (d, i) => 50 + i * 25)
.attr('r', defaultRadius)
.attr('class', (d) => d.node_type)
.style('fill', function (d) {
return color(d.node_type);
});
.style('fill', (d) => color(d.node_type));
const legend_text = svg
// legend text
svg
.append('g')
.attr('class', 'chart-text')
.selectAll('g')
@ -265,9 +236,7 @@ function MeshGraph() {
.enter()
.append('text')
.attr('x', 20)
.attr('y', function (d, i) {
return 50 + i * 25;
})
.attr('y', (d, i) => 50 + i * 25)
.text((d) => `${d.hostname} - ${d.node_type}`)
.attr('text-anchor', 'left')
.style('alignment-baseline', 'middle');
@ -292,11 +261,10 @@ function MeshGraph() {
.style('color', '#e6e6e')
.text('');
const labels = node
// node labels
node
.append('text')
.text(function (d) {
return d.hostname;
})
.text((d) => d.hostname)
.attr('x', 16)
.attr('y', 3);
@ -306,29 +274,14 @@ function MeshGraph() {
function ticked() {
link.attr('d', linkArc);
node.attr('transform', function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
node.attr('transform', (d) => `translate(${d.x},${d.y})`);
}
function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return (
'M' +
d.source.x +
',' +
d.source.y +
'A' +
dr +
',' +
dr +
' 0 0,1 ' +
d.target.x +
',' +
d.target.y
);
const dx = d.target.x - d.source.x;
const dy = d.target.y - d.source.y;
const dr = Math.sqrt(dx * dx + dy * dy);
return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
}
function contractGlow() {
@ -351,58 +304,54 @@ function MeshGraph() {
function renderHealthColor(nodeState) {
const colorKey = {
'disabled': '#c6c6c6',
'healthy': '#50D050',
'error': '#ff6766'
disabled: '#c6c6c6',
healthy: '#50D050',
error: '#ff6766',
};
return colorKey[nodeState];
}
function renderNodeClass(nodeState) {
const colorKey = {
'disabled': 'node-disabled',
'healthy': 'node-healthy',
'error': 'node-error'
};
return colorKey[nodeState];
function highlightSiblings(n) {
setTimeout(() => {
svg.selectAll(`id-${n.id}`).attr('r', highlightRadius);
const immediate = graph.links.filter(
(l) =>
n.hostname === l.source.hostname || n.hostname === l.target.hostname
);
immediate.forEach((s) => {
svg
.selectAll(`.link-${s.index}`)
.transition()
.style('stroke', '#6e6e6e');
svg
.selectAll(`.id-${s.source.id}`)
.transition()
.attr('r', highlightRadius);
svg
.selectAll(`.id-${s.target.id}`)
.transition()
.attr('r', highlightRadius);
});
}, 0);
}
function highlightSiblings(node) {
setTimeout(function() {
svg.selectAll(`id-${node.id}`)
.attr('r', highlightRadius);
const immediate = graph.links.filter(link => node.hostname === link.source.hostname || node.hostname === link.target.hostname);
immediate.forEach(s => {
const links = svg.selectAll(`.link-${s.index}`)
function deselectSiblings(n) {
svg.selectAll(`id-${n.id}`).attr('r', defaultRadius);
const immediate = graph.links.filter(
(l) =>
n.hostname === l.source.hostname || n.hostname === l.target.hostname
);
immediate.forEach((s) => {
svg.selectAll(`.link-${s.index}`).transition().style('stroke', '#ccc');
svg
.selectAll(`.id-${s.source.id}`)
.transition()
.style('stroke', '#6e6e6e')
const sourceNodes = svg.selectAll(`.id-${s.source.id}`)
.transition()
.attr('r', highlightRadius)
const targetNodes = svg.selectAll(`.id-${s.target.id}`)
.transition()
.attr('r', highlightRadius)
})
}, 0)
}
function deselectSiblings(node) {
svg.selectAll(`id-${node.id}`)
.attr('r', defaultRadius);
const immediate = graph.links.filter(link => node.hostname === link.source.hostname || node.hostname === link.target.hostname);
immediate.forEach(s => {
const links = svg.selectAll(`.link-${s.index}`)
svg
.selectAll(`.id-${s.target.id}`)
.transition()
.style('stroke', '#ccc')
svg.selectAll(`.id-${s.source.id}`)
.transition()
.attr('r', defaultRadius)
svg.selectAll(`.id-${s.target.id}`)
.transition()
.attr('r', defaultRadius)
})
.attr('r', defaultRadius);
});
}
// const zoom = d3
// .zoom()

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

@ -2,20 +2,15 @@ import React, { useEffect, useCallback } from 'react';
import { t } from '@lingui/macro';
import ScreenHeader from 'components/ScreenHeader/ScreenHeader';
import {
PageSection,
Card,
CardHeader,
CardBody,
} from '@patternfly/react-core';
import MeshGraph from './MeshGraph';
import { PageSection, Card, CardBody } from '@patternfly/react-core';
import useRequest from 'hooks/useRequest';
import { MeshAPI } from 'api';
import MeshGraph from './MeshGraph';
function TopologyView() {
const {
result: { meshData },
error: fetchInitialError,
// error: fetchInitialError,
request: fetchMeshVisualizer,
} = useRequest(
useCallback(async () => {