Skip to content

Commit df1472c

Browse files
vlad-dargelvlad-dargel
authored
Merge pull request #3110 from RedisInsight/fe/bugfix/RI-5473
#RI-5473 - fix header
2 parents 2f5ae8b + 9c0c89b commit df1472c

File tree

2 files changed

+162
-173
lines changed

2 files changed

+162
-173
lines changed

‎redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx‎

Lines changed: 149 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ const QueryCardHeader = (props: Props) => {
295295
<EuiFlexGroup alignItems="center" gutterSize="l" responsive={false} style={{ width: '100%' }}>
296296
<EuiFlexItem
297297
className={styles.titleWrapper}
298-
grow={false}
298+
grow
299299
>
300300
<div className="copy-btn-wrapper">
301301
<EuiTextColor className={styles.title} color="subdued" component="div" data-testid="query-card-command">
@@ -311,156 +311,160 @@ const QueryCardHeader = (props: Props) => {
311311
/>
312312
</div>
313313
</EuiFlexItem>
314-
<EuiFlexItem className={cx(styles.time)} data-testid="command-execution-date-time">
315-
{!!createdAt && (
316-
<EuiTextColor className={styles.timeText} component="div">
317-
{getFormatTime()}
318-
</EuiTextColor>
319-
)}
320-
</EuiFlexItem>
321-
<EuiFlexItem grow={false} className={styles.summaryTextWrapper}>
322-
{!!message && !isOpen && (
323-
<EuiTextColor className={styles.summaryText} component="div">
324-
{truncateText(message, 13)}
325-
</EuiTextColor>
326-
)}
327-
</EuiFlexItem>
328-
<EuiFlexItem grow={false} className={styles.executionTime} data-testid="command-execution-time">
329-
{isNumber(executionTime) && (
330-
<EuiToolTip
331-
title="Processing Time"
332-
content={getExecutionTimeString(executionTime)}
333-
position="left"
334-
anchorClassName={cx(styles.tooltipIcon, styles.alignCenter)}
335-
data-testid="execution-time-tooltip"
336-
>
337-
<>
338-
<EuiIcon
339-
type={ExecutionTimeIcon}
340-
data-testid="command-execution-time-icon"
341-
className={styles.iconExecutingTime}
342-
/>
343-
<EuiTextColor
344-
className={cx(styles.timeText, styles.executionTimeValue)}
345-
data-testid="command-execution-time-value"
346-
>
347-
{getTruncatedExecutionTimeString(executionTime)}
314+
<EuiFlexItem className={styles.controls} grow={false}>
315+
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
316+
<EuiFlexItem className={cx(styles.time)} data-testid="command-execution-date-time">
317+
{!!createdAt && (
318+
<EuiTextColor className={styles.timeText} component="div">
319+
{getFormatTime()}
348320
</EuiTextColor>
349-
</>
350-
</EuiToolTip>
351-
)}
352-
</EuiFlexItem>
353-
<EuiFlexItem
354-
grow={false}
355-
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
356-
onClick={onDropDownViewClick}
357-
>
358-
{isOpen && canCommandProfile && !summaryText && (
359-
<div className={styles.dropdownWrapper}>
360-
<div className={styles.dropdown}>
361-
<EuiSuperSelect
362-
options={profileOptions}
363-
itemClassName={cx(styles.changeViewItem, styles.dropdownProfileItem)}
364-
className={cx(styles.changeView, styles.dropdownProfileIcon)}
365-
valueOfSelected={ProfileQueryType.Profile}
366-
onChange={(value: ProfileQueryType) => onQueryProfile(value)}
367-
data-testid="run-profile-type"
368-
/>
369-
</div>
370-
</div>
371-
)}
372-
</EuiFlexItem>
373-
<EuiFlexItem
374-
grow={false}
375-
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
376-
onClick={onDropDownViewClick}
377-
>
378-
{isOpen && options.length > 1 && !summaryText && (
379-
<div className={styles.dropdownWrapper}>
380-
<div className={styles.dropdown}>
381-
<EuiSuperSelect
382-
options={modifiedOptions}
383-
itemClassName={cx(styles.changeViewItem)}
384-
className={cx(styles.changeView)}
385-
valueOfSelected={selectedValue}
386-
onChange={(value: string) => onChangeView(value)}
387-
data-testid="select-view-type"
388-
/>
389-
</div>
390-
</div>
391-
)}
392-
</EuiFlexItem>
393-
<EuiFlexItem grow={false} className={styles.buttonIcon} onClick={onDropDownViewClick}>
394-
{(isOpen || isFullScreen) && (
395-
<FullScreen isFullScreen={isFullScreen} onToggleFullScreen={toggleFullScreen} />
396-
)}
397-
</EuiFlexItem>
398-
<EuiFlexItem grow={false} className={styles.buttonIcon}>
399-
<EuiButtonIcon
400-
disabled={loading || clearing}
401-
iconType="trash"
402-
aria-label="Delete command"
403-
data-testid="delete-command"
404-
onClick={handleQueryDelete}
405-
/>
406-
</EuiFlexItem>
407-
{!isFullScreen && (
408-
<EuiFlexItem grow={false} className={cx(styles.buttonIcon, styles.playIcon)}>
409-
<EuiToolTip
410-
content="Run again"
411-
position="left"
321+
)}
322+
</EuiFlexItem>
323+
<EuiFlexItem grow={false} className={styles.summaryTextWrapper}>
324+
{!!message && !isOpen && (
325+
<EuiTextColor className={styles.summaryText} component="div">
326+
{truncateText(message, 13)}
327+
</EuiTextColor>
328+
)}
329+
</EuiFlexItem>
330+
<EuiFlexItem grow={false} className={styles.executionTime} data-testid="command-execution-time">
331+
{isNumber(executionTime) && (
332+
<EuiToolTip
333+
title="Processing Time"
334+
content={getExecutionTimeString(executionTime)}
335+
position="left"
336+
anchorClassName={cx(styles.tooltipIcon, styles.alignCenter)}
337+
data-testid="execution-time-tooltip"
338+
>
339+
<>
340+
<EuiIcon
341+
type={ExecutionTimeIcon}
342+
data-testid="command-execution-time-icon"
343+
className={styles.iconExecutingTime}
344+
/>
345+
<EuiTextColor
346+
className={cx(styles.summaryText, styles.executionTimeValue)}
347+
data-testid="command-execution-time-value"
348+
>
349+
{getTruncatedExecutionTimeString(executionTime)}
350+
</EuiTextColor>
351+
</>
352+
</EuiToolTip>
353+
)}
354+
</EuiFlexItem>
355+
<EuiFlexItem
356+
grow={false}
357+
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
358+
onClick={onDropDownViewClick}
412359
>
360+
{isOpen && canCommandProfile && !summaryText && (
361+
<div className={styles.dropdownWrapper}>
362+
<div className={styles.dropdown}>
363+
<EuiSuperSelect
364+
options={profileOptions}
365+
itemClassName={cx(styles.changeViewItem, styles.dropdownProfileItem)}
366+
className={cx(styles.changeView, styles.dropdownProfileIcon)}
367+
valueOfSelected={ProfileQueryType.Profile}
368+
onChange={(value: ProfileQueryType) => onQueryProfile(value)}
369+
data-testid="run-profile-type"
370+
/>
371+
</div>
372+
</div>
373+
)}
374+
</EuiFlexItem>
375+
<EuiFlexItem
376+
grow={false}
377+
className={cx(styles.buttonIcon, styles.viewTypeIcon)}
378+
onClick={onDropDownViewClick}
379+
>
380+
{isOpen && options.length > 1 && !summaryText && (
381+
<div className={styles.dropdownWrapper}>
382+
<div className={styles.dropdown}>
383+
<EuiSuperSelect
384+
options={modifiedOptions}
385+
itemClassName={cx(styles.changeViewItem)}
386+
className={cx(styles.changeView)}
387+
valueOfSelected={selectedValue}
388+
onChange={(value: string) => onChangeView(value)}
389+
data-testid="select-view-type"
390+
/>
391+
</div>
392+
</div>
393+
)}
394+
</EuiFlexItem>
395+
<EuiFlexItem grow={false} className={styles.buttonIcon} onClick={onDropDownViewClick}>
396+
{(isOpen || isFullScreen) && (
397+
<FullScreen isFullScreen={isFullScreen} onToggleFullScreen={toggleFullScreen} />
398+
)}
399+
</EuiFlexItem>
400+
<EuiFlexItem grow={false} className={styles.buttonIcon}>
413401
<EuiButtonIcon
414-
disabled={emptyCommand}
415-
iconType="play"
416-
aria-label="Re-run command"
417-
data-testid="re-run-command"
418-
onClick={handleQueryReRun}
402+
disabled={loading || clearing}
403+
iconType="trash"
404+
aria-label="Delete command"
405+
data-testid="delete-command"
406+
onClick={handleQueryDelete}
419407
/>
420-
</EuiToolTip>
421-
</EuiFlexItem>
422-
)}
423-
{!isFullScreen && (
424-
<EuiFlexItem grow={false} className={styles.buttonIcon}>
425-
{!isSilentModeWithoutError(resultsMode, summary?.fail)
426-
&& <EuiButtonIcon iconType={isOpen ? 'arrowUp' : 'arrowDown'} aria-label="toggle collapse" />}
427-
</EuiFlexItem>
428-
)}
429-
{(isRawMode(mode) || isGroupResults(resultsMode)) && (
430-
<EuiFlexItem grow={false} className={styles.buttonIcon}>
431-
<EuiToolTip
432-
className={styles.tooltip}
433-
anchorClassName={styles.tooltipAnchor}
434-
content={(
435-
<>
436-
{isGroupMode(resultsMode) && (
437-
<EuiTextColor className={cx(styles.mode)} data-testid="group-mode-tooltip">
438-
<EuiIcon type={GroupModeIcon} />
439-
</EuiTextColor>
440-
)}
441-
{isSilentMode(resultsMode) && (
442-
<EuiTextColor className={cx(styles.mode)} data-testid="silent-mode-tooltip">
443-
<EuiIcon type={SilentModeIcon} />
444-
</EuiTextColor>
445-
)}
446-
{isRawMode(mode) && (
447-
<EuiTextColor className={cx(styles.mode)} data-testid="raw-mode-tooltip">
448-
-r
449-
</EuiTextColor>
408+
</EuiFlexItem>
409+
{!isFullScreen && (
410+
<EuiFlexItem grow={false} className={cx(styles.buttonIcon, styles.playIcon)}>
411+
<EuiToolTip
412+
content="Run again"
413+
position="left"
414+
>
415+
<EuiButtonIcon
416+
disabled={emptyCommand}
417+
iconType="play"
418+
aria-label="Re-run command"
419+
data-testid="re-run-command"
420+
onClick={handleQueryReRun}
421+
/>
422+
</EuiToolTip>
423+
</EuiFlexItem>
424+
)}
425+
{!isFullScreen && (
426+
<EuiFlexItem grow={false} className={styles.buttonIcon}>
427+
{!isSilentModeWithoutError(resultsMode, summary?.fail)
428+
&& <EuiButtonIcon iconType={isOpen ? 'arrowUp' : 'arrowDown'} aria-label="toggle collapse" />}
429+
</EuiFlexItem>
430+
)}
431+
<EuiFlexItem grow={false} className={styles.buttonIcon}>
432+
{(isRawMode(mode) || isGroupResults(resultsMode)) && (
433+
<EuiToolTip
434+
className={styles.tooltip}
435+
anchorClassName={styles.tooltipAnchor}
436+
content={(
437+
<>
438+
{isGroupMode(resultsMode) && (
439+
<EuiTextColor className={cx(styles.mode)} data-testid="group-mode-tooltip">
440+
<EuiIcon type={GroupModeIcon} />
441+
</EuiTextColor>
442+
)}
443+
{isSilentMode(resultsMode) && (
444+
<EuiTextColor className={cx(styles.mode)} data-testid="silent-mode-tooltip">
445+
<EuiIcon type={SilentModeIcon} />
446+
</EuiTextColor>
447+
)}
448+
{isRawMode(mode) && (
449+
<EuiTextColor className={cx(styles.mode)} data-testid="raw-mode-tooltip">
450+
-r
451+
</EuiTextColor>
452+
)}
453+
</>
450454
)}
451-
</>
455+
position="bottom"
456+
data-testid="parameters-tooltip"
457+
>
458+
<EuiIcon
459+
color="subdued"
460+
type="boxesVertical"
461+
data-testid="parameters-anchor"
462+
/>
463+
</EuiToolTip>
452464
)}
453-
position="bottom"
454-
data-testid="parameters-tooltip"
455-
>
456-
<EuiIcon
457-
color="subdued"
458-
type="boxesVertical"
459-
data-testid="parameters-anchor"
460-
/>
461-
</EuiToolTip>
462-
</EuiFlexItem>
463-
)}
465+
</EuiFlexItem>
466+
</EuiFlexGroup>
467+
</EuiFlexItem>
464468
</EuiFlexGroup>
465469
</div>
466470
)

‎redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -43,28 +43,6 @@ $marginIcon: 12px;
4343
}
4444
}
4545

46-
.titleWrapper {
47-
width: calc(100% - 552px);
48-
min-width: calc(100% - 552px);
49-
50-
@media (min-width: $breakpoint-m) {
51-
width: calc(100% - 689px);
52-
min-width: calc(100% - 689px);
53-
}
54-
}
55-
56-
:global(.fullscreen) .titleWrapper {
57-
width: calc(100% - 402px);
58-
59-
@media (min-width: $breakpoint-m) {
60-
width: calc(100% - 474px);
61-
}
62-
63-
@media (min-width: $breakpoint-l) {
64-
width: calc(100% - 519px);
65-
}
66-
}
67-
6846
.title {
6947
display: inline-block;
7048
font: normal normal normal 13px/17px Graphik, sans-serif !important;
@@ -83,9 +61,8 @@ $marginIcon: 12px;
8361
}
8462

8563
.time {
86-
max-width: 70px;
64+
max-width: 90px;
8765
position: relative;
88-
height: 18px;
8966
}
9067

9168
.mode + .mode {
@@ -171,8 +148,8 @@ $marginIcon: 12px;
171148
width: 13px;
172149

173150
@media (min-width: $breakpoint-m) {
174-
min-width: 58px;
175-
width: 58px;
151+
min-width: 92px;
152+
width: 92px;
176153
}
177154
}
178155

@@ -197,7 +174,7 @@ $marginIcon: 12px;
197174
display: flex;
198175
align-items: center;
199176
position: relative;
200-
padding: 3px 0 3px 8px;
177+
padding: 0 0 3px 8px;
201178

202179
span {
203180
margin-left: 10px;
@@ -207,6 +184,14 @@ $marginIcon: 12px;
207184
}
208185
}
209186

187+
.titleWrapper {
188+
overflow: hidden;
189+
}
190+
191+
.controls {
192+
flex-shrink: 0;
193+
}
194+
210195
.iconDropdownOption {
211196
width: 20px !important;
212197
height: 20px !important;
@@ -241,7 +226,7 @@ $marginIcon: 12px;
241226
padding-right: 0;
242227

243228
& ~ div {
244-
right: 4px;
229+
right: 0px;
245230
svg {
246231
width: 10px !important;
247232
height: 10px !important;

0 commit comments

Comments
 (0)