diff --git a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts index 7dc8916ddd..976816fcea 100644 --- a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts +++ b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.styles.ts @@ -1,8 +1,9 @@ +import { Theme } from '@redis-ui/styles' import styled from 'styled-components' +import { scrollbarStyles } from 'uiSrc/styles/mixins' -export const ClusterDetailsPageWrapper = styled.div< - React.HTMLAttributes ->` +export const ClusterDetailsPageWrapper = styled.div` + ${scrollbarStyles()}; height: 100%; - padding: 0 1.6rem; + padding: 0 ${({ theme }: { theme: Theme }) => theme.core.space.space200}; ` diff --git a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx index 67a4b5bc23..c4e2e1f2f5 100644 --- a/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx +++ b/redisinsight/ui/src/pages/cluster-details/ClusterDetailsPage.tsx @@ -134,7 +134,7 @@ const ClusterDetailsPage = () => { } return ( - + 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 (
- - + {loading && !data && (
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/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/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' 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) => ( + + + + + + + + {actions && {actions}} + + {children} + +) 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>` +export const EmptyMessageContainer = styled.div< + React.HTMLAttributes +>` 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 ( - { return (
- - - {!!items.length && ( - - - - - Report generated on: - - - - - option.inputDisplay as JSX.Element - } - value={selectedValue ?? ''} - onChange={(value: string) => onChangeSelectedAnalysis(value)} - data-testid="select-report" - /> - - {!!progress && ( - - - + {!!items.length && ( + + + + + Report generated on: + + + + + 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, - )}`} - - {` (${numberWithSpaces(progress.processed)}`}/ - {numberWithSpaces(progress.total)} - {' keys) '} - - - )} - - - )} - - - - New Report - - - - - - - + data-testid="select-report" + /> + + {!!progress && ( + + + + {`Scanned ${getApproximatePercentage( + progress.total, + progress.processed, + )}`} + + {` (${numberWithSpaces(progress.processed)}`}/ + {numberWithSpaces(progress.total)} + {' keys) '} + + + )} + + + )} + + + + New Report + + + + + + + + } + />
) } 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}; -` 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 49ec63e57e..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, @@ -32,15 +31,17 @@ 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 { AnalyticsPageHeader } from 'uiSrc/pages/database-analysis/components/analytics-page-header' import { Actions, EmptySlowLog, SlowLogTable } from './components' -import styles from './styles.module.scss' -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' @@ -142,17 +143,13 @@ const SlowLogPage = () => { const isEmptySlowLog = !data.length return ( - + {({ width }) => (
- - - - - - - + {connectionType !== ConnectionType.Cluster && config && ( Execution time:{' '} @@ -177,75 +174,78 @@ const SlowLogPage = () => { onClear={onClearSlowLogs} onRefresh={getSlowLogs} /> - - - - - - - - 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 - + } >