diff --git a/awx/ui_next/src/screens/Dashboard/shared/LineChart.js b/awx/ui_next/src/screens/Dashboard/shared/LineChart.js index 066157d52f..ffe91fdb4b 100644 --- a/awx/ui_next/src/screens/Dashboard/shared/LineChart.js +++ b/awx/ui_next/src/screens/Dashboard/shared/LineChart.js @@ -33,16 +33,13 @@ function LineChart({ id, data, height, pageContext, jobStatus }) { const width = getWidth(); function transition(path) { - path - .transition() - .duration(1000) - .attrTween('stroke-dasharray', tweenDash); + path.transition().duration(1000).attrTween('stroke-dasharray', tweenDash); } function tweenDash(...params) { const l = params[2][params[1]].getTotalLength(); const i = d3.interpolateString(`0,${l}`, `${l},${l}`); - return val => i(val); + return (val) => i(val); } const x = d3.scaleTime().rangeRound([0, width]); @@ -83,7 +80,7 @@ function LineChart({ id, data, height, pageContext, jobStatus }) { const b_max = Math.max(b.RAN > b.FAIL ? b.RAN : b.FAIL); return a_max > b_max ? a_max : b_max; }, 0); - x.domain(d3.extent(formattedData, d => d.DATE)); + x.domain(d3.extent(formattedData, (d) => d.DATE)); y.domain([ 0, largestY > 4 ? largestY + Math.max(largestY / 10, 1) : 5, @@ -92,15 +89,15 @@ function LineChart({ id, data, height, pageContext, jobStatus }) { const successLine = d3 .line() .curve(d3.curveMonotoneX) - .x(d => x(d.DATE)) - .y(d => y(d.RAN)); + .x((d) => x(d.DATE)) + .y((d) => y(d.RAN)); const failLine = d3 .line() - .defined(d => typeof d.FAIL === 'number') + .defined((d) => typeof d.FAIL === 'number') .curve(d3.curveMonotoneX) - .x(d => x(d.DATE)) - .y(d => y(d.FAIL)); + .x((d) => x(d.DATE)) + .y((d) => y(d.FAIL)); // Add the Y Axis svg .append('g') @@ -135,11 +132,11 @@ function LineChart({ id, data, height, pageContext, jobStatus }) { const maxTicks = Math.round( formattedData.length / (formattedData.length / 2) ); - ticks = formattedData.map(d => d.DATE); + ticks = formattedData.map((d) => d.DATE); if (formattedData.length === 31) { ticks = formattedData .map((d, i) => (i % maxTicks === 0 ? d.DATE : undefined)) - .filter(item => item); + .filter((item) => item); } svg.select('.domain').attr('stroke', '#d7d7d7'); @@ -218,9 +215,9 @@ function LineChart({ id, data, height, pageContext, jobStatus }) { .attr('r', 3) .style('stroke', () => colors(1)) .style('fill', () => colors(1)) - .attr('cx', d => x(d.DATE)) - .attr('cy', d => y(d.RAN)) - .attr('id', d => `success-dot-${dateFormat(d.DATE)}`) + .attr('cx', (d) => x(d.DATE)) + .attr('cy', (d) => y(d.RAN)) + .attr('id', (d) => `success-dot-${dateFormat(d.DATE)}`) .on('mouseover', (event, d) => handleMouseOver(event, d)) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut); @@ -248,9 +245,9 @@ function LineChart({ id, data, height, pageContext, jobStatus }) { .attr('r', 3) .style('stroke', () => colors(0)) .style('fill', () => colors(0)) - .attr('cx', d => x(d.DATE)) - .attr('cy', d => y(d.FAIL)) - .attr('id', d => `fail-dot-${dateFormat(d.DATE)}`) + .attr('cx', (d) => x(d.DATE)) + .attr('cy', (d) => y(d.FAIL)) + .attr('id', (d) => `fail-dot-${dateFormat(d.DATE)}`) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut); @@ -282,11 +279,11 @@ LineChart.propTypes = { height: number.isRequired, }; -const withPageContext = Component => +const withPageContext = (Component) => function contextComponent(props) { return ( - {pageContext => } + {(pageContext) => } ); }; diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.js b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.js index 09a6644edb..b81e3418a2 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.js +++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.js @@ -17,7 +17,7 @@ const HostNameDetailValue = styled.div` grid-template-columns: auto auto; `; -const processEventStatus = event => { +const processEventStatus = (event) => { let status = null; if (event.event === 'runner_on_unreachable') { status = 'unreachable'; @@ -43,7 +43,7 @@ const processEventStatus = event => { return status; }; -const processCodeEditorValue = value => { +const processCodeEditorValue = (value) => { let codeEditorValue; if (value === undefined) { codeEditorValue = false; @@ -57,7 +57,7 @@ const processCodeEditorValue = value => { return codeEditorValue; }; -const processStdOutValue = hostEvent => { +const processStdOutValue = (hostEvent) => { const taskAction = hostEvent?.event_data?.taskAction; const res = hostEvent?.event_data?.res; diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.js b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.js index 202f765380..a4c366ad95 100644 --- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.js +++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.js @@ -24,12 +24,11 @@ function WorkflowOutputGraph() { const svgRef = useRef(null); const gRef = useRef(null); - const { links, nodePositions, nodes, showLegend, showTools } = useContext( - WorkflowStateContext - ); + const { links, nodePositions, nodes, showLegend, showTools } = + useContext(WorkflowStateContext); // This is the zoom function called by using the mousewheel/click and drag - const zoom = event => { + const zoom = (event) => { const translation = [event.transform.x, event.transform.y]; d3.select(gRef.current).attr( 'transform', @@ -38,7 +37,7 @@ function WorkflowOutputGraph() { setZoomPercentage(event.transform.k * 100); }; - const handlePan = direction => { + const handlePan = (direction) => { const transform = d3.zoomTransform(d3.select(svgRef.current).node()); let { x: xPos, y: yPos } = transform; const { k: currentScale } = transform; @@ -75,7 +74,7 @@ function WorkflowOutputGraph() { setZoomPercentage(100); }; - const handleZoomChange = newScale => { + const handleZoomChange = (newScale) => { const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const currentScaleAndOffset = d3.zoomTransform( d3.select(svgRef.current).node() @@ -100,10 +99,7 @@ function WorkflowOutputGraph() { .node() .getBoundingClientRect(); - const gBBoxDimensions = d3 - .select(gRef.current) - .node() - .getBBox(); + const gBBoxDimensions = d3.select(gRef.current).node().getBBox(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const [scaleToFit, yTranslate] = getScaleAndOffsetToFit( @@ -119,10 +115,7 @@ function WorkflowOutputGraph() { setZoomPercentage(scaleToFit * 100); }; - const zoomRef = d3 - .zoom() - .scaleExtent([0.1, 2]) - .on('zoom', zoom); + const zoomRef = d3.zoom().scaleExtent([0.1, 2]).on('zoom', zoom); // Initialize the zoom useEffect(() => { @@ -154,7 +147,7 @@ function WorkflowOutputGraph() { {nodePositions && [ , - links.map(link => ( + links.map((link) => ( setLinkHelp(null)} /> )), - nodes.map(node => { + nodes.map((node) => { if (node.id > 1) { return ( { + const drawPotentialLinkToNode = (node) => { if (node.id !== addLinkSourceNode.id) { const sourceNodeX = nodePositions[addLinkSourceNode.id].x; const sourceNodeY = @@ -71,7 +71,7 @@ function VisualizerGraph({ readOnly }) { dispatch({ type: 'CANCEL_LINK' }); }; - const drawPotentialLinkToCursor = e => { + const drawPotentialLinkToCursor = (e) => { const currentTransform = d3.zoomTransform(d3.select(gRef.current).node()); const rect = e.target.getBoundingClientRect(); const mouseX = e.clientX - rect.left; @@ -84,15 +84,16 @@ function VisualizerGraph({ readOnly }) { d3.select('#workflow-potentialLink') .attr( 'points', - `${startX},${startY} ${mouseX / currentTransform.k - - currentTransform.x / currentTransform.k},${mouseY / - currentTransform.k - - currentTransform.y / currentTransform.k}` + `${startX},${startY} ${ + mouseX / currentTransform.k - currentTransform.x / currentTransform.k + },${ + mouseY / currentTransform.k - currentTransform.y / currentTransform.k + }` ) .raise(); }; // This is the zoom function called by using the mousewheel/click and drag - const zoom = event => { + const zoom = (event) => { const translation = [event.transform.x, event.transform.y]; d3.select(gRef.current).attr( 'transform', @@ -101,7 +102,7 @@ function VisualizerGraph({ readOnly }) { setZoomPercentage(event.transform.k * 100); }; - const handlePan = direction => { + const handlePan = (direction) => { const transform = d3.zoomTransform(d3.select(svgRef.current).node()); let { x: xPos, y: yPos } = transform; const { k: currentScale } = transform; @@ -138,7 +139,7 @@ function VisualizerGraph({ readOnly }) { setZoomPercentage(100); }; - const handleZoomChange = newScale => { + const handleZoomChange = (newScale) => { const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const currentScaleAndOffset = d3.zoomTransform( d3.select(svgRef.current).node() @@ -163,10 +164,7 @@ function VisualizerGraph({ readOnly }) { .node() .getBoundingClientRect(); - const gBBoxDimensions = d3 - .select(gRef.current) - .node() - .getBBox(); + const gBBoxDimensions = d3.select(gRef.current).node().getBBox(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const [scaleToFit, yTranslate] = getScaleAndOffsetToFit( @@ -182,10 +180,7 @@ function VisualizerGraph({ readOnly }) { setZoomPercentage(scaleToFit * 100); }; - const zoomRef = d3 - .zoom() - .scaleExtent([0.1, 2]) - .on('zoom', zoom); + const zoomRef = d3.zoom().scaleExtent([0.1, 2]).on('zoom', zoom); // Initialize the zoom useEffect(() => { @@ -231,7 +226,7 @@ function VisualizerGraph({ readOnly }) { opacity="0" width="100%" {...(addingLink && { - onMouseMove: e => drawPotentialLinkToCursor(e), + onMouseMove: (e) => drawPotentialLinkToCursor(e), onMouseOver: () => setHelpText( t`Click an available node to create a new link. Click outside the graph to cancel.` @@ -242,7 +237,7 @@ function VisualizerGraph({ readOnly }) { /> {nodePositions && [ - links.map(link => { + links.map((link) => { if ( nodePositions[link.source.id] && nodePositions[link.target.id] @@ -252,22 +247,22 @@ function VisualizerGraph({ readOnly }) { key={`link-${link.source.id}-${link.target.id}`} link={link} readOnly={readOnly} - updateLinkHelp={newLinkHelp => setLinkHelp(newLinkHelp)} - updateHelpText={newHelpText => setHelpText(newHelpText)} + updateLinkHelp={(newLinkHelp) => setLinkHelp(newLinkHelp)} + updateHelpText={(newHelpText) => setHelpText(newHelpText)} /> ); } return null; }), - nodes.map(node => { + nodes.map((node) => { if (node.id > 1 && nodePositions[node.id] && !node.isDeleted) { return ( setHelpText(newHelpText)} - updateNodeHelp={newNodeHelp => setNodeHelp(newNodeHelp)} + updateHelpText={(newHelpText) => setHelpText(newHelpText)} + updateNodeHelp={(newNodeHelp) => setNodeHelp(newNodeHelp)} {...(addingLink && { onMouseOver: () => drawPotentialLinkToNode(node), })} diff --git a/awx/ui_next/src/setupTests.js b/awx/ui_next/src/setupTests.js index 791fe95daf..46e94ba556 100644 --- a/awx/ui_next/src/setupTests.js +++ b/awx/ui_next/src/setupTests.js @@ -12,7 +12,7 @@ jest.setTimeout(120000); require('@nteract/mockument'); // eslint-disable-next-line import/prefer-default-export -export const asyncFlush = () => new Promise(resolve => setImmediate(resolve)); +export const asyncFlush = () => new Promise((resolve) => setImmediate(resolve)); let hasConsoleError = false; let hasConsoleWarn = false; @@ -38,7 +38,7 @@ global.console = { }, }; -const logNetworkRequestError = url => { +const logNetworkRequestError = (url) => { networkRequestUrl = url || true; return { status: 200,