diff --git a/src/components/agents/remotebg/ProcessManager.vue b/src/components/agents/remotebg/ProcessManager.vue index 22764826..45b3178d 100644 --- a/src/components/agents/remotebg/ProcessManager.vue +++ b/src/components/agents/remotebg/ProcessManager.vue @@ -17,70 +17,85 @@ :loading="loading" > - - - - - - + - - - - Refresh interval (seconds) - - - - - - - - - + + + + CPU Usage: + {{ totalCpuUsage }}% + + + + + RAM Usage: + {{ bytes2Human(totalRamUsage) }}/{{ total_ram }} GB + + + + + + + + + + + + + Refresh interval (seconds) + + + + + + + + + + @@ -121,9 +136,6 @@ import { import { bytes2Human } from "@/utils/format"; import { notifySuccess } from "@/utils/notify"; -// ui imports -import ExportTableBtn from "@/components/ui/ExportTableBtn.vue"; - const columns = [ { name: "name", @@ -164,7 +176,6 @@ const columns = [ ]; export default { - components: { ExportTableBtn }, name: "ProcessManager", props: { agent_id: !String, @@ -175,52 +186,71 @@ export default { const poll = ref(null); const isPolling = computed(() => !!poll.value); - async function startPoll() { - await getProcesses(); - if (processes.value.length > 0) { - refreshProcesses(); - } + function startPoll() { + stopPoll(); + getProcesses(); + poll.value = setInterval(() => { + getProcesses(); + }, pollInterval.value * 1000); } function stopPoll() { - clearInterval(poll.value); - poll.value = null; + if (poll.value) { + clearInterval(poll.value); + poll.value = null; + } } function pollIntervalChanged(action) { - if (action === "subtract" && pollInterval.value <= 1) { - stopPoll(); - startPoll(); - return; - } if (action === "add") { pollInterval.value++; - } else { + } else if (action === "subtract" && pollInterval.value > 1) { pollInterval.value--; } - stopPoll(); - startPoll(); + if (isPolling.value) { + startPoll(); + } } // process manager logic const processes = ref([]); const filter = ref(""); - const memory = ref(null); + const total_ram = ref(0); const loading = ref(false); + const totalCpuUsage = computed(() => { + if (!Array.isArray(processes.value) || processes.value.length === 0) { + return "0.00"; + } + + const total = processes.value.reduce((acc, proc) => { + const cpuPercent = parseFloat(proc.cpu_percent); + + if (isNaN(cpuPercent)) { + return acc; + } + + return acc + cpuPercent; + }, 0); + + return total.toFixed(2); + }); + + const totalRamUsage = computed(() => { + return processes.value.reduce((acc, proc) => acc + proc.membytes, 0); + }); + async function getProcesses() { loading.value = true; - processes.value = await fetchAgentProcesses(props.agent_id); + try { + processes.value = await fetchAgentProcesses(props.agent_id); + } catch (error) { + console.error(error); + } loading.value = false; } - function refreshProcesses() { - poll.value = setInterval(() => { - getProcesses(props.agent_id); - }, pollInterval.value * 1000); - } - async function killProcess(pid) { loading.value = true; let result = ""; @@ -235,11 +265,8 @@ export default { // lifecycle hooks onMounted(async () => { - memory.value = await fetchAgent(props.agent_id).total_ram; - await getProcesses(); - if (processes.value.length > 0) { - refreshProcesses(); - } + total_ram.value = (await fetchAgent(props.agent_id)).total_ram; + startPoll(); }); onBeforeUnmount(() => clearInterval(poll.value)); @@ -248,10 +275,12 @@ export default { // reactive data processes, filter, - memory, + total_ram, isPolling, pollInterval, loading, + totalCpuUsage, + totalRamUsage, // non-reactive data columns,