From bb19f134479c5c01015a6f9e225235e7c5277cd6 Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Tue, 11 Jul 2023 18:44:44 +0800
Subject: [PATCH] fix(web): fix ui & date range (#1382)

* fix(web):fix ui & date range

* fix(web): fix date range
---
 web/src/components/DateRangePicker/index.tsx  |  6 +-
 .../pages/app/setting/AppEnvList/index.tsx    |  2 +-
 .../setting/AppInfoList/InfoDetail/index.tsx  | 40 ++++-------
 .../pages/app/setting/AppInfoList/index.tsx   | 67 +++++++++++--------
 web/src/pages/app/setting/Usage/index.tsx     | 44 +++++++-----
 web/src/pages/app/setting/index.tsx           |  2 +-
 web/src/pages/home/mods/StatusBadge/index.tsx |  6 +-
 7 files changed, 90 insertions(+), 77 deletions(-)

diff --git a/web/src/components/DateRangePicker/index.tsx b/web/src/components/DateRangePicker/index.tsx
index 8ec30d7aee..a6dc4c6100 100644
--- a/web/src/components/DateRangePicker/index.tsx
+++ b/web/src/components/DateRangePicker/index.tsx
@@ -76,7 +76,7 @@ export default function DateRangePicker(props: {
   return (
     <div
       className={clsx(
-        "flex h-8 rounded-md border border-grayModern-200",
+        "flex h-8 w-64 rounded-md border border-grayModern-200",
         !darkMode && "bg-grayModern-100",
       )}
     >
@@ -84,14 +84,14 @@ export default function DateRangePicker(props: {
         variant={"unstyled"}
         value={fromValue}
         onChange={handleFromChange}
-        className="!w-24 !pl-4"
+        className="flex-1 text-center"
       />
       <Box>-</Box>
       <Input
         variant={"unstyled"}
         value={toValue}
         onChange={handleToChange}
-        className="!w-20 !pl-2"
+        className="flex-1 text-center"
       />
       <Popover onClose={onClose}>
         <PopoverTrigger>
diff --git a/web/src/pages/app/setting/AppEnvList/index.tsx b/web/src/pages/app/setting/AppEnvList/index.tsx
index 67a7cee889..4d72432bac 100644
--- a/web/src/pages/app/setting/AppEnvList/index.tsx
+++ b/web/src/pages/app/setting/AppEnvList/index.tsx
@@ -27,7 +27,7 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
   const envValue = useRef(convertToEnv(environmentQuery?.data?.data));
   return (
     <>
-      <div className="absolute bottom-0 left-[280px] right-6 top-10 flex h-full flex-grow flex-col py-4">
+      <div className="absolute bottom-0 left-[280px] right-6 top-10 mr-6 flex h-full flex-grow flex-col py-4">
         <div
           className={clsx("relative h-[360px] rounded border", {
             "border-frostyNightfall-200": !(colorMode === COLOR_MODE.dark),
diff --git a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
index bfbf436a93..31333abe01 100644
--- a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
+++ b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
@@ -1,41 +1,29 @@
 import clsx from "clsx";
 
 import Content from "@/components/Content";
-import { Col, Row } from "@/components/Grid";
+import { Col } from "@/components/Grid";
 
 const InfoDetail = function (props: {
   title: string;
   className?: string;
-  leftData: any[];
-  rightData: any[];
+  data: { key: string; value: string }[];
 }) {
-  const { title, leftData, rightData, className } = props;
+  const { title, data, className } = props;
   return (
-    <div className={clsx("mb-4 rounded border px-4 py-4", className)}>
+    <div className={clsx("rounded-xl border p-6", className)}>
       <Content>
-        <Row className="mb-2">
-          <span className={clsx("relative inline-block text-2xl font-semibold text-primary-700")}>
+        <Col>
+          <span className={clsx("mb-5 flex items-center text-lg font-semibold")}>
+            <div className="mr-2 h-3 w-1 rounded-xl bg-primary-600" />
             {title}
           </span>
-        </Row>
-        <Row className="flex">
-          <Col className="border-r-2">
-            {leftData.map((item) => (
-              <div key={item.key} className="flex justify-between">
-                <span className="mr-2 text-grayModern-500">{item.key} :</span>
-                <span className="flex-1">{item.value}</span>
-              </div>
-            ))}
-          </Col>
-          <Col className="pl-6">
-            {rightData.map((item) => (
-              <div key={item.key} className="flex justify-between">
-                <span className="mr-2 text-grayModern-500">{item.key} :</span>
-                <span className="flex-1">{item.value}</span>
-              </div>
-            ))}
-          </Col>
-        </Row>
+          {data.map((item) => (
+            <div key={item.key} className="flex justify-between border-t border-dotted py-2">
+              <span className="text-grayModern-500">{item.key}</span>
+              <span>{item.value}</span>
+            </div>
+          ))}
+        </Col>
       </Content>
     </div>
   );
diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
index fb7335c182..4000938e47 100644
--- a/web/src/pages/app/setting/AppInfoList/index.tsx
+++ b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -2,10 +2,11 @@ import { useTranslation } from "react-i18next";
 import { MdPlayCircleOutline, MdRestartAlt } from "react-icons/md";
 import { RiDeleteBin6Line, RiShutDownLine } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
-import { Box, Button, HStack, useColorMode } from "@chakra-ui/react";
+import { Box, Button, HStack, useColorMode, VStack } from "@chakra-ui/react";
 import clsx from "clsx";
 
 import { APP_PHASE_STATUS, APP_STATUS, COLOR_MODE, Routes } from "@/constants/index";
+import { formatDate } from "@/utils/format";
 
 import InfoDetail from "./InfoDetail";
 
@@ -28,22 +29,20 @@ const AppEnvList = () => {
 
   return (
     <>
-      <div className="flex flex-col pt-12">
-        <div className="flex flex-none justify-between">
-          <HStack spacing={2}>
-            <Box
-              className={clsx("text-xl font-medium", {
-                "text-grayModern-100": darkMode,
-              })}
-            >
-              {currentApp?.name}
-            </Box>
-            <StatusBadge
-              className="rounded-full bg-primary-100"
-              statusConditions={currentApp?.phase}
-              state={currentApp?.state}
-            />
-          </HStack>
+      <div className="flex flex-col pt-10">
+        <VStack spacing={0}>
+          <StatusBadge
+            className="mb-3 rounded-full bg-primary-100"
+            statusConditions={currentApp?.phase}
+            state={currentApp?.state}
+          />
+          <Box
+            className={clsx("!mb-4 text-[20px] font-medium", {
+              "text-grayModern-100": darkMode,
+            })}
+          >
+            {currentApp?.name}
+          </Box>
           <HStack
             spacing={2}
             divider={
@@ -58,7 +57,9 @@ const AppEnvList = () => {
                 currentApp?.phase !== APP_PHASE_STATUS.Stopped &&
                 currentApp?.phase !== APP_PHASE_STATUS.Started
               }
-              variant={"text"}
+              color={"grayModern.600"}
+              bg={"none"}
+              _hover={{ color: "primary.600" }}
               onClick={() => {
                 updateCurrentApp(
                   currentApp!,
@@ -85,7 +86,9 @@ const AppEnvList = () => {
                 className="mr-2"
                 fontWeight={"semibold"}
                 size={"sm"}
-                variant={"text"}
+                color={"grayModern.600"}
+                bg={"none"}
+                _hover={{ color: "primary.600" }}
                 onClick={(event: any) => {
                   event?.preventDefault();
                   updateCurrentApp(currentApp!, APP_STATUS.Stopped);
@@ -102,25 +105,34 @@ const AppEnvList = () => {
                 navigate(Routes.dashboard);
               }}
             >
-              <Button className="mr-2" fontWeight={"semibold"} size={"sm"} variant={"warnText"}>
+              <Button
+                className="mr-2"
+                fontWeight={"semibold"}
+                size={"sm"}
+                color={"grayModern.600"}
+                bg={"none"}
+                _hover={{ color: "error.500" }}
+              >
                 <RiDeleteBin6Line size={16} className="mr-1" />
                 {t("SettingPanel.Delete")}
               </Button>
             </DeleteAppModal>
           </HStack>
-        </div>
-        <div className="mt-4 flex flex-grow flex-col overflow-auto">
+        </VStack>
+        <div className="mt-8 flex flex-grow justify-center space-x-5 overflow-auto">
           <InfoDetail
             title={t("SettingPanel.BaseInfo")}
-            leftData={[
-              { key: "APPID", value: currentApp?.appid },
+            data={[
+              { key: "APP ID", value: currentApp?.appid },
               { key: t("HomePanel.Region"), value: currentRegion?.displayName },
+              { key: t("HomePanel.RuntimeName"), value: currentApp?.runtime.name },
+              { key: t("CreateTime"), value: formatDate(currentApp.createdAt) },
             ]}
-            rightData={[{ key: t("HomePanel.RuntimeName"), value: currentApp?.runtime.name }]}
+            className={darkMode ? "w-60" : "w-60 bg-[#F8FAFB]"}
           />
           <InfoDetail
             title={t("SettingPanel.Detail")}
-            leftData={[
+            data={[
               {
                 key: "CPU",
                 value: `${currentApp?.bundle?.resource?.limitCPU! / 1000} ${t("Unit.CPU")}`,
@@ -129,8 +141,6 @@ const AppEnvList = () => {
                 key: t("Spec.RAM"),
                 value: `${currentApp?.bundle?.resource.limitMemory} ${t("Unit.MB")}`,
               },
-            ]}
-            rightData={[
               {
                 key: t("Spec.Database"),
                 value: `${currentApp?.bundle?.resource.databaseCapacity! / 1024} ${t("Unit.GB")}`,
@@ -140,6 +150,7 @@ const AppEnvList = () => {
                 value: `${currentApp?.bundle?.resource.storageCapacity! / 1024} ${t("Unit.GB")}`,
               },
             ]}
+            className={darkMode ? "w-60" : "w-60 bg-[#F8FAFB]"}
           />
         </div>
       </div>
diff --git a/web/src/pages/app/setting/Usage/index.tsx b/web/src/pages/app/setting/Usage/index.tsx
index 817ffb1c42..5f31ac6553 100644
--- a/web/src/pages/app/setting/Usage/index.tsx
+++ b/web/src/pages/app/setting/Usage/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Avatar, Button, Center, Spinner, useColorMode } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
@@ -29,11 +29,17 @@ const DATA_DURATION = 6 * 24 * 60 * 60 * 1000;
 export default function Usage() {
   const { t } = useTranslation();
   const darkMode = useColorMode().colorMode === "dark";
-  const [startTime, setStartTime] = React.useState<Date | null>(
-    new Date(new Date().getTime() - DATA_DURATION),
-  );
-
-  const [endTime, setEndTime] = React.useState<Date | null>(new Date());
+  const [endTime, setEndTime] = React.useState<Date | null>(() => {
+    const today = new Date();
+    today.setHours(23, 59, 59, 999);
+    return today;
+  });
+  const [startTime, setStartTime] = React.useState<Date | null>(() => {
+    const today = new Date();
+    today.setTime(today.getTime() - DATA_DURATION);
+    today.setHours(0, 0, 0, 0);
+    return today;
+  });
 
   const { userInfo } = useGlobalStore((state) => state);
   const { data: accountRes } = useAccountQuery();
@@ -42,8 +48,8 @@ export default function Usage() {
     ["billing", startTime, endTime],
     async () => {
       return BillingControllerGetExpense({
-        startTime: startTime?.toISOString(),
-        endTime: endTime?.toISOString(),
+        startTime: startTime?.getTime(),
+        endTime: endTime?.getTime(),
       });
     },
   );
@@ -52,8 +58,8 @@ export default function Usage() {
     ["chargeOrderAmount", startTime, endTime],
     async () => {
       return AccountControllerGetChargeOrderAmount({
-        startTime: startTime?.toISOString(),
-        endTime: endTime?.toISOString(),
+        startTime: startTime?.getTime(),
+        endTime: endTime?.getTime(),
       });
     },
   );
@@ -62,16 +68,22 @@ export default function Usage() {
     ["billingByDay", startTime, endTime],
     async () => {
       return BillingControllerGetExpenseByDay({
-        startTime: startTime?.toISOString(),
-        endTime: endTime?.toISOString(),
+        startTime: startTime?.getTime(),
+        endTime: endTime?.getTime(),
       });
     },
   );
 
-  const chartData = ((billingAmountByDayRes?.data as Array<any>) || []).map((item) => ({
-    totalAmount: item.totalAmount,
-    date: formatDate(item.day).slice(5, 10),
-  }));
+  const chartData = useMemo(
+    () =>
+      ((billingAmountByDayRes?.data as Array<any>) || [])
+        .sort((a, b) => new Date(a.day).getTime() - new Date(b.day).getTime())
+        .map((item) => ({
+          totalAmount: item.totalAmount,
+          date: formatDate(item.day).slice(5, 10),
+        })),
+    [billingAmountByDayRes?.data],
+  );
 
   return (
     <div>
diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
index 060098ca67..c22b4cbc08 100644
--- a/web/src/pages/app/setting/index.tsx
+++ b/web/src/pages/app/setting/index.tsx
@@ -61,7 +61,7 @@ const SettingModal = (props: {
         },
       })}
 
-      <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
+      <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent maxW={"80%"} width={"auto"} minW={1024}>
           <ModalBody py={2} flex="none" minH={500} className="relative">
diff --git a/web/src/pages/home/mods/StatusBadge/index.tsx b/web/src/pages/home/mods/StatusBadge/index.tsx
index f74b70f876..1716871147 100644
--- a/web/src/pages/home/mods/StatusBadge/index.tsx
+++ b/web/src/pages/home/mods/StatusBadge/index.tsx
@@ -24,7 +24,7 @@ export default function StatusBadge(props: {
 }) {
   const { statusConditions = APP_PHASE_STATUS.Started, state, className } = props;
   return (
-    <div className={clsx("flex items-center", className)}>
+    <div className={clsx("flex", className)}>
       <div
         className={clsx(
           styles.badgeStyle,
@@ -38,7 +38,9 @@ export default function StatusBadge(props: {
       (state !== APP_PHASE_STATUS.Restarting && statusConditions === APP_PHASE_STATUS.Stopped) ? (
         ""
       ) : (
-        <Spinner size="xs" />
+        <div className="flex items-center pr-2">
+          <Spinner size="xs" />
+        </div>
       )}
     </div>
   );