RI-5977 add loading to statistics, test connection view change

Author: kchepikava

redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.spec.tsx

@@ -10,20 +10,20 @@ describe('TestConnectionsLog', () => {
     render(<TestConnectionsLog data={mockedData} />)
   })
 
-  it('should be all collapsed nav groups', () => {
+  it('should be a collapsed nav group', () => {
     const mockedData: ITestConnection = {
       fail: [{ index: 0, status: TestConnectionStatus.Fail, endpoint: 'localhost:1233', error: 'some error' }],
-      success: [{ index: 1, status: TestConnectionStatus.Success, endpoint: 'localhost:1233' }]
+      success: []
     }
     render(<TestConnectionsLog data={mockedData} />)
 
-    expect(screen.getByTestId('success-connections-closed')).toBeInTheDocument()
+    expect(screen.queryByTestId('success-connections-closed')).not.toBeInTheDocument()
     expect(screen.getByTestId('failed-connections-closed')).toBeInTheDocument()
   })
 
   it('should open and collapse other groups', () => {
     const mockedData: ITestConnection = {
-      fail: [{ index: 0, status: TestConnectionStatus.Fail, endpoint: 'localhost:1233', error: 'some error' }],
+      fail: [],
       success: [{ index: 1, status: TestConnectionStatus.Success, endpoint: 'localhost:1233' }]
     }
     render(<TestConnectionsLog data={mockedData} />)
@@ -32,19 +32,11 @@ describe('TestConnectionsLog', () => {
       within(screen.getByTestId('success-connections-closed')).getByRole('button')
     )
     expect(screen.getByTestId('success-connections-open')).toBeInTheDocument()
-
-    expect(screen.getByTestId('failed-connections-closed')).toBeInTheDocument()
-
-    fireEvent.click(
-      within(screen.getByTestId('failed-connections-closed')).getByRole('button')
-    )
-    expect(screen.getByTestId('failed-connections-open')).toBeInTheDocument()
-    expect(screen.getByTestId('success-connections-closed')).toBeInTheDocument()
   })
 
   it('should show proper items length', () => {
     const mockedData: ITestConnection = {
-      fail: [{ index: 0, status: TestConnectionStatus.Fail, endpoint: 'localhost:1233', error: 'some error' }],
+      fail: [],
       success: [
         { index: 1, status: TestConnectionStatus.Success, endpoint: 'localhost:1233' },
         { index: 2, status: TestConnectionStatus.Success, endpoint: 'localhost:1233' }
@@ -55,8 +47,5 @@ describe('TestConnectionsLog', () => {
     expect(
       within(screen.getByTestId('success-connections-closed')).getByTestId('number-of-connections')
     ).toHaveTextContent('2')
-    expect(
-      within(screen.getByTestId('failed-connections-closed')).getByTestId('number-of-connections')
-    ).toHaveTextContent('1')
   })
 })

redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.tsx

@@ -19,7 +19,8 @@ export interface Props {
 
 const TestConnectionsLog = (props: Props) => {
   const { data } = props
-
+  const statusData = data?.fail?.length ? data.fail : data?.success
+  const status = data?.fail?.length ? ResultsStatus.Failed : ResultsStatus.Success
   const [openedNav, setOpenedNav] = useState<string>('')
 
   const onToggle = (length: number = 0, isOpen: boolean, name: string) => {
@@ -34,33 +35,22 @@ const TestConnectionsLog = (props: Props) => {
     </div>
   )
 
+  const navTitle = status === ResultsStatus.Success ? 'Connected successfully' : 'Failed to connect'
+
   const getNavGroupState = (name: ResultsStatus) => (openedNav === name ? 'open' : 'closed')
 
   return (
-    <>
-      <EuiCollapsibleNavGroup
-        title={<CollapsibleNavTitle title="Connected successfully" length={data?.success?.length ?? 0} />}
-        className={cx(styles.collapsibleNav, ResultsStatus.Success, { [styles.disabled]: !data?.success?.length })}
-        isCollapsible
-        initialIsOpen={false}
-        onToggle={(isOpen) => onToggle(data?.success?.length, isOpen, ResultsStatus.Success)}
-        forceState={getNavGroupState(ResultsStatus.Success)}
-        data-testid={`success-connections-${getNavGroupState(ResultsStatus.Success)}`}
-      >
-        <TestConnectionsTable data={data?.success ?? []} />
-      </EuiCollapsibleNavGroup>
-      <EuiCollapsibleNavGroup
-        title={<CollapsibleNavTitle title="Failed to connect" length={data?.fail?.length ?? 0} />}
-        className={cx(styles.collapsibleNav, ResultsStatus.Failed, { [styles.disabled]: !data?.fail?.length })}
-        isCollapsible
-        initialIsOpen={false}
-        onToggle={(isOpen) => onToggle(data?.fail?.length, isOpen, ResultsStatus.Failed)}
-        forceState={getNavGroupState(ResultsStatus.Failed)}
-        data-testid={`failed-connections-${getNavGroupState(ResultsStatus.Failed)}`}
-      >
-        <TestConnectionsTable data={data?.fail ?? []} />
-      </EuiCollapsibleNavGroup>
-    </>
+    <EuiCollapsibleNavGroup
+      title={<CollapsibleNavTitle title={navTitle} length={statusData?.length ?? 0} />}
+      className={cx(styles.collapsibleNav, status, { [styles.disabled]: !statusData?.length })}
+      isCollapsible
+      initialIsOpen={false}
+      onToggle={(isOpen) => onToggle(statusData?.length, isOpen, status)}
+      forceState={getNavGroupState(status)}
+      data-testid={`${status}-connections-${getNavGroupState(status)}`}
+    >
+      <TestConnectionsTable data={statusData ?? []} />
+    </EuiCollapsibleNavGroup>
   )
 }
 

redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.tsx

@@ -1,8 +1,8 @@
 import { get } from 'lodash'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import { EuiText } from '@elastic/eui'
+import { EuiLoadingSpinner, EuiText } from '@elastic/eui'
 
 import { connectedInstanceSelector } from 'uiSrc/slices/rdi/instances'
 import { getPipelineStatusAction, rdiPipelineStatusSelector } from 'uiSrc/slices/rdi/pipeline'
@@ -27,6 +27,7 @@ const isPipelineDeployed = (
 ) => get(data, ['pipelines', 'default', 'status']) === PipelineStatus.Ready
 
 const StatisticsPage = () => {
+  const [pageLoading, setPageLoading] = useState(true)
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
 
   const dispatch = useDispatch()
@@ -65,9 +66,13 @@ const StatisticsPage = () => {
     })
   }
 
+  const hideSpinner = () => {
+    setPageLoading(false)
+  }
+
   useEffect(() => {
     dispatch(getPipelineStatusAction(rdiInstanceId))
-    dispatch(fetchRdiStatistics(rdiInstanceId))
+    dispatch(fetchRdiStatistics(rdiInstanceId, undefined, hideSpinner, hideSpinner))
 
     sendPageViewTelemetry({
       name: TelemetryPageView.RDI_STATUS,
@@ -97,6 +102,11 @@ const StatisticsPage = () => {
     <RdiInstancePageTemplate>
       <div className={styles.pageContainer}>
         <div className={styles.bodyContainer}>
+          {pageLoading && (
+          <div className={styles.cover}>
+            <EuiLoadingSpinner size="xl" />
+          </div>
+          )}
           {!isPipelineDeployed(statusData) ? (
             // TODO add loader
             <Empty rdiInstanceId={rdiInstanceId} />

redisinsight/ui/src/pages/rdi/statistics/styles.module.scss

@@ -5,6 +5,20 @@
   position: relative;
 }
 
+.cover {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  opacity: 0.8;
+  background-color: var(--euiColorLightestShade);
+}
+
 .bodyContainer {
   :global {
     .euiPanel:first-child {