fix(portal): adjust recent date on charts

mycloudnexus · Nov 14, 2024 · d389284 · d389284
1 parent 6546486
commit d389284
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/...p/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx b/...p/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/ErrorDiagram/index.tsx
@@ -77,8 +77,6 @@ const ErrorBrakedownDiagram = ({ props }: Props) => {
     [data, isLoading]
   );
 
-  console.log(errorData)
-
   return (
     <Flex vertical className={styles.contentBox}>
       <Flex style={{ paddingBottom: "12px" }}>

diff --git a/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/index.tsx b/kraken-app/kraken-app-portal/src/pages/HomePage/components/ActivityDiagrams/index.tsx
@@ -24,9 +24,9 @@ import styles from "./index.module.scss";
 
 export type DiagramProps = {
   envId: string;
-  requestStartTime: string;
-  requestEndTime: string;
-  buyer: string | undefined;
+  requestStartTime?: string;
+  requestEndTime?: string;
+  buyer?: string;
   requestTime?: any;
 };
 
@@ -36,31 +36,37 @@ type Props = {
 
 const { RangePicker } = DatePicker;
 
-const DiagramWrapper = ({ envs }: Props) => {
+const ActivityDiagrams = ({ envs }: Props) => {
   const stageEnvId =
     envs?.find((env: IEnv) => env.name?.toLowerCase() === "stage")?.id ?? "";
   const currentTime = getCurrentTimeWithZone();
   const [form] = Form.useForm();
+  const [selectedRecentDate, setSelectedRecentDate] = useState<number | undefined>(7);
+  const { requestStartTime, requestEndTime } = recentXDays(selectedRecentDate);
+
   const [params, setParams] = useState<DiagramProps>({
     envId: stageEnvId,
-    requestStartTime: currentTime,
-    requestEndTime: currentTime,
+    requestStartTime,
+    requestEndTime,
     buyer: undefined,
   });
 
   const handleFormValues = useCallback(
     (values: DiagramProps) => {
       const { requestTime = [] } = values ?? {};
-      setParams({
-        envId: values.envId || params.envId,
-        buyer: values.buyer || params.buyer,
-        requestStartTime: requestTime?.[0]
-          ? dayjs(requestTime[0]).startOf("day").format(TIME_ZONE_FORMAT)
-          : currentTime,
-        requestEndTime: requestTime?.[1]
-          ? dayjs(requestTime[1]).endOf("day").format(TIME_ZONE_FORMAT)
-          : currentTime,
-      });
+      if(requestTime?.[0]) {
+        setSelectedRecentDate(undefined);
+        setParams({
+          envId: values.envId || params.envId,
+          buyer: values.buyer || params.buyer,
+          requestStartTime: requestTime?.[0]
+            ? dayjs(requestTime[0]).startOf("day").format(TIME_ZONE_FORMAT)
+            : currentTime,
+          requestEndTime: requestTime?.[1]
+            ? dayjs(requestTime[1]).endOf("day").format(TIME_ZONE_FORMAT)
+            : currentTime,
+        });
+      }
     },
     [setParams, params]
   );
@@ -83,7 +89,8 @@ const DiagramWrapper = ({ envs }: Props) => {
   }, [envs]);
 
   const setRecentDate = (e: RadioChangeEvent) => {
-    const { requestStartTime, requestEndTime } = recentXDays(e);
+    const { requestStartTime, requestEndTime } = recentXDays(e.target.value);
+    setSelectedRecentDate(Number(e.target.value));
     setParams({ ...params, requestStartTime, requestEndTime });
   };
 
@@ -103,10 +110,8 @@ const DiagramWrapper = ({ envs }: Props) => {
         >
           <Flex gap={12} align="center">
             <Text.BoldMedium>Activity diagrams</Text.BoldMedium>
-
             <Form.Item name="envId">
               <Select
-
                 value={params.envId}
                 options={envOptions}
                 popupMatchSelectWidth={false}
@@ -115,7 +120,6 @@ const DiagramWrapper = ({ envs }: Props) => {
                 placeholder="Stage"
               />
             </Form.Item>
-
             <Form.Item name="buyer">
               <Select
                 options={[
@@ -136,13 +140,14 @@ const DiagramWrapper = ({ envs }: Props) => {
           </Flex>
           <Flex align="center">
             <Form.Item>
-              <Radio.Group onChange={setRecentDate} size="middle" >
-                <Radio.Button value="7" data-testid="recent-7-days">Recent 7 days</Radio.Button>
-                <Radio.Button value="90">Recent 3 months</Radio.Button>
+              <Radio.Group onChange={setRecentDate} value={selectedRecentDate} size="middle" >
+                <Radio.Button value={7} data-testid="recent-7-days">Recent 7 days</Radio.Button>
+                <Radio.Button value={90}>Recent 3 months</Radio.Button>
               </Radio.Group>
             </Form.Item>
             <Form.Item name="requestTime">
               <RangePicker
+                value={[dayjs(params.requestStartTime), dayjs(params.requestEndTime)]}
                 size="middle"
                 placeholder={["Select time", "Select time"]}
               />
@@ -165,4 +170,4 @@ const DiagramWrapper = ({ envs }: Props) => {
   );
 };
 
-export default DiagramWrapper;
+export default ActivityDiagrams;
diff --git a/kraken-app/kraken-app-portal/src/pages/HomePage/index.tsx b/kraken-app/kraken-app-portal/src/pages/HomePage/index.tsx
@@ -6,12 +6,12 @@ import QuickStartGuide from "./components/QuickStartGuide";
 
 const HomePage = () => {
   const { currentProduct } = useAppStore();
-  const { data: envs } = useGetProductEnvs(currentProduct);
+  const { data: envs, isLoading } = useGetProductEnvs(currentProduct);
 
   return (
     <PageLayout title="" style={{ background: "#F0F2F5", paddingTop: "15px" }}>
       <QuickStartGuide />
-      {envs && <ActivityDiagrams envs={envs.data} />}
+      {(!isLoading && envs) && <ActivityDiagrams envs={envs.data} />}
     </PageLayout>
   );
 };

diff --git a/kraken-app/kraken-app-portal/src/utils/constants/format.ts b/kraken-app/kraken-app-portal/src/utils/constants/format.ts
@@ -1,4 +1,3 @@
-import { RadioChangeEvent } from 'antd';
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
@@ -18,11 +17,13 @@ export const formatDiagramDate = (value: any): string => {
   return dayjs(value).format("D-M");
 };
 
-export const recentXDays = (e: RadioChangeEvent) => {
+export const recentXDays = (value?: number) => {
+  if(!value) return {}
+
   const requestEndTime = getCurrentTimeWithZone();
   const requestStartTime =
-    e.target.value === "7"
+   value === 7
       ? dayjs().subtract(7, "days").format(TIME_ZONE_FORMAT)
-      : dayjs().subtract(7, "months").format(TIME_ZONE_FORMAT);
+      : dayjs().subtract(3, "months").format(TIME_ZONE_FORMAT);
   return { requestStartTime, requestEndTime }
 };