michael/stackpulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Logs Pagination

Browse Source
This commit is contained in:
root
2025-10-16 06:51:09 +00:00
parent f7be617e1d
commit 4266adc853
5 changed files with 150 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/public/assets/index-987e6ee6.css
+1
View File
File diff suppressed because one or more lines are too long
backend/public/assets/index-1a97f764.js → backend/public/assets/index-a934cea9.js
+27 -27
View File
File diff suppressed because one or more lines are too long
backend/public/assets/index-beb97849.css
-1
View File
File diff suppressed because one or more lines are too long
backend/public/index.html
+2 -2
View File
@@ -32,8 +32,8 @@
<!-- Nepcha Analytics (nepcha.com) --> <!-- Nepcha Analytics (nepcha.com) -->
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. --> <!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script> <script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
<script type="module" crossorigin src="/assets/index-1a97f764.js"></script> <script type="module" crossorigin src="/assets/index-a934cea9.js"></script>
<link rel="stylesheet" href="/assets/index-beb97849.css"> <link rel="stylesheet" href="/assets/index-987e6ee6.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/src/pages/dashboard/logs.jsx
+82 -31
View File
@@ -565,7 +565,7 @@ export function Logs() {
<Card> <Card>
<CardHeader variant="gradient" color="gray" className="mb-8 p-6"> <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
<Typography variant="h6" color="white"> <Typography variant="h6" color="white">
Authors Table Logs
</Typography> </Typography>
</CardHeader> </CardHeader>
<CardBody className="overflow-x-scroll px-0 pt-0 pb-2"> <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
@@ -588,59 +588,74 @@ export function Logs() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{logs.map( {logs.map((log) => {
(log) => {
const statusClass = STATUS_COLORS[log.status] || "text-blue-300"; const statusClass = STATUS_COLORS[log.status] || "text-blue-300";
const className = "py-3 px-5";
const stackDisplayName = log.stackName || "Unbekannt"; const stackDisplayName = log.stackName || "Unbekannt";
const showStackId = stackDisplayName !== '---' && log.stackId !== undefined && log.stackId !== null; const showStackId = stackDisplayName !== '---' && log.stackId !== undefined && log.stackId !== null;
const redeployTypeLabel = log.redeployType const redeployTypeLabel = log.redeployType
? (REDEPLOY_TYPE_LABELS[log.redeployType] ?? log.redeployType) ? (REDEPLOY_TYPE_LABELS[log.redeployType] ?? log.redeployType)
: '---'; : '---';
const className = `py-3 px-5 ${
key === authorsTableData.length - 1
? ""
: "border-b border-blue-gray-50"
}`;
return ( return (
<tr key={log.id}> <tr key={log.id}>
<td className={className}> <td className={className}>
<Typography <Typography
variant="small" variant="small"
color="blue-gray" className="mb-1 block text-xs font-medium text-blue-gray-600">
className="font-semibold"
>
{formatTimestamp(log.timestamp)} {formatTimestamp(log.timestamp)}
</Typography> </Typography>
</td> </td>
<td className={className}> <td className={className}>
<Typography className="text-xs font-semibold text-blue-gray-600"> <div className="flex flex-col">
{job[0]} <span className="font-medium">{stackDisplayName}</span>
</Typography> <Typography
<Typography className="text-xs font-normal text-blue-gray-500"> variant="small"
{job[1]} >
{showStackId && (
<span className="text-xs text-gray-400">ID: {log.stackId}</span>
)}
</Typography> </Typography>
</div>
</td> </td>
<td className={className}> <td className={className}>
<Chip <Typography
variant="gradient" variant="small"
color={online ? "green" : "blue-gray"} >
value={online ? "online" : "offline"} {redeployTypeLabel}
className="py-0.5 px-2 text-[11px] font-medium w-fit"
/>
</td>
<td className={className}>
<Typography className="text-xs font-semibold text-blue-gray-600">
{date}
</Typography> </Typography>
</td> </td>
<td className={className}> <td className={className}>
<Typography <Typography
as="a" variant="small"
href="#" className={`font-semibold ${statusClass}`}
className="text-xs font-semibold text-blue-gray-600"
> >
Edit {log.status}
</Typography>
</td>
<td className={className}>
<Typography
variant="small"
>
{log.message || "-"}
</Typography>
</td>
<td className={className}>
<Typography
variant="small"
>
{log.endpoint ?? "-"}
</Typography>
</td>
<td className={className}>
<Typography
variant="small"
>
<button
onClick={() => handleDeleteLog(log.id)}
disabled={actionLoading}
className="rounded-md border border-red-600 px-3 py-1 text-xs text-red-300 transition hover:bg-red-600/20 disabled:opacity-60">
Löschen
</button>
</Typography> </Typography>
</td> </td>
</tr> </tr>
@@ -651,7 +666,43 @@ export function Logs() {
</table> </table>
</CardBody> </CardBody>
</Card> </Card>
<div className="flex flex-wrap items-center justify-between gap-3">
<span>
{totalLogs === 0
? "Keine Einträge"
: perPage === 'all'
? `Zeige alle ${totalLogs} Einträge`
: `Zeige ${rangeStart.toLocaleString()} – ${rangeEnd.toLocaleString()} von ${totalLogs.toLocaleString()} Einträgen`}
</span>
{perPage !== 'all' && (
<div className="flex items-center gap-2">
<button
onClick={() => handlePageChange(page - 1)}
disabled={page <= 1 || actionLoading}
className="rounded-md border border-slate-300 p-2.5 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-4 h-4">
<path d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" />
</svg>
</button>
<p className="text-slate-600">
Seite <strong className="text-slate-800">{page}</strong> /&nbsp;<strong className="text-slate-800">{totalPages}</strong>
</p>
<button
onClick={() => handlePageChange(page + 1)}
disabled={page >= totalPages || actionLoading}
className="rounded-md border border-slate-300 p-2.5 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-4 h-4">
<path d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z" />
</svg>
</button>
</div> </div>
)}
</div>
</div>
); );
} }