Skip to content

Commit 2577491

Browse files
mgubaidullinmgubaidullin
committed
Selector Performance
1 parent c6c5b8b commit 2577491

File tree

3 files changed

+42
-6
lines changed

3 files changed

+42
-6
lines changed

‎karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
TextInputGroup,
2727
TextInputGroupUtilities, TextVariants, Text,
2828
ToggleGroup,
29-
ToggleGroupItem, TextContent, Badge, TextInput, Skeleton
29+
ToggleGroupItem, TextContent, Badge, TextInput, Skeleton, Bullseye, Card
3030
} from '@patternfly/react-core';
3131
import './DslSelector.css';
3232
import {CamelUi} from "../utils/CamelUi";
@@ -65,11 +65,13 @@ export function DslSelector(props: Props) {
6565
const [elements, setElements] = useState<DslMetaModel[]>([]);
6666
const [preferredElements, setPreferredElements] = useState<string[]>([]);
6767
const [ready, setReady] = useState<boolean>(false);
68+
const [pageSize, setPageSize] = useState<number>(100);
6869

6970
useEffect(() => {
7071
setAllElements();
7172
setPreferences();
7273
setReady(true);
74+
setPageSize(100);
7375
}, []);
7476

7577
function setAllElements() {
@@ -246,6 +248,9 @@ export function DslSelector(props: Props) {
246248
const cCount = filteredElements.filter(e => e.navigation === 'component').length;
247249
const kCount = filteredElements.filter(e => e.navigation === 'kamelet').length;
248250

251+
const fElementCount = filteredElements.length;
252+
const moreElements = fElementCount > pageSize ? fElementCount - pageSize : 0;
253+
249254
const fastElements: DslMetaModel[] = elements
250255
.filter((d: DslMetaModel) => {
251256
if (selectedToggles.includes('eip') && d.navigation === 'eip') {
@@ -282,9 +287,16 @@ export function DslSelector(props: Props) {
282287
)}
283288
</Gallery>
284289
<Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
285-
{showSelector && filteredElements.map((dsl: DslMetaModel, index: number) =>
290+
{showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
286291
<DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
287292
)}
293+
{moreElements > 0 &&
294+
<Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
295+
<Bullseye>
296+
<Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
297+
</Bullseye>
298+
</Card>
299+
}
288300
</Gallery>
289301
</PageSection>
290302
</Modal>

‎karavan-designer/src/designer/selector/DslSelector.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
TextInputGroup,
2727
TextInputGroupUtilities, TextVariants, Text,
2828
ToggleGroup,
29-
ToggleGroupItem, TextContent, Badge, TextInput, Skeleton
29+
ToggleGroupItem, TextContent, Badge, TextInput, Skeleton, Bullseye, Card
3030
} from '@patternfly/react-core';
3131
import './DslSelector.css';
3232
import {CamelUi} from "../utils/CamelUi";
@@ -65,11 +65,13 @@ export function DslSelector(props: Props) {
6565
const [elements, setElements] = useState<DslMetaModel[]>([]);
6666
const [preferredElements, setPreferredElements] = useState<string[]>([]);
6767
const [ready, setReady] = useState<boolean>(false);
68+
const [pageSize, setPageSize] = useState<number>(100);
6869

6970
useEffect(() => {
7071
setAllElements();
7172
setPreferences();
7273
setReady(true);
74+
setPageSize(100);
7375
}, []);
7476

7577
function setAllElements() {
@@ -246,6 +248,9 @@ export function DslSelector(props: Props) {
246248
const cCount = filteredElements.filter(e => e.navigation === 'component').length;
247249
const kCount = filteredElements.filter(e => e.navigation === 'kamelet').length;
248250

251+
const fElementCount = filteredElements.length;
252+
const moreElements = fElementCount > pageSize ? fElementCount - pageSize : 0;
253+
249254
const fastElements: DslMetaModel[] = elements
250255
.filter((d: DslMetaModel) => {
251256
if (selectedToggles.includes('eip') && d.navigation === 'eip') {
@@ -282,9 +287,16 @@ export function DslSelector(props: Props) {
282287
)}
283288
</Gallery>
284289
<Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
285-
{showSelector && filteredElements.map((dsl: DslMetaModel, index: number) =>
290+
{showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
286291
<DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
287292
)}
293+
{moreElements > 0 &&
294+
<Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
295+
<Bullseye>
296+
<Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
297+
</Bullseye>
298+
</Card>
299+
}
288300
</Gallery>
289301
</PageSection>
290302
</Modal>

‎karavan-space/src/designer/selector/DslSelector.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
TextInputGroup,
2727
TextInputGroupUtilities, TextVariants, Text,
2828
ToggleGroup,
29-
ToggleGroupItem, TextContent, Badge, TextInput, Skeleton
29+
ToggleGroupItem, TextContent, Badge, TextInput, Skeleton, Bullseye, Card
3030
} from '@patternfly/react-core';
3131
import './DslSelector.css';
3232
import {CamelUi} from "../utils/CamelUi";
@@ -65,11 +65,13 @@ export function DslSelector(props: Props) {
6565
const [elements, setElements] = useState<DslMetaModel[]>([]);
6666
const [preferredElements, setPreferredElements] = useState<string[]>([]);
6767
const [ready, setReady] = useState<boolean>(false);
68+
const [pageSize, setPageSize] = useState<number>(100);
6869

6970
useEffect(() => {
7071
setAllElements();
7172
setPreferences();
7273
setReady(true);
74+
setPageSize(100);
7375
}, []);
7476

7577
function setAllElements() {
@@ -246,6 +248,9 @@ export function DslSelector(props: Props) {
246248
const cCount = filteredElements.filter(e => e.navigation === 'component').length;
247249
const kCount = filteredElements.filter(e => e.navigation === 'kamelet').length;
248250

251+
const fElementCount = filteredElements.length;
252+
const moreElements = fElementCount > pageSize ? fElementCount - pageSize : 0;
253+
249254
const fastElements: DslMetaModel[] = elements
250255
.filter((d: DslMetaModel) => {
251256
if (selectedToggles.includes('eip') && d.navigation === 'eip') {
@@ -282,9 +287,16 @@ export function DslSelector(props: Props) {
282287
)}
283288
</Gallery>
284289
<Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
285-
{showSelector && filteredElements.map((dsl: DslMetaModel, index: number) =>
290+
{showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
286291
<DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
287292
)}
293+
{moreElements > 0 &&
294+
<Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
295+
<Bullseye>
296+
<Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
297+
</Bullseye>
298+
</Card>
299+
}
288300
</Gallery>
289301
</PageSection>
290302
</Modal>

0 commit comments

Comments
 (0)