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

refactor shared WS logic into useWebsocket hook

Browse Source
This commit is contained in:
Keith Grant
2020-07-09 10:14:03 -07:00
parent 84bea3d348
commit 455e018099
4 changed files with 69 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
awx/ui_next/src/components/JobList/useWsJobs.js
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import useWebsocket from '../../util/useWebsocket';
import useThrottle from '../../util/useThrottle'; import useThrottle from '../../util/useThrottle';
import { parseQueryString } from '../../util/qs'; import { parseQueryString } from '../../util/qs';
import sortJobs from './sortJobs'; import sortJobs from './sortJobs';
@@ -7,9 +8,13 @@ import sortJobs from './sortJobs';
export default function useWsJobs(initialJobs, fetchJobsById, qsConfig) { export default function useWsJobs(initialJobs, fetchJobsById, qsConfig) {
const location = useLocation(); const location = useLocation();
const [jobs, setJobs] = useState(initialJobs); const [jobs, setJobs] = useState(initialJobs);
const [lastMessage, setLastMessage] = useState(null);
const [jobsToFetch, setJobsToFetch] = useState([]); const [jobsToFetch, setJobsToFetch] = useState([]);
const throttledJobsToFetch = useThrottle(jobsToFetch, 5000); const throttledJobsToFetch = useThrottle(jobsToFetch, 5000);
const lastMessage = useWebsocket({
jobs: ['status_changed'],
schedules: ['changed'],
control: ['limit_reached_1'],
});
useEffect(() => { useEffect(() => {
setJobs(initialJobs); setJobs(initialJobs);
@@ -37,8 +42,6 @@ export default function useWsJobs(initialJobs, fetchJobsById, qsConfig) {
})(); })();
}, [throttledJobsToFetch, fetchJobsById]); // eslint-disable-line react-hooks/exhaustive-deps }, [throttledJobsToFetch, fetchJobsById]); // eslint-disable-line react-hooks/exhaustive-deps
const ws = useRef(null);
useEffect(() => { useEffect(() => {
if (!lastMessage || !lastMessage.unified_job_id) { if (!lastMessage || !lastMessage.unified_job_id) {
return; return;
@@ -61,51 +64,6 @@ export default function useWsJobs(initialJobs, fetchJobsById, qsConfig) {
} }
}, [lastMessage]); // eslint-disable-line react-hooks/exhaustive-deps }, [lastMessage]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
ws.current = new WebSocket(`wss://${window.location.host}/websocket/`);
const connect = () => {
const xrftoken = `; ${document.cookie}`
.split('; csrftoken=')
.pop()
.split(';')
.shift();
ws.current.send(
JSON.stringify({
xrftoken,
groups: {
jobs: ['status_changed'],
schedules: ['changed'],
control: ['limit_reached_1'],
},
})
);
};
ws.current.onopen = connect;
ws.current.onmessage = e => {
setLastMessage(JSON.parse(e.data));
};
ws.current.onclose = e => {
// eslint-disable-next-line no-console
console.debug('Socket closed. Reconnecting...', e);
setTimeout(() => {
connect();
}, 1000);
};
ws.current.onerror = err => {
// eslint-disable-next-line no-console
console.debug('Socket error: ', err, 'Disconnecting...');
ws.current.close();
};
return () => {
ws.current.close();
};
}, []);
return jobs; return jobs;
} }

55
awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js
View File

