Merge pull request #1098 from RedisInsight/feature/RI-3377_Display_cluster_overview

Feature/ri 3377 display cluster overview

Author: egor-zalenski

redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import reactRouterDom from 'react-router-dom'
+import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
+import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import AnalyticsTabs from './AnalyticsTabs'
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn,
+  }),
+}))
+
+describe('StreamTabs', () => {
+  it('should render', () => {
+    expect(render(<AnalyticsTabs />)).toBeTruthy()
+  })
+
+  it('click on clusterDetails tab should call History push with /cluster-details path ', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+
+    render(<AnalyticsTabs />)
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId(`analytics-tab-${AnalyticsViewTab.ClusterDetails}`))
+    })
+
+    expect(pushMock).toHaveBeenCalledTimes(1)
+    expect(pushMock).toHaveBeenCalledWith('/instanceId/cluster-details')
+  })
+  it('click on SlowLog tab should call History push with /slowlog path ', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+
+    render(<AnalyticsTabs />)
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId(`analytics-tab-${AnalyticsViewTab.SlowLog}`))
+    })
+
+    expect(pushMock).toHaveBeenCalledTimes(1)
+    expect(pushMock).toHaveBeenCalledWith('/instanceId/slowlog')
+  })
+})

redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react'
+import { EuiTab, EuiTabs } from '@elastic/eui'
+import { useDispatch, useSelector } from 'react-redux'
+import { useParams, useHistory } from 'react-router-dom'
+
+import { Pages } from 'uiSrc/constants'
+import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
+import { analyticsSettingsSelector, setAnalyticsViewTab } from 'uiSrc/slices/analytics/settings'
+
+import { analyticsViewTabs } from './constants'
+
+const AnalyticsTabs = () => {
+  const { viewTab } = useSelector(analyticsSettingsSelector)
+  const history = useHistory()
+
+  const { instanceId } = useParams<{ instanceId: string }>()
+
+  const dispatch = useDispatch()
+
+  const onSelectedTabChanged = (id: AnalyticsViewTab) => {
+    if (id === AnalyticsViewTab.ClusterDetails) {
+      history.push(Pages.clusterDetails(instanceId))
+    }
+    if (id === AnalyticsViewTab.SlowLog) {
+      history.push(Pages.slowLog(instanceId))
+    }
+    dispatch(setAnalyticsViewTab(id))
+  }
+
+  const renderTabs = useCallback(() =>
+    [...analyticsViewTabs].map(({ id, label }) => (
+      <EuiTab
+        isSelected={viewTab === id}
+        onClick={() => onSelectedTabChanged(id)}
+        key={id}
+        data-testid={`analytics-tab-${id}`}
+      >
+        {label}
+      </EuiTab>
+    )), [viewTab])
+
+  return (
+    <>
+      <EuiTabs className="tabs-active-borders" data-test-subj="analytics-tabs">{renderTabs()}</EuiTabs>
+    </>
+  )
+}
+
+export default AnalyticsTabs

redisinsight/ui/src/components/analytics-tabs/constants.ts

@@ -0,0 +1,17 @@
+import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
+
+interface AnalyticsTabs {
+  id: AnalyticsViewTab,
+  label: string,
+}
+
+export const analyticsViewTabs: AnalyticsTabs[] = [
+  {
+    id: AnalyticsViewTab.ClusterDetails,
+    label: 'Overview',
+  },
+  {
+    id: AnalyticsViewTab.SlowLog,
+    label: 'Slow Log',
+  },
+]

redisinsight/ui/src/components/analytics-tabs/index.ts

@@ -0,0 +1,3 @@
+import AnalyticsTabs from './AnalyticsTabs'
+
+export default AnalyticsTabs

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

@@ -12,9 +12,24 @@ import {
 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,
@@ -26,16 +41,16 @@ const INSTANCE_ROUTES: IRoute[] = [
     path: Pages.workbench(':instanceId'),
     component: WorkbenchPage,
   },
-  {
-    pageName: PageNames.slowLog,
-    path: Pages.slowLog(':instanceId'),
-    component: SlowLogPage,
-  },
   {
     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

@@ -41,15 +41,16 @@ import PubSubSVG from 'uiSrc/assets/img/sidebar/pubsub.svg'
 import PubSubActiveSVG from 'uiSrc/assets/img/sidebar/pubsub_active.svg'
 import GithubSVG from 'uiSrc/assets/img/sidebar/github.svg'
 import Divider from 'uiSrc/components/divider/Divider'
-
 import { BuildType } from 'uiSrc/constants/env'
+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 pubSubPath = `/${PageNames.pubSub}`
 
 interface INavigations {
@@ -71,7 +72,7 @@ const NavigationMenu = () => {
   const [activePage, setActivePage] = useState(Pages.home)
   const [isHelpMenuActive, setIsHelpMenuActive] = useState(false)
 
-  const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
+  const { id: connectedInstanceId = '', connectionType } = useSelector(connectedInstanceSelector)
   const { isReleaseNotesViewed } = useSelector(appElectronInfoSelector)
   const { server } = useSelector(appInfoSelector)
 
@@ -86,6 +87,10 @@ const NavigationMenu = () => {
     dispatch(setShortcutsFlyoutState(true))
   }
 
+  const isAnalyticsPath = (activePage: string) => !!ANALYTICS_ROUTES.find(
+    ({ path }) => (`/${last(path.split('/'))}` === activePage)
+  )
+
   const privateRoutes: INavigations[] = [
     {
       tooltipText: 'Browser',
@@ -116,12 +121,14 @@ const NavigationMenu = () => {
       },
     },
     {
-      tooltipText: 'Slow Log',
-      ariaLabel: 'SlowLog page button',
-      onClick: () => handleGoPage(Pages.slowLog(connectedInstanceId)),
-      dataTestId: 'slowlog-page-btn',
+      tooltipText: 'Analysis tools',
+      ariaLabel: 'Analysis tools',
+      onClick: () => handleGoPage(connectionType === ConnectionType.Cluster
+        ? Pages.clusterDetails(connectedInstanceId)
+        : Pages.slowLog(connectedInstanceId)),
+      dataTestId: 'analytics-page-btn',
       connectedInstanceId,
-      isActivePage: activePage === slowLogPath,
+      isActivePage: isAnalyticsPath(activePage),
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },

redisinsight/ui/src/constants/api.ts

@@ -72,6 +72,7 @@ enum ApiEndpoints {
 
   PUB_SUB = 'pub-sub',
   PUB_SUB_MESSAGES = 'pub-sub/messages',
+  CLUSTER_DETAILS = 'cluster-details',
 
   NOTIFICATIONS = 'notifications',
   NOTIFICATIONS_READ = 'notifications/read',

redisinsight/ui/src/constants/pages.ts

@@ -15,6 +15,8 @@ export enum PageNames {
   browser = 'browser',
   slowLog = 'slowlog',
   pubSub = 'pub-sub',
+  analytics = 'analytics',
+  clusterDetails = 'cluster-details',
 }
 
 const redisCloud = '/redis-cloud'
@@ -34,6 +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}`,
+  analytics: (instanceId: string) => `/${instanceId}/${PageNames.analytics}`,
+  slowLog: (instanceId: string) => `/${instanceId}/${PageNames.analytics}/${PageNames.slowLog}`,
+  clusterDetails: (instanceId: string) => `/${instanceId}/${PageNames.analytics}/${PageNames.clusterDetails}`,
 }