[#noissue] Handle v2 url format

- Convert it to v3 url format and redirect

Author: binDongKim

web-frontend/src/main/v3/apps/web/src/routes/index.tsx

@@ -35,8 +35,11 @@ import Users from '@/pages/config/Users';
 import Alarm from '@/pages/config/Alarm';
 import Webhook from '@/pages/config/Webhook';
 import { threadDumpRouteLoader } from './loader/threadDump';
+import { handleV2RouteLoader } from './loader/handleV2';
 
-const defaultLoader = () => redirect('/serverMap');
+const defaultLoader = () => {
+  return redirect('/serverMap');
+};
 
 const router = createBrowserRouter(
   [
@@ -46,7 +49,16 @@ const router = createBrowserRouter(
     },
     {
       path: '/main',
-      loader: defaultLoader,
+      children: [
+        {
+          path: '',
+          loader: defaultLoader,
+        },
+        {
+          path: ':application/:period/:endTime',
+          loader: handleV2RouteLoader,
+        },
+      ],
     },
     {
       path: `${APP_PATH.API_CHECK}`,

web-frontend/src/main/v3/apps/web/src/routes/loader/handleV2.ts

@@ -0,0 +1,24 @@
+import { APP_PATH, SEARCH_PARAMETER_DATE_FORMAT } from '@pinpoint-fe/constants';
+import { convertTimeStringToTime, convertParamsToQueryString } from '@pinpoint-fe/utils';
+import { parse, format, subMilliseconds } from 'date-fns';
+import { LoaderFunctionArgs, redirect } from 'react-router-dom';
+
+export const handleV2RouteLoader = ({ params, request }: LoaderFunctionArgs) => {
+  const basePath = `${APP_PATH.SERVER_MAP}/${params.application}`;
+  const v2QueryParams = Object.fromEntries(new URL(request.url).searchParams);
+  const currentDate = new Date();
+
+  const to = parse(params.endTime!, SEARCH_PARAMETER_DATE_FORMAT, currentDate);
+  const timeDiff = convertTimeStringToTime(params.period!);
+  const from = subMilliseconds(to, timeDiff);
+  const formattedDateRange = {
+    from: format(from, SEARCH_PARAMETER_DATE_FORMAT),
+    to: format(to, SEARCH_PARAMETER_DATE_FORMAT),
+  };
+  const v3DateQueryString = convertParamsToQueryString({
+    ...formattedDateRange,
+    ...v2QueryParams,
+  });
+
+  return redirect(`${basePath}?${v3DateQueryString}`);
+};

web-frontend/src/main/v3/packages/utils/src/date.ts

@@ -105,3 +105,19 @@ export const formatNewLinedDateString = (date: Date | number) => {
 
   return `${format(date, firstFormat)}\n${format(date, secondFormat)}`;
 };
+
+export const convertTimeStringToTime = (timeString: string) => {
+  const timePattern = /^(\d+)([mhd])$/;
+  const match = timeString.match(timePattern);
+  const value = Number(match?.[1]);
+  const unit = match?.[2];
+
+  switch (unit) {
+    case 'm':
+      return value * 60 * 1000;
+    case 'h':
+      return value * 60 * 60 * 1000;
+    case 'd':
+      return value * 24 * 60 * 60 * 1000;
+  }
+};