TabTasks.jsx

Go to the documentation of this file.

import React from "react";
import { apiFetch } from "../../lib/api";
 
export default function TabTasks({ agentId }) {
  const [processes, setProcesses] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [autoRefresh, setAutoRefresh] = React.useState(true);
 
  function loadProcesses() {
    if (!agentId) return;
    setLoading(true);
    apiFetch(`/agent/${agentId}/processes`)
      .then((d) => setProcesses(d))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }
 
  React.useEffect(() => {
    loadProcesses();
    let interval = null;
    if (autoRefresh && agentId) {
      interval = setInterval(() => loadProcesses(), 5000);
    }
    return () => interval && clearInterval(interval);
  }, [agentId, autoRefresh]);
 
  function kill(pid) {
    if (!agentId) return;
    apiFetch(`/agent/${agentId}/process/${pid}/kill`, { method: "POST" })
      .then(loadProcesses);
  }
 
  if (loading) return <div className="card">Loading processes...</div>;
  if (error) return <div className="card error">{error}</div>;
 
  // Defensive: ensure processes is an array
  if (!Array.isArray(processes)) {
    return (
      <div className="tab-container">
        <h2>Process Manager</h2>
        <div className="card error">Process data is not available or invalid.</div>
      </div>
    );
  }
 
  // Show empty state if no processes
  if (processes.length === 0) {
    return (
      <div className="tab-container">
        <h2>Process Manager</h2>
        <div className="card controls">
          <label>
            <input
              type="checkbox"
              checked={autoRefresh}
              onChange={(e) => setAutoRefresh(e.target.checked)}
            />
            Auto-refresh every 5s
          </label>
          <button className="btn-sm" onClick={loadProcesses}>Refresh Now</button>
        </div>
        <div className="card">
          <p>No process data available yet. Process list updates every 5 seconds when the agent is connected.</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="tab-container">
      <h2>Process Manager</h2>
      <div className="card controls">
        <label>
          <input
            type="checkbox"
            checked={autoRefresh}
            onChange={(e) => setAutoRefresh(e.target.checked)}
          />
          Auto-refresh every 5s
        </label>
        <button className="btn-sm" onClick={loadProcesses}>Refresh Now</button>
      </div>
      <div className="card process-table">
        <div className="table-header">
          <span>Name</span>
          <span>PID</span>
          <span>CPU %</span>
          <span>RAM MB</span>
          <span></span>
        </div>
        {processes.map((p) => (
          <div key={p.pid} className="table-row">
            <span>{p.name}</span>
            <span>{p.pid}</span>
            <span>{p.cpu}</span>
            <span>{p.mem}</span>
            <span>
              <button className="btn-danger-sm" onClick={() => kill(p.pid)}>
                Kill
              </button>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}