Merge remote-tracking branch 'upstream/main'

frontend/src/app/data/page.tsx

@@ -3,8 +3,7 @@
 import React, { useEffect, useState } from "react";
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import { string } from "zod";
-
+import ApplicationChart from "../../components/ApplicationChart";
 
 interface DataModel {
   id: number;
@@ -12,17 +11,16 @@ interface DataModel {
   disk_size: number;
   core_count: number;
   ram_size: number;
-  verbose: string;
   os_type: string;
   os_version: string;
-  hn: string;
   disableip6: string;
-  ssh: string;
-  tags: string;
   nsapp: string;
   created_at: string;
   method: string;
   pve_version: string;
+  status: string;
+  error: string;
+  type: string;
 }
 
 
@@ -34,9 +32,12 @@ const DataFetcher: React.FC = () => {
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
   const [sortConfig, setSortConfig] = useState<{ key: keyof DataModel | null, direction: 'ascending' | 'descending' }>({ key: 'id', direction: 'descending' });
-  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [itemsPerPage, setItemsPerPage] = useState(25);
   const [currentPage, setCurrentPage] = useState(1);
 
+  const [showErrorRow, setShowErrorRow] = useState<number | null>(null);
+
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -115,9 +116,27 @@ const DataFetcher: React.FC = () => {
 
   const paginatedData = sortedData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
 
+
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error: {error}</p>;
 
+  var installingCounts: number = 0;
+  var failedCounts: number = 0;
+  var doneCounts: number = 0
+  var unknownCounts: number = 0;
+  data.forEach((item) => {
+    if (item.status === "installing") {
+      installingCounts += 1;
+    } else if (item.status === "failed") {
+      failedCounts += 1;
+    }
+    else if (item.status === "done") {
+      doneCounts += 1;
+    }
+    else {
+      unknownCounts += 1;
+    }
+  });
 
   return (
     <div className="p-6 mt-20">
@@ -159,13 +178,15 @@ const DataFetcher: React.FC = () => {
           <label className="text-sm text-gray-600 mt-1 block">Set a end date</label>
         </div>
       </div>
+      <ApplicationChart data={filteredData} />
       <div className="mb-4 flex justify-between items-center">
         <p className="text-lg font-bold">{filteredData.length} results found</p>
+        <p className="text-lg font">Status Legend: 🔄 installing {installingCounts} | ✔️ completetd {doneCounts} | ❌ failed {failedCounts} | ❓ unknown {unknownCounts}</p>
         <select value={itemsPerPage} onChange={handleItemsPerPageChange} className="p-2 border">
-          <option value={5}>5</option>
-          <option value={10}>10</option>
-          <option value={20}>20</option>
+          <option value={25}>25</option>
           <option value={50}>50</option>
+          <option value={100}>100</option>
+          <option value={200}>200</option>
         </select>
       </div>
       <div className="overflow-x-auto">
@@ -173,36 +194,63 @@ const DataFetcher: React.FC = () => {
           <table className="min-w-full table-auto border-collapse">
             <thead>
               <tr>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('status')}>Status</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('type')}>Type</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('nsapp')}>Application</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('os_type')}>OS</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('os_version')}>OS Version</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('disk_size')}>Disk Size</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('core_count')}>Core Count</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('ram_size')}>RAM Size</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('hn')}>Hostname</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('ssh')}>SSH</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('verbose')}>Verb</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('tags')}>Tags</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('method')}>Method</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('pve_version')}>PVE Version</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('error')}>Error Message</th>
                 <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('created_at')}>Created At</th>
               </tr>
             </thead>
             <tbody>
               {paginatedData.map((item, index) => (
                 <tr key={index}>
+                  <td className="px-4 py-2 border-b">
+                    {item.status === "done" ? (
+                      "✔️"
+                    ) : item.status === "failed" ? (
+                      "❌"
+                    ) : item.status === "installing" ? (
+                      "🔄"
+                    ) : (
+                      item.status
+                    )}
+                  </td>
+                  <td className="px-4 py-2 border-b">{item.type === "lxc" ? (
+                    "📦"
+                  ) : item.type === "vm" ? (
+                    "🖥️"
+                  ) : (
+                    item.type
+                  )}</td>
                   <td className="px-4 py-2 border-b">{item.nsapp}</td>
                   <td className="px-4 py-2 border-b">{item.os_type}</td>
                   <td className="px-4 py-2 border-b">{item.os_version}</td>
                   <td className="px-4 py-2 border-b">{item.disk_size}</td>
                   <td className="px-4 py-2 border-b">{item.core_count}</td>
                   <td className="px-4 py-2 border-b">{item.ram_size}</td>
-                  <td className="px-4 py-2 border-b">{item.hn}</td>
-                  <td className="px-4 py-2 border-b">{item.ssh}</td>
-                  <td className="px-4 py-2 border-b">{item.verbose}</td>
-                  <td className="px-4 py-2 border-b">{item.tags.replace(/;/g, ' ')}</td>
                   <td className="px-4 py-2 border-b">{item.method}</td>
                   <td className="px-4 py-2 border-b">{item.pve_version}</td>
+                  <td className="px-4 py-2 border-b">
+                    {item.error && item.error !== "none" ? (
+                      showErrorRow === index ? (
+                        <>
+                          {item.error}
+                          <button onClick={() => setShowErrorRow(null)}>{item.error}</button>
+                        </>
+                      ) : (
+                        <button onClick={() => setShowErrorRow(index)}>Click to show error</button>
+                      )
+                    ) : (
+                      "none"
+                    )}
+                  </td>
                   <td className="px-4 py-2 border-b">{formatDate(item.created_at)}</td>
                 </tr>
               ))}

