Skip to content

Commit 4c17b85

Browse files
pawelangelowpawelangelow
authored
RI-7691: Polish Profiler styles (#5139)
1 parent 4ddfe38 commit 4c17b85

File tree

6 files changed

+175
-76
lines changed

6 files changed

+175
-76
lines changed

‎redisinsight/ui/src/assets/img/profiler/magnifier.svg‎

Lines changed: 90 additions & 0 deletions
Loading

‎redisinsight/ui/src/components/monitor/Monitor/Monitor.spec.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe('Monitor', () => {
6060
unmount()
6161
})
6262

63-
it('Monitor should start after click on the play button', () => {
63+
it('Monitor should start after click on the start button', () => {
6464
const handleRunMonitorMock = jest.fn()
6565
render(
6666
<Monitor
@@ -73,4 +73,9 @@ describe('Monitor', () => {
7373

7474
expect(handleRunMonitorMock).toBeCalled()
7575
})
76+
77+
it('should show warning banner', () => {
78+
render(<Monitor {...instance(mockedProps)} />)
79+
expect(screen.getByTestId('monitor-warning-message')).toBeInTheDocument()
80+
})
7681
})

‎redisinsight/ui/src/components/monitor/Monitor/Monitor.styles.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components'
2+
import { Col } from 'uiSrc/components/base/layout/flex'
3+
4+
export const StyledImagePanel = styled(Col)`
5+
border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
6+
padding: 48px;
7+
max-width: 420px;
8+
border-radius: 8px;
9+
`

‎redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx‎

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@ import AutoSizer from 'react-virtualized-auto-sizer'
55
import { IMonitorDataPayload } from 'uiSrc/slices/interfaces'
66

77
import { RiTooltip } from 'uiSrc/components'
8-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
9-
import { IconButton } from 'uiSrc/components/base/forms/buttons'
10-
import { PlayFilledIcon } from 'uiSrc/components/base/icons'
11-
import { ColorText } from 'uiSrc/components/base/text'
8+
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
9+
import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
10+
import { ColorText, Text, Title } from 'uiSrc/components/base/text'
1211
import { SwitchInput } from 'uiSrc/components/base/inputs'
1312
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
1413
import MonitorLog from '../MonitorLog'
1514
import MonitorOutputList from '../MonitorOutputList'
1615

16+
import ProfilerImage from 'uiSrc/assets/img/profiler/magnifier.svg'
17+
1718
import styles from './styles.module.scss'
19+
import { StyledImagePanel } from './Monitor.styles'
20+
import { Spacer } from 'uiSrc/components/base/layout'
21+
import { Banner } from 'uiSrc/components/base/display/banner'
22+
import { RiImage } from 'uiSrc/components/base/display'
1823

1924
export interface Props {
2025
items: IMonitorDataPayload[]
@@ -43,58 +48,67 @@ const Monitor = (props: Props) => {
4348
const [saveLogValue, setSaveLogValue] = useState(isSaveToFile)
4449

4550
const MonitorNotStarted = () => (
46-
<div className={styles.startContainer} data-testid="monitor-not-started">
47-
<div className={styles.startContent}>
48-
<RiTooltip content="Start">
49-
<IconButton
50-
icon={PlayFilledIcon}
51-
className={styles.startTitleIcon}
52-
onClick={() => handleRunMonitor(saveLogValue)}
53-
aria-label="start monitor"
54-
data-testid="start-monitor"
55-
/>
56-
</RiTooltip>
57-
<div className={styles.startTitle}>Start Profiler</div>
58-
<Row style={{ flexGrow: 0 }}>
59-
<FlexItem>
60-
<RiIcon
61-
className={cx(styles.iconWarning, 'warning--light')}
62-
type="ToastDangerIcon"
63-
size="m"
64-
color="attention600"
65-
aria-label="alert icon"
66-
style={{ paddingTop: 2 }}
67-
/>
68-
</FlexItem>
69-
<FlexItem>
70-
<ColorText
71-
color="warning"
72-
className="warning--light"
73-
style={{ paddingLeft: 4 }}
74-
data-testid="monitor-warning-message"
51+
<Row
52+
align="center"
53+
style={{ margin: 48 }}
54+
gap="xxl"
55+
data-testid="monitor-not-started"
56+
>
57+
<StyledImagePanel align="center">
58+
<RiImage
59+
src={ProfilerImage}
60+
alt="Profiler"
61+
style={{ userSelect: 'none', pointerEvents: 'none' }}
62+
/>
63+
<Spacer size="l" />
64+
<Text>
65+
Get a deeper understanding of your database with real-time command,
66+
key, and client statistics.
67+
</Text>
68+
</StyledImagePanel>
69+
70+
<Col gap="xl">
71+
<Title size="M">Profiler</Title>
72+
<Text>
73+
Analyze every command sent to Redis in real time to debug issues and
74+
optimize performance.
75+
</Text>
76+
77+
<div>
78+
<RiTooltip content="Enable real-time profiling of your Redis database.">
79+
<PrimaryButton
80+
onClick={() => handleRunMonitor(saveLogValue)}
81+
aria-label="start monitor"
82+
data-testid="start-monitor"
7583
>
76-
Running Profiler will decrease throughput, avoid running it in
77-
production databases.
78-
</ColorText>
79-
</FlexItem>
80-
</Row>
81-
</div>
82-
<div className={styles.saveLogContainer} data-testid="save-log-container">
83-
<RiTooltip
84-
title="Allows you to download the generated log file after pausing the Profiler"
85-
content="Profiler log is saved to a file on your local machine with no size limitation.
86-
The temporary log file will be automatically rewritten when the Profiler is reset."
87-
data-testid="save-log-tooltip"
88-
>
89-
<SwitchInput
90-
title="Save Log"
91-
checked={saveLogValue}
92-
onCheckedChange={setSaveLogValue}
93-
data-testid="save-log-switch"
94-
/>
95-
</RiTooltip>
96-
</div>
97-
</div>
84+
Start Profiler
85+
</PrimaryButton>
86+
</RiTooltip>
87+
</div>
88+
89+
<div data-testid="save-log-container">
90+
<RiTooltip
91+
title="Allows you to download the generated log file after pausing the Profiler."
92+
content="Profiler log is saved to a file on your local machine with no size limitation. The temporary log file will be automatically rewritten when the Profiler is reset."
93+
data-testid="save-log-tooltip"
94+
>
95+
<SwitchInput
96+
title="Save Log"
97+
checked={saveLogValue}
98+
onCheckedChange={setSaveLogValue}
99+
data-testid="save-log-switch"
100+
/>
101+
</RiTooltip>
102+
</div>
103+
104+
<Banner
105+
variant="attention"
106+
showIcon
107+
data-testid="monitor-warning-message"
108+
message="Running Profiler will decrease throughput, avoid running it in production databases."
109+
/>
110+
</Col>
111+
</Row>
98112
)
99113

100114
const MonitorError = () => (

‎redisinsight/ui/src/components/monitor/Monitor/styles.module.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,6 @@
9191
padding-bottom: 4px;
9292
}
9393

94-
.saveLogContainer {
95-
font:
96-
normal normal normal 13px/18px Graphik,
97-
sans-serif;
98-
letter-spacing: -0.13px;
99-
margin-bottom: 18px;
100-
}
10194

10295
.startContentError {
10396
max-width: 298px;
@@ -152,10 +145,6 @@
152145
padding: 4px 0 18px;
153146
}
154147

155-
.startTitleIcon svg {
156-
width: 26px;
157-
height: 26px;
158-
}
159148

160149
.itemCommand {
161150
padding-right: 6px;
@@ -177,10 +166,6 @@
177166
color: var(--euiTextSubduedColorHover);
178167
}
179168

180-
.iconWarning {
181-
color: var(--euiColorWarningText) !important;
182-
}
183-
184169
.item {
185170
display: block;
186171

‎redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,7 @@ const MonitorLog = () => {
8585
className={styles.time}
8686
data-testid="profiler-running-time"
8787
>
88-
<RiIcon
89-
size="s"
90-
color="informative400"
91-
type="ExecutionTimeIcon"
92-
/>
88+
<RiIcon size="s" color="informative400" type="TimeIconIcon" />
9389
{format(timestamp.start, 'hh:mm:ss')}
9490
&nbsp;&#8211;&nbsp;
9591
{format(timestamp.paused, 'hh:mm:ss')}

0 commit comments

Comments
 (0)