From 73a5802c1108d25206f0009c8168ba8835cd317e Mon Sep 17 00:00:00 2001 From: Kia Lam Date: Wed, 19 Jan 2022 14:43:33 -0800 Subject: [PATCH] Lint. --- awx/ui/src/screens/TopologyView/MeshGraph.js | 375 ++++++++---------- .../src/screens/TopologyView/TopologyView.js | 11 +- 2 files changed, 165 insertions(+), 221 deletions(-) diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js index 52747d0a81..77ca7656f4 100644 --- a/awx/ui/src/screens/TopologyView/MeshGraph.js +++ b/awx/ui/src/screens/TopologyView/MeshGraph.js @@ -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}
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( `

Details

name: ${d.hostname}
type: ${d.node_type}
status: ${d.node_state}
Click on a node to view the details` ) - .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() diff --git a/awx/ui/src/screens/TopologyView/TopologyView.js b/awx/ui/src/screens/TopologyView/TopologyView.js index be43df6ad8..2e62a01e0d 100644 --- a/awx/ui/src/screens/TopologyView/TopologyView.js +++ b/awx/ui/src/screens/TopologyView/TopologyView.js @@ -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 () => {