frontend/src/app/json-editor/_components/InstallMethod.tsx

@@ -64,8 +64,8 @@ function InstallMethod({
             if (key === "type") {
               updatedMethod.script =
                 value === "alpine"
-                  ? `/${prev.type}/alpine-${prev.slug}.sh`
-                  : `/${prev.type}/${prev.slug}.sh`;
+                  ? `${prev.type}/alpine-${prev.slug}.sh`
+                  : `${prev.type}/${prev.slug}.sh`;
 
               // Set OS to Alpine and reset version if type is alpine
               if (value === "alpine") {

frontend/src/app/json-editor/page.tsx

@@ -23,7 +23,7 @@ import { fetchCategories } from "@/lib/data";
 import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
-import { CalendarIcon, Check, Clipboard } from "lucide-react";
+import { CalendarIcon, Check, Clipboard, Download } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -76,8 +76,8 @@ export default function JSONGenerator() {
             ...method,
             script:
               method.type === "alpine"
-                ? `/${updated.type}/alpine-${updated.slug}.sh`
-                : `/${updated.type}/${updated.slug}.sh`,
+                ? `${updated.type}/alpine-${updated.slug}.sh`
+                : `${updated.type}/${updated.slug}.sh`,
           }));
         }
 
@@ -97,6 +97,21 @@ export default function JSONGenerator() {
     toast.success("Copied metadata to clipboard");
   }, [script]);
 
+  const handleDownload = useCallback(() => {
+    const jsonString = JSON.stringify(script, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+  
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${script.slug || "script"}.json`;
+    document.body.appendChild(a);
+    a.click();
+  
+    URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  }, [script]);
+
   const handleDateSelect = useCallback(
     (date: Date | undefined) => {
       updateScript("date_created", format(date || new Date(), "yyyy-MM-dd"));
@@ -313,18 +328,23 @@ export default function JSONGenerator() {
       <div className="w-1/2 p-4 bg-background overflow-y-auto">
         {validationAlert}
         <div className="relative">
-          <Button
-            className="absolute right-2 top-2"
-            size="icon"
-            variant="outline"
-            onClick={handleCopy}
-          >
-            {isCopied ? (
-              <Check className="h-4 w-4" />
-            ) : (
-              <Clipboard className="h-4 w-4" />
-            )}
-          </Button>
+          <div className="absolute right-2 top-2 flex gap-1">
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={handleCopy}
+            >
+              {isCopied ? <Check className="h-4 w-4" /> : <Clipboard className="h-4 w-4" />}
+            </Button>
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={handleDownload}
+            >
+              <Download className="h-4 w-4" />
+            </Button>
+          </div>
+        
           <pre className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll">
             {JSON.stringify(script, null, 2)}
           </pre>

frontend/src/app/scripts/_components/ScriptAccordion.tsx

@@ -72,7 +72,7 @@ export default function ScriptAccordion({
             )}
           >
             <div className="mr-2 flex w-full items-center justify-between">
-              <span className="pl-2">{category.name} </span>
+              <span className="pl-2 text-left">{category.name} </span>
               <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
                 {category.scripts.length}
               </span>