chore: navigation wip

Author: shivani170

src/components/observability/CustomerListCellComponent.tsx

@@ -1,8 +1,9 @@
 import { FunctionComponent, useEffect, useRef } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useRouteMatch } from 'react-router-dom'
 
 import {
     FiltersTypeEnum,
+    getUrlWithSearchParams,
     TableCellComponentProps,
     TableSignalEnum,
     Tooltip,
@@ -22,6 +23,8 @@ export const CustomerListCellComponent: FunctionComponent<
 }: TableCellComponentProps<CustomerObservabilityDTO, FiltersTypeEnum.STATE, {}>) => {
     const linkRef = useRef<HTMLAnchorElement>(null)
 
+    const match = useRouteMatch()
+
     useEffect(() => {
         const handleEnter = ({ detail: { activeRowData } }) => {
             if (activeRowData.data.id === id) {
@@ -41,7 +44,11 @@ export const CustomerListCellComponent: FunctionComponent<
     switch (field) {
         case ProjectListFields.PROJECT_NAME:
             return (
-                <Link ref={linkRef} to="test" className="flex left py-10">
+                <Link
+                    ref={linkRef}
+                    to={getUrlWithSearchParams(match.path, { customer: name })}
+                    className="flex left py-10"
+                >
                     <Tooltip content={name}>
                         <span className="dc__truncate">{name}</span>
                     </Tooltip>

src/components/observability/ObservabilityRouter.tsx

@@ -2,22 +2,27 @@ import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import { URLS } from '@devtron-labs/devtron-fe-common-lib'
 
-import VM from './VMObservability/VM'
+import Project from './ProjectObservability/Project'
 import Customers from './Customers'
+import { Overview } from './Overview'
 
 const ObservabilityRouter: React.FC = () => {
     const { path } = useRouteMatch()
     return (
         <Switch>
             <Route exact path={URLS.OBSERVABILITY_OVERVIEW}>
-                <VM />
+                <Overview />
             </Route>
 
             <Route exact path={URLS.OBSERVABILITY_CUSTOMER_LIST}>
                 <Customers />
             </Route>
 
-            <Redirect exact from={path} to={URLS.OBSERVABILITY} />
+            <Route exact path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customer`}>
+                <Project />
+            </Route>
+
+            <Redirect exact from={path} to={URLS.OBSERVABILITY_OVERVIEW} />
         </Switch>
     )
 }