TabServices.jsx

Go to the documentation of this file.

import React from "react";
import { apiFetch } from "../../lib/api";
 
export default function TabServices({ agentId }) {
  const [services, setServices] = React.useState([]);
 
  function load() {
    if (!agentId) return;
    apiFetch(`/agent/${agentId}/services`).then(setServices);
  }
  React.useEffect(load, [agentId]);
 
  function action(name, type) {
    if (!agentId) return;
    apiFetch(`/agent/${agentId}/service/${name}/${type}`, { method: "POST" })
      .then(load);
  }
 
  // Defensive: ensure services is an array
  const safeServices = Array.isArray(services) ? services : [];
 
  if (!Array.isArray(services)) {
    return (
      <div className="tab-container">
        <h2>Windows Services</h2>
        <div className="card error">Service data is not available or invalid.</div>
      </div>
    );
  }
 
  return (
    <div className="tab-container">
      <h2>Windows Services</h2>
      <div className="card-grid">
        {safeServices.map((s) => (
          <div key={s.name} className="card">
            <strong>{s.name}</strong> ({s.status})
            <div className="flex-row">
              <button className="btn-sm" onClick={() => action(s.name, "start")}> 
                Start
              </button>
              <button className="btn-sm" onClick={() => action(s.name, "stop")}> 
                Stop
              </button>
              <button className="btn-sm" onClick={() => action(s.name, "restart")}> 
                Restart
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}