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

Add loading screen.

Browse Source
This commit is contained in:
Kia Lam
2022-02-08 20:13:46 -08:00
parent b859c3360d
commit a6bc0d4222
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,20 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { InstancesAPI } from 'api'; import { InstancesAPI } from 'api';
import debounce from 'util/debounce'; import debounce from 'util/debounce';
// import { t } from '@lingui/macro'; // import { t } from '@lingui/macro';
import * as d3 from 'd3'; import * as d3 from 'd3';
import Legend from './Legend'; import Legend from './Legend';
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
import ContentLoading from '../../components/ContentLoading';
const Loader = styled(ContentLoading)`
height: 100%;
position: absolute;
width: 100%;
background: white;
`;
// function MeshGraph({ data }) { // function MeshGraph({ data }) {
function MeshGraph({ showLegend, zoom }) { function MeshGraph({ showLegend, zoom }) {
const [isNodeSelected, setIsNodeSelected] = useState(false); const [isNodeSelected, setIsNodeSelected] = useState(false);
@@ -86,7 +94,6 @@ function MeshGraph({ showLegend, zoom }) {
/* Add SVG */ /* Add SVG */
d3.selectAll(`#chart > svg`).remove(); d3.selectAll(`#chart > svg`).remove();
const svg = d3 const svg = d3
.select('#chart') .select('#chart')
.append('svg') .append('svg')
@@ -208,6 +215,8 @@ function MeshGraph({ showLegend, zoom }) {
function ticked() { function ticked() {
// link.attr('d', linkArc); // link.attr('d', linkArc);
d3.select('.simulation-loader').style('visibility', 'visible');
link link
.attr('x1', (d) => d.source.x) .attr('x1', (d) => d.source.x)
.attr('y1', (d) => d.source.y) .attr('y1', (d) => d.source.y)
@@ -215,6 +224,9 @@ function MeshGraph({ showLegend, zoom }) {
.attr('y2', (d) => d.target.y); .attr('y2', (d) => d.target.y);
node.attr('transform', (d) => `translate(${d.x},${d.y})`); node.attr('transform', (d) => `translate(${d.x},${d.y})`);
if (simulation.alpha() < simulation.alphaMin()) {
d3.select('.simulation-loader').style('visibility', 'hidden');
}
} }
svg.call(zoom); svg.call(zoom);
@@ -325,6 +337,7 @@ function MeshGraph({ showLegend, zoom }) {
} }
useEffect(() => { useEffect(() => {
function handleResize() { function handleResize() {
d3.select('.simulation-loader').style('visibility', 'visible');
draw(); draw();
} }
window.addEventListener('resize', debounce(handleResize, 500)); window.addEventListener('resize', debounce(handleResize, 500));
@@ -341,6 +354,7 @@ function MeshGraph({ showLegend, zoom }) {
nodeDetail={nodeDetail} nodeDetail={nodeDetail}
redirectToDetailsPage={redirectToDetailsPage} redirectToDetailsPage={redirectToDetailsPage}
/> />
<Loader className="simulation-loader" />
</div> </div>
); );
} }