From 67b73f410a3e7b341a8549e41b755e7c5eb6a2d3 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Thu, 27 Nov 2025 13:58:33 +0200 Subject: [PATCH 1/7] feat(ui): create shared AnalysisPageContainer component Create reusable container component for analysis pages with consistent horizontal padding. References: #RI-7785 --- .../AnalysisPageContainer.styles.ts | 8 ++++++++ .../AnalysisPageContainer.tsx | 12 ++++++++++++ .../AnalysisPageContainer.types.ts | 6 ++++++ .../components/analysis-page-container/index.ts | 2 ++ 4 files changed, 28 insertions(+) create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.styles.ts create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.tsx create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.types.ts create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/index.ts diff --git a/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.styles.ts b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.styles.ts new file mode 100644 index 0000000000..b6b113e665 --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components' +import { Col } from 'uiSrc/components/base/layout/flex' +import { Theme } from 'uiSrc/components/base/theme/types' + +export const StyledAnalysisPageContainer = styled(Col)` + overflow: auto; + padding-inline: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; +` diff --git a/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.tsx b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.tsx new file mode 100644 index 0000000000..30b8870597 --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { StyledAnalysisPageContainer } from './AnalysisPageContainer.styles' +import { AnalysisPageContainerProps } from './AnalysisPageContainer.types' + +export const AnalysisPageContainer = ({ + children, + ...rest +}: AnalysisPageContainerProps) => ( + + {children} + +) diff --git a/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.types.ts b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.types.ts new file mode 100644 index 0000000000..3a6e8af41f --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/AnalysisPageContainer.types.ts @@ -0,0 +1,6 @@ +import { ComponentPropsWithoutRef } from 'react' +import { StyledAnalysisPageContainer } from './AnalysisPageContainer.styles' + +export type AnalysisPageContainerProps = ComponentPropsWithoutRef< + typeof StyledAnalysisPageContainer +> diff --git a/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/index.ts b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/index.ts new file mode 100644 index 0000000000..44bc7a2de0 --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analysis-page-container/index.ts @@ -0,0 +1,2 @@ +export { AnalysisPageContainer } from './AnalysisPageContainer' +export type { AnalysisPageContainerProps } from './AnalysisPageContainer.types' From 27a4d77cf0ef4cb1a28c829db357f7d00d444560 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Thu, 27 Nov 2025 14:03:29 +0200 Subject: [PATCH 2/7] refactor(ui): use shared AnalysisPageContainer in Database Analysis page Replace local MainContainer with shared AnalysisPageContainer component. References: #RI-7785 --- .../pages/database-analysis/DatabaseAnalysisPageView.tsx | 6 +++--- .../ui/src/pages/database-analysis/components/styles.ts | 7 ------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/redisinsight/ui/src/pages/database-analysis/DatabaseAnalysisPageView.tsx b/redisinsight/ui/src/pages/database-analysis/DatabaseAnalysisPageView.tsx index ed5e98c2e2..3fec948d40 100644 --- a/redisinsight/ui/src/pages/database-analysis/DatabaseAnalysisPageView.tsx +++ b/redisinsight/ui/src/pages/database-analysis/DatabaseAnalysisPageView.tsx @@ -4,7 +4,7 @@ import { type ShortDatabaseAnalysis, } from 'apiSrc/modules/database-analysis/models' import { Nullable } from 'uiSrc/utils' -import { MainContainer } from './components/styles' +import { AnalysisPageContainer } from './components/analysis-page-container' import { Header } from './components' import DatabaseAnalysisTabs from './components/data-nav-tabs' @@ -23,7 +23,7 @@ export const DatabaseAnalysisPageView = ({ handleSelectAnalysis, }: Props) => { return ( - +
- + ) } diff --git a/redisinsight/ui/src/pages/database-analysis/components/styles.ts b/redisinsight/ui/src/pages/database-analysis/components/styles.ts index 65ff1bb03d..ad68a556e1 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/styles.ts +++ b/redisinsight/ui/src/pages/database-analysis/components/styles.ts @@ -34,10 +34,3 @@ export const SwitchExtrapolateResults = styled(SwitchInput)` export const SectionTitle = styled(Title)` display: inline-block; ` - -// Styled component for the main container with theme border -export const MainContainer = styled(Col)>` - height: 100%; - overflow: auto; - padding-inline: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; -` From 78941e96d3f50350ccd0ece74140258d10bab864 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Thu, 27 Nov 2025 14:18:33 +0200 Subject: [PATCH 3/7] fix(ui): add consistent padding to Overview page using shared container Wrap Overview page content in shared AnalysisPageContainer to add consistent horizontal padding. References: #RI-7785 --- .../ui/src/pages/cluster-details/ClusterDetailsPage.tsx | 5 +++-- redisinsight/ui/src/pages/cluster-details/styles.module.scss | 4 ---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx index f29466515a..bc40f3635f 100644 --- a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx +++ b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx @@ -27,6 +27,7 @@ import { import { ColorScheme, getRGBColorByScheme, RGBColor } from 'uiSrc/utils/colors' import { ConnectionType } from 'uiSrc/slices/interfaces' +import { AnalysisPageContainer } from 'uiSrc/pages/database-analysis/components/analysis-page-container' import { ClusterDetailsHeader, ClusterDetailsGraphics, @@ -134,13 +135,13 @@ const ClusterDetailsPage = () => { } return ( -
+
-
+ ) } diff --git a/redisinsight/ui/src/pages/cluster-details/styles.module.scss b/redisinsight/ui/src/pages/cluster-details/styles.module.scss index f4a0cbe469..216f11c98a 100644 --- a/redisinsight/ui/src/pages/cluster-details/styles.module.scss +++ b/redisinsight/ui/src/pages/cluster-details/styles.module.scss @@ -1,7 +1,3 @@ -.main { - height: 100%; -} - .wrapper { @include eui.scrollBar; overflow-y: auto; From aa10c760d34ee9c5036815a7e11153d30e546d18 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Thu, 27 Nov 2025 14:27:57 +0200 Subject: [PATCH 4/7] refactor(ui): replace local styles with styled-components in ClusterDetailsPage Remove styles.module.scss and implement styled-components for consistent styling in the ClusterDetailsPage References: #RI-7785 --- .../pages/cluster-details/ClusterDetailsPage.styles.ts | 8 ++++++++ .../ui/src/pages/cluster-details/ClusterDetailsPage.tsx | 7 +++---- .../ui/src/pages/cluster-details/styles.module.scss | 8 -------- 3 files changed, 11 insertions(+), 12 deletions(-) create mode 100644 redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts delete mode 100644 redisinsight/ui/src/pages/cluster-details/styles.module.scss diff --git a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts new file mode 100644 index 0000000000..b51f32614f --- /dev/null +++ b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts @@ -0,0 +1,8 @@ +import styled from 'styled-components' +import { scrollbarStyles } from 'uiSrc/styles/mixins' + +export const Wrapper = styled.div` + ${scrollbarStyles()} + max-height: calc(100% - 134px); + max-width: 1920px; +` diff --git a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx index bc40f3635f..8b2cb257cd 100644 --- a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx +++ b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx @@ -33,8 +33,7 @@ import { ClusterDetailsGraphics, ClusterNodesTable, } from './components' - -import styles from './styles.module.scss' +import { Wrapper } from './ClusterDetailsPage.styles' export interface ModifiedClusterNodes extends ClusterNodeDetails { letter: string @@ -137,10 +136,10 @@ const ClusterDetailsPage = () => { return ( -
+ -
+ ) } diff --git a/redisinsight/ui/src/pages/cluster-details/styles.module.scss b/redisinsight/ui/src/pages/cluster-details/styles.module.scss deleted file mode 100644 index 216f11c98a..0000000000 --- a/redisinsight/ui/src/pages/cluster-details/styles.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.wrapper { - @include eui.scrollBar; - overflow-y: auto; - overflow-x: hidden; - max-height: calc(100% - 134px); - - max-width: 1920px; -} From 4cea956fa17d1cf15bffb5f98a08eb48fb5b2757 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Thu, 27 Nov 2025 14:42:29 +0200 Subject: [PATCH 5/7] fix(ui): add consistent padding to Slow Log page using shared container Replace main container with shared AnalysisPageContainer to add consistent horizontal padding. Remove unused SCSS styles. References: #RI-7785 --- .../ui/src/pages/slow-log/SlowLogPage.tsx | 16 ++++------ .../ui/src/pages/slow-log/styles.module.scss | 30 ------------------- 2 files changed, 6 insertions(+), 40 deletions(-) delete mode 100644 redisinsight/ui/src/pages/slow-log/styles.module.scss diff --git a/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx b/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx index 49ec63e57e..7642cf3a30 100644 --- a/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx +++ b/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx @@ -32,14 +32,14 @@ import { import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics' import { FormatedDate } from 'uiSrc/components' -import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { 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 { AnalysisPageContainer } from 'uiSrc/pages/database-analysis/components/analysis-page-container' import { Actions, EmptySlowLog, SlowLogTable } from './components' -import styles from './styles.module.scss' import { StyledSelect } from './SlowLogPage.styles' const HIDE_TIMESTAMP_FROM_WIDTH = 850 @@ -142,11 +142,11 @@ const SlowLogPage = () => { const isEmptySlowLog = !data.length return ( - + {({ width }) => (
- + @@ -181,11 +181,7 @@ const SlowLogPage = () => { - + Slow Log @@ -245,7 +241,7 @@ const SlowLogPage = () => { durationUnit={durationUnit} /> )} - </Col> + </AnalysisPageContainer> ) } diff --git a/redisinsight/ui/src/pages/slow-log/styles.module.scss b/redisinsight/ui/src/pages/slow-log/styles.module.scss deleted file mode 100644 index 1450a2cd80..0000000000 --- a/redisinsight/ui/src/pages/slow-log/styles.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -.main { - height: 100%; - - .title { - font-size: 16px; - line-height: 24px; - } - - .actionsLine { - margin-top: 6px; - margin-bottom: 6px; - } - - .countSelectWrapper { - height: 30px; - } - - .countSelect { - min-width: 58px; - max-width: 84px; - height: 30px; - padding-left: 12px; - padding-right: 32px; - border: none !important; - - & ~ :global(.euiFormControlLayoutIcons) svg { - width: 12px; - } - } -} From 3c3ebf773dcf965e33060dcd08c1d6d602ee7fa3 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov <valentin.kirilov@redis.com> Date: Thu, 27 Nov 2025 16:50:35 +0200 Subject: [PATCH 6/7] fix(ui): integrate AnalyticsPageHeader in ClusterDetails and SlowLog pages - Replace AnalyticsTabs with the new AnalyticsPageHeader component for improved consistency across pages. - Update styles and layout to enhance visual coherence. References: #RI-7785 --- .../ClusterDetailsHeader.tsx | 5 +- .../cluster-details-header/styles.module.scss | 1 - .../AnalyticsPageHeader.styles.ts | 23 +++ .../AnalyticsPageHeader.tsx | 26 +++ .../AnalyticsPageHeader.types.ts | 6 + .../components/analytics-page-header/index.ts | 2 + .../DatabaseAnalysisTabs.styles.ts | 10 +- .../data-nav-tabs/DatabaseAnalysisTabs.tsx | 9 +- .../components/header/Header.styles.ts | 4 +- .../components/header/Header.tsx | 168 +++++++++--------- .../src/pages/slow-log/SlowLogPage.styles.ts | 8 + .../ui/src/pages/slow-log/SlowLogPage.tsx | 144 +++++++-------- .../slow-log/components/Actions/Actions.tsx | 10 +- 13 files changed, 247 insertions(+), 169 deletions(-) create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.styles.ts create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.tsx create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.types.ts create mode 100644 redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/index.ts diff --git a/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx b/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx index b2ce41ab18..b831180b35 100644 --- a/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx +++ b/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/ClusterDetailsHeader.tsx @@ -15,10 +15,10 @@ import { ConnectionType, CONNECTION_TYPE_DISPLAY, } from 'uiSrc/slices/interfaces' -import AnalyticsTabs from 'uiSrc/components/analytics-tabs' import { clusterDetailsSelector } from 'uiSrc/slices/analytics/clusterDetails' import { Text } from 'uiSrc/components/base/text' import { RiTooltip } from 'uiSrc/components' +import { AnalyticsPageHeader } from 'uiSrc/pages/database-analysis/components/analytics-page-header' import styles from './styles.module.scss' @@ -91,8 +91,7 @@ const ClusterDetailsHeader = () => { return ( <div className={styles.container} data-testid="cluster-details-header"> - <AnalyticsTabs /> - + <AnalyticsPageHeader /> {loading && !data && ( <div className={styles.loading} data-testid="cluster-details-loading"> <LoadingContent lines={2} /> diff --git a/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/styles.module.scss b/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/styles.module.scss index ac015f280f..d8c205b203 100644 --- a/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/styles.module.scss +++ b/redisinsight/ui/src/pages/cluster-details/components/cluster-details-header/styles.module.scss @@ -1,6 +1,5 @@ .container { background-color: var(--euiColorEmptyShade); - max-width: 960px; } .content { diff --git a/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.styles.ts b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.styles.ts new file mode 100644 index 0000000000..00640f025e --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.styles.ts @@ -0,0 +1,23 @@ +import styled from 'styled-components' +import { Row } from 'uiSrc/components/base/layout/flex' +import { Theme } from 'uiSrc/components/base/theme/types' + +const getBorderColor = (theme: Theme) => + theme.name === 'dark' ? theme.color.dark600 : theme.color.dusk150 + +export const HeaderContainer = styled.div` + width: 100%; + border-bottom: 4px solid + ${({ theme }: { theme: Theme }) => getBorderColor(theme)}; /* Mimic the tabs border width and color */ +` + +export const HeaderContent = styled(Row).attrs({ + align: 'center', + justify: 'between', +})` + min-height: 36px; +` + +export const TabsWrapper = styled.div` + margin-bottom: -14px; /* Move it so it overlaps with the border of the tabs container */ +` diff --git a/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.tsx b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.tsx new file mode 100644 index 0000000000..59710742ae --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { FlexItem } from 'uiSrc/components/base/layout/flex' +import AnalyticsTabs from 'uiSrc/components/analytics-tabs' +import { AnalyticsPageHeaderProps } from './AnalyticsPageHeader.types' +import { + HeaderContainer, + HeaderContent, + TabsWrapper, +} from './AnalyticsPageHeader.styles' + +export const AnalyticsPageHeader = ({ + actions, + children, +}: AnalyticsPageHeaderProps) => ( + <HeaderContainer> + <HeaderContent> + <FlexItem> + <TabsWrapper> + <AnalyticsTabs /> + </TabsWrapper> + </FlexItem> + {actions && <FlexItem>{actions}</FlexItem>} + </HeaderContent> + {children} + </HeaderContainer> +) diff --git a/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.types.ts b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.types.ts new file mode 100644 index 0000000000..e644e004a2 --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/AnalyticsPageHeader.types.ts @@ -0,0 +1,6 @@ +import { ReactNode } from 'react' + +export interface AnalyticsPageHeaderProps { + actions?: ReactNode + children?: ReactNode +} diff --git a/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/index.ts b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/index.ts new file mode 100644 index 0000000000..b23a0e8153 --- /dev/null +++ b/redisinsight/ui/src/pages/database-analysis/components/analytics-page-header/index.ts @@ -0,0 +1,2 @@ +export { AnalyticsPageHeader } from './AnalyticsPageHeader' +export type { AnalyticsPageHeaderProps } from './AnalyticsPageHeader.types' diff --git a/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.styles.ts b/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.styles.ts index f07008935f..ccf5487e00 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.styles.ts +++ b/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.styles.ts @@ -1,5 +1,13 @@ import styled from 'styled-components' +import { Theme } from 'uiSrc/components/base/theme/types' +import Tabs from 'uiSrc/components/base/layout/tabs' -export const EmptyMessageContainer = styled.div<React.HTMLAttributes<HTMLDivElement>>` +export const EmptyMessageContainer = styled.div< + React.HTMLAttributes<HTMLDivElement> +>` height: calc(100% - 96px); ` + +export const StyledTabs = styled(Tabs)` + padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; +` diff --git a/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.tsx b/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.tsx index 7c0a280a4d..f05754a541 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/data-nav-tabs/DatabaseAnalysisTabs.tsx @@ -13,7 +13,7 @@ import { Nullable } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding' import { recommendationsSelector } from 'uiSrc/slices/recommendations/recommendations' -import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs' +import { TabInfo } from 'uiSrc/components/base/layout/tabs' import { Text } from 'uiSrc/components/base/text' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { @@ -23,7 +23,10 @@ import { import Recommendations from '../recommendations-view' import AnalysisDataView from '../analysis-data-view' -import { EmptyMessageContainer } from './DatabaseAnalysisTabs.styles' +import { + EmptyMessageContainer, + StyledTabs, +} from './DatabaseAnalysisTabs.styles' export interface Props { loading: boolean @@ -117,7 +120,7 @@ const DatabaseAnalysisTabs = (props: Props) => { } return ( - <Tabs + <StyledTabs tabs={tabs} value={viewTab} onChange={handleTabChange} diff --git a/redisinsight/ui/src/pages/database-analysis/components/header/Header.styles.ts b/redisinsight/ui/src/pages/database-analysis/components/header/Header.styles.ts index e1e3a057e3..d4b3bda39d 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/header/Header.styles.ts +++ b/redisinsight/ui/src/pages/database-analysis/components/header/Header.styles.ts @@ -5,9 +5,7 @@ import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' export const Container = styled(Row).attrs({ align: 'center', -})` - padding: 12px 0; -` +})`` export const InfoIcon = styled(RiIcon).attrs({ type: 'InfoIcon', size: 'l', diff --git a/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx b/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx index e4cf8e4420..60e840db24 100644 --- a/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx +++ b/redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx @@ -8,8 +8,8 @@ import { getApproximatePercentage } from 'uiSrc/utils/validations' import { appContextDbConfig } from 'uiSrc/slices/app/context' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { ConnectionType } from 'uiSrc/slices/interfaces' -import AnalyticsTabs from 'uiSrc/components/analytics-tabs' import { comboBoxToArray, getDbIndex, Nullable } from 'uiSrc/utils' +import { AnalyticsPageHeader } from 'uiSrc/pages/database-analysis/components/analytics-page-header' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { ANALYZE_CLUSTER_TOOLTIP_MESSAGE, @@ -80,87 +80,93 @@ const Header = (props: Props) => { return ( <div data-testid="db-analysis-header"> - <AnalyticsTabs /> - <Container justify={items.length ? 'between' : 'end'}> - {!!items.length && ( - <FlexItem> - <Row align="center" wrap> - <HideFor sizes={['xs', 's']}> - <FlexItem> - <Text size="s">Report generated on:</Text> - </FlexItem> - </HideFor> - <FlexItem grow> - <HeaderSelect - options={analysisOptions} - valueRender={({ option }) => - option.inputDisplay as JSX.Element - } - value={selectedValue ?? ''} - onChange={(value: string) => onChangeSelectedAnalysis(value)} - data-testid="select-report" - /> - </FlexItem> - {!!progress && ( - <FlexItem> - <Text - className={styles.progress} - size="s" - data-testid="bulk-delete-summary" - > - <Text - component="span" - color={ - progress.total === progress.processed - ? undefined - : 'warning' + <AnalyticsPageHeader + actions={ + <Container justify={items.length ? 'between' : 'end'} gap="l"> + {!!items.length && ( + <FlexItem> + <Row align="center" wrap> + <HideFor sizes={['xs', 's']}> + <FlexItem> + <Text size="s">Report generated on:</Text> + </FlexItem> + </HideFor> + <FlexItem grow> + <HeaderSelect + options={analysisOptions} + valueRender={({ option }) => + option.inputDisplay as JSX.Element + } + value={selectedValue ?? ''} + onChange={(value: string) => + onChangeSelectedAnalysis(value) } - className={styles.progress} - size="s" - data-testid="analysis-progress" - > - {`Scanned ${getApproximatePercentage( - progress.total, - progress.processed, - )}`} - </Text> - {` (${numberWithSpaces(progress.processed)}`}/ - {numberWithSpaces(progress.total)} - {' keys) '} - </Text> - </FlexItem> - )} - </Row> - </FlexItem> - )} - <FlexItem> - <Row justify="end" align="center" gap="s"> - <PrimaryButton - aria-label="New reports" - data-testid="start-database-analysis-btn" - icon={CaretRightIcon} - iconSide="left" - disabled={analysisLoading} - onClick={handleClick} - > - New Report - </PrimaryButton> - <RiTooltip - position="bottom" - anchorClassName={styles.tooltipAnchor} - title="Database Analysis" - data-testid="db-new-reports-tooltip" - content={ - connectionType === ConnectionType.Cluster - ? ANALYZE_CLUSTER_TOOLTIP_MESSAGE - : ANALYZE_TOOLTIP_MESSAGE - } - > - <InfoIcon data-testid="db-new-reports-icon" /> - </RiTooltip> - </Row> - </FlexItem> - </Container> + data-testid="select-report" + /> + </FlexItem> + {!!progress && ( + <FlexItem> + <Text + className={styles.progress} + size="s" + data-testid="bulk-delete-summary" + > + <Text + component="span" + color={ + progress.total === progress.processed + ? undefined + : 'warning' + } + className={styles.progress} + size="s" + data-testid="analysis-progress" + > + {`Scanned ${getApproximatePercentage( + progress.total, + progress.processed, + )}`} + </Text> + {` (${numberWithSpaces(progress.processed)}`}/ + {numberWithSpaces(progress.total)} + {' keys) '} + </Text> + </FlexItem> + )} + </Row> + </FlexItem> + )} + <FlexItem> + <Row justify="end" align="center" gap="s"> + <PrimaryButton + aria-label="New reports" + data-testid="start-database-analysis-btn" + icon={CaretRightIcon} + iconSide="left" + size="small" + disabled={analysisLoading} + onClick={handleClick} + > + New Report + </PrimaryButton> + <RiTooltip + position="bottom" + anchorClassName={styles.tooltipAnchor} + title="Database Analysis" + data-testid="db-new-reports-tooltip" + content={ + connectionType === ConnectionType.Cluster + ? ANALYZE_CLUSTER_TOOLTIP_MESSAGE + : ANALYZE_TOOLTIP_MESSAGE + } + > + <InfoIcon data-testid="db-new-reports-icon" /> + </RiTooltip> + </Row> + </FlexItem> + </Container> + } + /> </div> ) } diff --git a/redisinsight/ui/src/pages/slow-log/SlowLogPage.styles.ts b/redisinsight/ui/src/pages/slow-log/SlowLogPage.styles.ts index 01c9be7811..4b59018e17 100644 --- a/redisinsight/ui/src/pages/slow-log/SlowLogPage.styles.ts +++ b/redisinsight/ui/src/pages/slow-log/SlowLogPage.styles.ts @@ -1,6 +1,14 @@ import styled from 'styled-components' +import { Theme } from 'uiSrc/components/base/theme/types' +import { Col } from 'uiSrc/components/base/layout/flex' import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' export const StyledSelect = styled(RiSelect)` border: none; ` + +export const ContentWrapper = styled(Col).attrs({ + grow: true, +})` + padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space200}; +` diff --git a/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx b/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx index 7642cf3a30..957f3df636 100644 --- a/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx +++ b/redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx @@ -24,7 +24,6 @@ import { } from 'uiSrc/telemetry' import { formatLongName, getDbIndex, setTitle } from 'uiSrc/utils' import { numberWithSpaces } from 'uiSrc/utils/numbers' -import AnalyticsTabs from 'uiSrc/components/analytics-tabs' import { analyticsSettingsSelector, setAnalyticsViewTab, @@ -37,10 +36,12 @@ 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 { AnalysisPageContainer } from 'uiSrc/pages/database-analysis/components/analysis-page-container' +import { AnalyticsPageHeader } from 'uiSrc/pages/database-analysis/components/analytics-page-header' import { Actions, EmptySlowLog, SlowLogTable } from './components' -import { StyledSelect } from './SlowLogPage.styles' +import { StyledSelect, ContentWrapper } from './SlowLogPage.styles' +import { Container } from '../database-analysis/components/header/Header.styles' const HIDE_TIMESTAMP_FROM_WIDTH = 850 const DEFAULT_COUNT_VALUE = '50' @@ -146,13 +147,9 @@ const SlowLogPage = () => { <AutoSizer disableHeight> {({ width }) => ( <div style={{ width }}> - <Row align="center" justify="between"> - <FlexItem> - <AnalyticsTabs /> - </FlexItem> - - <FlexItem> - <Row align="center" gap="xl"> + <AnalyticsPageHeader + actions={ + <Container align="center" gap="xl"> {connectionType !== ConnectionType.Cluster && config && ( <Text size="s" color="secondary" data-testid="config-info"> Execution time:{' '} @@ -177,70 +174,77 @@ const SlowLogPage = () => { onClear={onClearSlowLogs} onRefresh={getSlowLogs} /> - </Row> - </FlexItem> - </Row> - - <Row align="center" justify="between"> - <FlexItem> - <Title size="L" color="primary"> - Slow Log - - - - - - - {connectionType === ConnectionType.Cluster - ? 'Display per node:' - : 'Display up to:'} - - - - setCount(value)} - data-testid="count-select" - /> - - {width > HIDE_TIMESTAMP_FROM_WIDTH && ( - - - ({data.length} entries - {lastTimestamp && ( - <> -  from   - - - )} - ) - - - )} - - - + + } + />
)} - {isEmptySlowLog ? ( - - ) : ( - - )} + + + {({ width }) => ( +
+ + + + Slow Log + + + + + + + {connectionType === ConnectionType.Cluster + ? 'Display per node:' + : 'Display up to:'} + + + + setCount(value)} + data-testid="count-select" + /> + + {width > HIDE_TIMESTAMP_FROM_WIDTH && ( + + + ({data.length} entries + {lastTimestamp && ( + <> +  from   + + + )} + ) + + + )} + + + +
+ )} + + {isEmptySlowLog ? ( + + ) : ( + + )} + ) } diff --git a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx index fa9eb7e63b..df819afba1 100644 --- a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx +++ b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx @@ -11,10 +11,7 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { 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 { - IconButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' +import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import SlowLogConfig from '../SlowLogConfig' @@ -114,16 +111,15 @@ const Actions = (props: Props) => { panelPaddingSize="m" closePopover={() => {}} button={ - showConfigPopover()} data-testid="configure-btn" > Configure - + } > Date: Fri, 28 Nov 2025 15:51:27 +0200 Subject: [PATCH 7/7] refactor(ui): clean up styles in ClusterDetailsPage - Remove max-height and max-width properties from the Wrapper styled component for improved layout flexibility. References: #RI-7785 --- .../ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts index b51f32614f..acc434a1e8 100644 --- a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts +++ b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts @@ -3,6 +3,4 @@ import { scrollbarStyles } from 'uiSrc/styles/mixins' export const Wrapper = styled.div` ${scrollbarStyles()} - max-height: calc(100% - 134px); - max-width: 1920px; `