frontend/components/ScanTable.tsx - master - hed1ad/CloudGuard_API_Security_Platform

frontend/components/ScanTable.tsx
94 строки4 KB
hed1ad
Add eror message for scann
26 окт 2025, 15:16
26 окт 2025, 15:1672797b2
import Link from 'next/link';
import { Scan } from '@/lib/api';

interface ScanTableProps {
  scans: Scan[];
}

export function ScanTable({ scans }: ScanTableProps) {
  const getSeverityColor = (count?: number) => {
    if (!count || count === 0) return 'text-green-600';
    if (count < 3) return 'text-yellow-600';
    return 'text-red-600';
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString('ru-RU', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  if (scans.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500">
        Пока нет сканирований. Создайте первое сканирование выше.
      </div>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Target URL</th>
            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Status</th>
            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Уязвимости</th>
            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Дата</th>
            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Действия</th>
          </tr>
        </thead>
        <tbody>
          {scans.map((scan) => (
            <tr key={scan.scan_id} className="border-t border-gray-200 hover:bg-gray-50">
              <td className="px-4 py-3 text-sm">{scan.target_url}</td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-2">
                  <span
                    className={`px-2 py-1 rounded text-xs font-medium ${
                      scan.status === 'completed'
                        ? 'bg-green-100 text-green-800'
                        : scan.status === 'running'
                        ? 'bg-blue-100 text-blue-800'
                        : scan.status === 'failed'
                        ? 'bg-red-100 text-red-800'
                        : 'bg-gray-100 text-gray-800'
                    }`}
                  >
                    {scan.status}
                  </span>
                  {scan.status === 'failed' && scan.error_message && (
                    <div className="group relative">
                      <svg className="h-4 w-4 text-red-500 cursor-help" viewBox="0 0 20 20" fill="currentColor">
                        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                      </svg>
                      <div className="invisible group-hover:visible absolute z-10 w-64 p-2 mt-1 text-xs text-white bg-gray-900 rounded-lg shadow-lg left-0">
                        {scan.error_message}
                      </div>
                    </div>
                  )}
                </div>
              </td>
              <td className={`px-4 py-3 font-semibold ${getSeverityColor(scan.vulnerabilities_found)}`}>
                {scan.vulnerabilities_found ?? '-'}
              </td>
              <td className="px-4 py-3 text-sm text-gray-600">{formatDate(scan.created_at)}</td>
              <td className="px-4 py-3">
                <Link
                  href={`/scans/${scan.scan_id}`}
                  className="text-blue-600 hover:underline text-sm"
                >
                  Детали
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}