fix component

Signed-off-by: xizheyin <[email protected]>

Author: xizheyin

app/api/crates/[name]/[version]/route.ts

@@ -1,32 +1,51 @@
-// app/api/crates/[name]/[version]/route.ts
 import { NextRequest, NextResponse } from 'next/server';
 import pool from '../../../../lib/db';
+import { Vulnerability } from '@/components/VulnerabilitiesList';
 
 interface CrateVersionInfo {
   name: string;
   version: string;
   documentation: string;
   dependencies: Dependency[];
+  vulnerabilities: Vulnerability[];
 }
 
 interface Dependency {
   name: string;
   version: string;
 }
+
+function generateRandomVulnerabilities(): Vulnerability[] {
+  const severities: Vulnerability['severity'][] = ['low', 'medium', 'high'];
+  const randomVulnerabilities: Vulnerability[] = [];
+
+  const numberOfVulnerabilities = Math.floor(Math.random() * 5); // 0 to 4 vulnerabilities
+
+  for (let i = 0; i < numberOfVulnerabilities; i++) {
+    const severity = severities[Math.floor(Math.random() * severities.length)];
+    randomVulnerabilities.push({
+      id: `vul-${i}`,
+      title: `Random Vulnerability ${i + 1}`,
+      description: `This is a randomly generated vulnerability of ${severity} severity.`,
+      severity,
+    });
+  }
+
+  return randomVulnerabilities;
+}
+
 export async function GET(req: NextRequest, { params }: { params: { name: string, version: string } }) {
   const { name, version } = params;
   const nameAndVersion = `${name}/${version}`;
 
   try {
     const client = await pool.connect();
 
-    // 查询 program_versions 表
     const versionRes = await client.query(
       'SELECT * FROM program_versions WHERE name_and_version = \$1',
       [nameAndVersion]
     );
 
-    // 查询 program_dependencies 表
     const dependenciesRes = await client.query(
       'SELECT dependency_name, dependency_version FROM program_dependencies WHERE name_and_version = \$1',
       [nameAndVersion]
@@ -44,16 +63,19 @@ export async function GET(req: NextRequest, { params }: { params: { name: string
       version: row.dependency_version,
     }));
 
+    const vulnerabilities = generateRandomVulnerabilities();
+
     const crateVersionInfo: CrateVersionInfo = {
       name: versionInfo.name,
       version: versionInfo.version,
       documentation: versionInfo.documentation,
       dependencies: dependencies,
+      vulnerabilities: vulnerabilities
     };
 
     return NextResponse.json(crateVersionInfo);
   } catch (error) {
     console.error('Database query error:', error);
     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
   }
-}
+}

