feat(ui): update the layout of the slow log page

valkirilov · valkirilov · commit 595cde154377 · 2025-11-07T10:21:08.000+02:00
- update the welcome screen
- update the placement of the action buttons

re #RI-7437
diff --git a/redisinsight/ui/src/pages/slow-log/SlowLogPage.styles.ts b/redisinsight/ui/src/pages/slow-log/SlowLogPage.styles.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
+
+export const StyledSelect = styled(RiSelect)`
+  border: none;
+`
diff --git a/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx b/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx
@@ -32,17 +32,15 @@ import {
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 
 import { FormatedDate } from 'uiSrc/components'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Text } from 'uiSrc/components/base/text'
-import {
-  defaultValueRender,
-  RiSelect,
-} from 'uiSrc/components/base/forms/select/RiSelect'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Text, Title } from 'uiSrc/components/base/text'
+import { defaultValueRender } from 'uiSrc/components/base/forms/select/RiSelect'
 import { SlowLog } from 'apiSrc/modules/slow-log/models'
 
 import { Actions, EmptySlowLog, SlowLogTable } from './components'
 
 import styles from './styles.module.scss'
+import { StyledSelect } from './SlowLogPage.styles'
 
 const HIDE_TIMESTAMP_FROM_WIDTH = 850
 const DEFAULT_COUNT_VALUE = '50'
