mirror of
https://github.com/arcan1s/ahriman.git
synced 2026-03-04 17:29:48 +00:00
Evgenii Alekseev
b8d9bef965
This was initally generated by ai, but later has been heavily edited. The reason why it has been implemented is that there are plans to implement more features to ui, but it becomes hard to add new features to plain js, so I decided to rewrite it in typescript. Yet because it is still ai slop, it is still possible to enable old interface via configuration, even though new interface is turned on by default to get feedback
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
/*
|
|
* Copyright (c) 2021-2026 ahriman team.
|
|
*
|
|
* This file is part of ahriman
|
|
* (see https://github.com/arcan1s/ahriman).
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
import { Box } from "@mui/material";
|
|
import { DataGrid, type GridColDef } from "@mui/x-data-grid";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import EventDurationLineChart from "components/charts/EventDurationLineChart";
|
|
import { QueryKeys } from "hooks/QueryKeys";
|
|
import { useClient } from "hooks/useClient";
|
|
import type { Event } from "models/Event";
|
|
import type { RepositoryId } from "models/RepositoryId";
|
|
import type React from "react";
|
|
|
|
interface EventsTabProps {
|
|
packageBase: string;
|
|
repository: RepositoryId;
|
|
}
|
|
|
|
interface EventRow {
|
|
id: number;
|
|
timestamp: string;
|
|
event: string;
|
|
message: string;
|
|
}
|
|
|
|
const columns: GridColDef<EventRow>[] = [
|
|
{ field: "timestamp", headerName: "date", width: 180, align: "right", headerAlign: "right" },
|
|
{ field: "event", headerName: "event", flex: 1 },
|
|
{ field: "message", headerName: "description", flex: 2 },
|
|
];
|
|
|
|
export default function EventsTab({ packageBase, repository }: EventsTabProps): React.JSX.Element {
|
|
const client = useClient();
|
|
|
|
const { data: events = [] } = useQuery<Event[]>({
|
|
queryKey: QueryKeys.events(repository, packageBase),
|
|
queryFn: () => client.fetch.fetchPackageEvents(repository, packageBase, 30),
|
|
enabled: !!packageBase,
|
|
});
|
|
|
|
const rows: EventRow[] = events.map((event, index) => ({
|
|
id: index,
|
|
timestamp: new Date(event.created * 1000).toISOStringShort(),
|
|
event: event.event,
|
|
message: event.message ?? "",
|
|
}));
|
|
|
|
return <Box sx={{ mt: 1 }}>
|
|
<EventDurationLineChart events={events} />
|
|
<DataGrid
|
|
rows={rows}
|
|
columns={columns}
|
|
density="compact"
|
|
initialState={{
|
|
sorting: { sortModel: [{ field: "timestamp", sort: "desc" }] },
|
|
}}
|
|
pageSizeOptions={[10, 25]}
|
|
sx={{ height: 400, mt: 1 }}
|
|
disableRowSelectionOnClick
|
|
/>
|
|
</Box>;
|
|
}
|