Monitoring.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
import DownloadAgentModal from "../components/DownloadAgentModal";
import AssignDeviceModal from "../components/AssignDeviceModal";
 
import { useNavigate, Link } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import '../styles/data-table.css';
import './Tickets.css';
import './Monitoring.css';
 
function Monitoring() {
  // All useState hooks should be at the top for proper initialization
  const navigate = useNavigate();
  const [agents, setAgents] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [search, setSearch] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const tenantsMap = {};
  const [showDownload, setShowDownload] = useState(false);
  const [showAssignModal, setShowAssignModal] = useState(false);
  const [selectedDeviceToAssign, setSelectedDeviceToAssign] = useState(null);
  const [isMSP, setIsMSP] = useState(false);
  // Declare token before using it
  const token = localStorage.getItem('token');
  let tenantId = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      tenantId = decoded.tenant_id || decoded.tenantId || '';
    } catch {}
  }
  
  // Check if user is MSP/admin
  useEffect(() => {
    if (token) {
      try {
        const payload = token.split('.')[1];
        const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        const userRole = decoded.role || '';
        const userTenantId = decoded.tenant_id || decoded.tenantId || '';
        setIsMSP(userRole === 'admin' || userRole === 'msp' || userTenantId === '00000000-0000-0000-0000-000000000001');
      } catch {}
    }
  }, [token]);
  const [monitoringStats, setMonitoringStats] = useState({
    online: 0,
    offline: 0,
    total: 0
  });
  // Ensure filters state is defined and used consistently
  const [filters, setFilters] = useState({
    type: 'all',
    status: 'all'
  });
  const perPage = 20;
  // ...existing code...
  // Reload monitoring data when tenantId changes
  useEffect(() => {
    fetchMonitoringData();
  }, [tenantId]);
  // Unified fetch for monitoring stats and agents
  const fetchMonitoringData = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set('page', page);
      params.set('limit', perPage);
      if (search) params.set('search', search);
      // Do not pass tenantId or customerId; backend will determine context from JWT
      const res = await apiFetch(`/monitoring?${params.toString()}`);
      if (!res.ok) throw new Error('Failed to load monitoring data');
      const data = await res.json();
      // Set stats
      setMonitoringStats({
        online: data.overview?.agentsOnline || 0,
        total: data.overview?.totalAgents || 0,
        offline: (data.overview?.totalAgents || 0) - (data.overview?.agentsOnline || 0)
      });
      // Set agents
      setAgents(data.agents || []);
      setTotalPages(Math.ceil((data.total || (data.agents?.length || 0)) / perPage));
      setError('');
      console.log('[Monitoring] monitoring data fetched:', data);
    } catch (err) {
      console.error('[Monitoring] Failed to fetch monitoring data:', err);
      setMonitoringStats({ online: 0, offline: 0, total: 0 });
      setAgents([]);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleAssignDevice = (device) => {
    setSelectedDeviceToAssign(device);
    setShowAssignModal(true);
  };
 
  const handleDeviceAssigned = (result) => {
    console.log('Device assigned successfully:', result);
    // Refresh the monitoring data to show updated assignment
    fetchMonitoringData();
    setShowAssignModal(false);
    setSelectedDeviceToAssign(null);
  };
 
 
  // ...existing code...
 
  // ...no localStorage for filters...
 
  // Root tenant control logic removed; handled in MainLayout
 
 
  useEffect(() => {
    fetchMonitoringData();
    // Refresh every 30 seconds
    const interval = setInterval(() => {
      fetchMonitoringData();
    }, 30000);
    // Refresh when page becomes visible (user returns to tab)
    const handleVisibilityChange = () => {
      if (!document.hidden) {
        fetchMonitoringData();
      }
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      clearInterval(interval);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [page, search, tenantId]);
 
  const getStatusClass = (agent) => {
    // Use meshcentral_connected field from database for accurate real-time status
    if (agent?.meshcentral_connected === true) return 'status-online';
    return 'status-offline';
  };
 
  const getStatusText = (agent) => {
    // Use meshcentral_connected field from database for accurate real-time status
    if (agent?.meshcentral_connected === true) return 'Online';
    return 'Offline';
  };
 
  const formatLastSeen = (lastSeen) => {
    if (!lastSeen) return 'Never';
    const date = new Date(lastSeen);
    const now = new Date();
    const diffMs = now - date;
    const diffMinutes = Math.floor(diffMs / 1000 / 60);
    const diffHours = Math.floor(diffMinutes / 60);
    const diffDays = Math.floor(diffHours / 24);
    
    if (diffMinutes < 1) return 'Just now';
    if (diffMinutes < 60) return `${diffMinutes}m ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    if (diffDays < 7) return `${diffDays}d ago`;
    return date.toLocaleDateString();
  };
 
  const getDeviceIcon = (os) => {
    if (!os) return 'computer';
    const osLower = os.toLowerCase();
    if (osLower.includes('windows')) return 'desktop_windows';
    if (osLower.includes('linux')) return 'dns';
    if (osLower.includes('mac')) return 'laptop_mac';
    return 'computer';
  };
 
  const handleFilterChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setPage(1);
  };
 
  const handleClearFilters = () => {
    const defaultFilters = { type: 'all', status: 'all' };
    setFilters(defaultFilters);
    setSearch('');
    setPage(1);
  };
 
  const hasActiveFilters = () => {
    return filters.type !== 'all' || filters.status !== 'all' || search;
  };
 
  // Apply client-side filtering
  const filteredAgents = agents.filter(agent => {
    // Exclude default/stale agents
    if (
      !agent.agent_uuid ||
      agent.agent_uuid === '00000000-0000-0000-0000-000000000001'
    ) return false;
 
    // Allow untagged devices for MSP users
    if (agent.is_untagged && isMSP) {
      return true; // Skip other filters for untagged devices
    }
 
    // For non-untagged devices, require enrolled status
    if (agent.status !== 'enrolled') {
      return false;
    }
 
    // Type filter
    if (filters.type !== 'all') {
      const os = (agent.os || '').toLowerCase();
      if (filters.type === 'windows' && !os.includes('windows')) return false;
      if (filters.type === 'linux' && !os.includes('linux')) return false;
      if (filters.type === 'mac' && !os.includes('mac')) return false;
    }
 
    // Status filter
    if (filters.status !== 'all') {
      const statusClass = getStatusClass(agent);
      if (filters.status === 'online' && statusClass !== 'status-online') return false;
      if (filters.status === 'offline' && statusClass !== 'status-offline') return false;
    }
 
    return true;
  });
 
  const onlineCount = agents.filter(a => getStatusClass(a) === 'status-online').length;
 
  // Determine if any agent has tenant_id property
  const showTenantColumn = filteredAgents.some(agent => agent.tenant_id !== undefined && agent.tenant_id !== null);
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2 style={{margin:0}}>Monitoring</h2>
          <div className="monitoring-stats">
            <div className="stat-item">
              <span className="stat-icon online">
                <span className="material-symbols-outlined">check_circle</span>
              </span>
              <div className="stat-details">
                <div className="stat-value">{monitoringStats.online}</div>
                <div className="stat-label">Online</div>
              </div>
            </div>
            <div className="stat-item">
              <span className="stat-icon offline">
                <span className="material-symbols-outlined">cancel</span>
              </span>
              <div className="stat-details">
                <div className="stat-value">{monitoringStats.offline}</div>
                <div className="stat-label">Offline</div>
              </div>
            </div>
            <div className="stat-item">
              <span className="stat-icon total">
                <span className="material-symbols-outlined">devices</span>
              </span>
              <div className="stat-details">
                <div className="stat-value">{monitoringStats.total}</div>
                <div className="stat-label">Total Agents</div>
              </div>
            </div>
          </div>
        </div>
 
        <button
          className="btn primary"
          onClick={() => setShowDownload(true)}
          title="Deploy Agent or SNMP Device"
          style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
        >
          <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>
            download
          </span>
          Deploy Agent / SNMP
        </button>
 
        <div className="toolbar">
          <div className="toolbar-left">
            <div className="search-box">
              <span className="material-symbols-outlined">search</span>
              <input 
                placeholder="Search by name, hostname, customer, or OS..." 
                value={search} 
                onChange={e => { setSearch(e.target.value); setPage(1); }}
              />
            </div>
          </div>
          <div className="toolbar-right">
            <button className="btn" onClick={fetchMonitoringData}>
              <span className="material-symbols-outlined">refresh</span>
              Refresh
            </button>
            <button 
              className={`btn ${showFilters ? 'active' : ''}`} 
              onClick={() => setShowFilters(!showFilters)}
              title="Toggle filters"
            >
              <span className="material-symbols-outlined">tune</span>
              Filters
              {hasActiveFilters() && (
                <span className="badge">{Object.values(filters).filter(v => v && v !== 'all').length + (search ? 1 : 0)}</span>
              )}
            </button>
            {hasActiveFilters() && (
              <button className="btn" onClick={handleClearFilters}>
                <span className="material-symbols-outlined">clear_all</span>
                Clear All
              </button>
            )}
          </div>
        </div>
 
        {showFilters && (
          <div className="filter-panel">
            <h3>Filter Options</h3>
            <div className="filter-grid">
              <div className="filter-group">
                <label>OS Type</label>
                <select 
                  value={filters.type} 
                  onChange={e => handleFilterChange('type', e.target.value)}
                >
                  <option value="all">All Types</option>
                  <option value="windows">Windows</option>
                  <option value="linux">Linux</option>
                  <option value="mac">macOS</option>
                </select>
              </div>
 
              <div className="filter-group">
                <label>Status</label>
                <select 
                  value={filters.status} 
                  onChange={e => handleFilterChange('status', e.target.value)}
                >
                  <option value="all">All Statuses</option>
                  <option value="online">Online</option>
                  <option value="offline">Offline</option>
                </select>
              </div>
            </div>
 
            {hasActiveFilters() && (
              <div className="active-filters">
                <div className="active-filters-header">
                  <span className="filter-label">Active Filters:</span>
                </div>
                <div className="filter-tags">
                  {filters.type !== 'all' && (
                    <span className="filter-tag">
                      Type: {filters.type}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('type', 'all'); }}>×</button>
                    </span>
                  )}
                  {filters.status !== 'all' && (
                    <span className="filter-tag">
                      Status: {filters.status}
                      <button onClick={(e) => { e.stopPropagation(); handleFilterChange('status', 'all'); }}>×</button>
                    </span>
                  )}
                  {search && (
                    <span className="filter-tag">
                      Search: "{search}"
                      <button onClick={(e) => { e.stopPropagation(); setSearch(''); }}>×</button>
                    </span>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
 
        {error && <div className="error-message">{error}</div>}
        
        {loading ? (
          <div className="loading">Loading agents...</div>
        ) : (
          <>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Status</th>
                    <th>Name</th>
                    {showTenantColumn && <th>Tenant</th>}
                    <th>Customer</th>
                    <th>OS</th>
                    <th>Version</th>
                    <th>Contract</th>
                    <th>Last Seen</th>
                    {isMSP && <th>Actions</th>}
                  </tr>
                </thead>
                <tbody>
                  {filteredAgents.length === 0 ? (
                    <tr>
                      <td colSpan={isMSP ? (showTenantColumn ? "9" : "8") : (showTenantColumn ? "8" : "7")} style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-secondary)' }}>
                        No agents found
                      </td>
                    </tr>
                  ) : (
                    filteredAgents.map((agent) => (
                      <tr key={agent.agent_uuid || agent.id}>
                        <td>
                          <span
                            className={`material-symbols-outlined device-icon ${getStatusClass(agent)}`}
                            title={getStatusClass(agent) === 'status-online' ? 'Online (connected)' : 'Offline'}
                            style={{ color: getStatusClass(agent) === 'status-online' ? '#2ecc40' : undefined }}
                          >
                            {getDeviceIcon(agent.os)}
                          </span>
                        </td>
                        <td>
                          <div className="agent-name-cell">
                            <div className="agent-name">
                              <Link to={`/agents/${agent.agent_uuid}`}>
                                {agent.name || agent.hostname || 'Unnamed'}
                              </Link>
                            </div>
                            <div className="agent-hostname">{agent.hostname}</div>
                          </div>
                        </td>
 
                        {showTenantColumn && (
                          <td title={agent.tenant_id ? `Tenant #${agent.tenant_id}` : 'Not assigned'}>
                            {agent.is_untagged ? (
                              <span className="status-badge inactive" style={{ background: '#ff9800', color: 'white' }}>
                                Untagged
                              </span>
                            ) : agent.tenant_id === 1 ? (
                              'Root Tenant'
                            ) : (
                              agent.tenant_name || tenantsMap?.[agent.tenant_id] || (agent.tenant_id ? `#${agent.tenant_id}` : '—')
                            )}
                          </td>
                        )}
 
                        <td>
                          <span className="customer-name">
                            {agent.customer_name || (agent.customer_id ? `#${agent.customer_id}` : 'No Customer')}
                          </span>
                        </td>
 
                        <td><span className="os-badge">{agent.os || '—'}</span></td>
 
                        <td><span className="os-version">{agent.os_version || '—'}</span></td>
 
                        <td>
                          {agent.contract_title ? (
                            <span className="status-badge active">{agent.contract_title}</span>
                          ) : (
                            <span className="status-badge inactive">No Contract</span>
                          )}
                        </td>
 
                        <td>
                          <div className="last-seen-cell">
                            {agent.meshcentral_connected ? (
                              <span className="status-text status-online">
                                Online
                              </span>
                            ) : (
                              <span className="time-ago">
                                {formatLastSeen(agent.last_seen)}
                              </span>
                            )}
                          </div>
                        </td>
 
                        {isMSP && (
                          <td>
                            {agent.is_untagged ? (
                              <button
                                className="btn btn-sm primary"
                                onClick={() => handleAssignDevice(agent)}
                                title="Assign this device to a tenant"
                                style={{ fontSize: '0.875rem', padding: '0.25rem 0.75rem' }}
                              >
                                <span className="material-symbols-outlined" style={{ fontSize: '16px', marginRight: '4px' }}>
                                  label
                                </span>
                                Assign
                              </button>
                            ) : (
                              <span style={{ color: 'var(--text-secondary)', fontSize: '0.875rem' }}>—</span>
                            )}
                          </td>
                        )}
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
            <div className="pagination">
              <button className="btn" disabled={page === 1} onClick={() => setPage(p => Math.max(1, p - 1))}>
                <span className="material-symbols-outlined">navigate_before</span>
              </button>
 
              <span>Page {page} of {totalPages}</span>
 
              <button className="btn" disabled={page === totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </>
        )}
        {showDownload && (
          <DownloadAgentModal
            isOpen={showDownload}
            onClose={() => setShowDownload(false)}
            tenantId={tenantId}
            customerId={null}
          />
        )}
        {showAssignModal && selectedDeviceToAssign && (
          <AssignDeviceModal
            isOpen={showAssignModal}
            onClose={() => {
              setShowAssignModal(false);
              setSelectedDeviceToAssign(null);
            }}
            device={selectedDeviceToAssign}
            onAssigned={handleDeviceAssigned}
          />
        )}
      </div>
    </MainLayout>
  );
}
 
export default Monitoring;