app/api/crates/[name]/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import pool from '../../../lib/db';
+import { CrateInfo } from '@/app/lib/crate_info';
 
 export async function GET(req: NextRequest, { params }: { params: { name: string } }) {
   const { name } = params;
@@ -30,20 +31,20 @@ export async function GET(req: NextRequest, { params }: { params: { name: string
 
     client.release();
 
+    const crateInfo: CrateInfo = {
+      id: programInfo.id,
+      name: programInfo.name,
+      //description: programInfo.description,
+      description: "The ark-curve-constraint-tests crate is a comprehensive testing suite designed for validating the constraint systems of elliptic curves in the Arkworks ecosystem. It ensures that cryptographic curves are implemented correctly and efficiently within constraint systems, which are crucial for zero-knowledge proofs and other cryptographic protocols.",
+      repository: programInfo.github_url,
+      documentation: programInfo.doc_url,
+      downloads: programInfo.downloads,
+      cratesio: programInfo.cratesio,
+      publishedDate: '2024.8.24'
+    }
+
     return NextResponse.json({
-      crateInfo: {
-        id: programInfo.id,
-        name: programInfo.name,
-        description: programInfo.description,
-        namespace: programInfo.namespace,
-        maxVersion: programInfo.max_version,
-        githubUrl: programInfo.github_url,
-        megaUrl: programInfo.mega_url,
-        docUrl: programInfo.doc_url,
-        programType: programInfo.program_type,
-        downloads: programInfo.downloads,
-        cratesio: programInfo.cratesio,
-      },
+      crateInfo: crateInfo,
       versions: versions, // 添加版本信息
       vulnerabilities: [], // 如果有漏洞信息，可以在这里添加查询逻辑
     });

app/lib/crate_info.ts

@@ -0,0 +1,11 @@
+export interface CrateInfo {
+    id: string,
+    name: string;
+    description: string;
+    repository: string;
+    downloads: number;
+    documentation: string;
+    cratesio: string
+    publishedDate: string;
+}
+

app/programs/[name]/[version]/page.tsx

@@ -4,15 +4,14 @@ import React, { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import Header from '../../../../components/Header';
 import Footer from '../../../../components/Footer';
-import CrateInfoCard, { CrateInfo } from '../../../../components/CrateInfoCard';
+import CrateInfoCard from '../../../../components/CrateInfoCard';
 import DependenciesList, { Dependency } from '../../../../components/DependenciesList';
 import DependencyGraph, {GraphDependency} from '../../../../components/DependencyGraph';
 import VulnerabilitiesList, { Vulnerability } from '../../../../components/VulnerabilitiesList';
 import SecurityAdvisories from '../../../../components/SecurityAdvisories';
-import LicensesInfo from '../../../../components/LicensesInfo';
-import MetadataSection from '@/components/MetadataSection';
 import BenchmarkResults from '../../../../components/BenchmarkResults';
 import VersionsSelector from '../../../../components/VersionsSelector';
+import { CrateInfo } from '@/app/lib/crate_info';
 
 
 async function fetchDependencyTree(name: string, version: string) {
@@ -56,7 +55,7 @@ const CratePage = () => {
             .then(data => {
                 setCrateInfo(data.crateInfo || {});
                 setVersions(data.versions || []);
-                setVulnerabilities(data.vulnerabilities || []);
+            
                 setBenchmarks(data.benchmarks || []);
             })
             .catch(error => {
@@ -65,6 +64,20 @@ const CratePage = () => {
 
     }, [crateName, currentVersion]);
 
+    useEffect(()=>{
+        fetch(`/api/crates/${name}/${version}`)
+        .then(response => response.json())
+        .then(data => {
+            setVulnerabilities(data.vulnerabilities);
+            setDependencies(data.dependencies);
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+
+
+    }, [crateName, currentVersion]);
+
 
     useEffect(() => {
         async function loadDependencies() {
@@ -102,9 +115,8 @@ const CratePage = () => {
                 <div className="container mx-auto p-2 flex">
                     <div className="w-full md:w-2/3 pr-2">                        
                         <CrateInfoCard crateInfo={crateInfo} />
-                        <LicensesInfo licenses={crateInfo.licenses} dependencyLicenses={crateInfo.dependencyLicenses} />
-                        <MetadataSection publishedDate={crateInfo.publishedDate} description={crateInfo.description} links={crateInfo.links} />
                         <SecurityAdvisories vulnerabilities={vulnerabilities} />
+                        <VulnerabilitiesList vulnerabilities={vulnerabilities} />
                         <BenchmarkResults benchmarks={benchmarks} />
                     </div>
                     <div className="w-full md:w-1/3 pl-2 border-l-2">
@@ -114,7 +126,7 @@ const CratePage = () => {
                             crateName={crateInfo.name}
                             onVersionChange={handleVersionChange}
                         />
-                        <VulnerabilitiesList vulnerabilities={vulnerabilities} />
+                        
                         <DependenciesList dependencies={dependencies} onDependencyClick={handleDependencyClick} />
                         <DependencyGraph crateName={name} currentVersion={version} dependencies={graphDependencies} />
                     </div>

components/CrateInfoCard.tsx

@@ -1,36 +1,29 @@
-export interface CrateInfo {
-    name: string;
-    description: string;
-    repository: string;
-    downloads: number;
-    maintainers: Maintainer[];
-    documentation: string;
-    publishedDate: string;
-    licenses: string[];
-    dependencyLicenses: Record<string, number>;
-    links: Record<string, string>;
-}
-interface Maintainer {
-    name: string;
-    email: string;
-}
+import { CrateInfo } from "@/app/lib/crate_info";
+
 const CrateInfoCard = ({ crateInfo }: { crateInfo: CrateInfo }) => (
     <section className="bg-white p-4 mb-2 shadow-lg rounded-lg">
-        <h3 className="text-xl font-bold mb-2">Crate Infomation</h3>
-        <p>Name: {crateInfo.name}</p>
-        <p>Description: {crateInfo.description}</p>
-        <p>Downloads: {crateInfo.downloads}</p>
+        <h3 className="text-xl font-bold mb-2">Crate Information</h3>
+        <div className="space-y-2">
+        <p className="border border-gray-300 hover:bg-gray-100 hover:border-gray-400 p-2 rounded mb-2"><strong>Name:</strong> {crateInfo.name}</p>
+        <div className="border border-gray-300 hover:bg-gray-100 hover:border-gray-400 p-2 rounded text-left mb-2">
+                <p><strong>Description:</strong></p>
+                <p>{crateInfo.description}</p>
+        </div>
+        <p className="border border-gray-300 hover:bg-gray-100 hover:border-gray-400 p-2 rounded mb-2"><strong>Downloads:</strong> {crateInfo.downloads}</p>
+        <p className="border border-gray-300 hover:bg-gray-100 hover:border-gray-400 p-2 rounded mb-2"><strong>Published:</strong> {crateInfo.publishedDate}</p>
         {crateInfo.repository && (
-            <a href={crateInfo.repository} className="text-blue-500 underline mb-2 inline-block" target="_blank" rel="noopener noreferrer">
+            <a href={crateInfo.repository} className="text-blue-500 underline mb-2 inline-block border border-gray-300 hover:bg-gray-100 hover:border-gray-400 p-2 rounded" target="_blank" rel="noopener noreferrer">
                 Repository
             </a>
         )}
         {crateInfo.documentation && (
-            <a href={crateInfo.documentation} className="text-blue-500 underline mb-2 inline-block ml-4" target="_blank" rel="noopener noreferrer">
+            <a href={crateInfo.documentation} className="text-blue-500 underline mb-2 inline-block ml-4 border border-gray-300 hover:bg-gray-100 hover:border-gray-400 p-2 rounded" target="_blank" rel="noopener noreferrer">
                 Documentation
             </a>
         )}
+        </div>
     </section>
 );
 
+
 export default CrateInfoCard;

components/LicensesInfo.tsx

@@ -8,7 +8,7 @@ interface SecurityAdvisoriesProps {
 const SecurityAdvisories: React.FC<SecurityAdvisoriesProps> = ({ vulnerabilities }) => {
     return (
         <div className="bg-white p-4 mb-2 shadow-lg rounded-lg">
-            <h2 className="text-xl font-bold mb-2">Security Advisories</h2>
+            <h2 className="text-xl font-bold mb-2">Testing or Static Analysis Results</h2>
             <ul className="list-disc ml-6">
                 {vulnerabilities.map((vuln, index) => (
                     <li key={index}>

components/MetadataSection.tsx

@@ -7,14 +7,14 @@ export interface Vulnerability {
 
 const VulnerabilitiesList = ({ vulnerabilities }: { vulnerabilities: Vulnerability[] }) => (
     <section className="bg-white p-4 mb-2 shadow-lg rounded-lg">
-        <h2 className="text-xl font-semibold mb-2 text-gray-800">Vulnerabilities</h2>
+        <h2 className="text-xl font-bold mb-2">Vulnerabilities</h2>
         {vulnerabilities.length > 0 ? (
-            <ul className="space-y-6">
+            <ul className="grid grid-cols-1 md:grid-cols-4 gap-2">
                 {vulnerabilities.map(vul => (
-                    <li key={vul.id} className="p-6 bg-gray-50 rounded-lg shadow-md border border-gray-200">
-                        <h3 className="text-2xl font-bold mb-2 text-gray-800">{vul.title}</h3>
-                        <p className="text-gray-700 mb-4">{vul.description}</p>
-                        <span className={`inline-block rounded-full px-3 py-1 text-sm font-semibold ${getSeverityColor(vul.severity)}`}>
+                    <li key={vul.id} className="p-4 bg-gray-50 rounded-md shadow-sm border border-gray-200">
+                        <h3 className="text-x font-bold mb-1 text-gray-800">{vul.title}</h3>
+                        <p className="text-gray-600 text-xs mb-2">{vul.description}</p>
+                        <span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${getSeverityColor(vul.severity)}`}>
                             {vul.severity}
                         </span>
                     </li>