Feature/ri 2743 enhanced overview

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
     'rehype-stringify': '<rootDir>/redisinsight/__mocks__/rehypeStringify.js',
     'unist-util-visit': '<rootDir>/redisinsight/__mocks__/unistUtilsVisit.js',
     'react-children-utilities': '<rootDir>/redisinsight/__mocks__/react-children-utilities.js',
+    d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
   },
   setupFiles: [
     '<rootDir>/redisinsight/ui/src/setup-env.ts',
@@ -38,6 +39,11 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!(monaco-editor|react-monaco-editor)/)',
   ],
+  // TODO: add tests for plugins
+  modulePathIgnorePatterns: [
+    '<rootDir>/redisinsight/ui/src/packages',
+    '<rootDir>/redisinsight/ui/src/mocks',
+  ],
   coverageThreshold: {
     global: {
       statements: 70,

package.json

@@ -110,6 +110,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/axios": "^0.14.0",
     "@types/classnames": "^2.2.11",
+    "@types/d3": "^7.4.0",
     "@types/date-fns": "^2.6.0",
     "@types/detect-port": "^1.3.0",
     "@types/electron-store": "^3.2.0",
@@ -216,6 +217,7 @@
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "connection-string": "^4.3.2",
+    "d3": "^7.6.1",
     "date-fns": "^2.16.1",
     "detect-port": "^1.3.0",
     "electron-context-menu": "^3.1.0",

redisinsight/ui/src/components/action-bar/styles.module.scss

@@ -2,14 +2,6 @@
   .euiPopoverTitle {
     text-transform: none !important;
   }
-
-  .euiButton {
-    min-width: 93px !important;
-
-    &:focus {
-      text-decoration: none !important;
-    }
-  }
 }
 
 .container {

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/analytics/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/analytics/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