feat(web): implement new logs in ui

web/package.json

@@ -19,13 +19,15 @@
         "@types/lodash": "4.17.5",
         "@uidotdev/usehooks": "^2.4.1",
         "axios": "^1.7.2",
+        "axios-date-transformer": "^1.0.3",
         "axios-retry": "4.4.1",
         "chonky": "^2.3.2",
         "chonky-icon-fontawesome": "^2.3.2",
         "cookie": "^0.6.0",
         "daisyui": "^4.12.7",
         "isbot": "^5.1.9",
         "lodash": "4.17.21",
+        "date-fns": "^3.6.0",
         "react": "^18.3.1",
         "react-daisyui": "5.0.0",
         "react-dom": "^18.3.1",

web/src/components/DateRangeInput.tsx

@@ -0,0 +1,65 @@
+/* === This file is part of bxt ===
+ *
+ *   SPDX-FileCopyrightText: 2024 Artem Grinev <[email protected]>
+ *   SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ */
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsLeftRight } from "@fortawesome/free-solid-svg-icons";
+import React, { HTMLProps, useState } from "react";
+
+type DateRangeInputProps = HTMLProps<HTMLDivElement> & {
+    since: Date;
+    until: Date;
+    onDateChange: (since: Date, until: Date) => void;
+};
+const className =
+    "text-base-content text-sm border-none input join-item rounded-xl px-1 focus:-outline-offset-1 focus:outline-[2.5px] text-inherit";
+const DateRangeInput: React.FC<DateRangeInputProps> = ({
+    since: from,
+    until: to,
+    onDateChange,
+    ...props
+}) => {
+    const [fromValue, setFromValue] = useState(from.toISOString().slice(0, 16));
+    const [toValue, setToValue] = useState(to.toISOString().slice(0, 16));
+
+    const handleFromChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newFromValue = event.target.value;
+        setFromValue(newFromValue);
+        onDateChange(new Date(newFromValue), new Date(toValue));
+    };
+
+    const handleToChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newToValue = event.target.value;
+        setToValue(newToValue);
+        onDateChange(new Date(fromValue), new Date(newToValue));
+    };
+
+    return (
+        <div className="flex items-center gap-2" {...props}>
+            <input
+                className={className}
+                aria-label="From"
+                type="datetime-local"
+                value={fromValue}
+                onChange={handleFromChange}
+                max={toValue}
+            />
+            <FontAwesomeIcon
+                className="text-base-content w-10 text-inherit"
+                icon={faArrowsLeftRight}
+            />
+            <input
+                className={className}
+                aria-label="To"
+                type="datetime-local"
+                value={toValue}
+                onChange={handleToChange}
+                min={fromValue}
+            />
+        </div>
+    );
+};
+
+export default DateRangeInput;

web/src/components/LogTable.tsx

@@ -5,117 +5,92 @@
  *
  */
 
-import React from "react";
-import { Table } from "react-daisyui";
+import { CommitRow } from "./logs/rows/CommitRow";
+import { SyncRow } from "./logs/rows/SyncRow";
+import { DeployRow } from "./logs/rows/DeployRow";
 import {
-    useReactTable,
-    flexRender,
-    getCoreRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    SortingState,
-    createColumnHelper
-} from "@tanstack/react-table";
-import SectionLabel from "../components/SectionLabel";
+    CommitLogEntry,
+    DeployLogEntry,
+    LogEntry,
+    SyncLogEntry
+} from "../definitions/log";
+import { Card, Divider } from "react-daisyui";
+import { useCallback } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as datefns from "date-fns";
 
