rename files to Logging to prevent getting gitignore
This commit is contained in:
shatfield4
parent
dac7c355d4
commit
f7940c1fea
|
|
@ -20,7 +20,7 @@ const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
|
|||
const AdminInvites = lazy(() => import("@/pages/Admin/Invitations"));
|
||||
const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
|
||||
const AdminSystem = lazy(() => import("@/pages/Admin/System"));
|
||||
const AdminLogs = lazy(() => import("@/pages/Admin/Logs"));
|
||||
const AdminLogs = lazy(() => import("@/pages/Admin/Logging"));
|
||||
const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
|
||||
const GeneralAppearance = lazy(
|
||||
() => import("@/pages/GeneralSettings/Appearance")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import { CaretDown } from "@phosphor-icons/react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function LogRow({ log }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const handleRowClick = () => {
|
||||
if (log.metadata !== "{}") {
|
||||
setExpanded(!expanded);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
onClick={handleRowClick}
|
||||
className="bg-transparent text-white text-opacity-80 text-sm font-medium cursor-pointer"
|
||||
>
|
||||
<td className="px-6 py-4 font-medium whitespace-nowrap text-white">
|
||||
{log.id}
|
||||
</td>
|
||||
<td className="px-6 py-4 font-medium whitespace-nowrap text-white flex items-center">
|
||||
<span className="rounded-full bg-sky-600/20 px-2 py-0.5 text-sm font-medium text-sky-400 shadow-sm">
|
||||
{log.event}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 border-transparent transform transition-transform duration-200">
|
||||
{log.user.username}
|
||||
</td>
|
||||
<td className="px-6 py-4 border-transparent transform transition-transform duration-200">
|
||||
{log.occurredAt}
|
||||
</td>
|
||||
{log.metadata !== "{}" && (
|
||||
<td
|
||||
className={`flex items-center justify-center transform transition-transform duration-200 hover:scale-105 ${
|
||||
expanded ? "rotate-0" : "rotate-90"
|
||||
}`}
|
||||
>
|
||||
<CaretDown weight="bold" size={20} />
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
{expanded && (
|
||||
<tr className="bg-sidebar">
|
||||
<td
|
||||
colSpan="2"
|
||||
className="px-6 py-4 font-medium text-white rounded-l-2xl"
|
||||
>
|
||||
Event Metadata
|
||||
</td>
|
||||
<td colSpan="4" className="px-6 py-4 rounded-r-2xl">
|
||||
<div className="w-full rounded-lg bg-main-2 p-2 text-white shadow-sm border-white border bg-opacity-10">
|
||||
<pre className="overflow-scroll">
|
||||
{JSON.stringify(JSON.parse(log.metadata), null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
|
||||
import useQuery from "@/hooks/useQuery";
|
||||
import System from "@/models/system";
|
||||
import { useEffect, useState } from "react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import * as Skeleton from "react-loading-skeleton";
|
||||
import LogRow from "./LogRow";
|
||||
|
||||
export default function AdminLogs() {
|
||||
return (
|
||||
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
|
||||
{!isMobile && <Sidebar />}
|
||||
<div
|
||||
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
|
||||
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
|
||||
>
|
||||
{isMobile && <SidebarMobileHeader />}
|
||||
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
|
||||
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
|
||||
<div className="items-center flex gap-x-4">
|
||||
<p className="text-2xl font-semibold text-white">Logs</p>
|
||||
</div>
|
||||
<p className="text-sm font-base text-white text-opacity-60">
|
||||
View all logs and events happening on this instance.
|
||||
</p>
|
||||
</div>
|
||||
<ChatsContainer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatsContainer() {
|
||||
const query = useQuery();
|
||||
const [loading, setLoading] = useState(true);
|
||||
// const [chats, setChats] = useState([]);
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [offset, setOffset] = useState(Number(query.get("offset") || 0));
|
||||
const [canNext, setCanNext] = useState(false);
|
||||
|
||||
const handlePrevious = () => {
|
||||
setOffset(Math.max(offset - 1, 0));
|
||||
};
|
||||
const handleNext = () => {
|
||||
setOffset(offset + 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchLogs() {
|
||||
const { logs: _logs, hasPages = false } = await System.logs(offset);
|
||||
console.log(_logs);
|
||||
setLogs(_logs);
|
||||
setCanNext(hasPages);
|
||||
setLoading(false);
|
||||
}
|
||||
fetchLogs();
|
||||
}, [offset]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Skeleton.default
|
||||
height="80vh"
|
||||
width="100%"
|
||||
highlightColor="#3D4147"
|
||||
baseColor="#2C2F35"
|
||||
count={1}
|
||||
className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||||
containerClassName="flex w-full"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
|
||||
<thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 rounded-tl-lg">
|
||||
Id
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Event Type
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
User
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Occurred At
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 rounded-tr-lg">
|
||||
{" "}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!!logs && logs.map((log) => <LogRow key={log.id} log={log} />)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="flex w-full justify-between items-center">
|
||||
<button
|
||||
onClick={handlePrevious}
|
||||
className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
|
||||
disabled={offset === 0}
|
||||
>
|
||||
{" "}
|
||||
Previous Page
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
|
||||
disabled={!canNext}
|
||||
>
|
||||
Next Page
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue