AssignDeviceModal.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
import './Modal.css';
 
export default function AssignDeviceModal({ isOpen, onClose, device, onAssigned }) {
  const [tenants, setTenants] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [selectedTenant, setSelectedTenant] = useState('');
  const [selectedCustomer, setSelectedCustomer] = useState('');
  const [moveMesh, setMoveMesh] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
 
  useEffect(() => {
    if (isOpen) {
      fetchTenants();
    }
  }, [isOpen]);
 
  useEffect(() => {
    if (selectedTenant) {
      fetchCustomers(selectedTenant);
    } else {
      setCustomers([]);
      setSelectedCustomer('');
    }
  }, [selectedTenant]);
 
  const fetchTenants = async () => {
    try {
      const res = await apiFetch('/tenants');
      if (!res.ok) throw new Error('Failed to fetch tenants');
      const data = await res.json();
      setTenants(data.tenants || []);
    } catch (err) {
      console.error('Error fetching tenants:', err);
      setError('Failed to load tenants');
    }
  };
 
  const fetchCustomers = async (tenantId) => {
    try {
      const res = await apiFetch(`/customers?tenant=${tenantId}`);
      if (!res.ok) throw new Error('Failed to fetch customers');
      const data = await res.json();
      setCustomers(data.customers || []);
    } catch (err) {
      console.error('Error fetching customers:', err);
      setCustomers([]);
    }
  };
 
  const handleAssign = async () => {
    if (!selectedTenant) {
      setError('Please select a tenant');
      return;
    }
 
    setLoading(true);
    setError('');
 
    try {
      const res = await apiFetch('/monitoring/assign-device', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          nodeId: device.meshcentral_nodeid,
          tenantId: selectedTenant,
          customerId: selectedCustomer || null,
          moveMesh: moveMesh
        })
      });
 
      if (!res.ok) {
        const errData = await res.json();
        throw new Error(errData.error || 'Failed to assign device');
      }
 
      const result = await res.json();
      console.log('Device assigned:', result);
 
      if (onAssigned) {
        onAssigned(result);
      }
 
      onClose();
    } catch (err) {
      console.error('Error assigning device:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  if (!isOpen) return null;
 
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Assign Device to Tenant</h2>
          <button className="modal-close" onClick={onClose}>
            <span className="material-symbols-outlined">close</span>
          </button>
        </div>
 
        <div className="modal-body">
          {error && (
            <div className="error-message" style={{ marginBottom: '1rem' }}>
              {error}
            </div>
          )}
 
          <div style={{ marginBottom: '1rem', padding: '1rem', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
              <span className="material-symbols-outlined" style={{ color: 'var(--primary)' }}>
                computer
              </span>
              <strong>{device.hostname || 'Unknown Device'}</strong>
            </div>
            <div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
              <div>Platform: {device.platform || device.os || 'Unknown'}</div>
              <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', marginTop: '0.25rem' }}>
                Node ID: {device.meshcentral_nodeid?.substring(0, 40)}...
              </div>
            </div>
          </div>
 
          <div className="form-group">
            <label htmlFor="tenant">
              Tenant <span style={{ color: 'red' }}>*</span>
            </label>
            <select
              id="tenant"
              value={selectedTenant}
              onChange={(e) => setSelectedTenant(e.target.value)}
              disabled={loading}
            >
              <option value="">-- Select Tenant --</option>
              {tenants.map((tenant) => (
                <option key={tenant.tenant_id} value={tenant.tenant_id}>
                  {tenant.name}
                </option>
              ))}
            </select>
          </div>
 
          <div className="form-group">
            <label htmlFor="customer">Customer (Optional)</label>
            <select
              id="customer"
              value={selectedCustomer}
              onChange={(e) => setSelectedCustomer(e.target.value)}
              disabled={loading || !selectedTenant}
            >
              <option value="">-- No Customer --</option>
              {customers.map((customer) => (
                <option key={customer.customer_id} value={customer.customer_id}>
                  {customer.name}
                </option>
              ))}
            </select>
            {!selectedTenant && (
              <small style={{ color: 'var(--text-secondary)', fontSize: '0.75rem' }}>
                Select a tenant first to load customers
              </small>
            )}
          </div>
 
          <div className="form-group">
            <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
              <input
                type="checkbox"
                checked={moveMesh}
                onChange={(e) => setMoveMesh(e.target.checked)}
                disabled={loading}
              />
              <span>Move device to tenant's mesh group</span>
            </label>
            <small style={{ color: 'var(--text-secondary)', fontSize: '0.75rem', marginLeft: '1.5rem' }}>
              Recommended: Organizes devices by tenant in MeshCentral
            </small>
          </div>
        </div>
 
        <div className="modal-footer">
          <button className="btn" onClick={onClose} disabled={loading}>
            Cancel
          </button>
          <button
            className="btn primary"
            onClick={handleAssign}
            disabled={loading || !selectedTenant}
          >
            {loading ? 'Assigning...' : 'Assign Device'}
          </button>
        </div>
      </div>
    </div>
  );
}