Merge remote-tracking branch 'upstream/main'

2025-02-24 11:06:09 +10:00
parent 3e77f4370f 6daeb7e288
commit 1e84dedaec
551 changed files with 11806 additions and 2350 deletions
@@ -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>
              ))}
@@ -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") {
@@ -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>
@@ -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>
@@ -0,0 +1,193 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Chart as ChartJS, ArcElement, Tooltip as ChartTooltip, Legend } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { BarChart3, PieChart } from "lucide-react";
+import React, { useState } from "react";
+import { Pie } from "react-chartjs-2";
+
+ChartJS.register(ArcElement, ChartTooltip, Legend, ChartDataLabels);
+
+interface ApplicationChartProps {
+  data: { nsapp: string }[];
+}
+
+const ITEMS_PER_PAGE = 20;
+const CHART_COLORS = [
+  "#ff6384",
+  "#36a2eb",
+  "#ffce56",
+  "#4bc0c0",
+  "#9966ff",
+  "#ff9f40",
+  "#4dc9f6",
+  "#f67019",
+  "#537bc4",
+  "#acc236",
+  "#166a8f",
+  "#00a950",
+  "#58595b",
+  "#8549ba",
+];
+
+export default function ApplicationChart({ data }: ApplicationChartProps) {
+  const [isChartOpen, setIsChartOpen] = useState(false);
+  const [isTableOpen, setIsTableOpen] = useState(false);
+  const [chartStartIndex, setChartStartIndex] = useState(0);
+  const [tableLimit, setTableLimit] = useState(ITEMS_PER_PAGE);
+
+  // Calculate application counts
+  const appCounts = data.reduce((acc, item) => {
+    acc[item.nsapp] = (acc[item.nsapp] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const sortedApps = Object.entries(appCounts)
+    .sort(([, a], [, b]) => b - a);
+
+  const chartApps = sortedApps.slice(
+    chartStartIndex,
+    chartStartIndex + ITEMS_PER_PAGE
+  );
+
+  const chartData = {
+    labels: chartApps.map(([name]) => name),
+    datasets: [
+      {
+        data: chartApps.map(([, count]) => count),
+        backgroundColor: CHART_COLORS,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    plugins: {
+      legend: { display: false },
+      datalabels: {
+        color: "white",
+        font: { weight: "bold" as const },
+        formatter: (value: number, context: any) => {
+          const label = context.chart.data.labels?.[context.dataIndex];
+          return `${label}\n(${value})`;
+        },
+      },
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+
+  return (
+    <div className="mt-6 flex justify-center gap-4">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setIsChartOpen(true)}
+            >
+              <PieChart className="h-5 w-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Open Chart View</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setIsTableOpen(true)}
+            >
+              <BarChart3 className="h-5 w-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Open Table View</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <Dialog open={isChartOpen} onOpenChange={setIsChartOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Applications Distribution</DialogTitle>
+          </DialogHeader>
+          <div className="h-[60vh] w-full">
+            <Pie data={chartData} options={chartOptions} />
+          </div>
+          <div className="flex justify-center gap-4">
+            <Button
+              variant="outline"
+              onClick={() => setChartStartIndex(Math.max(0, chartStartIndex - ITEMS_PER_PAGE))}
+              disabled={chartStartIndex === 0}
+            >
+              Previous {ITEMS_PER_PAGE}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => setChartStartIndex(chartStartIndex + ITEMS_PER_PAGE)}
+              disabled={chartStartIndex + ITEMS_PER_PAGE >= sortedApps.length}
+            >
+              Next {ITEMS_PER_PAGE}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isTableOpen} onOpenChange={setIsTableOpen}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Applications Count</DialogTitle>
+          </DialogHeader>
+          <div className="max-h-[60vh] overflow-y-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Application</TableHead>
+                  <TableHead className="text-right">Count</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedApps.slice(0, tableLimit).map(([name, count]) => (
+                  <TableRow key={name}>
+                    <TableCell>{name}</TableCell>
+                    <TableCell className="text-right">{count}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {tableLimit < sortedApps.length && (
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => setTableLimit(prev => prev + ITEMS_PER_PAGE)}
+            >
+              Load More
+            </Button>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
@@ -1,22 +1,41 @@
 import { basePath } from "@/config/siteConfig";
 import Link from "next/link";
+import { FileJson, Server, ExternalLink } from "lucide-react";
+import { buttonVariants } from "./ui/button";
+import { cn } from "@/lib/utils";

 export default function Footer() {
  return (
-    <div className="supports-backdrop-blur:bg-background/90 mt-auto flex border-t border-border bg-background/40 py-6 backdrop-blur-lg">
-      <div className="flex w-full justify-between">
-        <div className="mx-6 w-full max-w-7xl text-xs sm:text-sm text-muted-foreground">
-          Website built by the community. The source code is avaliable on{" "}
+    <div className="supports-backdrop-blur:bg-background/90 mt-auto border-t w-full flex justify-between border-border bg-background/40 py-6 backdrop-blur-lg">
+      <div className="mx-6 w-full flex justify-between text-xs sm:text-sm text-muted-foreground">
+        <div className="flex items-center">
+          <p>
+            Website built by the community. The source code is available on{" "}
+            <Link
+              href={`https://github.com/community-scripts/${basePath}`}
+              target="_blank"
+              rel="noreferrer"
+              className="font-semibold underline-offset-2 duration-300 hover:underline"
+              data-umami-event="View Website Source Code on Github"
+            >
+              GitHub
+            </Link>
+            .
+          </p>
+        </div>
+        <div className="sm:flex hidden">
          <Link
-            href={`https://github.com/community-scripts/${basePath}`}
-            target="_blank"
-            rel="noreferrer"
-            className="font-semibold underline-offset-2 duration-300 hover:underline"
-            data-umami-event="View Website Source Code on Github"
+            href="/json-editor"
+            className={cn(buttonVariants({ variant: "link" }), "text-muted-foreground flex items-center gap-2")}
          >
-            GitHub
+            <FileJson className="h-4 w-4" /> JSON Editor
+          </Link>
+          <Link
+            href="/data"
+            className={cn(buttonVariants({ variant: "link" }), "text-muted-foreground flex items-center gap-2")}
+          >
+            <Server className="h-4 w-4" /> API Data
          </Link>
-          .
        </div>
      </div>
    </div>
@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg w-11/12 max-w-4xl relative max-h-[90vh] overflow-y-auto">
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded"
+        >
+          ✖
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
  <CommandPrimitive
    ref={ref}
    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground",
      className,
    )}
    {...props}
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}