0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed issue of partition shrink of the drop-down list in the search bar. (#1259)

Browse source
This commit is contained in:
NelyDavtyan 2021-12-16 15:41:45 +04:00 • committed by GitHub
parent 7804a6eb9b
commit 65d648419c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts
View file

@ -16,16 +16,6 @@ export const FiltersWrapper = styled.div`
width: 10%;
}
}
& .multi-select {
height: 32px;
& > .dropdown-container {
height: 32px;
& > .dropdown-heading {
height: 32px;
}
}
}
`;
export const FilterInputs = styled.div`

51
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
View file

@ -13,7 +13,7 @@ import * as React from 'react';
import { omitBy } from 'lodash';
import { useHistory, useLocation } from 'react-router';
import DatePicker from 'react-datepicker';
import MultiSelect from 'react-multi-select-component';
import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
import { Option } from 'react-multi-select-component/dist/lib/interfaces';
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
import { TopicName, ClusterName } from 'redux/interfaces';
@ -22,14 +22,7 @@ import Input from 'components/common/Input/Input';
import Select from 'components/common/Select/Select';
import { Button } from 'components/common/Button/Button';
import {
FilterInputs,
FiltersMetrics,
FiltersWrapper,
Metric,
MetricsIcon,
SeekTypeSelectorWrapper,
} from './Filters.styled';
import * as S from './Filters.styled';
import {
filterOptions,
getOffsetFromSeekToParam,
@ -235,9 +228,9 @@ const Filters: React.FC<FiltersProps> = ({
}, [seekDirection]);
return (
<FiltersWrapper>
<S.FiltersWrapper>
<div>
<FilterInputs>
<S.FilterInputs>
<Input
inputSize="M"
id="searchText"
@ -248,7 +241,7 @@ const Filters: React.FC<FiltersProps> = ({
onChange={({ target: { value } }) => setQuery(value)}
/>
{isSeekTypeControlVisible && (
<SeekTypeSelectorWrapper>
<S.SeekTypeSelectorWrapper>
<Select
id="selectSeekType"
onChange={({ target: { value } }) =>
@ -280,7 +273,7 @@ const Filters: React.FC<FiltersProps> = ({
placeholderText="Select timestamp"
/>
)}
</SeekTypeSelectorWrapper>
</S.SeekTypeSelectorWrapper>
)}
<MultiSelect
options={partitions.map((p) => ({
@ -315,7 +308,7 @@ const Filters: React.FC<FiltersProps> = ({
Submit
</Button>
)}
</FilterInputs>
</S.FilterInputs>
<Select
selectSize="M"
onChange={(e) => toggleSeekDirection(e.target.value)}
@ -325,28 +318,28 @@ const Filters: React.FC<FiltersProps> = ({
<option value={SeekDirection.BACKWARD}>Newest first</option>
</Select>
</div>
<FiltersMetrics>
<S.FiltersMetrics>
<p style={{ fontSize: 14 }}>{isFetching && phaseMessage}</p>
<Metric title="Elapsed Time">
<MetricsIcon>
<S.Metric title="Elapsed Time">
<S.MetricsIcon>
<i className="far fa-clock" />
</MetricsIcon>
</S.MetricsIcon>
<span>{Math.max(elapsedMs || 0, 0)} ms</span>
</Metric>
<Metric title="Bytes Consumed">
<MetricsIcon>
</S.Metric>
<S.Metric title="Bytes Consumed">
<S.MetricsIcon>
<i className="fas fa-arrow-down" />
</MetricsIcon>
</S.MetricsIcon>
<BytesFormatted value={bytesConsumed} />
</Metric>
<Metric title="Messages Consumed">
<MetricsIcon>
</S.Metric>
<S.Metric title="Messages Consumed">
<S.MetricsIcon>
<i className="far fa-file-alt" />
</MetricsIcon>
</S.MetricsIcon>
<span>{messagesConsumed} messages</span>
</Metric>
</FiltersMetrics>
</FiltersWrapper>
</S.Metric>
</S.FiltersMetrics>
</S.FiltersWrapper>
);
};

126
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap
View file

@ -1,6 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Filters component matches the snapshot 1`] = `
.c9 {
min-width: 200px;
height: 32px;
font-size: 14px;
}
.c9 > .dropdown-container {
height: 32px;
}
.c9 > .dropdown-container > .dropdown-heading {
height: 32px;
}
.c3 {
position: absolute;
top: 50%;
@ -206,7 +220,7 @@ exports[`Filters component matches the snapshot 1`] = `
position: relative;
}
.c9 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -232,27 +246,27 @@ exports[`Filters component matches the snapshot 1`] = `
height: 32px;
}
.c9:hover:enabled {
.c10:hover:enabled {
background: #E3E6E8;
color: #171A1C;
cursor: pointer;
}
.c9:active:enabled {
.c10:active:enabled {
background: #D5DADD;
color: #171A1C;
}
.c9:disabled {
.c10:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c9 a {
.c10 a {
color: white;
}
.c9 i {
.c10 i {
margin-right: 7px;
}
@ -284,18 +298,6 @@ exports[`Filters component matches the snapshot 1`] = `
width: 10%;
}
.c0 .multi-select {
height: 32px;
}
.c0 .multi-select > .dropdown-container {
height: 32px;
}
.c0 .multi-select > .dropdown-container > .dropdown-heading {
height: 32px;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
@ -359,7 +361,7 @@ exports[`Filters component matches the snapshot 1`] = `
outline: none;
}
.c10 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -377,7 +379,7 @@ exports[`Filters component matches the snapshot 1`] = `
padding-bottom: 16px;
}
.c11 {
.c12 {
color: #73848C;
font-size: 12px;
display: -webkit-box;
@ -386,7 +388,7 @@ exports[`Filters component matches the snapshot 1`] = `
display: flex;
}
.c12 {
.c13 {
color: #171A1C;
padding-right: 6px;
height: 12px;
@ -449,7 +451,7 @@ exports[`Filters component matches the snapshot 1`] = `
</div>
</div>
<div
class="rmsc multi-select"
class="rmsc c9"
>
<div
aria-labelledby="Select partitions"
@ -510,7 +512,7 @@ exports[`Filters component matches the snapshot 1`] = `
</div>
</div>
<button
class="c9"
class="c10"
style="font-weight: 500;"
type="submit"
>
@ -537,17 +539,17 @@ exports[`Filters component matches the snapshot 1`] = `
</div>
</div>
<div
class="c10"
class="c11"
>
<p
style="font-size: 14px;"
/>
<div
class="c11"
class="c12"
title="Elapsed Time"
>
<div
class="c12"
class="c13"
>
<i
class="far fa-clock"
@ -559,11 +561,11 @@ exports[`Filters component matches the snapshot 1`] = `
</span>
</div>
<div
class="c11"
class="c12"
title="Bytes Consumed"
>
<div
class="c12"
class="c13"
>
<i
class="fas fa-arrow-down"
@ -574,11 +576,11 @@ exports[`Filters component matches the snapshot 1`] = `
</span>
</div>
<div
class="c11"
class="c12"
title="Messages Consumed"
>
<div
class="c12"
class="c13"
>
<i
class="far fa-file-alt"
@ -596,7 +598,21 @@ exports[`Filters component matches the snapshot 1`] = `
exports[`Filters component when fetching matches the snapshot 1`] = `
<body>
.c3 {
.c9 {
min-width: 200px;
height: 32px;
font-size: 14px;
}
.c9 > .dropdown-container {
height: 32px;
}
.c9 > .dropdown-container > .dropdown-heading {
height: 32px;
}
.c3 {
position: absolute;
top: 50%;
line-height: 0;
@ -801,7 +817,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
position: relative;
}
.c9 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -827,27 +843,27 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
height: 32px;
}
.c9:hover:enabled {
.c10:hover:enabled {
background: #E3E6E8;
color: #171A1C;
cursor: pointer;
}
.c9:active:enabled {
.c10:active:enabled {
background: #D5DADD;
color: #171A1C;
}
.c9:disabled {
.c10:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c9 a {
.c10 a {
color: white;
}
.c9 i {
.c10 i {
margin-right: 7px;
}
@ -879,18 +895,6 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
width: 10%;
}
.c0 .multi-select {
height: 32px;
}
.c0 .multi-select > .dropdown-container {
height: 32px;
}
.c0 .multi-select > .dropdown-container > .dropdown-heading {
height: 32px;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
@ -954,7 +958,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
outline: none;
}
.c10 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -972,7 +976,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
padding-bottom: 16px;
}
.c11 {
.c12 {
color: #73848C;
font-size: 12px;
display: -webkit-box;
@ -981,7 +985,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
display: flex;
}
.c12 {
.c13 {
color: #171A1C;
padding-right: 6px;
height: 12px;
@ -1043,7 +1047,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
</div>
</div>
<div
class="rmsc multi-select"
class="rmsc c9"
>
<div
aria-labelledby="Select partitions"
@ -1104,7 +1108,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
</div>
</div>
<button
class="c9"
class="c10"
style="font-weight: 500;"
type="button"
>
@ -1131,17 +1135,17 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
</div>
</div>
<div
class="c10"
class="c11"
>
<p
style="font-size: 14px;"
/>
<div
class="c11"
class="c12"
title="Elapsed Time"
>
<div
class="c12"
class="c13"
>
<i
class="far fa-clock"
@ -1153,11 +1157,11 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
</span>
</div>
<div
class="c11"
class="c12"
title="Bytes Consumed"
>
<div
class="c12"
class="c13"
>
<i
class="fas fa-arrow-down"
@ -1168,11 +1172,11 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
</span>
</div>
<div
class="c11"
class="c12"
title="Messages Consumed"
>
<div
class="c12"
class="c13"
>
<i
class="far fa-file-alt"

18
kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts Normal file
View file

@ -0,0 +1,18 @@
import styled from 'styled-components';
import ReactMultiSelect from 'react-multi-select-component';
const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
min-width: ${({ minWidth }) => minWidth || '200px;'};
height: 32px;
font-size: 14px;
& > .dropdown-container {
height: 32px;
& > .dropdown-heading {
height: 32px;
}
}
`;
export default MultiSelect;