Skip to content

Commit 1bf8054

Browse files
rsergeenkorsergeenko
committed
#RI-5473 - fix query card header
1 parent a406f10 commit 1bf8054

File tree

2 files changed

+154
-176
lines changed

2 files changed

+154
-176
lines changed

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

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

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

Lines changed: 4 additions & 27 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;

0 commit comments

Comments
 (0)