-interface LogTableProps {
-    entries: LogEntry[];
-    sorting: SortingState;
-    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
-}
-
-const LogTable = ({ entries, sorting, setSorting }: LogTableProps) => {
-    const columnHelper = createColumnHelper<LogEntry>();
-
-    const columns = [
-        columnHelper.accessor("type", {
-            header: "Type"
-        }),
-        columnHelper.accessor("package.name", {
-            header: "Name"
-        }),
-
-        columnHelper.accessor("package.poolEntries", {
-            header: "Version",
-            cell: (context) => {
-                const value = context.getValue();
-                const preferredLocation =
-                    context?.row?.original?.package?.preferredLocation;
+type LogTableProps = {
+    allEntries: LogEntry[];
+    onRowClick: (entry: LogEntry) => void;
+};
 
-                if (value && preferredLocation && value[preferredLocation]) {
-                    return value[preferredLocation].version;
-                } else {
-                    return "Unknown Version";
-                }
+const LogTable = ({ allEntries, onRowClick }: LogTableProps) => {
+    const renderContent = useCallback(
+        (entry: (typeof allEntries)[0], index: number) => {
+            switch (entry.type) {
+                case "Commit":
+                    return (
+                        <CommitRow
+                            key={index}
+                            entry={entry as CommitLogEntry}
+                        />
+                    );
+                case "Sync":
+                    return (
+                        <SyncRow key={index} entry={entry as SyncLogEntry} />
+                    );
+                case "Deploy":
+                    return (
+                        <DeployRow
+                            key={index}
+                            entry={entry as DeployLogEntry}
+                        />
+                    );
             }
-        }),
-
-        columnHelper.accessor("package.section", {
-            header: "Section",
-            cell: (context) => <SectionLabel section={context.getValue()} />
-        }),
-
-        columnHelper.accessor((entry) => entry.time, {
-            header: "Time",
-            enableSorting: true,
-            sortingFn: "datetime"
-        })
-    ];
-
-    const table = useReactTable<LogEntry>({
-        columns,
-        data: entries,
-        state: {
-            sorting
         },
-        manualPagination: true,
-        sortDescFirst: true,
-        enableSorting: true,
-        onSortingChange: setSorting,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        initialState: {}
-    });
+        []
+    );
 
     return (
-        <Table size="xs" zebra={true} className="w-full">
-            <Table.Head>
-                {table
-                    .getHeaderGroups()
-                    .flatMap((headerGroup) =>
-                        headerGroup.headers.map((header) => (
-                            <span key={header.id}>
-                                {header.isPlaceholder
-                                    ? null
-                                    : flexRender(
-                                          header.column.columnDef.header,
-                                          header.getContext()
-                                      )}
+        <>
+            {allEntries.map((entry, index) => (
+                <Card
+                    className={`text-sm transition bg-base-100 shadow-sm my-1 mx-10 cursor-pointer duration-150 hover:bg-base-300 hover:shadow-none ${entry.type === "Sync" ? "bg-secondary text-accent-content" : ""}`}
+                    key={index}
+                    onClick={() => {
+                        onRowClick(entry);
+                    }}
+                >
+                    <Card.Body className="p-4">
+                        <div className="flex justify-between items-center gap-3">
+                            <span
+                                className={`flex text-sm w-44 ${entry.type === "Sync" ? "text-accent-content" : "text-gray-500"}`}
+                            >
+                                <time className="text-center">
+                                    {datefns.format(
+                                        entry.time,
+                                        "yyyy-MM-dd HH:mm:ss"
+                                    )}
+                                </time>
+                                <div className="grow" />
                             </span>
-                        ))
-                    )}
-            </Table.Head>
-
-            <Table.Body>
-                {table.getRowModel().rows.map((row) => {
-                    return (
-                        <Table.Row key={row.id}>
-                            {row.getVisibleCells().map((cell) => {
-                                return (
-                                    <span key={cell.id}>
-                                        {flexRender(
-                                            cell.column.columnDef.cell,
-                                            cell.getContext()
-                                        )}
-                                    </span>
-                                );
-                            })}
-                        </Table.Row>
-                    );
-                })}
-            </Table.Body>
-        </Table>
+                            <Divider horizontal className="mx-1" />
+                            <span className="flex items-center w-24">
+                                <FontAwesomeIcon
+                                    className="w-5"
+                                    icon={entry.icon}
+                                />
+                                <h2 className="w-16 text-center align-middle">
+                                    {entry.type}
+                                </h2>
+                            </span>
+                            <Divider horizontal className="mx-1" />
+                            {renderContent(entry, index)}
+                        </div>
+                    </Card.Body>
+                </Card>
+            ))}
+        </>
     );
 };
 

web/src/definitions/log.d.ts

@@ -0,0 +1,52 @@
+/* === This file is part of bxt ===
+ *
+ *   SPDX-FileCopyrightText: 2023 Artem Grinev <[email protected]>
+ *   SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ */
+
+export enum LogEntryType {
+    Add = "Add",
+    Remove = "Remove",
+    Update = "Update"
+}
+export type PackageLogEntry = {
+    type: LogEntryType;
+    section: Section;
+    name: string;
+    location: string;
+    version?: string;
+};
+
+export type CommitLogEntry = {
+    time: Date;
+    commiterUsername: string;
+    added: PackageLogEntry[];
+    deleted: PackageLogEntry[];
+    moved: [PackageLogEntry, PackageLogEntry][];
+    copied: [PackageLogEntry, PackageLogEntry][];
+};
+
+export type SyncLogEntry = {
+    time: Date;
+    syncTriggerUsername: string;
+    added: PackageLogEntry[];
+    deleted: PackageLogEntry[];
+};
+
+export type DeployLogEntry = {
+    time: Date;
+    runnerUrl: string;
+    added: PackageLogEntry[];
+};
+
+export type Log = {
+    commits: CommitLogEntry[];
+    syncs: SyncLogEntry[];
+    deploys: DeployLogEntry[];
+};
+
+export type LogEntry = (CommitLogEntry | SyncLogEntry | DeployLogEntry) & {
+    type: string;
+    icon: IconProp;
+};