[#noissue] feat: global search & add tailwind into app & new style snb

jaehong-kim · Jul 15, 2024 · b7dc7a8 · b7dc7a8
1 parent 1e3235d
commit b7dc7a8
Show file tree

Hide file tree

Showing 38 changed files with 659 additions and 324 deletions.
diff --git a/web-frontend/src/main/v3/apps/web/index.html b/web-frontend/src/main/v3/apps/web/index.html
@@ -3,13 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PINPOINT</title>
   </head>
   <body>
     <div id="root"></div>
     <div id="__pinpoint_popper_root__"></div>
     <div id="__pinpoint_sheet__"></div>
+    <div id="__pinpoint_global_search__"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/web-frontend/src/main/v3/apps/web/package.json b/web-frontend/src/main/v3/apps/web/package.json
@@ -29,7 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.2",
-    "react-icons": "^4.9.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.10.0",
     "swr": "^2.1.2",
     "usehooks-ts": "^2.9.1",
@@ -41,8 +41,11 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.15",
     "cpx": "^1.5.0",
     "eslint": "^8.15.0",
+    "postcss": "^8.4.29",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.5",
     "vite-plugin-compression2": "^0.9.2"

diff --git a/web-frontend/src/main/v3/apps/web/postcss.config.js b/web-frontend/src/main/v3/apps/web/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/web-frontend/src/main/v3/apps/web/src/components/Layout/LayoutWithSideNavigation.tsx b/web-frontend/src/main/v3/apps/web/src/components/Layout/LayoutWithSideNavigation.tsx
@@ -4,63 +4,19 @@ import {
   LayoutWithSideNavigationProps as LayoutWithSideNavigationComponentProps,
   SideNavigationMenuItem,
 } from '@pinpoint-fe/ui';
-import { FaBug, FaChartBar, FaChartLine, FaCog, FaNetworkWired, FaServer } from 'react-icons/fa';
-import { useSearchParameters } from '@pinpoint-fe/hooks';
-import {
-  getErrorAnalysisPath,
-  getInspectorPath,
-  getServerMapPath,
-  getSystemMetricPath,
-  getUrlStatPath,
-} from '@pinpoint-fe/utils';
+import { FaCog } from 'react-icons/fa';
 import { APP_PATH } from '@pinpoint-fe/constants';
-import { useAtomValue } from 'jotai';
 import { LuDoorOpen, LuUserCircle2 } from 'react-icons/lu';
 import { CONFIG_MENU_MAP } from './LayoutWithConfiguration';
 import { MdOutlineAdminPanelSettings } from 'react-icons/md';
-import { configurationAtom } from '@pinpoint-fe/atoms';
+import { useMenuItems } from '@/hooks/useMenuItems';
 
 export interface LayoutWithSideNavigationProps extends LayoutWithSideNavigationComponentProps {}
 
 export const LayoutWithSideNavigation = ({ ...props }: LayoutWithSideNavigationProps) => {
-  const { application, searchParameters } = useSearchParameters();
-  const configuration = useAtomValue(configurationAtom);
+  const { menuItems } = useMenuItems();
 
-  const topMenuItems = [
-    {
-      icon: <FaNetworkWired />,
-      name: 'Servermap',
-      path: APP_PATH.SERVER_MAP,
-      href: getServerMapPath(application, searchParameters),
-    },
-    {
-      icon: <FaChartLine />,
-      name: 'Inspector',
-      path: APP_PATH.INSPECTOR,
-      href: getInspectorPath(application, searchParameters),
-    },
-    {
-      icon: <FaChartBar />,
-      name: 'URL Statistic',
-      path: APP_PATH.URL_STATISTIC,
-      href: getUrlStatPath(application, searchParameters),
-      hide: !configuration?.showUrlStat,
-    },
-    {
-      icon: <FaServer />,
-      name: 'Infrastructure',
-      path: APP_PATH.SYSTEM_METRIC,
-      href: getSystemMetricPath(),
-      hide: !configuration?.showSystemMetric,
-    },
-    {
-      icon: <FaBug />,
-      name: 'Error Analysis',
-      path: APP_PATH.ERROR_ANALYSIS,
-      href: getErrorAnalysisPath(application, searchParameters),
-      hide: !configuration?.showExceptionTrace,
-    },
-  ];
+  const topMenuItems = menuItems;
 
   const bottomMenuItems: SideNavigationMenuItem[] = [
     {

diff --git a/web-frontend/src/main/v3/apps/web/src/hooks/useMenuItems.tsx b/web-frontend/src/main/v3/apps/web/src/hooks/useMenuItems.tsx
@@ -0,0 +1,61 @@
+import { useAtomValue } from 'jotai';
+import { APP_PATH, MenuItem } from '@pinpoint-fe/constants';
+import { configurationAtom } from '@pinpoint-fe/atoms';
+import {
+  PiBugBeetle,
+  PiChartBar,
+  PiChartLine,
+  PiHardDrives,
+  PiTreeStructure,
+} from 'react-icons/pi';
+import { useSearchParameters } from '@pinpoint-fe/hooks';
+import {
+  getServerMapPath,
+  getInspectorPath,
+  getUrlStatPath,
+  getSystemMetricPath,
+  getErrorAnalysisPath,
+} from '@pinpoint-fe/utils';
+
+export const useMenuItems = () => {
+  const configuration = useAtomValue(configurationAtom);
+  const { application, searchParameters } = useSearchParameters();
+
+  const menuItems: MenuItem[] = [
+    {
+      icon: <PiTreeStructure />,
+      name: 'Servermap',
+      path: APP_PATH.SERVER_MAP,
+      href: getServerMapPath(application, searchParameters),
+    },
+    {
+      icon: <PiChartLine />,
+      name: 'Inspector',
+      path: APP_PATH.INSPECTOR,
+      href: getInspectorPath(application, searchParameters),
+    },
+    {
+      icon: <PiChartBar />,
+      name: 'URL Statistic',
+      path: APP_PATH.URL_STATISTIC,
+      href: getUrlStatPath(application, searchParameters),
+      hide: !configuration?.showUrlStat,
+    },
+    {
+      icon: <PiHardDrives />,
+      name: 'Infrastructure',
+      path: APP_PATH.SYSTEM_METRIC,
+      href: getSystemMetricPath(),
+      hide: !configuration?.showSystemMetric,
+    },
+    {
+      icon: <PiBugBeetle />,
+      name: 'Error Analysis',
+      path: APP_PATH.ERROR_ANALYSIS,
+      href: getErrorAnalysisPath(application, searchParameters),
+      hide: !configuration?.showExceptionTrace,
+    },
+  ];
+
+  return { menuItems };
+};
diff --git a/web-frontend/src/main/v3/apps/web/src/index.css b/web-frontend/src/main/v3/apps/web/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/web-frontend/src/main/v3/apps/web/src/main.tsx b/web-frontend/src/main/v3/apps/web/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { Provider as JotaiProvider } from 'jotai';
 import { IconContext } from 'react-icons';
-import { SidebarProvider, ToastContainer, defaultToastContainerProps } from '@pinpoint-fe/ui';
+import { ToastContainer, defaultToastContainerProps } from '@pinpoint-fe/ui';
 import router from './routes';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
@@ -16,10 +16,8 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <QueryClientProvider client={queryClient}>
         <JotaiProvider>
           <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
-            <SidebarProvider>
-              <RouterProvider router={router} />
-              <ToastContainer className="text-sm" {...defaultToastContainerProps} />
-            </SidebarProvider>
+            <RouterProvider router={router} />
+            <ToastContainer className="text-sm" {...defaultToastContainerProps} />
           </IconContext.Provider>
         </JotaiProvider>
       </QueryClientProvider>

diff --git a/web-frontend/src/main/v3/apps/web/src/pages/FilteredMap.tsx b/web-frontend/src/main/v3/apps/web/src/pages/FilteredMap.tsx
@@ -37,7 +37,6 @@ import {
 import { differenceInMinutes } from 'date-fns';
 import { useUpdateEffect } from 'usehooks-ts';
 import { useTranslation } from 'react-i18next';
-import { FaExternalLinkAlt, FaNetworkWired } from 'react-icons/fa';
 import {
   ApdexScore,
   Button,
@@ -58,6 +57,7 @@ import {
 } from '@pinpoint-fe/ui';
 import { getLayoutWithSideNavigation } from '@/components/Layout/LayoutWithSideNavigation';
 import { Node, Edge } from '@pinpoint-fe/server-map';
+import { PiTreeStructureDuotone } from 'react-icons/pi';
 
 export interface FilteredMapPageProps {}
 
@@ -233,7 +233,7 @@ export const FilteredMapPage = ({}: FilteredMapPageProps) => {
       <MainHeader
         title={
           <div className="flex items-center gap-2">
-            <FaNetworkWired />
+            <PiTreeStructureDuotone />
             <Link className="hover:underline" to={getServerMapPath(application)}>
               Servermap
             </Link>{' '}

diff --git a/web-frontend/src/main/v3/apps/web/src/pages/ServerMap/Realtime.tsx b/web-frontend/src/main/v3/apps/web/src/pages/ServerMap/Realtime.tsx
@@ -13,6 +13,7 @@ import {
   withInitialFetch,
 } from '@pinpoint-fe/ui';
 import { getLayoutWithSideNavigation } from '@/components/Layout/LayoutWithSideNavigation';
+import { PiTreeStructureDuotone } from 'react-icons/pi';
 
 export interface RealtimePageProps {}
 
@@ -58,7 +59,13 @@ export const RealtimePage = ({}: RealtimePageProps) => {
 
   return (
     <div className="flex flex-col flex-1 h-full">
-      <MainHeader title="Server map">
+      <MainHeader
+        title={
+          <div className="flex items-center gap-2">
+            <PiTreeStructureDuotone /> Servermap
+          </div>
+        }
+      >
         <ApplicationCombinedList
           selectedApplication={application}
           onClickApplication={(application) => navigate(getServerMapPath(application))}

diff --git a/web-frontend/src/main/v3/apps/web/src/pages/ServerMap/index.tsx b/web-frontend/src/main/v3/apps/web/src/pages/ServerMap/index.tsx
@@ -28,7 +28,6 @@ import {
 } from '@pinpoint-fe/atoms';
 import { FilteredMap, GetServerMap, BASE_PATH } from '@pinpoint-fe/constants';
 import { IoMdClose } from 'react-icons/io';
-import { FaNetworkWired } from 'react-icons/fa';
 import {
   ApdexScore,
   Button,
@@ -54,6 +53,7 @@ import {
 } from '@pinpoint-fe/ui';
 import { getLayoutWithSideNavigation } from '@/components/Layout/LayoutWithSideNavigation';
 import { Edge, Node } from '@pinpoint-fe/server-map';
+import { PiTreeStructureDuotone } from 'react-icons/pi';
 
 export interface ServermapPageProps {}
 
@@ -185,7 +185,7 @@ export const ServerMapPage = ({}: ServermapPageProps) => {
       <MainHeader
         title={
           <div className="flex items-center gap-2">
-            <FaNetworkWired /> Servermap
+            <PiTreeStructureDuotone /> Servermap
           </div>
         }
       >

diff --git a/web-frontend/src/main/v3/apps/web/tailwind.config.js b/web-frontend/src/main/v3/apps/web/tailwind.config.js
@@ -0,0 +1,7 @@
+import uiTailwindConfig from '@pinpoint-fe/ui/tailwind.config.js';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  ...uiTailwindConfig,
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+};
diff --git a/web-frontend/src/main/v3/packages/atoms/src/globalSearch.ts b/web-frontend/src/main/v3/packages/atoms/src/globalSearch.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const globalSearchDisplayAtom = atom<boolean>(false);
diff --git a/web-frontend/src/main/v3/packages/atoms/src/index.ts b/web-frontend/src/main/v3/packages/atoms/src/index.ts
@@ -1,5 +1,6 @@
 export * from './chartsBoard';
 export * from './configuration';
+export * from './globalSearch';
 export * from './installationInfo';
 export * from './scatter';
 export * from './serverMap';

diff --git a/web-frontend/src/main/v3/packages/constants/src/types/MenuItem.ts b/web-frontend/src/main/v3/packages/constants/src/types/MenuItem.ts
@@ -0,0 +1,7 @@
+export type MenuItem = {
+  name: string;
+  path: string | string[];
+  href?: string;
+  icon?: JSX.Element;
+  hide?: boolean;
+};
diff --git a/web-frontend/src/main/v3/packages/constants/src/types/index.ts b/web-frontend/src/main/v3/packages/constants/src/types/index.ts
@@ -32,6 +32,7 @@ export * from './InspectorApplicationChart';
 export * from './InspectorApplicationDataSourceChart';
 export * from './Scatter';
 export * from './SearchApplication';
+export * from './MenuItem';
 export * from './SystemMetricChart';
 export * from './SystemMetricHost';
 export * from './SystemMetricHostGroup';

diff --git a/web-frontend/src/main/v3/packages/hooks/src/api/useGetTraceViewerData.ts b/web-frontend/src/main/v3/packages/hooks/src/api/useGetTraceViewerData.ts
@@ -4,12 +4,7 @@ import { convertParamsToQueryString } from '@pinpoint-fe/utils';
 import { swrConfigs } from './swrConfigs';
 
 const getQueryString = (queryParams: Partial<TraceViewerData.Parameters>) => {
-  if (
-    queryParams.traceId &&
-    queryParams.focusTimestamp &&
-    queryParams.agentId &&
-    queryParams.spanId
-  ) {
+  if (queryParams.traceId && queryParams.agentId && queryParams.spanId) {
     return '?' + convertParamsToQueryString(queryParams);
   }
   return '';

diff --git a/web-frontend/src/main/v3/packages/hooks/src/api/useGetTransactionInfo.ts b/web-frontend/src/main/v3/packages/hooks/src/api/useGetTransactionInfo.ts
@@ -7,12 +7,7 @@ import { swrConfigs } from './swrConfigs';
 import { useExperimentals } from '../utility';
 
 const getQueryString = (queryParams: Partial<TransactionInfo.Parameters>) => {
-  if (
-    queryParams?.agentId &&
-    queryParams?.spanId &&
-    queryParams?.traceId &&
-    queryParams?.focusTimestamp
-  ) {
+  if (queryParams?.agentId && queryParams?.spanId && queryParams?.traceId) {
     return '?' + convertParamsToQueryString(queryParams);
   }
   return '';

diff --git a/web-frontend/src/main/v3/packages/ui/package.json b/web-frontend/src/main/v3/packages/ui/package.json
@@ -77,7 +77,7 @@
     "billboard.js": "3.9.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cmdk": "^0.2.0",
+    "cmdk": "^1.0.0",
     "date-fns": "^2.28.0",
     "deepmerge": "^4.3.1",
     "fuse.js": "^7.0.0",
@@ -93,10 +93,10 @@
     "react-error-boundary": "^4.0.12",
     "react-fast-marquee": "^1.6.2",
     "react-hook-form": "^7.48.2",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.2.1",
     "react-international-phone": "^4.2.6",
     "react-popper": "^2.3.0",
-    "react-pro-sidebar": "^1.0.0",
+    "react-pro-sidebar": "^1.1.0",
     "react-resizable-panels": "^1.0.9",
     "react-responsive": "^9.0.2",
     "react-toastify": "^9.1.3",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { atom } from 'jotai';

		export const globalSearchDisplayAtom = atom<boolean>(false);