Skip to content

Commit 0597d24

Browse files
jpinsonneaujpinsonneau
committed
styling improvments
1 parent 3bed714 commit 0597d24

File tree

9 files changed

+265
-193
lines changed

9 files changed

+265
-193
lines changed

‎web/locales/en/plugin__netobserv-plugin.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@
500500
"the logical OR operator is used between each values of the same filter.": "the logical OR operator is used between each values of the same filter.",
501501
"The logical OR operator is used between filters.": "The logical OR operator is used between filters.",
502502
"The logical AND operator is used between Endpoints and common filters. The traffic is matched in both directions.": "The logical AND operator is used between Endpoints and common filters. The traffic is matched in both directions.",
503-
"The logical AND operator is used between filters keeping specified directions.": "The logical AND operator is used between filters keeping specified directions.",
503+
"The logical AND operator is used between filters keeping direction source to destination.": "The logical AND operator is used between filters keeping direction source to destination.",
504504
"Edit filters": "Edit filters",
505505
"Reset defaults": "Reset defaults",
506506
"Clear all": "Clear all",

‎web/src/components/toolbar/filters-toolbar.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,21 @@ div#filter-toolbar-search-filters {
7777
background-color: #f0f0f0;
7878
}
7979

80+
.custom-chip-text {
81+
text-align: center;
82+
}
83+
84+
.custom-chip-group>.filtervalues {
85+
display: flex;
86+
flex-wrap: wrap;
87+
align-content: center;
88+
align-items: center;
89+
align-self: center;
90+
justify-content: center;
91+
justify-items: center;
92+
justify-self: center;
93+
}
94+
8095
.custom-chip-group>p {
8196
font-size: 0.85rem;
8297
}

‎web/src/components/toolbar/filters-toolbar.tsx‎

Lines changed: 75 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Button, Toolbar, ToolbarContent, ToolbarItem, Tooltip, ValidatedOptions } from '@patternfly/react-core';
1+
import {
2+
ExpandableSectionToggle,
3+
Toolbar,
4+
ToolbarContent,
5+
ToolbarItem,
6+
Tooltip,
7+
ValidatedOptions
8+
} from '@patternfly/react-core';
29
import { CompressIcon, ExpandIcon } from '@patternfly/react-icons';
310
import * as _ from 'lodash';
411
import * as React from 'react';
@@ -144,70 +151,77 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
144151
showHideText = showFilters ? t('Hide filters') : t('Show filters');
145152
}
146153
return (
147-
<Toolbar data-test={id} id={id}>
148-
<ToolbarContent data-test={`${id}-search-filters`} id={`${id}-search-filters`} toolbarId={id}>
149-
<ToolbarItem className="flex-start">
150-
<QueryOptionsDropdown {...props.queryOptionsProps} />
151-
</ToolbarItem>
152-
{!isForced && quickFilters.length > 0 && (
154+
<>
155+
<Toolbar data-test={id} id={id}>
156+
<ToolbarContent data-test={`${id}-search-filters`} id={`${id}-search-filters`} toolbarId={id}>
153157
<ToolbarItem className="flex-start">
154-
<QuickFilters
155-
quickFilters={quickFilters}
156-
activeFilters={filters?.list || []}
157-
setFilters={list => setFilters({ ...filters!, list })}
158-
/>
158+
<QueryOptionsDropdown {...props.queryOptionsProps} />
159159
</ToolbarItem>
160-
)}
161-
{!isForced && getFilterToolbar()}
162-
{showHideText && countActiveFilters > 0 && (
160+
{!isForced && quickFilters.length > 0 && (
161+
<ToolbarItem className="flex-start">
162+
<QuickFilters
163+
quickFilters={quickFilters}
164+
activeFilters={filters?.list || []}
165+
setFilters={list => setFilters({ ...filters!, list })}
166+
/>
167+
</ToolbarItem>
168+
)}
169+
{!isForced && getFilterToolbar()}
170+
{showHideText && countActiveFilters > 0 && (
171+
<ToolbarItem className="flex-start">
172+
<ExpandableSectionToggle
173+
data-test="show-filters-button"
174+
id="show-filters-button"
175+
className="overflow-button"
176+
isExpanded={showFilters}
177+
onToggle={isExpanded => setShowFilters(isExpanded)}
178+
>
179+
{showHideText}
180+
</ExpandableSectionToggle>
181+
</ToolbarItem>
182+
)}
163183
<ToolbarItem className="flex-start">
164-
<Button
165-
data-test="show-filters-button"
166-
id="show-filters-button"
167-
variant="link"
168-
className="overflow-button"
169-
onClick={() => setShowFilters(!showFilters)}
170-
>
171-
{showHideText}
172-
</Button>
173-
</ToolbarItem>
174-
)}
175-
<ToolbarItem className="flex-start">
176-
<LinksOverflow
177-
id={'filters-more-options'}
178-
items={[
179-
{
180-
id: 'fullscreen',
181-
label: isFullScreen ? t('Collapse') : t('Expand'),
182-
onClick: () => setFullScreen(!isFullScreen),
183-
icon: isFullScreen ? <CompressIcon /> : <ExpandIcon />
184-
},
185-
{
186-
id: 'set-default-filters',
187-
label: t('Default filters'),
188-
onClick: () => {
189-
resetFilters();
190-
autoCompleteCache.clear();
184+
<LinksOverflow
185+
id={'filters-more-options'}
186+
items={[
187+
{
188+
id: 'fullscreen',
189+
label: isFullScreen ? t('Collapse') : t('Expand'),
190+
onClick: () => setFullScreen(!isFullScreen),
191+
icon: isFullScreen ? <CompressIcon /> : <ExpandIcon />
191192
},
192-
enabled: countActiveFilters === 0
193-
}
194-
]}
195-
/>
196-
</ToolbarItem>
197-
{showFilters && countActiveFilters > 0 && (
198-
<FiltersChips
199-
isForced={isForced}
200-
filters={filtersOrForced!}
201-
setFilters={setFilters}
202-
editValue={editValue}
203-
clearFilters={clearFilters}
204-
resetFilters={resetFilters}
205-
quickFilters={quickFilters}
206-
filterDefinitions={filterDefinitions}
207-
/>
208-
)}
209-
</ToolbarContent>
210-
</Toolbar>
193+
{
194+
id: 'set-default-filters',
195+
label: t('Default filters'),
196+
onClick: () => {
197+
resetFilters();
198+
autoCompleteCache.clear();
199+
},
200+
enabled: countActiveFilters === 0
201+
}
202+
]}
203+
/>
204+
</ToolbarItem>
205+
</ToolbarContent>
206+
</Toolbar>
207+
{showFilters && countActiveFilters > 0 && (
208+
<Toolbar data-test={`${id}-chips`} id={`${id}-chips`}>
209+
<ToolbarContent toolbarId={`${id}-chips`}>
210+
<FiltersChips
211+
isForced={isForced}
212+
filters={filtersOrForced!}
213+
setDirection={setDirection}
214+
setFilters={setFilters}
215+
editValue={editValue}
216+
clearFilters={clearFilters}
217+
resetFilters={resetFilters}
218+
quickFilters={quickFilters}
219+
filterDefinitions={filterDefinitions}
220+
/>
221+
</ToolbarContent>
222+
</Toolbar>
223+
)}
224+
</>
211225
);
212226
};
213227

