RI-7687: adjust statistics page

Author: ArtemHoruzhenko

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -27,7 +27,7 @@ import {
 
 import styles from './styles.module.scss'
 
-const AutoRefreshInterval = styled.span<
+const AutoRefreshInterval = styled(ColorText)<
   HTMLAttributes<HTMLSpanElement> & {
     enableAutoRefresh: boolean
     disabled?: boolean
@@ -247,26 +247,34 @@ const AutoRefresh = ({
         [styles.enable]: !disabled && enableAutoRefresh,
       })}
       data-testid={getDataTestid('auto-refresh-container')}
+      // TODO: fix properly
+      style={{ lineHeight: 1 }}
     >
-      <FlexItem>
-        <ColorText size="s">
-          {displayText && (
-            <span data-testid={getDataTestid('refresh-message-label')}>
-              {enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}
-            </span>
-          )}
-          {displayLastRefresh && (
-            <AutoRefreshInterval
-              disabled={disabled}
-              enableAutoRefresh={enableAutoRefresh}
-              className={cx('refresh-message-time')}
-              data-testid={getDataTestid('refresh-message')}
-            >
-              {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
-            </AutoRefreshInterval>
-          )}
-        </ColorText>
-      </FlexItem>
+      {displayText && (
+        <FlexItem>
+          <ColorText
+            size="s"
+            component="span"
+            data-testid={getDataTestid('refresh-message-label')}
+          >
+            {enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}
+          </ColorText>
+        </FlexItem>
+      )}
+      {displayLastRefresh && (
+        <FlexItem>
+          <AutoRefreshInterval
+            disabled={disabled}
+            enableAutoRefresh={enableAutoRefresh}
+            className={cx('refresh-message-time')}
+            data-testid={getDataTestid('refresh-message')}
+            component="span"
+            size="s"
+          >
+            {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
+          </AutoRefreshInterval>
+        </FlexItem>
+      )}
       <FlexItem>
         <Row align="center" gap="none">
           <FlexItem>

redisinsight/ui/src/components/base/text/text.styles.ts

@@ -106,6 +106,38 @@ export const Indicator = styled.div<
   background-color: ${({ $color }) => $color || 'inherit'};
 `
 
+const useStatusColorStyles = ({ $color }: MapProps = {}) => {
+  const theme = useTheme()
+  const colors = theme.semantic.color
+
+  const getColorValue = (color?: ColorType) => {
+    switch (color) {
+      case 'danger':
+        return colors.text.danger500
+      case 'warning':
+        return colors.text.attention500
+      case 'success':
+        return colors.text.success500
+      default:
+        return color // any supported color value e.g #fff
+    }
+  }
+
+  return css`
+    background-color: ${getColorValue($color)};
+  `
+}
+
+export const StatusIndicator = styled.div<
+  {
+    $color: ColorType
+  } & CommonProps
+>`
+  ${useStatusColorStyles};
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+`
 export const mapSize = (size: TextSizeType): BodyProps['size'] => {
   if (size === 'm') {
     return 'M'

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

@@ -29,13 +29,16 @@ import Status from './status'
 import TargetConnections from './target-connections'
 
 import styles from './styles.module.scss'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { AutoRefresh } from 'uiSrc/components'
 
 const shouldShowStatistics = (data: Nullable<IRdiStatistics>) =>
   data?.status === RdiPipelineStatus.Success && !!data?.data
 
 const StatisticsPage = () => {
   const [pageLoading, setPageLoading] = useState(true)
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
+  const [lastRefreshTime, setLastRefreshTime] = React.useState(Date.now())
 
   const dispatch = useDispatch()
 
@@ -120,9 +123,10 @@ const StatisticsPage = () => {
 
   const { data: statisticsData } = statisticsResults
 
+
   return (
     <div className={styles.pageContainer}>
-      <div className={styles.bodyContainer}>
+      <Col gap="xxl" style={{ padding: 16 }}>
         {pageLoading && (
           <div className={styles.cover}>
             <Loader size="xl" />
@@ -133,61 +137,45 @@ const StatisticsPage = () => {
           <Empty rdiInstanceId={rdiInstanceId} />
         ) : (
           <>
+            <Row justify="end">
+              <FlexItem>
+                <AutoRefresh
+                  postfix="processing-performance-info"
+                  displayText
+                  loading={isStatisticsLoading}
+                  lastRefreshTime={lastRefreshTime}
+                  enableAutoRefreshDefault
+                  testid="processing-performance-info"
+                  onRefresh={() => {
+                    setLastRefreshTime(Date.now())
+                    onRefresh('processing_performance')
+                  }}
+                  onRefreshClicked={() =>
+                    onRefreshClicked('processing_performance')
+                  }
+                  onEnableAutoRefresh={(
+                    enableAutoRefresh: boolean,
+                    refreshRate: string,
+                  ) =>
+                    onChangeAutoRefresh(
+                      'processing_performance',
+                      enableAutoRefresh,
+                      refreshRate,
+                    )
+                  }
+                />
+              </FlexItem>
+            </Row>
             <Status data={statisticsData.rdiPipelineStatus} />
             <ProcessingPerformance
               data={statisticsData.processingPerformance}
-              loading={isStatisticsLoading}
-              onRefresh={() => onRefresh('processing_performance')}
-              onRefreshClicked={() =>
-                onRefreshClicked('processing_performance')
-              }
-              onChangeAutoRefresh={(
-                enableAutoRefresh: boolean,
-                refreshRate: string,
-              ) =>
-                onChangeAutoRefresh(
-                  'processing_performance',
-                  enableAutoRefresh,
-                  refreshRate,
-                )
-              }
             />
             <TargetConnections data={statisticsData.connections} />
-            <DataStreams
-              data={statisticsData.dataStreams}
-              loading={isStatisticsLoading}
-              onRefresh={() => {
-                dispatch(fetchRdiStatistics(rdiInstanceId, 'data_streams'))
-              }}
-              onRefreshClicked={() => onRefreshClicked('data_streams')}
-              onChangeAutoRefresh={(
-                enableAutoRefresh: boolean,
-                refreshRate: string,
-              ) =>
-                onChangeAutoRefresh(
-                  'data_streams',
-                  enableAutoRefresh,
-                  refreshRate,
-                )
-              }
-            />
-            <Clients
-              data={statisticsData.clients}
-              loading={isStatisticsLoading}
-              onRefresh={() => {
-                dispatch(fetchRdiStatistics(rdiInstanceId, 'clients'))
-              }}
-              onRefreshClicked={() => onRefreshClicked('clients')}
-              onChangeAutoRefresh={(
-                enableAutoRefresh: boolean,
-                refreshRate: string,
-              ) =>
-                onChangeAutoRefresh('clients', enableAutoRefresh, refreshRate)
-              }
-            />
+            <DataStreams data={statisticsData.dataStreams} />
+            <Clients data={statisticsData.clients} />
           </>
         )}
-      </div>
+      </Col>
     </div>
   )
 }

redisinsight/ui/src/pages/rdi/statistics/clients/Clients.tsx

@@ -2,8 +2,11 @@ import React from 'react'
 
 import { IClients } from 'uiSrc/slices/interfaces'
 import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
-import Accordion from '../components/accordion'
-import Panel from '../components/panel'
+import { Section } from '@redis-ui/components'
+import {
+  StyledRdiAnalyticsTable,
+  StyledRdiStatisticsSectionBody,
+} from 'uiSrc/pages/rdi/statistics/styles'
 
 type ClientsData = {
   id: string
@@ -55,19 +58,9 @@ const columns: ColumnDefinition<ClientsData>[] = [
 
 interface Props {
   data: IClients
-  loading: boolean
-  onRefresh: () => void
-  onRefreshClicked: () => void
-  onChangeAutoRefresh: (enableAutoRefresh: boolean, refreshRate: string) => void
 }
 
-const Clients = ({
-  data,
-  loading,
-  onRefresh,
-  onRefreshClicked,
-  onChangeAutoRefresh,
-}: Props) => {
+const Clients = ({ data }: Props) => {
   const clients: ClientsData[] = Object.keys(data).map((key) => {
     const client = data[key]
     return {
@@ -77,23 +70,21 @@ const Clients = ({
   })
 
   return (
-    <Panel>
-      <Accordion
-        id="clients"
-        title="Clients"
-        hideAutoRefresh
-        loading={loading}
-        onRefresh={onRefresh}
-        onRefreshClicked={onRefreshClicked}
-        onChangeAutoRefresh={onChangeAutoRefresh}
-      >
-        <Table
-          columns={columns}
-          data={clients}
-          defaultSorting={[{ id: 'id', desc: false }]}
-        />
-      </Accordion>
-    </Panel>
+    <Section.Compose collapsible defaultOpen id="clients">
+      <Section.Header label="Clients" />
+      <StyledRdiStatisticsSectionBody
+        content={
+          <StyledRdiAnalyticsTable
+            columns={columns}
+            data={clients}
+            defaultSorting={[{ id: 'id', desc: false }]}
+          >
+            <Table.Header />
+            <Table.Body />
+          </StyledRdiAnalyticsTable>
+        }
+      />
+    </Section.Compose>
   )
 }
 

redisinsight/ui/src/pages/rdi/statistics/data-streams/DataStreams.tsx

@@ -4,8 +4,11 @@ import { IDataStreams } from 'uiSrc/slices/interfaces'
 import { formatLongName } from 'uiSrc/utils'
 import { FormatedDate, RiTooltip } from 'uiSrc/components'
 import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
-import Accordion from '../components/accordion'
-import Panel from '../components/panel'
+import { Section } from '@redis-ui/components'
+import {
+  StyledRdiAnalyticsTable,
+  StyledRdiStatisticsSectionBody,
+} from 'uiSrc/pages/rdi/statistics/styles'
 
 type DataStreamsData = {
   name: string
@@ -22,10 +25,6 @@ type DataStreamsData = {
 
 interface Props {
   data: IDataStreams
-  loading: boolean
-  onRefresh: () => void
-  onRefreshClicked: () => void
-  onChangeAutoRefresh: (enableAutoRefresh: boolean, refreshRate: string) => void
 }
 
 const columns: ColumnDefinition<DataStreamsData>[] = [
@@ -99,10 +98,6 @@ const columns: ColumnDefinition<DataStreamsData>[] = [
 
 const DataStreams = ({
   data,
-  loading,
-  onRefresh,
-  onRefreshClicked,
-  onChangeAutoRefresh,
 }: Props) => {
   const dataStreams: DataStreamsData[] = Object.keys(data?.streams || {}).map(
     (key) => {
@@ -128,23 +123,21 @@ const DataStreams = ({
   }
 
   return (
-    <Panel>
-      <Accordion
-        id="data-streams"
-        title="Data streams overview"
-        hideAutoRefresh
-        loading={loading}
-        onRefresh={onRefresh}
-        onRefreshClicked={onRefreshClicked}
-        onChangeAutoRefresh={onChangeAutoRefresh}
-      >
-        <Table
-          columns={columns}
-          data={[...dataStreams, totalsRow]}
-          defaultSorting={[{ id: 'name', desc: false }]}
-        />
-      </Accordion>
-    </Panel>
+    <Section.Compose collapsible defaultOpen id="data-streams">
+      <Section.Header label="Data streams overview" />
+      <StyledRdiStatisticsSectionBody
+        content={
+          <StyledRdiAnalyticsTable
+            columns={columns}
+            data={[...dataStreams, totalsRow]}
+            defaultSorting={[{ id: 'name', desc: false }]}
+          >
+            <Table.Header />
+            <Table.Body />
+          </StyledRdiAnalyticsTable>
+        }
+      />
+    </Section.Compose>
   )
 }