@@ -144,61 +142,78 @@ const SlowLogPage = () => {
   const isEmptySlowLog = !data.length
 
   return (
-    <div className={styles.main} data-testid="slow-log-page">
-      <Row className={styles.header} align="center" justify="between">
-        <FlexItem>
-          <AnalyticsTabs />
-        </FlexItem>
-
-        <FlexItem>
-          {connectionType !== ConnectionType.Cluster && config && (
-            <Text size="xs" color="subdued" data-testid="config-info">
-              Execution time:{' '}
-              {numberWithSpaces(
-                convertNumberByUnits(slowlogLogSlowerThan, durationUnit),
-              )}
-              &nbsp;
-              {durationUnit === DurationUnits.milliSeconds
-                ? DurationUnits.mSeconds
-                : DurationUnits.microSeconds}
-              , Max length: {numberWithSpaces(slowlogMaxLen)}
-            </Text>
-          )}
-        </FlexItem>
-      </Row>
-
+    <Col className={styles.main} data-testid="slow-log-page">
       <AutoSizer disableHeight>
         {({ width }) => (
           <div style={{ width }}>
+            <Row className={styles.header} align="center" justify="between">
+              <FlexItem>
+                <AnalyticsTabs />
+              </FlexItem>
+
+              <FlexItem>
+                <Row align="center" gap="xl">
+                  {connectionType !== ConnectionType.Cluster && config && (
+                    <Text size="s" color="secondary" data-testid="config-info">
+                      Execution time:{' '}
+                      {numberWithSpaces(
+                        convertNumberByUnits(
+                          slowlogLogSlowerThan,
+                          durationUnit,
+                        ),
+                      )}
+                      &nbsp;
+                      {durationUnit === DurationUnits.milliSeconds
+                        ? DurationUnits.mSeconds
+                        : DurationUnits.microSeconds}
+                      , Max length: {numberWithSpaces(slowlogMaxLen)}
+                    </Text>
+                  )}
+
+                  <Actions
+                    width={width}
+                    isEmptySlowLog={isEmptySlowLog}
+                    durationUnit={durationUnit}
+                    onClear={onClearSlowLogs}
+                    onRefresh={getSlowLogs}
+                  />
+                </Row>
+              </FlexItem>
+            </Row>
+
             <Row
               className={styles.actionsLine}
               align="center"
               justify="between"
             >
               <FlexItem>
-                <Row align="center" gap="s">
+                <Title size="L" color="primary">
+                  Slow Log
+                </Title>
+              </FlexItem>
+              <FlexItem>
+                <Row align="center" gap="xs">
                   <FlexItem>
-                    <Text color="subdued">
+                    <Text size="s" color="primary">
                       {connectionType === ConnectionType.Cluster
                         ? 'Display per node:'
                         : 'Display up to:'}
                     </Text>
                   </FlexItem>
                   <FlexItem>
-                    <RiSelect
+                    <StyledSelect
                       options={countOptions}
                       valueRender={defaultValueRender}
                       value={count}
                       onChange={(value) => setCount(value)}
-                      className={styles.countSelect}
                       data-testid="count-select"
                     />
                   </FlexItem>
                   {width > HIDE_TIMESTAMP_FROM_WIDTH && (
                     <FlexItem style={{ marginLeft: 12 }}>
                       <Text
-                        size="xs"
-                        color="subdued"
+                        size="s"
+                        color="secondary"
                         data-testid="entries-from-timestamp"
                       >
                         ({data.length} entries
@@ -214,15 +229,6 @@ const SlowLogPage = () => {
                   )}
                 </Row>
               </FlexItem>
-              <FlexItem>
-                <Actions
-                  width={width}
-                  isEmptySlowLog={isEmptySlowLog}
-                  durationUnit={durationUnit}
-                  onClear={onClearSlowLogs}
-                  onRefresh={getSlowLogs}
-                />
-              </FlexItem>
             </Row>
           </div>
         )}
@@ -239,7 +245,7 @@ const SlowLogPage = () => {
           durationUnit={durationUnit}
         />
       )}
-    </div>
+    </Col>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.styles.ts b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const StyledInfoIcon = styled.span`
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+`
diff --git a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
-import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { DurationUnits } from 'uiSrc/constants'
@@ -22,6 +21,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 import SlowLogConfig from '../SlowLogConfig'
 import styles from './styles.module.scss'
+import { StyledInfoIcon } from './Actions.styles'
 
 export interface Props {
   width: number
@@ -133,8 +133,8 @@ const Actions = (props: Props) => {
   )
 
   return (
-    <Row className={styles.actions} gap="s" align="center">
-      <FlexItem grow={5} style={{ alignItems: 'flex-end' }}>
+    <Row gap="s" align="center">
+      <FlexItem>
         <AutoRefresh
           postfix="slowlog"
           loading={loading}
@@ -147,17 +147,18 @@ const Actions = (props: Props) => {
           testid="slowlog"
         />
       </FlexItem>
-      <FlexItem grow>
+
+      <FlexItem>
         <RiPopover
           ownFocus
           anchorPosition="downRight"
           isOpen={isPopoverConfigOpen}
           panelPaddingSize="m"
           closePopover={() => {}}
-          panelClassName={cx('popover-without-top-tail', styles.configWrapper)}
           button={
             <SecondaryButton
               size="small"
+              inverted
               icon={SettingsIcon}
               aria-label="Configure"
               onClick={() => showConfigPopover()}
@@ -173,8 +174,9 @@ const Actions = (props: Props) => {
           />
         </RiPopover>
       </FlexItem>
+
       {!isEmptySlowLog && (
-        <FlexItem grow>
+        <FlexItem>
           <RiPopover
             anchorPosition="leftCenter"
             ownFocus
@@ -200,11 +202,11 @@ const Actions = (props: Props) => {
           </RiPopover>
         </FlexItem>
       )}
-      <FlexItem grow>
+
+      <FlexItem>
         <RiTooltip
           title="Slow Log"
           position="bottom"
-          anchorClassName={styles.icon}
           content={
             <span data-testid="slowlog-tooltip-text">
               Slow Log is a list of slow operations for your Redis instance.
@@ -218,12 +220,9 @@ const Actions = (props: Props) => {
             </span>
           }
         >
-          <RiIcon
-            className={styles.infoIcon}
-            type="InfoIcon"
-            style={{ cursor: 'pointer' }}
-            data-testid="slow-log-tooltip-icon"
-          />
+          <StyledInfoIcon>
+            <RiIcon type="InfoIcon" data-testid="slow-log-tooltip-icon" />
+          </StyledInfoIcon>
         </RiTooltip>
       </FlexItem>
     </Row>
diff --git a/redisinsight/ui/src/pages/slow-log/components/Actions/styles.module.scss b/redisinsight/ui/src/pages/slow-log/components/Actions/styles.module.scss
@@ -18,20 +18,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    &:hover {
-      color: var(--iconsDefaultHoverColor);
-    }
-
-    :global(.euiIcon) {
-      width: 18px;
-      height: 18px;
-    }
-
-    .infoIcon {
-      width: 20px;
-      height: 20px;
-    }
   }
 }
 
@@ -60,9 +46,3 @@
     color: var(--htmlColor);
   }
 }
-
-.configWrapper {
-  padding: 24px !important;
-  box-shadow: 0px 3px 15px #00000099;
-  background-color: var(--euiColorLightestShade) !important;
-}
diff --git a/redisinsight/ui/src/pages/slow-log/components/EmptySlowLog/EmptySlowLog.styles.ts b/redisinsight/ui/src/pages/slow-log/components/EmptySlowLog/EmptySlowLog.styles.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const StyledImage = styled.img`
+  max-width: 120px;
+`
diff --git a/redisinsight/ui/src/pages/slow-log/components/EmptySlowLog/EmptySlowLog.tsx b/redisinsight/ui/src/pages/slow-log/components/EmptySlowLog/EmptySlowLog.tsx
@@ -4,8 +4,10 @@ import { Title } from 'uiSrc/components/base/text/Title'
 import { convertNumberByUnits } from 'uiSrc/pages/slow-log/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { Text } from 'uiSrc/components/base/text'
+import { Col } from 'uiSrc/components/base/layout/flex'
+import NoQueryResultsIcon from 'uiSrc/assets/img/vector-search/no-query-results.svg'
 
-import styles from '../styles.module.scss'
+import { StyledImage } from './EmptySlowLog.styles'
 
 export interface Props {
   durationUnit: DurationUnits
@@ -16,24 +18,27 @@ const EmptySlowLog = (props: Props) => {
   const { durationUnit, slowlogLogSlowerThan } = props
 
   return (
-    <div className={styles.noSlowLogWrapper} data-testid="empty-slow-log">
-      <div className={styles.noSlowLogText}>
-        <Title size="M" className={styles.noFoundTitle}>
-          No Slow Logs found
-        </Title>
-        <Text color="subdued">
-          Either no commands exceeding&nbsp;
-          {numberWithSpaces(
-            convertNumberByUnits(slowlogLogSlowerThan, durationUnit),
-          )}
-          &nbsp;
-          {durationUnit === DurationUnits.milliSeconds
-            ? DurationUnits.mSeconds
-            : DurationUnits.microSeconds}
-          &nbsp;were found or Slow Log is disabled on the server.
-        </Text>
-      </div>
-    </div>
+    <Col justify="center" grow data-testid="empty-slow-log">
+      <Col align="center" justify="center" gap="xxl">
+        <StyledImage as="img" src={NoQueryResultsIcon} alt="No Slow Logs" />
+        <Col align="center" gap="m" grow={false}>
+          <Title size="M" color="primary">
+            No Slow Logs found
+          </Title>
+          <Text color="primary">
+            Either no commands exceeding&nbsp;
+            {numberWithSpaces(
+              convertNumberByUnits(slowlogLogSlowerThan, durationUnit),
+            )}
+            &nbsp;
+            {durationUnit === DurationUnits.milliSeconds
+              ? DurationUnits.mSeconds
+              : DurationUnits.microSeconds}
+            &nbsp;were found or Slow Log is disabled on the server.
+          </Text>
+        </Col>
+      </Col>
+    </Col>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.styles.ts b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.styles.ts
@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+import { Col } from 'uiSrc/components/base/layout/flex'
+import { TextInput } from 'uiSrc/components/base/inputs'
+import { theme } from '@redis-ui/styles'
+
+export const StyledContainer = styled(Col)<{ $isCluster?: boolean }>`
+  width: ${({ $isCluster }) => ($isCluster ? '394px' : '550px')};
+  padding: ${theme.core.space.space200};
+  border-radius: 4px;
+`
+
+export const StyledInput = styled(TextInput)`
+  width: 160px;
+`
diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx
diff --git a/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/styles.module.scss b/redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/styles.module.scss
