improve data display

2025-06-14 16:39:53 +00:00 · 2024-11-15 08:06:39 +08:00 · 2024-11-15 08:06:39 +08:00 · 8901f5d40e
commit 8901f5d40e
parent 9132d47f4d
8 changed files with 385 additions and 23 deletions
--- a/ui/src/components/certimate/DeployEditDialog.tsx
+++ b/ui/src/components/certimate/DeployEditDialog.tsx
@ -27,7 +27,7 @@ import DeployToLocal from "./DeployToLocal";
 import DeployToSSH from "./DeployToSSH";
 import DeployToWebhook from "./DeployToWebhook";
 import DeployToKubernetesSecret from "./DeployToKubernetesSecret";
-import DeployToVolcengineLive from "./DeployToVolcengineLive"
+import DeployToVolcengineLive from "./DeployToVolcengineLive";
 import { deployTargetsMap, type DeployConfig } from "@/domain/domain";
 import { accessProvidersMap } from "@/domain/access";
 import { useConfigContext } from "@/providers/config";
--- a/ui/src/components/notify/Mail.tsx
+++ b/ui/src/components/notify/Mail.tsx
@ -0,0 +1,327 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { getErrMessage } from "@/lib/error";
+import { NotifyChannelEmail, NotifyChannels } from "@/domain/settings";
+import { useNotifyContext } from "@/providers/notify";
+import { update } from "@/repository/settings";
+import Show from "@/components/Show";
+import { notifyTest } from "@/api/notify";
+
+type MailSetting = {
+  id: string;
+  name: string;
+  data: NotifyChannelEmail;
+};
+
+const Mail = () => {
+  const { config, setChannels } = useNotifyContext();
+  const { t } = useTranslation();
+
+  const [changed, setChanged] = useState<boolean>(false);
+
+  const [mail, setmail] = useState<MailSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
+    },
+  });
+
+  const [originMail, setoriginMail] = useState<MailSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
+    },
+  });
+
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailMail();
+    setoriginMail({
+      id: config.id ?? "",
+      name: "mail",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailMail();
+    setmail({
+      id: config.id ?? "",
+      name: "mail",
+      data,
+    });
+  }, [config]);
+
+  const { toast } = useToast();
+
+  const getDetailMail = () => {
+    const df: NotifyChannelMail = {
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.mail) {
+      return df;
+    }
+
+    return chanels.mail as NotifyChannelMail;
+  };
+
+  const checkChanged = (data: NotifyChannelMail) => {
+    if (
+      data.senderAddress !== originMail.data.senderAddress ||
+      data.receiverAddresses !== originMail.data.receiverAddresses ||
+      data.smtpHostAddr !== originMail.data.smtpHostAddr ||
+      data.smtpHostPort !== originMail.data.smtpHostPort ||
+      data.username !== originMail.data.username ||
+      data.password !== originMail.data.password
+    ) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
+  const handleSaveClick = async () => {
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          mail: {
+            ...mail.data,
+          },
+        },
+      });
+
+      setChannels(resp);
+      toast({
+        title: t("common.save.succeeded.message"),
+        description: t("settings.notification.config.saved.message"),
+      });
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("common.save.failed.message"),
+        description: `${t("settings.notification.config.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handlePushTestClick = async () => {
+    try {
+      await notifyTest("mail");
+
+      toast({
+        title: t("settings.notification.config.push.test.message.success.message"),
+        description: t("settings.notification.config.push.test.message.success.message"),
+      });
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("settings.notification.config.push.test.message.failed.message"),
+        description: `${t("settings.notification.config.push.test.message.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleSwitchChange = async () => {
+    const newData = {
+      ...mail,
+      data: {
+        ...mail.data,
+        enabled: !mail.data.enabled,
+      },
+    };
+    setmail(newData);
+
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          mail: {
+            ...newData.data,
+          },
+        },
+      });
+
+      setChannels(resp);
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("common.save.failed.message"),
+        description: `${t("settings.notification.config.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Input
+        placeholder={t("settings.notification.mail.sender_address.placeholder")}
+        value={mail.data.senderAddress}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              senderAddress: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.receiver_address.placeholder")}
+        className="mt-2"
+        value={mail.data.receiverAddresses}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              receiverAddresses: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.smtp_host.placeholder")}
+        className="mt-2"
+        value={mail.data.smtpHostAddr}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              smtpHostAddr: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.smtp_port.placeholder")}
+        className="mt-2"
+        value={mail.data.smtpHostPort}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              smtpHostPort: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.username.placeholder")}
+        className="mt-2"
+        value={mail.data.username}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              username: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.password.placeholder")}
+        className="mt-2"
+        value={mail.data.password}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              password: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <div className="flex items-center space-x-1 mt-2">
+        <Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
+        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+      </div>
+
+      <div className="flex justify-end mt-2">
+        <Show when={changed}>
+          <Button
+            onClick={() => {
+              handleSaveClick();
+            }}
+          >
+            {t("common.save")}
+          </Button>
+        </Show>
+
+        <Show when={!changed && mail.id != ""}>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handlePushTestClick();
+            }}
+          >
+            {t("settings.notification.config.push.test.message")}
+          </Button>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default Mail;
+
--- a/ui/src/components/workflow/CustomAlertDialog.tsx
+++ b/ui/src/components/workflow/CustomAlertDialog.tsx
@ -24,12 +24,12 @@ const CustomAlertDialog = ({ open, title, description, confirm, onOpenChange }:
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
-        <AlertDialogHeader>
+        <AlertDialogHeader className="dark:text-stone-200">
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
-          <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+          <AlertDialogCancel className="dark:text-stone-200">{t("common.cancel")}</AlertDialogCancel>
          <AlertDialogAction
            onClick={() => {
              confirm && confirm();
--- a/ui/src/components/workflow/DataTable.tsx
+++ b/ui/src/components/workflow/DataTable.tsx
@ -3,20 +3,23 @@ import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, Paginati
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";

-interface DataTableProps<TData, TValue> {
+interface DataTableProps<TData extends { id: string }, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  pageCount: number;
  onPageChange?: (pageIndex: number, pageSize?: number) => Promise<void>;
 }

-export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
+export function DataTable<TData extends { id: string }, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });

+  const navigate = useNavigate();
+
  const pagination = {
    pageIndex,
    pageSize,
@ -39,13 +42,17 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
    onPageChange?.(pageIndex, pageSize);
  }, [pageIndex]);

+  const handleRowClick = (id: string) => {
+    navigate(`/workflow/detail?id=${id}`);
+  };
+
  return (
    <>
      <div className="rounded-md">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id} className="border-muted-foreground">
+              <TableRow key={headerGroup.id} className="dark:border-muted-foreground">
                {headerGroup.headers.map((header) => {
                  return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
                })}
@ -55,7 +62,15 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
          <TableBody className="dark:text-stone-200">
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"} className="border-muted-foreground">
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="dark:border-muted-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleRowClick(row.original.id);
+                  }}
+                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                  ))}
@ -84,4 +99,3 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
    </>
  );
 }
-
--- a/ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
+++ b/ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
@ -8,7 +8,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import { memo, useState } from "react";

 type WorkflowNameEditDialogProps = {
  trigger: React.ReactNode;
@ -28,10 +28,6 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: workflow.name,
-      description: workflow.description,
-    },
  });

  const { t } = useTranslation();
@ -72,7 +68,14 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
                    <FormItem>
                      <FormLabel>名称</FormLabel>
                      <FormControl>
-                        <Input placeholder="请输入流程名称" {...field} />
+                        <Input
+                          placeholder="请输入流程名称"
+                          {...field}
+                          defaultValue={workflow.name}
+                          onChange={(e) => {
+                            form.setValue("name", e.target.value);
+                          }}
+                        />
                      </FormControl>

                      <FormMessage />
@ -87,7 +90,14 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
                    <FormItem>
                      <FormLabel>说明</FormLabel>
                      <FormControl>
-                        <Input placeholder="请输入流程说明" {...field} />
+                        <Input
+                          placeholder="请输入流程说明"
+                          {...field}
+                          defaultValue={workflow.description}
+                          onChange={(e) => {
+                            form.setValue("description", e.target.value);
+                          }}
+                        />
                      </FormControl>

                      <FormMessage />
@ -107,4 +117,4 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
  );
 };

-export default WorkflowNameBaseInfoDialog;
+export default memo(WorkflowNameBaseInfoDialog);
--- a/ui/src/domain/workflow.ts
+++ b/ui/src/domain/workflow.ts
@ -4,7 +4,7 @@ import i18n from "@/i18n";
 import { deployTargets, KVType } from "./domain";

 export type Workflow = {
-  id?: string;
+  id: string;
  name: string;
  description?: string;
  type: string;
@ -125,6 +125,7 @@ export const initWorkflow = (): Workflow => {
  root.next = newWorkflowNode(WorkflowNodeType.Notify, {});

  return {
+    id: "",
    name: i18n.t("workflow.default.name"),
    type: "auto",
    crontab: "0 0 * * *",
--- a/ui/src/pages/workflow/index.tsx
+++ b/ui/src/pages/workflow/index.tsx
@ -90,6 +90,9 @@ const Workflow = () => {
              onCheckedChange={() => {
                handleCheckedChange(row.original.id ?? "");
              }}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
            />
          </>
        );
@ -127,7 +130,8 @@ const Workflow = () => {
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>操作</DropdownMenuLabel>
              <DropdownMenuItem
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                  navigate(`/workflow/detail?id=${workflow.id}`);
                }}
              >
@ -135,7 +139,8 @@ const Workflow = () => {
              </DropdownMenuItem>
              <DropdownMenuItem
                className="text-red-500"
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                  handleDeleteClick(workflow.id ?? "");
                }}
              >
--- a/ui/src/providers/workflow/index.ts
+++ b/ui/src/providers/workflow/index.ts
@ -31,20 +31,20 @@ export type WorkflowState = {

 export const useWorkflowStore = create<WorkflowState>((set, get) => ({
  workflow: {
-    id: "root",
+    id: "",
    name: "placeholder",
    type: WorkflowNodeType.Start,
  },
  initialized: false,
  init: async (id?: string) => {
    let data = {
+      id: "",
      name: "placeholder",
      type: "auto",
    };

    if (!id) {
      data = initWorkflow();
-      data = await save(data);
    } else {
      data = await getWrokflow(id);
    }
@ -55,11 +55,15 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
    });
  },
  setBaseInfo: async (name: string, description: string) => {
-    const resp = await save({
+    const data: Record<string, string | boolean | WorkflowNode> = {
      id: (get().workflow.id as string) ?? "",
      name: name,
      description: description,
-    });
+    };
+    if (!data.id) {
+      data.draft = get().workflow.draft as WorkflowNode;
+    }
+    const resp = await save(data);
    set((state: WorkflowState) => {
      return {
        workflow: {
@ -201,3 +205,4 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
    return getWorkflowOutputBeforeId(get().workflow.draft as WorkflowNode, id, type);
  },
 }));
+