feat(web): optimize the state display of application list (#1403)

* feat: add color for the delete IconText

* fix: fix the error color in light and dark mode

* feat: optimize the state of app

* chore: update

* fix(web): fix app state display

---------

Co-authored-by: heheer <[email protected]>

Author: imyuanx

web/src/constants/index.ts

@@ -35,13 +35,12 @@ export enum SUPPORTED_METHODS {
 export enum APP_PHASE_STATUS {
   Creating = "Creating",
   Created = "Created",
-  Started = "Started",
   Starting = "Starting",
-  Restarting = "Restarting",
-  Deleting = "Deleting",
-  Deleted = "Deleted",
+  Started = "Started",
   Stopping = "Stopping",
   Stopped = "Stopped",
+  Deleting = "Deleting",
+  Deleted = "Deleted",
 }
 
 export enum BUCKET_POLICY_TYPE {

web/src/pages/globalStore.ts

@@ -3,7 +3,7 @@ import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 
-import { APP_STATUS, CHAKRA_UI_COLOR_MODE_KEY } from "@/constants";
+import { APP_PHASE_STATUS, APP_STATUS, CHAKRA_UI_COLOR_MODE_KEY } from "@/constants";
 import { formatPort } from "@/utils/format";
 
 import { TApplicationDetail, TRegion, TRuntime } from "@/apis/typing";
@@ -93,7 +93,11 @@ const useGlobalStore = create<State>()(
           set((state) => {
             if (state.currentApp) {
               state.currentApp.phase =
-                newState === APP_STATUS.Restarting ? "Restarting" : "Stopping";
+                newState === APP_STATUS.Running
+                  ? APP_PHASE_STATUS.Starting
+                  : newState === APP_STATUS.Restarting
+                  ? "Restarting"
+                  : APP_PHASE_STATUS.Stopping;
             }
           });
         }

web/src/pages/home/index.tsx

@@ -12,6 +12,7 @@ export const APP_LIST_QUERY_KEY = ["appListQuery"];
 
 function HomePage() {
   const [shouldRefetch, setShouldRefetch] = useState(true);
+
   useEffect(() => {
     setTimeout(() => {
       setShouldRefetch(true);
@@ -39,22 +40,11 @@ function HomePage() {
     },
   );
 
-  if (appListQuery.isLoading) {
-    return null;
-  }
-
   return (appListQuery.data?.data || []).length === 0 ? (
     <Empty />
   ) : (
     <div className="mx-auto mt-10 flex w-11/12 flex-col lg:w-8/12">
-      <List
-        appListQuery={appListQuery}
-        setShouldRefetch={() => {
-          setTimeout(() => {
-            setShouldRefetch(true);
-          }, 1500);
-        }}
-      />
+      <List appListQuery={appListQuery} />
     </div>
   );
 }

web/src/pages/home/mods/List/index.tsx

@@ -16,7 +16,7 @@ import {
   MenuList,
   useColorModeValue,
 } from "@chakra-ui/react";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import CopyText from "@/components/CopyText";
 import FileTypeIcon from "@/components/FileTypeIcon";
@@ -25,6 +25,7 @@ import { APP_PHASE_STATUS, APP_STATUS, Pages } from "@/constants";
 import { formatDate } from "@/utils/format";
 import getRegionById from "@/utils/getRegionById";
 
+import { APP_LIST_QUERY_KEY } from "../../index";
 import CreateAppModal from "../CreateAppModal";
 import DeleteAppModal from "../DeleteAppModal";
 import StatusBadge from "../StatusBadge";
@@ -35,15 +36,16 @@ import { TApplicationItem } from "@/apis/typing";
 import { ApplicationControllerUpdateState } from "@/apis/v1/applications";
 import useGlobalStore from "@/pages/globalStore";
 
-function List(props: { appListQuery: any; setShouldRefetch: any }) {
+function List(props: { appListQuery: any }) {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
   const { setCurrentApp, regions } = useGlobalStore();
 
   const [searchKey, setSearchKey] = useState("");
 
-  const { appListQuery, setShouldRefetch } = props;
+  const queryClient = useQueryClient();
+  const { appListQuery } = props;
   const bg = useColorModeValue("lafWhite.200", "lafDark.200");
 
   const updateAppStateMutation = useMutation((params: any) =>
@@ -173,7 +175,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                                   : APP_STATUS.Restarting,
                             });
                             if (!res.error) {
-                              setShouldRefetch(true);
+                              queryClient.invalidateQueries(APP_LIST_QUERY_KEY);
                             }
                           }}
                         >
@@ -190,11 +192,13 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                             display={"block"}
                             onClick={async (event: any) => {
                               event?.preventDefault();
-                              await updateAppStateMutation.mutateAsync({
+                              const res = await updateAppStateMutation.mutateAsync({
                                 appid: item.appid,
-                                state: APP_PHASE_STATUS.Stopped,
+                                state: APP_STATUS.Stopped,
                               });
-                              setShouldRefetch(true);
+                              if (!res.error) {
+                                queryClient.invalidateQueries(APP_LIST_QUERY_KEY);
+                              }
                             }}
                           >
                             <a className="text-primary block" href="/stop">
@@ -203,7 +207,10 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                           </MenuItem>
                         )}
 
-                        <DeleteAppModal item={item} onSuccess={() => setShouldRefetch(true)}>
+                        <DeleteAppModal
+                          item={item}
+                          onSuccess={() => queryClient.invalidateQueries(APP_LIST_QUERY_KEY)}
+                        >
                           <MenuItem minH="40px" display={"block"}>
                             <a className="block text-error-500" href="/delete">
                               {t("DeleteApp")}

web/src/pages/home/mods/StatusBadge/index.tsx

@@ -24,24 +24,43 @@ export default function StatusBadge(props: {
 }) {
   const { statusConditions = APP_PHASE_STATUS.Started, state, className } = props;
   return (
-    <div className={clsx("flex", className)}>
-      <div
-        className={clsx(
-          styles.badgeStyle,
-          styles[colorScheme[statusConditions]],
-          "px-2 py-1 lg:px-3",
-        )}
-      >
-        <span>{statusConditions}</span>
-      </div>
-      {statusConditions === APP_PHASE_STATUS.Started ||
-      (state !== APP_PHASE_STATUS.Restarting && statusConditions === APP_PHASE_STATUS.Stopped) ? (
-        ""
+    <>
+      {state === "Restarting" ? (
+        <div className={clsx("flex", className)}>
+          <div
+            className={clsx(
+              styles.badgeStyle,
+              styles[colorScheme["Restarting"]],
+              "px-2 py-1 lg:px-3",
+            )}
+          >
+            <span>{"Restarting"}</span>
+          </div>
+          <div className="flex items-center pr-2">
+            <Spinner size="xs" />
+          </div>
+        </div>
       ) : (
-        <div className="flex items-center pr-2">
-          <Spinner size="xs" />
+        <div className={clsx("flex", className)}>
+          <div
+            className={clsx(
+              styles.badgeStyle,
+              styles[colorScheme[statusConditions]],
+              "px-2 py-1 lg:px-3",
+            )}
+          >
+            <span>{statusConditions}</span>
+          </div>
+          {statusConditions === APP_PHASE_STATUS.Started ||
+          statusConditions === APP_PHASE_STATUS.Stopped ? (
+            ""
+          ) : (
+            <div className="flex items-center pr-2">
+              <Spinner size="xs" />
+            </div>
+          )}
         </div>
       )}
-    </div>
+    </>
   );
 }