@@ -1,4 +1,5 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect } from 'react';
import useWebsocket from '../../../util/useWebsocket';
import useThrottle from '../../../util/useThrottle'; import useThrottle from '../../../util/useThrottle';
export default function useWsProjects( export default function useWsProjects(
@@ -6,10 +7,13 @@ export default function useWsProjects(
fetchInventoriesById fetchInventoriesById
) { ) {
const [inventories, setInventories] = useState(initialInventories); const [inventories, setInventories] = useState(initialInventories);
const [lastMessage, setLastMessage] = useState(null);
const [inventoriesToFetch, setInventoriesToFetch] = useState([]); const [inventoriesToFetch, setInventoriesToFetch] = useState([]);
const throttledInventoriesToFetch = useThrottle(inventoriesToFetch, 5000); const throttledInventoriesToFetch = useThrottle(inventoriesToFetch, 5000);
const ws = useRef(null); const lastMessage = useWebsocket({
inventories: ['status_changed'],
jobs: ['status_changed'],
control: ['limit_reached_1'],
});
useEffect(() => { useEffect(() => {
setInventories(initialInventories); setInventories(initialInventories);
@@ -84,50 +88,5 @@ export default function useWsProjects(
[lastMessage] [lastMessage]
); );
useEffect(() => {
ws.current = new WebSocket(`wss://${window.location.host}/websocket/`);
const connect = () => {
const xrftoken = `; ${document.cookie}`
.split('; csrftoken=')
.pop()
.split(';')
.shift();
ws.current.send(
JSON.stringify({
xrftoken,
groups: {
inventories: ['status_changed'],
jobs: ['status_changed'],
control: ['limit_reached_1'],
},
})
);
};
ws.current.onopen = connect;
ws.current.onmessage = e => {
setLastMessage(JSON.parse(e.data));
};
ws.current.onclose = e => {
// eslint-disable-next-line no-console
console.debug('Socket closed. Reconnecting...', e);
setTimeout(() => {
connect();
}, 1000);
};
ws.current.onerror = err => {
// eslint-disable-next-line no-console
console.debug('Socket error: ', err, 'Disconnecting...');
ws.current.close();
};
return () => {
ws.current.close();
};
}, []);
return inventories; return inventories;
} }

53
awx/ui_next/src/screens/Project/ProjectList/useWsProjects.js
View File

@@ -1,9 +1,12 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect } from 'react';
import useWebsocket from '../../../util/useWebsocket';
export default function useWsProjects(initialProjects) { export default function useWsProjects(initialProjects) {
const [projects, setProjects] = useState(initialProjects); const [projects, setProjects] = useState(initialProjects);
const [lastMessage, setLastMessage] = useState(null); const lastMessage = useWebsocket({
const ws = useRef(null); jobs: ['status_changed'],
control: ['limit_reached_1'],
});
useEffect(() => { useEffect(() => {
setProjects(initialProjects); setProjects(initialProjects);
@@ -37,49 +40,5 @@ export default function useWsProjects(initialProjects) {
]); ]);
}, [lastMessage]); // eslint-disable-line react-hooks/exhaustive-deps }, [lastMessage]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
ws.current = new WebSocket(`wss://${window.location.host}/websocket/`);
const connect = () => {
const xrftoken = `; ${document.cookie}`
.split('; csrftoken=')
.pop()
.split(';')
.shift();
ws.current.send(
JSON.stringify({
xrftoken,
groups: {
jobs: ['status_changed'],
control: ['limit_reached_1'],
},
})
);
};
ws.current.onopen = connect;
ws.current.onmessage = e => {
setLastMessage(JSON.parse(e.data));
};
ws.current.onclose = e => {
// eslint-disable-next-line no-console
console.debug('Socket closed. Reconnecting...', e);
setTimeout(() => {
connect();
}, 1000);
};
ws.current.onerror = err => {
// eslint-disable-next-line no-console
console.debug('Socket error: ', err, 'Disconnecting...');
ws.current.close();
};
return () => {
ws.current.close();
};
}, []);
return projects; return projects;
} }

49
awx/ui_next/src/util/useWebsocket.js Normal file
View File

@@ -0,0 +1,49 @@
import { useState, useEffect, useRef } from 'react';
export default function useWebsocket(subscribeGroups) {
const [lastMessage, setLastMessage] = useState(null);
const ws = useRef(null);
useEffect(function setupSocket() {
ws.current = new WebSocket(`wss://${window.location.host}/websocket/`);
const connect = () => {
const xrftoken = `; ${document.cookie}`
.split('; csrftoken=')
.pop()
.split(';')
.shift();
ws.current.send(
JSON.stringify({
xrftoken,
groups: subscribeGroups,
})
);
};
ws.current.onopen = connect;
ws.current.onmessage = e => {
setLastMessage(JSON.parse(e.data));
};
ws.current.onclose = e => {
// eslint-disable-next-line no-console
console.debug('Socket closed. Reconnecting...', e);
setTimeout(() => {
connect();
}, 1000);
};
ws.current.onerror = err => {
// eslint-disable-next-line no-console
console.debug('Socket error: ', err, 'Disconnecting...');
ws.current.close();
};
return () => {
ws.current.close();
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return lastMessage;
}