AgentV3Download.jsx

Go to the documentation of this file.

import React, { useEffect, useState } from 'react';
import { Download, Terminal, CheckCircle, Info } from 'lucide-react';
 
const AgentV3Download = () => {
  const [downloads, setDownloads] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchDownloads();
  }, []);
 
  const fetchDownloads = async () => {
    try {
      const token = localStorage.getItem('token');
      const response = await fetch('/api/agent-v3/downloads', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
 
      if (!response.ok) throw new Error('Failed to fetch downloads');
 
      const data = await response.json();
      setDownloads(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleDownload = async (url, filename) => {
    try {
      const token = localStorage.getItem('token');
      const response = await fetch(url, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
 
      if (!response.ok) throw new Error('Download failed');
 
      const blob = await response.blob();
      const downloadUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
    } catch (err) {
      console.error('Download error:', err);
      alert(`Download failed: ${err.message}`);
    }
  };
 
  const PlatformCard = ({ title, icon, items, instructions }) => (
    <div className="bg-white rounded-lg shadow-md p-6">
      <div className="flex items-center gap-3 mb-4">
        <div className="text-blue-600">{icon}</div>
        <h3 className="text-xl font-semibold">{title}</h3>
      </div>
      
      <div className="space-y-3">
        {items.map((item, index) => (
          <button
            key={index}
            onClick={() => handleDownload(item.url, `everydaytech-agent-v3.${item.type.toLowerCase()}`)}
            className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors text-left"
          >
            <div className="flex items-center gap-2">
              <Download size={18} className="text-gray-600" />
              <span className="font-medium">{item.name}</span>
            </div>
            <span className="text-sm text-gray-500 uppercase">{item.type}</span>
          </button>
        ))}
      </div>
 
      {instructions && (
        <div className="mt-4 p-3 bg-blue-50 rounded-lg text-sm text-blue-800">
          <div className="flex gap-2">
            <Info size={16} className="flex-shrink-0 mt-0.5" />
            <div>
              <span className="font-semibold">Installation: </span>
              {instructions}
            </div>
          </div>
        </div>
      )}
    </div>
  );
 
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
          <h3 className="text-red-800 font-semibold mb-2">Error Loading Downloads</h3>
          <p className="text-red-600">{error}</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen bg-gray-50 py-8 px-4">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            EverydayTech Agent v3
          </h1>
          <p className="text-lg text-gray-600 mb-6">
            Next-generation remote management agent powered by MeshCentral
          </p>
          
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-50 border border-green-200 rounded-lg text-green-800">
            <CheckCircle size={20} />
            <span className="font-semibold">Production Ready</span>
          </div>
        </div>
 
        {/* Device Types Supported */}
        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg shadow-md p-6 mb-8 border border-blue-200">
          <h2 className="text-2xl font-semibold mb-4 text-blue-900">🖥️ Supported Devices</h2>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
            {[
              { icon: '💻', name: 'Windows PC', desc: 'Desktop & Laptop' },
              { icon: '🐧', name: 'Linux', desc: 'Servers & Workstations' },
              { icon: '🍎', name: 'macOS', desc: 'Intel & Apple Silicon' },
              { icon: '🖨️', name: 'Printers', desc: 'Network Printers' },
              { icon: '📡', name: 'Routers', desc: 'Network Devices' },
              { icon: '⚙️', name: 'SNMP', desc: 'Monitoring Devices' },
              { icon: '📱', name: 'IoT', desc: 'Smart Devices' },
              { icon: '☁️', name: 'VMs', desc: 'Virtual Machines' },
              { icon: '🔌', name: 'NAS', desc: 'Network Storage' },
              { icon: '🎮', name: 'Embedded', desc: 'Custom Hardware' }
            ].map((device, index) => (
              <div key={index} className="bg-white rounded-lg p-4 text-center shadow-sm hover:shadow-md transition-shadow">
                <div className="text-3xl mb-2">{device.icon}</div>
                <div className="font-semibold text-gray-900 text-sm">{device.name}</div>
                <div className="text-xs text-gray-600 mt-1">{device.desc}</div>
              </div>
            ))}
          </div>
        </div>
 
        {/* Features */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-2xl font-semibold mb-4">✨ Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              'Remote Desktop (High Performance)',
              'Terminal/SSH/PowerShell Access',
              'File Transfer (Drag & Drop)',
              'System Information Collection',
              'Hardware Inventory',
              'Auto-Updates',
              'Cross-Platform Support',
              'Real-time Connection Status',
              'Event Logging & Alerts',
              'Wake-on-LAN',
              'Two-Factor Authentication',
              'Intel AMT Support'
            ].map((feature, index) => (
              <div key={index} className="flex items-center gap-2 text-gray-700">
                <CheckCircle size={18} className="text-green-600 flex-shrink-0" />
                <span>{feature}</span>
              </div>
            ))}
          </div>
        </div>
 
        {/* Download Sections */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          {/* Windows */}
          <PlatformCard
            title="Windows"
            icon={<Download size={24} />}
            items={[
              {
                name: downloads?.downloads?.windows?.x64?.name || 'Windows 64-bit (EXE)',
                type: 'EXE',
                url: downloads?.downloads?.windows?.x64?.exe
              },
              {
                name: downloads?.downloads?.windows?.x64?.name || 'Windows 64-bit (MSI)',
                type: 'MSI',
                url: downloads?.downloads?.windows?.x64?.msi
              },
              {
                name: downloads?.downloads?.windows?.x86?.name || 'Windows 32-bit',
                type: 'EXE',
                url: downloads?.downloads?.windows?.x86?.exe
              }
            ]}
            instructions={downloads?.instructions?.windows || 'Run installer as Administrator'}
          />
 
          {/* Linux */}
          <PlatformCard
            title="Linux"
            icon={<Terminal size={24} />}
            items={[
              {
                name: downloads?.downloads?.linux?.x64?.name || 'Linux 64-bit',
                type: 'SH',
                url: downloads?.downloads?.linux?.x64?.sh
              },
              {
                name: downloads?.downloads?.linux?.arm?.name || 'Linux ARM',
                type: 'SH',
                url: downloads?.downloads?.linux?.arm?.sh
              }
            ]}
            instructions={downloads?.instructions?.linux || 'Run: wget [URL] | sudo bash'}
          />
 
          {/* macOS */}
          <PlatformCard
            title="macOS"
            icon={<Download size={24} />}
            items={[
              {
                name: downloads?.downloads?.macos?.x64?.name || 'macOS Intel',
                type: 'PKG',
                url: downloads?.downloads?.macos?.x64?.pkg
              },
              {
                name: downloads?.downloads?.macos?.arm64?.name || 'macOS Apple Silicon',
                type: 'PKG',
                url: downloads?.downloads?.macos?.arm64?.pkg
              }
            ]}
            instructions={downloads?.instructions?.macos || 'Double-click PKG to install'}
          />
        </div>
 
        {/* Quick Install Commands */}
        <div className="bg-gray-900 rounded-lg shadow-md p-6 text-white mb-8">
          <h2 className="text-2xl font-semibold mb-4">⚡ Quick Install</h2>
          
          <div className="space-y-4">
            <div>
              <h3 className="text-sm font-semibold text-gray-400 mb-2">Linux / macOS</h3>
              <div className="bg-gray-800 p-3 rounded font-mono text-sm overflow-x-auto">
                <code>curl -s https://rmm-psa-backend-t9f7k.ondigitalocean.app/api/agent-v3/install-script | sudo bash</code>
              </div>
            </div>
 
            <div>
              <h3 className="text-sm font-semibold text-gray-400 mb-2">Windows (PowerShell as Admin)</h3>
              <div className="bg-gray-800 p-3 rounded font-mono text-sm overflow-x-auto">
                <code>iwr -useb https://rmm-psa-backend-t9f7k.ondigitalocean.app/api/agent-v3/install-script/windows | iex</code>
              </div>
            </div>
          </div>
        </div>
 
        {/* Setup Info */}
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
          <div className="flex gap-3">
            <Info size={24} className="text-yellow-600 flex-shrink-0" />
            <div>
              <h3 className="font-semibold text-yellow-900 mb-2">Automatic Registration</h3>
              <p className="text-yellow-800 mb-2">
                After installation, the agent will automatically:
              </p>
              <ul className="list-disc list-inside space-y-1 text-yellow-800 text-sm">
                <li>Connect to MeshCentral</li>
                <li>Send device information to the dashboard</li>
                <li>Appear in your Agents page within 30 seconds</li>
                <li>Link to existing agent records by hostname/MAC address</li>
                <li>Create a new agent record if none exists</li>
              </ul>
            </div>
          </div>
        </div>
 
        {/* What Happened to Agent v1/v2? */}
        <div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
          <h3 className="font-semibold text-blue-900 mb-2">🤔 What happened to Agent v1 and v2?</h3>
          <p className="text-blue-800 text-sm">
            Agent v3 replaces our custom-built agents with a proven, production-ready solution. 
            Instead of maintaining custom agent code, we white-labeled the industry-standard MeshCentral agent,
            giving you enterprise features out of the box. Your existing agents will continue to work,
            but we recommend upgrading to v3 for the best experience.
          </p>
        </div>
      </div>
    </div>
  );
};
 
export default AgentV3Download;