fix: refresh

labring · Sep 23, 2024 · 43de12d · 43de12d
1 parent 49f14ec
commit 43de12d
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 55 deletions.
diff --git a/frontend/providers/cronjob/public/locales/en/common.json b/frontend/providers/cronjob/public/locales/en/common.json
@@ -198,5 +198,7 @@
   "Deploy": "Deploy",
   "Env Placeholder": "one per line, key and value separated by colon or equals sign, e.g.:\nmongoUrl=127.0.0.1:8000\nredisUrl:127.0.0.0:8001\n-env1 =test",
   "Environment Variables": "Environment Variables",
-  "implement": "Implement"
-}
+  "implement": "Implement",
+  "job_implement_success": "Job has been executed",
+  "job_implement_error": "An error occurred while executing the job"
+}
diff --git a/frontend/providers/cronjob/public/locales/zh/common.json b/frontend/providers/cronjob/public/locales/zh/common.json
@@ -244,5 +244,7 @@
   "Env Placeholder": "环境变量，每行一个，可用冒号或等号分隔，例如：\nmongoUrl=127.0.0.1:8000\nredisUrl:127.0.0.0:8001\n- env1=test",
   "Edit Environment Variables": "编辑环境变量",
   "Environment Variables": "环境变量",
-  "implement": "执行"
-}
+  "implement": "执行",
+  "job_implement_success": "Job 执行成功",
+  "job_implement_error": "Job 执行失败"
+}
diff --git a/frontend/providers/cronjob/src/pages/job/detail/components/AppBaseInfo.tsx b/frontend/providers/cronjob/src/pages/job/detail/components/AppBaseInfo.tsx
@@ -1,29 +1,18 @@
-import { getJobListEventsAndLogs } from '@/api/job';
 import MyTooltip from '@/components/MyTooltip';
 import { CronJobTypeList } from '@/constants/job';
 import { useJobStore } from '@/store/job';
+import { JobList } from '@/types/job';
 import { useCopyData } from '@/utils/tools';
 import { Box, Flex, Icon, Text } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import React, { useMemo } from 'react';
 
