RI-7437 Rework the visuals of the Slow Log page

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;
+`

redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx

@@ -32,17 +32,15 @@
 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,85 +142,93 @@
   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
                         {lastTimestamp && (
                           <>
                             <span>&nbsp;from &nbsp;</span>
                             <FormatedDate date={lastTimestamp * 1000} />
                           </>
                         )}
                         )
                       </Text>
                     </FlexItem>
                   )}
                 </Row>
               </FlexItem>
-              <FlexItem>
-                <Actions
-                  width={width}
-                  isEmptySlowLog={isEmptySlowLog}
-                  durationUnit={durationUnit}
-                  onClear={onClearSlowLogs}
-                  onRefresh={getSlowLogs}
-                />
-              </FlexItem>
             </Row>
           </div>
         )}
@@ -239,7 +245,7 @@
           durationUnit={durationUnit}
         />
       )}
-    </div>
+    </Col>
   )
 }
 

redisinsight/ui/src/pages/slow-log/components/Actions/Actions.styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const StyledInfoIcon = styled.span`
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+`
+
+export const StyledDatabaseName = styled.span`
+  color: ${({ theme }) => theme.semantic.color.text.primary500};
+`

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'
@@ -9,19 +8,24 @@ import { AutoRefresh } from 'uiSrc/components'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import {
+  Col,
+  FlexGroup,
+  FlexItem,
+  Row,
+} from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { EraserIcon, SettingsIcon } from 'uiSrc/components/base/icons'
 import {
   DestructiveButton,
   IconButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { Text } from 'uiSrc/components/base/text'
+import { Text, Title } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 import SlowLogConfig from '../SlowLogConfig'
-import styles from './styles.module.scss'
+import { StyledDatabaseName, StyledInfoIcon } from './Actions.styles'
 
 export interface Props {
   width: number
@@ -99,65 +103,60 @@ const Actions = (props: Props) => {
   }
 
   const ToolTipContent = (
-    <div className={styles.popoverContainer}>
-      <RiIcon
-        type="ToastDangerIcon"
-        color="attention600"
-        className={styles.warningIcon}
-      />
-      <div>
-        <Text size="m" component="div">
-          <h4 className={styles.popoverTitle}>
-            <b>Clear Slow Log?</b>
-          </h4>
-          <Text size="xs" color="subdued">
+    <FlexGroup direction="column" gap="l">
+      <Col gap="m">
+        <Title size="S" color="primary">
+          Clear Slow Log?
+        </Title>
+        <Col>
+          <Text size="m" color="primary">
             Slow Log will be cleared for&nbsp;
-            <span className={styles.popoverDBName}>{name}</span>
-            <br />
+            <StyledDatabaseName>{name}</StyledDatabaseName>
+          </Text>
+          <Text size="xs" color="secondary">
             NOTE: This is server configuration
           </Text>
-        </Text>
-        <div className={styles.popoverFooter}>
-          <DestructiveButton
-            size="small"
-            icon={EraserIcon}
-            onClick={() => handleClearClick()}
-            className={styles.popoverDeleteBtn}
-            data-testid="reset-confirm-btn"
-          >
-            Clear
-          </DestructiveButton>
-        </div>
-      </div>
-    </div>
+        </Col>
+      </Col>
+      <Row justify="end">
+        <DestructiveButton
+          size="small"
+          icon={EraserIcon}
+          onClick={() => handleClearClick()}
+          data-testid="reset-confirm-btn"
+        >
+          Clear
+        </DestructiveButton>
+      </Row>
+    </FlexGroup>
   )
 
   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}
           displayText={width > HIDE_REFRESH_LABEL_WIDTH}
           lastRefreshTime={lastRefreshTime}
-          containerClassName={styles.refreshContainer}
           onRefresh={() => onRefresh()}
           onEnableAutoRefresh={handleEnableAutoRefresh}
           onChangeAutoRefreshRate={handleChangeAutoRefreshRate}
           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,20 +172,17 @@ const Actions = (props: Props) => {
           />
         </RiPopover>
       </FlexItem>
+
       {!isEmptySlowLog && (
-        <FlexItem grow>
+        <FlexItem>
           <RiPopover
             anchorPosition="leftCenter"
             ownFocus
             isOpen={isPopoverClearOpen}
             closePopover={closePopoverClear}
             panelPaddingSize="m"
             button={
-              <RiTooltip
-                position="left"
-                content="Clear Slow Log"
-                anchorClassName={styles.icon}
-              >
+              <RiTooltip position="left" content="Clear Slow Log">
                 <IconButton
                   icon={EraserIcon}
                   aria-label="Clear Slow Log"
@@ -200,11 +196,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 +214,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>