Bump UI deps, make relevant adjustments (#2461)

This pull request includes several changes to improve the codebase of the `frontend/webapp` project. The changes range from ESLint configuration updates and TypeScript migration to refactoring and updating dependencies. ### Configuration and Dependency Updates: * Updated `.eslintrc.json` to extend TypeScript configuration. * Migrated `next.config.js` to TypeScript (`next.config.ts`). [[1]](diffhunk://#diff-f8b6a8e4eb925659399aaa75795653b92fe978be73abd7952d41ad6b3bda52f3L1-R3) [[2]](diffhunk://#diff-f8b6a8e4eb925659399aaa75795653b92fe978be73abd7952d41ad6b3bda52f3L14-R14) * Updated dependencies in `package.json` to the latest versions. [[1]](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L17-R21) [[2]](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L32-R33) ### Refactoring: * Refactored `overview-header.tsx` to clean up imports and update the `PlatformSelect` component usage. [[1]](diffhunk://#diff-32cdaa57227c100f16d8d2a3a1a8dab1dd003c1a679280464f48aea3b1ed117dL3-R8) [[2]](diffhunk://#diff-32cdaa57227c100f16d8d2a3a1a8dab1dd003c1a679280464f48aea3b1ed117dL22-R31) [[3]](diffhunk://#diff-32cdaa57227c100f16d8d2a3a1a8dab1dd003c1a679280464f48aea3b1ed117dL34-R43) * Consolidated API URL constants into `routes.tsx` and removed `urls.tsx`. [[1]](diffhunk://#diff-3945dedf210301d297ca676c6560da071daf28579490a93449f1585e5e03f56aL2) [[2]](diffhunk://#diff-a9fd9b7b99700bf4f5c53c51a931f4cdf426943a672a5eeb16ffe72bc73f6a31R7-R21) [[3]](diffhunk://#diff-d0711298bec29e7b83d5e679fbec947e6d028ade280767cde8d201526c9b7e8aL1-L19) ### Bug Fixes: * Fixed potential null reference errors in hooks by adding optional chaining. [[1]](diffhunk://#diff-97e103ce27156651b4a989f874cbddcdc9a3c2583c0a14e36d036bdd4f66933eL95-R95) [[2]](diffhunk://#diff-c7f19ca063b62568e37726473e1b8c265d3309def0d157772951023c66e055b8L85-R85) [[3]](diffhunk://#diff-1be86445dc0ed6bfdc08f7525c5800ef39bdcd70318a3c130f83f36f1ae9f5c8L59-R63) ### Documentation: * Corrected a typo in the `README.md` file. ### Miscellaneous: * Reordered meta tags in `layout.tsx` for better SEO and performance.
odigos-io · Feb 18, 2025 · f417288 · f417288
1 parent 2b87f29
commit f417288
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 156 deletions.
diff --git a/frontend/webapp/.eslintrc.json b/frontend/webapp/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals"]
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }
diff --git a/frontend/webapp/README.md b/frontend/webapp/README.md
@@ -10,9 +10,7 @@ To develop the UI, you'll need to maintain the UI libraries:
 - [ui-components](https://github.com/odigos-io/ui-components): re-usable components (mainly from Figma -> Design System)
 - [ui-containers](https://github.com/odigos-io/ui-containers): "complex components", these contain logic and are not re-usable in the same UI, these are designed to re-use across multiple deployments of the same UI (e.g. cluster, cloud, etc.)
 
-
-## Runnin Locally
-
+## Running Locally
 
 1. Install dependencies:
     ```bash

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -13,9 +13,9 @@ function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang='en'>
       <head>
-        <meta name='description' content='Odigos' />
-        <link rel='icon' type='image/x-icon' href='/favicon.svg' />
         <link rel='manifest' href='/manifest.json' />
+        <link rel='icon' type='image/x-icon' href='/favicon.svg' />
+        <meta name='description' content='Odigos' />
         <title>Odigos</title>
       </head>
 

diff --git a/frontend/webapp/components/lib-imports/overview-header.tsx b/frontend/webapp/components/lib-imports/overview-header.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import Theme from '@odigos/ui-theme';
-import { SLACK_LINK } from '@/utils';
 import { useStatusStore } from '@/store';
-import { OdigosLogoText, SlackLogo } from '@odigos/ui-icons';
+import { OdigosLogoText } from '@odigos/ui-icons';
+import { Header, Status, Tooltip } from '@odigos/ui-components';
 import { useConfig, useDescribeOdigos, useTokenCRUD } from '@/hooks';
-import { CliDrawer, NotificationManager } from '@odigos/ui-containers';
-import { FORM_ALERTS, NOTIFICATION_TYPE, PLATFORM_TYPE } from '@odigos/ui-utils';
-import { Header, IconButton, PlatformSelect, Status, Tooltip } from '@odigos/ui-components';
+import { FORM_ALERTS, getPlatformLabel, NOTIFICATION_TYPE, PLATFORM_TYPE } from '@odigos/ui-utils';
+import { CliDrawer, NotificationManager, PlatformSelect, SlackInvite } from '@odigos/ui-containers';
 
 const OverviewHeader = () => {
   const { status, title, message } = useStatusStore();
@@ -19,7 +18,18 @@ const OverviewHeader = () => {
     <Header
       left={[
         <OdigosLogoText key='logo' size={100} />,
-        <PlatformSelect key='platform' type={PLATFORM_TYPE.K8S} />,
+        <PlatformSelect
+          key='cp-select'
+          selected={{
+            id: 'default',
+            name: getPlatformLabel(PLATFORM_TYPE.K8S),
+            type: PLATFORM_TYPE.K8S,
+            connectionStatus: NOTIFICATION_TYPE.SUCCESS,
+          }}
+          computePlatforms={[]}
+          onSelect={() => {}}
+          onViewAll={() => {}}
+        />,
         <Status key='status' status={status} title={title} subtitle={message} size={14} family='primary' withIcon withBackground />,
         config?.readonly && (
           <Tooltip key='readonly' text={FORM_ALERTS.READONLY_WARNING}>
@@ -31,9 +41,7 @@ const OverviewHeader = () => {
         <Theme.ToggleDarkMode key='toggle-theme' />,
         <NotificationManager key='notifs' />,
         <CliDrawer key='cli' tokens={tokens} saveToken={updateToken} fetchDescribeOdigos={fetchDescribeOdigos} />,
-        <IconButton key='slack' onClick={() => window.open(SLACK_LINK, '_blank', 'noopener noreferrer')} tooltip='Join our Slack community'>
-          <SlackLogo />
-        </IconButton>,
+        <SlackInvite key='slack' />,
       ]}
     />
   );

diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -92,7 +92,7 @@ export const useActionCRUD = (params?: UseActionCrudParams): UseActionCrudRespon
   // Filter mapped data
   const filtered = useMemo(() => {
     let arr = [...mapped];
-    if (!!filters.monitors.length) arr = arr.filter((action) => !!filters.monitors.find((metric) => action.spec.signals.find((str) => str.toLowerCase() === metric.id)));
+    if (!!filters.monitors?.length) arr = arr.filter((action) => !!filters.monitors?.find((metric) => action.spec.signals.find((str) => str.toLowerCase() === metric.id)));
     return arr;
   }, [mapped, filters]);
 

diff --git a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
@@ -82,7 +82,7 @@ export const useDestinationCRUD = (params?: Params): UseDestinationCrudResponse
   // Filter mapped data
   const filtered = useMemo(() => {
     let arr = [...mapped];
-    if (!!filters.monitors.length) arr = arr.filter((destination) => !!filters.monitors.find((metric) => destination.exportedSignals[metric.id as keyof DestinationOption['supportedSignals']]));
+    if (!!filters.monitors?.length) arr = arr.filter((destination) => !!filters.monitors?.find((metric) => destination.exportedSignals[metric.id as keyof DestinationOption['supportedSignals']]));
     return arr;
   }, [mapped, filters]);
 

diff --git a/frontend/webapp/hooks/sources/useSourceCRUD.ts b/frontend/webapp/hooks/sources/useSourceCRUD.ts
@@ -56,11 +56,11 @@ export const useSourceCRUD = (params?: Params): UseSourceCrudResponse => {
   const filtered = useMemo(() => {
     let arr = [...sources];
 
-    if (!!filters.namespace) arr = arr.filter((source) => filters.namespace?.id === source.namespace);
-    if (!!filters.types.length) arr = arr.filter((source) => !!filters.types.find((type) => type.id === source.kind));
+    if (!!filters.namespaces?.length) arr = arr.filter((source) => !!filters.namespaces?.find((ns) => ns.id === source.namespace));
+    if (!!filters.kinds?.length) arr = arr.filter((source) => !!filters.kinds?.find((type) => type.id === source.kind));
     if (!!filters.onlyErrors) arr = arr.filter((source) => !!source.conditions?.find((cond) => cond.status === CONDITION_STATUS.FALSE));
-    if (!!filters.errors.length) arr = arr.filter((source) => !!filters.errors.find((error) => !!source.conditions?.find((cond) => cond.message === error.id)));
-    if (!!filters.languages.length) arr = arr.filter((source) => !!filters.languages.find((language) => !!source.containers?.find((cont) => cont.language === language.id)));
+    if (!!filters.errors?.length) arr = arr.filter((source) => !!filters.errors?.find((error) => !!source.conditions?.find((cond) => cond.message === error.id)));
+    if (!!filters.languages?.length) arr = arr.filter((source) => !!filters.languages?.find((language) => !!source.containers?.find((cont) => cont.language === language.id)));
 
     return arr;
   }, [sources, filters]);

diff --git a/frontend/webapp/next.config.js → frontend/webapp/next.config.ts b/frontend/webapp/next.config.js → frontend/webapp/next.config.ts
@@ -1,6 +1,6 @@
-/** @type {import('next').NextConfig} */
+import type { NextConfig } from 'next';
 
-const nextConfig = {
+const nextConfig: NextConfig = {
   output: 'export',
   reactStrictMode: false,
   images: {
@@ -11,4 +11,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
@@ -14,11 +14,11 @@
   "dependencies": {
     "@apollo/client": "^3.13.1",
     "@apollo/experimental-nextjs-app-support": "^0.11.9",
-    "@odigos/ui-components": "^0.0.68",
-    "@odigos/ui-containers": "^0.0.44",
-    "@odigos/ui-icons": "^0.0.12",
+    "@odigos/ui-components": "^0.0.71",
+    "@odigos/ui-containers": "^0.0.49",
+    "@odigos/ui-icons": "^0.0.13",
     "@odigos/ui-theme": "^0.0.16",
-    "@odigos/ui-utils": "^0.0.29",
+    "@odigos/ui-utils": "^0.0.30",
     "graphql": "^16.10.0",
     "next": "15.1.7",
     "react": "19.0.0",
@@ -29,8 +29,8 @@
   },
   "devDependencies": {
     "@types/node": "22.13.4",
-    "@types/react": "19.0.9",
-    "@types/react-dom": "19.0.3",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "autoprefixer": "^10.4.20",
     "cypress": "^14.0.3",
     "eslint": "9.20.1",

diff --git a/frontend/webapp/utils/constants/index.tsx → frontend/webapp/utils/constants/index.ts b/frontend/webapp/utils/constants/index.tsx → frontend/webapp/utils/constants/index.ts
@@ -1,2 +1 @@
 export * from './routes';
-export * from './urls';
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
@@ -4,3 +4,18 @@ export const ROUTES = {
   CHOOSE_DESTINATION: '/choose-destination',
   OVERVIEW: '/overview',
 };
+
+const IS_PROD = process.env.NODE_ENV === 'production';
+
+// set base URLs for all environments
+const DEV_API_URL = 'http://localhost:8085';
+const PROD_API_URL = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000';
+
+// construct final base URL based on environment
+const API_BASE_URL = IS_PROD ? PROD_API_URL : DEV_API_URL;
+
+// add paths to base URL
+export const API = {
+  GRAPHQL: `${API_BASE_URL}/graphql`,
+  EVENTS: `${API_BASE_URL}/api/events`,
+};
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './routes';
		export * from './urls';