- {resourceParts.map((part, index) => (
-
- {part}
- {index < resourceParts.length - 1 && " | "}
-
- ))}
-
- ) : null;
+ return resourceParts.length > 0
+ ? (
+
+ {resourceParts.map((part, index) => (
+
+ {part}
+ {index < resourceParts.length - 1 && " | "}
+
+ ))}
+
+ )
+ : null;
};
return (
@@ -145,145 +164,151 @@ const CategoryView = () => {
{categories.length === 0 && (
No categories available. Please check the API endpoint.
)} - {selectedCategoryIndex !== null ? ( -
- {/* Header with Navigation */}
-
+ )
+ : (
+
-
-
-
- {/* Scripts Grid */}
- - {categories[selectedCategoryIndex].name} -
- -
- {currentScripts
- .sort((a, b) => a.name.localeCompare(b.name))
- .map((script) => (
- handleScriptClick(script.slug)}
+ {selectedCategoryIndex !== null
+ ? (
+
- ) : (
-
+ {/* Header with Navigation */}
+
- {/* Back to Categories Button */}
-
+
+ + {categories[selectedCategoryIndex].name} +
+ +
-
-
-
- {/* Categories Grid */}
-
+ 
+
+
+ ))}
+
+
+ {/* Back to Categories Button */}
+
-
- Categories
-- {categories.reduce((total, category) => total + (category.scripts?.length || 0), 0)} Total scripts -
-
- {categories.map((category, index) => (
- handleCategoryClick(index)}
- className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6 transition-shadow duration-300"
- >
-
-
- )}
+ - {category.name} -
-
-
- + {script.name} +
++ Created at: + {" "} + {script.date_created || "No date available"} +
++ {truncateDescription(script.description || "No description available.")} +
+ {renderResources(script)} +
+
+
+
+ {/* Categories Grid */}
+
+ )}
);
-};
+}
export default CategoryView;
diff --git a/frontend/src/app/data/page.tsx b/frontend/src/app/data/page.tsx
index b75246484..10657627c 100644
--- a/frontend/src/app/data/page.tsx
+++ b/frontend/src/app/data/page.tsx
@@ -1,11 +1,11 @@
"use client";
-import React, { JSX, useEffect, useState } from "react";
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import ApplicationChart from "../../components/ApplicationChart";
+import React, { useEffect, useState } from "react";
+import "react-datepicker/dist/react-datepicker.css";
-interface DataModel {
+import ApplicationChart from "../../components/application-chart";
+
+type DataModel = {
id: number;
ct_type: number;
disk_size: number;
@@ -22,13 +22,13 @@ interface DataModel {
error: string;
type: string;
[key: string]: any;
-}
+};
-interface SummaryData {
+type SummaryData = {
total_entries: number;
status_count: Record
+
+ Categories
++ {categories.reduce((total, category) => total + (category.scripts?.length || 0), 0)} + {" "} + Total scripts +
+
+ {categories.map((category, index) => (
+ handleCategoryClick(index)}
+ className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6 transition-shadow duration-300"
+ >
+
+
+
+ ))}
+
+ + {category.name} +
+
+
+ {category.scripts
+ && category.scripts
+ .slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS)
+ .map((script, i) => (
+
+
+ {
+ e.stopPropagation();
+ handleScriptClick(script.slug);
+ }}
+ />
+ {formattedBadge(script.type)}
+
+ ))}
+
+ + {(category as any).description || "No description available."} +
+Loading...
; - if (error) returnError: {error}
; + if (loading) + returnLoading...
; + if (error) { + return ( ++ Error: + {error} +
+ ); + } const requestSort = (key: string) => { - let direction: 'ascending' | 'descending' = 'ascending'; - if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') { - direction = 'descending'; + let direction: "ascending" | "descending" = "ascending"; + if (sortConfig && sortConfig.key === key && sortConfig.direction === "ascending") { + direction = "descending"; } setSortConfig({ key, direction }); }; @@ -102,8 +116,8 @@ const DataFetcher: React.FC = () => { const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); - const hours = String(date.getHours()).padStart(2, '0'); - const minutes = String(date.getMinutes()).padStart(2, '0'); + const hours = String(date.getHours()).padStart(2, "0"); + const minutes = String(date.getMinutes()).padStart(2, "0"); const timezoneOffset = dateString.slice(-6); return `${day}.${month}.${year} ${hours}:${minutes} ${timezoneOffset} GMT`; }; @@ -114,49 +128,76 @@ const DataFetcher: React.FC = () => {
-
+ {summary?.total_entries} results found
-Status Legend: 🔄 installing {summary?.status_count["installing"] ?? 0} | ✔️ completed {summary?.status_count["done"] ?? 0} | ❌ failed {summary?.status_count["failed"] ?? 0} | ❓ unknown
-+ {summary?.total_entries} + {" "} + results found +
++ Status Legend: 🔄 installing + {summary?.status_count.installing ?? 0} + {" "} + | ✔️ completed + {summary?.status_count.done ?? 0} + {" "} + | ❌ failed + {summary?.status_count.failed ?? 0} + {" "} + | ❓ unknown +
+| requestSort('status')}>Status | -requestSort('type')}>Type | -requestSort('nsapp')}>Application | -requestSort('os_type')}>OS | -requestSort('os_version')}>OS Version | -requestSort('disk_size')}>Disk Size | -requestSort('core_count')}>Core Count | -requestSort('ram_size')}>RAM Size | -requestSort('method')}>Method | -requestSort('pve_version')}>PVE Version | -requestSort('error')}>Error Message | -requestSort('created_at')}>Created At | +requestSort("status")}>Status | +requestSort("type")}>Type | +requestSort("nsapp")}>Application | +requestSort("os_type")}>OS | +requestSort("os_version")}>OS Version | +requestSort("disk_size")}>Disk Size | +requestSort("core_count")}>Core Count | +requestSort("ram_size")}>RAM Size | +requestSort("method")}>Method | +requestSort("pve_version")}>PVE Version | +requestSort("error")}>Error Message | +requestSort("created_at")}>Created At |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| - {item.status === "done" ? ( - "✔️" - ) : item.status === "failed" ? ( - "❌" - ) : item.status === "installing" ? ( - "🔄" - ) : ( - item.status - )} + {item.status === "done" + ? ( + "✔️" + ) + : item.status === "failed" + ? ( + "❌" + ) + : item.status === "installing" + ? ( + "🔄" + ) + : ( + item.status + )} + | ++ {item.type === "lxc" + ? ( + "📦" + ) + : item.type === "vm" + ? ( + "🖥️" + ) + : ( + item.type + )} | -{item.type === "lxc" ? ( - "📦" - ) : item.type === "vm" ? ( - "🖥️" - ) : ( - item.type - )} | {item.nsapp} | {item.os_type} | {item.os_version} | @@ -175,11 +216,14 @@ const DataFetcher: React.FC = () => {