‎web/src/components/toolbar/filters/__tests__/filters-chips.spec.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FiltersChips, FiltersChipsProps } from '../filters-chips';
66
describe('<FiltersChips />', () => {
77
const props: FiltersChipsProps = {
88
filters: { match: 'all', list: [] },
9+
setDirection: jest.fn(),
910
setFilters: jest.fn(),
1011
editValue: jest.fn(),
1112
clearFilters: jest.fn(),

‎web/src/components/toolbar/filters/filter-search-input.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
#filter-search-input, #filter-popper {
2-
min-width: 400px !important;
2+
min-width: 500px !important;
33
}
44

55
.filters-actions {
66
margin-left: 180px;
7+
}
8+
9+
.filter-text-ellipsis {
10+
text-overflow: ellipsis;
11+
overflow: hidden;
712
}

‎web/src/components/toolbar/filters/filter-search-input.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {
22
ActionGroup,
33
Button,
4+
Flex,
5+
FlexItem,
46
Form,
57
FormGroup,
68
Menu,
@@ -449,7 +451,6 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
449451
id={`suggestion-${index}`}
450452
itemId={suggestion}
451453
key={`suggestion-${index}`}
452-
description={suggestion.display}
453454
onKeyDown={e => {
454455
if (index === 0 && e.key === 'ArrowUp') {
455456
e.preventDefault();
@@ -477,7 +478,14 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
477478
}
478479
}}
479480
>
480-
{suggestion.value}
481+
<Flex direction={{ default: 'row' }}>
482+
<FlexItem className="filter-text-ellipsis" flex={{ default: 'flex_1' }}>
483+
{suggestion.value}
484+
</FlexItem>
485+
<FlexItem className="filter-text-ellipsis" flex={{ default: 'flex_1' }}>
486+
{suggestion.display}
487+
</FlexItem>
488+
</Flex>
481489
</MenuItem>
482490
))}
483491
</MenuList>

‎web/src/components/toolbar/filters/filters-chips.css‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,11 @@
2626
}
2727

2828
.match-dropdown-container {
29+
align-items: center;
2930
align-self: center;
30-
padding: 0 0.5em 0 0.5em;
31+
align-content: center;
32+
padding: 0;
33+
margin: 0;
3134
}
3235

3336
.match-dropdown-container>button::before,
@@ -46,4 +49,21 @@
4649
align-content: center;
4750
align-self: center;
4851
justify-content: center;
52+
}
53+
54+
.flex-block.first {
55+
padding-left: 1.5em;
56+
}
57+
58+
.flex-block.no-wrap {
59+
flex-wrap: nowrap;
60+
}
61+
62+
.toolbar-item-center {
63+
align-items: center;
64+
align-content: center;
65+
align-self: center;
66+
justify-items: center;
67+
justify-content: center;
68+
justify-self: center;
4969
}

0 commit comments

Comments
 (0)