add backend tests to admin page

This commit is contained in:
mrjvs 2023-11-12 17:54:21 +01:00
parent b4efe88252
commit 0dc3e51a36
4 changed files with 139 additions and 1 deletions

View File

@ -1,6 +1,7 @@
import { ofetch } from "ofetch";
export interface MetaResponse {
version: string;
name: string;
description?: string;
hasCaptcha: boolean;

View File

@ -5,6 +5,8 @@ import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
import { BackendTestPart } from "../parts/admin/BackendTestPart";
export function AdminPage() {
return (
<SubPageLayout>
@ -13,6 +15,7 @@ export function AdminPage() {
<Paragraph>Useful tools to test out your current deployment</Paragraph>
<ConfigValuesPart />
<BackendTestPart />
<WorkerTestPart />
<TMDBTestPart />
</ThinContainer>

View File

@ -0,0 +1,128 @@
import { useState } from "react";
import { useAsyncFn } from "react-use";
import { MetaResponse, getBackendMeta } from "@/backend/accounts/meta";
import { Button } from "@/components/Button";
import { Icon, Icons } from "@/components/Icon";
import { Box } from "@/components/layout/Box";
import { Spinner } from "@/components/layout/Spinner";
import { Divider } from "@/components/utils/Divider";
import { Heading2 } from "@/components/utils/Text";
import { conf } from "@/setup/config";
export function BackendTestPart() {
const backendUrl = conf().BACKEND_URL;
const [status, setStatus] = useState<{
hasTested: boolean;
success: boolean;
errorText: string;
value: MetaResponse | null;
}>({
hasTested: false,
success: false,
errorText: "",
value: null,
});
const [testState, runTests] = useAsyncFn(async () => {
setStatus({
hasTested: false,
success: false,
errorText: "",
value: null,
});
try {
const backendData = await getBackendMeta(backendUrl);
return setStatus({
hasTested: true,
success: true,
errorText:
"Failed to call backend, double check the URL key and your internet connection",
value: backendData,
});
} catch (err) {
return setStatus({
hasTested: true,
success: false,
errorText:
"Failed to call backend, double check the URL key and your internet connection",
value: null,
});
}
}, [setStatus]);
return (
<>
<Heading2 className="mb-8 mt-12">Backend API test</Heading2>
<Box>
<div>
<div className="flex-1">
{status.hasTested && status.success ? (
<>
<p>
<span className="inline-block w-36 text-white font-medium">
Version:
</span>
{status.value?.version}
</p>
<p>
<span className="inline-block w-36 text-white font-medium">
Backend name:
</span>
{status.value?.name}
</p>
<p>
<span className="inline-block w-36 text-white font-medium">
Description:
</span>
{status.value?.description ?? "Not set"}
</p>
<p>
<span className="inline-block w-36 text-white font-medium">
Captcha enabled:
</span>
{status.value?.hasCaptcha ? "Yes" : "No"}
</p>
<Divider />
</>
) : null}
</div>
</div>
<div className="w-full flex gap-6 justify-between items-center">
{!status.hasTested ? (
<p>Run the test to validate backend</p>
) : status.success ? (
<p className="flex items-center text-md">
<Icon
icon={Icons.CIRCLE_CHECK}
className="text-video-scraping-success mr-2"
/>
Backend is working as expected
</p>
) : (
<div>
<p className="text-white font-bold w-full mb-3 flex items-center gap-1">
<Icon
icon={Icons.CIRCLE_EXCLAMATION}
className="text-video-scraping-error mr-2"
/>
Backend is not working
</p>
<p>{status.errorText}</p>
</div>
)}
<Button
theme="purple"
className="whitespace-nowrap"
onClick={runTests}
>
{testState.loading ? <Spinner className="text-base mr-2" /> : null}
Test backend
</Button>
</div>
</Box>
</>
);
}

View File

@ -77,7 +77,13 @@ export function TMDBTestPart() {
</p>
) : (
<>
<p className="text-white font-bold">TMDB is not working</p>
<p className="text-white font-bold w-full mb-3 flex items-center gap-1">
<Icon
icon={Icons.CIRCLE_EXCLAMATION}
className="text-video-scraping-error mr-2"
/>
TMDB is not working
</p>
<p>{status.errorText}</p>
</>
)}