#RI-3377 - fix pr comments

Author: egor-zalenski

redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts

@@ -13,9 +13,23 @@ import WorkbenchPage from 'uiSrc/pages/workbench'
 import SlowLogPage from 'uiSrc/pages/slowLog'
 import PubSubPage from 'uiSrc/pages/pubSub'
 import ClusterDetailsPage from 'uiSrc/pages/clusterDetails'
+import AnalyticsPage from 'uiSrc/pages/analytics'
 
 import COMMON_ROUTES from './commonRoutes'
 
+export const ANALYTICS_ROUTES: IRoute[] = [
+  {
+    pageName: PageNames.slowLog,
+    path: Pages.slowLog(':instanceId'),
+    component: SlowLogPage,
+  },
+  {
+    pageName: PageNames.clusterDetails,
+    path: Pages.clusterDetails(':instanceId'),
+    component: ClusterDetailsPage,
+  },
+]
+
 const INSTANCE_ROUTES: IRoute[] = [
   {
     pageName: PageNames.browser,
@@ -27,21 +41,16 @@ const INSTANCE_ROUTES: IRoute[] = [
     path: Pages.workbench(':instanceId'),
     component: WorkbenchPage,
   },
-  {
-    pageName: PageNames.slowLog,
-    path: Pages.slowLog(':instanceId'),
-    component: SlowLogPage,
-  },
-  {
-    pageName: PageNames.clusterDetails,
-    path: Pages.clusterDetails(':instanceId'),
-    component: ClusterDetailsPage,
-  },
   {
     pageName: PageNames.pubSub,
     path: Pages.pubSub(':instanceId'),
     component: PubSubPage,
   },
+  {
+    path: Pages.analytics(':instanceId'),
+    component: AnalyticsPage,
+    routes: ANALYTICS_ROUTES,
+  },
 ]
 
 const ROUTES: IRoute[] = [

redisinsight/ui/src/components/main-router/constants/redisStackRoutes.ts

@@ -6,8 +6,25 @@ import WorkbenchPage from 'uiSrc/pages/workbench'
 import SlowLogPage from 'uiSrc/pages/slowLog'
 import PubSubPage from 'uiSrc/pages/pubSub'
 import EditConnection from 'uiSrc/pages/redisStack/components/edit-connection'
+import ClusterDetailsPage from 'uiSrc/pages/clusterDetails'
+import AnalyticsPage from 'uiSrc/pages/analytics'
 import COMMON_ROUTES from './commonRoutes'
 
+const ANALYTICS_ROUTES: IRoute[] = [
+  {
+    pageName: PageNames.slowLog,
+    protected: true,
+    path: Pages.slowLog(':instanceId'),
+    component: SlowLogPage,
+  },
+  {
+    pageName: PageNames.clusterDetails,
+    protected: true,
+    path: Pages.clusterDetails(':instanceId'),
+    component: ClusterDetailsPage,
+  },
+]
+
 const INSTANCE_ROUTES: IRoute[] = [
   {
     pageName: PageNames.browser,
@@ -21,18 +38,18 @@ const INSTANCE_ROUTES: IRoute[] = [
     path: Pages.workbench(':instanceId'),
     component: WorkbenchPage,
   },
-  {
-    pageName: PageNames.slowLog,
-    protected: true,
-    path: Pages.slowLog(':instanceId'),
-    component: SlowLogPage,
-  },
   {
     pageName: PageNames.pubSub,
     protected: true,
     path: Pages.pubSub(':instanceId'),
     component: PubSubPage,
   },
+  {
+    path: Pages.analytics(':instanceId'),
+    protected: true,
+    component: AnalyticsPage,
+    routes: ANALYTICS_ROUTES,
+  },
 ]
 
 const ROUTES: IRoute[] = [

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -46,12 +46,11 @@ import { ConnectionType } from 'uiSrc/slices/interfaces'
 
 import NotificationMenu from './components/notifications-center'
 
+import { ANALYTICS_ROUTES } from '../main-router/constants/defaultRoutes'
 import styles from './styles.module.scss'
 
 const workbenchPath = `/${PageNames.workbench}`
 const browserPath = `/${PageNames.browser}`
-const slowLogPath = `/${PageNames.slowLog}`
-const clusterDetailsPath = `/${PageNames.clusterDetails}`
 const pubSubPath = `/${PageNames.pubSub}`
 
 interface INavigations {
@@ -88,7 +87,9 @@ const NavigationMenu = () => {
     dispatch(setShortcutsFlyoutState(true))
   }
 
-  const isAnalyticsPath = (path: string) => path === slowLogPath || path === clusterDetailsPath
+  const isAnalyticsPath = (activePage: string) => !!ANALYTICS_ROUTES.find(
+    ({ path }) => (`/${last(path.split('/'))}` === activePage)
+  )
 
   const privateRoutes: INavigations[] = [
     {

redisinsight/ui/src/constants/keys.ts

@@ -172,6 +172,5 @@ export enum KeyValueFormat {
   Msgpack = 'Msgpack',
   PHP = 'PHP Unserialize',
   JAVA = 'Java Object',
-  Protobuf = 'Protobuf',
-  Pickle = 'Pickle',
+  Protobuf = 'Protobuf'
 }

redisinsight/ui/src/constants/pages.ts

@@ -15,6 +15,7 @@ export enum PageNames {
   browser = 'browser',
   slowLog = 'slowlog',
   pubSub = 'pub-sub',
+  analytics = 'analytics',
   clusterDetails = 'cluster-details',
 }
 
@@ -35,7 +36,8 @@ export const Pages = {
   sentinelDatabasesResult: `${sentinel}/databases-result`,
   browser: (instanceId: string) => `/${instanceId}/${PageNames.browser}`,
   workbench: (instanceId: string) => `/${instanceId}/${PageNames.workbench}`,
-  slowLog: (instanceId: string) => `/${instanceId}/${PageNames.slowLog}`,
   pubSub: (instanceId: string) => `/${instanceId}/${PageNames.pubSub}`,
-  clusterDetails: (instanceId: string) => `/${instanceId}/${PageNames.clusterDetails}`,
+  analytics: (instanceId: string) => `/${instanceId}/${PageNames.analytics}`,
+  slowLog: (instanceId: string) => `/${instanceId}/${PageNames.analytics}/${PageNames.slowLog}`,
+  clusterDetails: (instanceId: string) => `/${instanceId}/${PageNames.analytics}/${PageNames.clusterDetails}`,
 }

redisinsight/ui/src/pages/analytics/AnalyticsPage.spec.tsx

@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash'
+import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
+import { instance, mock } from 'ts-mockito'
+
+import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import AnalyticsPage, { Props } from './AnalyticsPage'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('AnalyticsPage', () => {
+  it('should render', () => {
+    expect(
+      render(
+        <BrowserRouter>
+          <AnalyticsPage {...instance(mockedProps)} />
+        </BrowserRouter>
+      )
+    ).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/analytics/AnalyticsPage.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { useHistory, useParams, useLocation } from 'react-router-dom'
+import { Pages } from 'uiSrc/constants'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { ConnectionType } from 'uiSrc/slices/interfaces'
+
+import AnalyticsPageRouter from './AnalyticsPageRouter'
+
+export interface Props {
+  routes: any[];
+}
+
+const AnalyticsPage = ({ routes = [] }: Props) => {
+  const history = useHistory()
+  const { instanceId } = useParams<{ instanceId: string }>()
+  const { pathname } = useLocation()
+  const { connectionType } = useSelector(connectedInstanceSelector)
+
+  useEffect(() => {
+    if (pathname === Pages.analytics(instanceId)) {
+      history.push(connectionType === ConnectionType.Cluster
+        ? Pages.clusterDetails(instanceId)
+        : Pages.slowLog(instanceId))
+    }
+  }, [connectionType, instanceId, pathname])
+
+  return (
+    <AnalyticsPageRouter routes={routes} />
+  )
+}
+
+export default AnalyticsPage

redisinsight/ui/src/pages/analytics/AnalyticsPageRouter.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+import AnalyticsPageRouter from './AnalyticsPageRouter'
+
+const mockedRoutes = [
+  {
+    path: '/slowlog',
+  },
+]
+
+describe('AnalyticsPageRouter', () => {
+  it('should render', () => {
+    expect(
+      render(<AnalyticsPageRouter routes={mockedRoutes} />, { withRouter: true })
+    ).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/analytics/AnalyticsPageRouter.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Switch } from 'react-router-dom'
+import RouteWithSubRoutes from 'uiSrc/utils/routerWithSubRoutes'
+
+export interface Props {
+  routes: any[];
+}
+const InstancePageRouter = ({ routes }: Props) => (
+  <Switch>
+    {routes.map((route, i) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <RouteWithSubRoutes key={i} {...route} />
+    ))}
+  </Switch>
+)
+
+export default React.memo(InstancePageRouter)

redisinsight/ui/src/pages/analytics/index.ts

@@ -0,0 +1,6 @@
+import AnalyticsPage from './AnalyticsPage'
+import AnalyticsPageRouter from './AnalyticsPageRouter'
+
+export { AnalyticsPage, AnalyticsPageRouter }
+
+export default AnalyticsPage