-export default function AppBaseInfo({ appName }: { appName: string }) {
+export default function AppBaseInfo({ data }: { data?: JobList }) {
   const { t } = useTranslation();
   const { JobDetail, loadJobDetail } = useJobStore();
   const { copyData } = useCopyData();
 
-  const { data, isLoading } = useQuery(
-    ['getJobListEventsAndLogs', appName],
-    () => getJobListEventsAndLogs(appName),
-    {
-      onError(err) {
-        console.log(err);
-      }
-    }
-  );
-
-  const [totalAmount, successAmount, failAmount] = useMemo(() => {
+  const [successAmount, failAmount] = useMemo(() => {
     if (data?.total) {
       return [data?.total, data?.successAmount, data.total - data.successAmount];
     } else {

diff --git a/frontend/providers/cronjob/src/pages/job/detail/components/AppMainInfo.tsx b/frontend/providers/cronjob/src/pages/job/detail/components/AppMainInfo.tsx
@@ -1,23 +1,21 @@
 import { getJobListEventsAndLogs, getPodLogs } from '@/api/job';
 import MyIcon from '@/components/Icon';
+import { JobList } from '@/types/job';
 import { Box, Flex, Icon, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useMemo, useState } from 'react';
 
-export default function AppBaseInfo({ appName }: { appName: string }) {
+export default function AppBaseInfo({
+  joblist,
+  isLoading
+}: {
+  joblist?: JobList;
+  isLoading: boolean;
+}) {
   const { t } = useTranslation();
   const [active, setActive] = useState(0);
-  const { data, isLoading } = useQuery(
-    ['getJobListEventsAndLogs', appName],
-    () => getJobListEventsAndLogs(appName),
-    {
-      onError(err) {
-        console.log(err);
-      }
-    }
-  );
-  const ActivePod = useMemo(() => data?.history[active], [active, data]);
+  const ActivePod = useMemo(() => joblist?.history[active], [active, joblist]);
   useQuery(
     ['getPodLogs', ActivePod?.podName],
     () => ActivePod?.podName && getPodLogs(ActivePod.podName),
@@ -53,11 +51,11 @@ export default function AppBaseInfo({ appName }: { appName: string }) {
           </Icon>
           <Text ml="12px">{t('Historical Mission')}</Text>
         </Flex>
-        <Text>{data?.total}</Text>
+        <Text>{joblist?.total}</Text>
       </Flex>
       <Flex flex={1} overflow={'hidden'}>
         <Box flex={'0 0 300px'} overflowY={'auto'} borderRight={'1px solid #EFF0F1'} pt="14px">
-          {data?.history?.map((jobItem, i) => (
+          {joblist?.history?.map((jobItem, i) => (
             <Box
               cursor={'pointer'}
               px="20px"
@@ -76,7 +74,7 @@ export default function AppBaseInfo({ appName }: { appName: string }) {
                   left: '-1.5px',
                   w: '2px',
                   h: '100%',
-                  backgroundColor: `${i === data.history.length - 1 ? 'transparent' : '#DCE7F1'}`
+                  backgroundColor: `${i === joblist.history.length - 1 ? 'transparent' : '#DCE7F1'}`
                 }}
                 _before={{
                   content: '""',

diff --git a/frontend/providers/cronjob/src/pages/job/detail/components/Header.tsx b/frontend/providers/cronjob/src/pages/job/detail/components/Header.tsx
@@ -19,14 +19,16 @@ const Header = ({
   isPause = false,
   isLargeScreen = true,
   setShowSlider,
-  refetch
+  refetchCronJob,
+  refetchJob
 }: {
   appStatus: CronJobStatusMapType;
   appName?: string;
   isPause?: boolean;
   isLargeScreen: boolean;
   setShowSlider: Dispatch<boolean>;
-  refetch: () => void;
+  refetchCronJob: () => void;
+  refetchJob: () => void;
 }) => {
   const { t } = useTranslation();
   const router = useRouter();
@@ -64,28 +66,27 @@ const Header = ({
       console.error(error);
     }
     setLoading(false);
-    refetch();
-  }, [appName, refetch, toast]);
+    refetchCronJob();
+  }, [appName, refetchCronJob, toast]);
 
   const handleRunJob = useCallback(async () => {
     try {
       setLoading(true);
       await implementJob({ jobName: appName });
       toast({
-        title: 'Job已执行',
+        title: t('job_implement_success'),
         status: 'success'
       });
-      router.replace(`/job/detail?name=${appName}`);
     } catch (error: any) {
       toast({
-        title: typeof error === 'string' ? error : error.message || '执行Job出现了意外',
+        title: typeof error === 'string' ? error : error.message || t('job_implement_error'),
         status: 'error'
       });
       console.error(error);
     }
     setLoading(false);
-    refetch();
-  }, [appName, refetch, toast]);
+    refetchJob();
+  }, [appName, refetchJob, toast]);
 
   const handleStartApp = useCallback(async () => {
     try {
@@ -103,8 +104,8 @@ const Header = ({
       console.error(error);
     }
     setLoading(false);
-    refetch();
-  }, [appName, refetch, toast]);
+    refetchCronJob();
+  }, [appName, refetchCronJob, toast]);
 
   return (
     <Flex h={'86px'} alignItems={'center'}>

diff --git a/frontend/providers/cronjob/src/pages/job/detail/index.tsx b/frontend/providers/cronjob/src/pages/job/detail/index.tsx
@@ -1,11 +1,12 @@
 import { useLoading } from '@/hooks/useLoading';
+import { getJobListEventsAndLogs } from '@/api/job';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useJobStore } from '@/store/job';
 import { serviceSideProps } from '@/utils/i18n';
 import { Box, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import AppBaseInfo from './components/AppBaseInfo';
 import AppMainInfo from './components/AppMainInfo';
 import Header from './components/Header';
@@ -18,23 +19,41 @@ export default function DetailPage({ appName }: { appName: string }) {
   const [showSlider, setShowSlider] = useState(false);
   const isLargeScreen = useMemo(() => screenWidth > 1280, [screenWidth]);
 
-  const { refetch } = useQuery(['getCronJobDetail', appName], () => loadJobDetail(appName), {
+  const {
+    data,
+    isLoading,
+    refetch: refetchPods
+  } = useQuery(['getJobListEventsAndLogs', appName], () => getJobListEventsAndLogs(appName), {
     onError(err) {
-      toast({
-        title: String(err),
-        status: 'error'
-      });
+      console.log(err);
     }
   });
 
+  const { refetch: refetchJobDetail } = useQuery(
+    ['getCronJobDetail', appName],
+    () => {
+      console.log('appName', appName);
+      return loadJobDetail(appName);
+    },
+    {
+      onError(err) {
+        toast({
+          title: String(err),
+          status: 'error'
+        });
+      }
+    }
+  );
+
   return (
     <Flex flexDirection={'column'} height={'100vh'} backgroundColor={'#F3F4F5'} px={9} pb={4}>
       <Box>
         <Header
           appName={appName}
           appStatus={JobDetail?.status}
           isPause={JobDetail?.isPause}
-          refetch={refetch}
+          refetchCronJob={refetchJobDetail}
+          refetchJob={refetchPods}
           setShowSlider={setShowSlider}
           isLargeScreen={isLargeScreen}
         />
@@ -60,7 +79,7 @@ export default function DetailPage({ appName }: { appName: string }) {
                 transform: `translateX(${showSlider ? '0' : '-1000'}px)`
               })}
         >
-          {JobDetail ? <AppBaseInfo appName={appName} /> : <Loading loading={true} fixed={false} />}
+          {JobDetail ? <AppBaseInfo data={data} /> : <Loading loading={true} fixed={false} />}
         </Box>
         <Flex
           border={'1px solid #DEE0E2'}
@@ -69,7 +88,11 @@ export default function DetailPage({ appName }: { appName: string }) {
           flex={'1 1 740px'}
           bg={'white'}
         >
-          {JobDetail ? <AppMainInfo appName={appName} /> : <Loading loading={true} fixed={false} />}
+          {JobDetail ? (
+            <AppMainInfo joblist={data} isLoading={isLoading} />
+          ) : (
+            <Loading loading={true} fixed={false} />
+          )}
         </Flex>
       </Flex>
       {/* mask */}

diff --git a/frontend/providers/cronjob/src/pages/jobs/components/jobList.tsx b/frontend/providers/cronjob/src/pages/jobs/components/jobList.tsx
@@ -55,20 +55,19 @@ const JobList = ({
     },
     [refetchApps, setLoading, t, toast]
   );
-
   const handleImplementJob = useCallback(
     async (job: CronJobListItemType) => {
       try {
         setLoading(true);
         await implementJob({ jobName: job.name });
         toast({
-          title: t('Job已执行'),
+          title: t('job_implement_success'),
           status: 'success'
         });
         router.replace(`/job/detail?name=${job.name}`);
       } catch (error: any) {
         toast({
-          title: typeof error === 'string' ? error : error.message || t('执行Job出现了意外'),
+          title: typeof error === 'string' ? error : error.message || t('job_implement_error'),
           status: 'error'
         });
         console.error(error);