refactor: simplify config api

This commit is contained in:
ReaJason
2026-08-03 23:54:06 +08:00
parent 82bbd2cf0a
commit 8f2024917c
7 changed files with 102 additions and 76 deletions
@@ -25,7 +25,7 @@ import {
import { Switch } from "@/components/ui/switch";
import { Tabs } from "@/components/ui/tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { type MainConfig, type ServerConfig, ShellToolType } from "@/types/memshell";
import { type MainConfig, ShellToolType } from "@/types/memshell";
import { Spinner } from "../ui/spinner";
import { JREVersionFormField } from "./jreversion-field";
@@ -35,11 +35,9 @@ import { ProxyTabContent } from "./tabs/proxy-tab";
export default function MainConfigCard({
mainConfig,
form,
servers,
}: Readonly<{
mainConfig: MainConfig | undefined;
form: UseFormReturn<MemShellFormSchema>;
servers?: ServerConfig;
}>) {
const { t } = useTranslation(["common", "memshell"]);
@@ -60,7 +58,7 @@ export default function MainConfigCard({
return mainConfig[server];
}, [mainConfig, server]);
const serverOptions = useMemo(() => Object.keys(servers ?? {}), [servers]);
const serverOptions = useMemo(() => Object.keys(mainConfig ?? {}), [mainConfig]);
const shellTools = useMemo(() => {
if (!serverToolMap) {
@@ -71,11 +69,11 @@ export default function MainConfigCard({
}, [serverToolMap]);
const customShellTypes = useMemo(() => {
if (!server) {
if (!serverToolMap) {
return [];
}
return servers?.[server] ?? [];
}, [server, servers]);
return Array.from(new Set(Object.values(serverToolMap).flat()));
}, [serverToolMap]);
const shellTypes = useMemo(() => {
if (!serverToolMap || !server) {
@@ -1,4 +1,3 @@
import type { ServerConfig } from "@/types/memshell";
import type { ProbeShellFormSchema } from "@/types/schema";
import { InfoIcon, ServerIcon } from "lucide-react";
@@ -62,10 +61,10 @@ const DEFAULT_FORM_VALUES = {
interface MainConfigCardProps {
readonly form: UseFormReturn<ProbeShellFormSchema>;
readonly servers?: ServerConfig;
readonly responseBodyServers?: string[];
}
export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
export default function MainConfigCard({ form, responseBodyServers }: MainConfigCardProps) {
const { t } = useTranslation(["common", "probeshell"]);
const watchedProbeMethod = form.watch("probeMethod");
const watchedProbeContent = form.watch("probeContent");
@@ -155,13 +154,11 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
<SelectValue data-placeholder={t("placeholders.select")} />
</SelectTrigger>
<SelectContent>
{Object.keys(servers ?? {})
.filter((s) => s !== "SpringWebFlux" && s !== "XXLJOB")
.map((server: string) => (
<SelectItem key={server} value={server}>
{server}
</SelectItem>
))}
{responseBodyServers?.map((server) => (
<SelectItem key={server} value={server}>
{server}
</SelectItem>
))}
</SelectContent>
</Select>
{fieldState.error && <FieldError errors={[fieldState.error]} />}
+1 -9
View File
@@ -18,7 +18,6 @@ import {
type MemShellGenerateResponse,
type MemShellResult,
type PackerConfig,
type ServerConfig,
ShellToolType,
} from "@/types/memshell";
import {
@@ -65,18 +64,11 @@ const fetchJson = async <T,>(url: string): Promise<T> => {
return response.json() as Promise<T>;
};
const fetchServerConfig = () => fetchJson<ServerConfig>(`${env.API_URL}/api/config/servers`);
const fetchMainConfig = () => fetchJson<MainConfig>(`${env.API_URL}/api/config`);
const fetchPackerConfig = () => fetchJson<PackerConfig>(`${env.API_URL}/api/config/packers/tree`);
export default function MemShellPage() {
const { data: serverConfig } = useQuery<ServerConfig>({
queryKey: ["serverConfig"],
queryFn: fetchServerConfig,
});
const { data: mainConfig } = useQuery<MainConfig>({
queryKey: ["mainConfig"],
queryFn: fetchMainConfig,
@@ -145,7 +137,7 @@ export default function MemShellPage() {
<div className="max-w-8xl container mx-auto p-6">
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6 xl:flex-row">
<div className="flex w-full flex-col gap-2 xl:w-1/2">
<MainConfigCard servers={serverConfig} mainConfig={mainConfig} form={form} />
<MainConfigCard mainConfig={mainConfig} form={form} />
<PackageConfigCard packerConfig={packerConfig} form={form} />
<Button className="w-full" type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? (
+6 -6
View File
@@ -1,4 +1,4 @@
import type { APIErrorResponse, PackerConfig, ServerConfig } from "@/types/memshell";
import type { APIErrorResponse, PackerConfig } from "@/types/memshell";
import type { ProbeShellGenerateResponse, ProbeShellResult } from "@/types/probeshell";
import { useQuery } from "@tanstack/react-query";
@@ -22,13 +22,13 @@ import {
} from "@/types/schema";
import { transformToProbePostData } from "@/utils/transformer";
import { baseOptions } from "../lib/layout.shared";
import { baseOptions } from "@/lib/layout.shared";
export default function ProbeShellGenerator() {
const { data: serverConfig } = useQuery<ServerConfig>({
queryKey: ["serverConfig"],
const { data: responseBodyServers } = useQuery<string[]>({
queryKey: ["probeResponseBodyServers"],
queryFn: async () => {
const response = await fetch(`${env.API_URL}/api/config/servers`);
const response = await fetch(`${env.API_URL}/api/config/probe/response-body/servers`);
return await response.json();
},
});
@@ -102,7 +102,7 @@ export default function ProbeShellGenerator() {
<div className="max-w-8xl container mx-auto p-6">
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6 xl:flex-row">
<div className="flex w-full flex-col gap-2 xl:w-1/2">
<MainConfigCard form={form} servers={serverConfig} />
<MainConfigCard form={form} responseBodyServers={responseBodyServers} />
<PackageConfigCard form={form} packerConfig={packerConfig} />
<Button className="w-full" type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? (