feat(admin): moved server build/update to full app
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 2m27s
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 2m27s
This commit is contained in:
245
frontend/src/routes/admin/servers.tsx
Normal file
245
frontend/src/routes/admin/servers.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { createColumnHelper } from "@tanstack/react-table";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns-tz";
|
||||
import { CircleFadingArrowUp, Trash } from "lucide-react";
|
||||
import { Suspense, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Spinner } from "../../components/ui/spinner";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "../../components/ui/tooltip";
|
||||
import { useSocketRoom } from "../../hooks/socket.io.hook";
|
||||
import { authClient } from "../../lib/auth-client";
|
||||
import { servers } from "../../lib/queries/servers";
|
||||
import LstTable from "../../lib/tableStuff/LstTable";
|
||||
import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
|
||||
import SkellyTable from "../../lib/tableStuff/SkellyTable";
|
||||
|
||||
export const Route = createFileRoute("/admin/servers")({
|
||||
beforeLoad: async ({ location }) => {
|
||||
const { data: session } = await authClient.getSession();
|
||||
const allowedRole = ["systemAdmin", "admin"];
|
||||
|
||||
if (!session?.user) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
search: {
|
||||
redirect: location.href,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!allowedRole.includes(session.user.role as string)) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
});
|
||||
}
|
||||
|
||||
return { user: session.user };
|
||||
},
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
const ServerTable = () => {
|
||||
const { data, refetch } = useSuspenseQuery(servers());
|
||||
const columnHelper = createColumnHelper<any>();
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("name", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Name" searchable={true} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => i.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("greatPlainsPlantCode", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="GP Code" />
|
||||
),
|
||||
cell: (i) => <span>{i.getValue().toUpperCase()}</span>,
|
||||
}),
|
||||
columnHelper.accessor("server", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="server" />
|
||||
),
|
||||
cell: (i) => <span>{i.getValue().toUpperCase()}</span>,
|
||||
}),
|
||||
columnHelper.accessor("idAddress", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="IP Address" />
|
||||
),
|
||||
cell: (i) => <span>{i.getValue()}</span>,
|
||||
}),
|
||||
columnHelper.accessor("lastUpdated", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Last Update" />
|
||||
),
|
||||
cell: (i) => <span>{format(i.getValue(), "M/d/yyyy HH:mm")}</span>,
|
||||
}),
|
||||
columnHelper.accessor("buildNumber", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Build" />
|
||||
),
|
||||
cell: (i) => <span>{i.getValue()}</span>,
|
||||
}),
|
||||
columnHelper.accessor("update", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Update" searchable={false} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => {
|
||||
// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
|
||||
const [activeToggle, setActiveToggle] = useState(false);
|
||||
|
||||
const onToggle = async () => {
|
||||
setActiveToggle(true);
|
||||
toast.success(
|
||||
`${i.row.original.name} just started the upgrade monitor logs for errors.`,
|
||||
);
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`/lst/api/admin/build/updateServer`,
|
||||
{
|
||||
server: i.row.original.server,
|
||||
destination: i.row.original.serverLoc,
|
||||
token: i.row.original.plantToken,
|
||||
},
|
||||
{ withCredentials: true },
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(
|
||||
`${i.row.original.name} has completed its upgrade.`,
|
||||
);
|
||||
refetch();
|
||||
setActiveToggle(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setActiveToggle(false);
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
disabled={activeToggle}
|
||||
onClick={() => onToggle()}
|
||||
>
|
||||
{activeToggle ? (
|
||||
<span>
|
||||
<Spinner />
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
<CircleFadingArrowUp />
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
return <LstTable data={data} columns={columns} />;
|
||||
};
|
||||
|
||||
function RouteComponent() {
|
||||
const { data: logs = [], clearRoom } = useSocketRoom<any>("admin:build");
|
||||
|
||||
const columnHelper = createColumnHelper<any>();
|
||||
|
||||
const logColumns = [
|
||||
columnHelper.accessor("timestamp", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Time" searchable={false} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => format(i.getValue(), "M/d/yyyy HH:mm"),
|
||||
}),
|
||||
columnHelper.accessor("message", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Message" />
|
||||
),
|
||||
cell: (i) => (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
{i.getValue()?.length > 250 ? (
|
||||
<span>{i.getValue().slice(0, 250)}...</span>
|
||||
) : (
|
||||
<span>{i.getValue()}</span>
|
||||
)}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{i.getValue()}</TooltipContent>
|
||||
</Tooltip>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("clearLog", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Clear" />
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const x = row.original;
|
||||
return (
|
||||
<Button
|
||||
size="icon"
|
||||
variant={"destructive"}
|
||||
onClick={() => clearRoom(x.timestamp)}
|
||||
>
|
||||
<Trash />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
const triggerBuild = async () => {
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`/lst/api/admin/build/release`,
|
||||
|
||||
{
|
||||
withCredentials: true,
|
||||
},
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
//toast.error(err?.message);
|
||||
}
|
||||
};
|
||||
//console.log(logs);
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex gap-1 justify-end">
|
||||
<Button onClick={triggerBuild}>Trigger Build</Button>
|
||||
<Button onClick={() => clearRoom()}>Clear Logs</Button>
|
||||
</div>
|
||||
<div className="flex gap-1 w-full">
|
||||
<div className="w-full">
|
||||
<Suspense fallback={<SkellyTable />}>
|
||||
<ServerTable />
|
||||
</Suspense>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<LstTable data={logs} columns={logColumns} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user