You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2024/10/29 18:25:42 UTC

(camel-karavan) branch main updated (20162c59 -> 25774912)

This is an automated email from the ASF dual-hosted git repository.

marat pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git


    from 20162c59 Designer fixes
     new c6c5b8b8 Fix #1449
     new 25774912 Selector Performance

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../main/webui/src/designer/property/DslProperties.tsx   |  2 +-
 .../src/main/webui/src/designer/selector/DslSelector.tsx | 16 ++++++++++++++--
 karavan-designer/src/designer/property/DslProperties.tsx |  2 +-
 karavan-designer/src/designer/selector/DslSelector.tsx   | 16 ++++++++++++++--
 karavan-space/src/designer/property/DslProperties.tsx    |  2 +-
 karavan-space/src/designer/selector/DslSelector.tsx      | 16 ++++++++++++++--
 6 files changed, 45 insertions(+), 9 deletions(-)


(camel-karavan) 01/02: Fix #1449

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit c6c5b8b846da7cda4a9b3b4c5b00ed3e4f713aca
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Oct 29 12:53:34 2024 -0400

    Fix #1449
---
 karavan-app/src/main/webui/src/designer/property/DslProperties.tsx | 2 +-
 karavan-designer/src/designer/property/DslProperties.tsx           | 2 +-
 karavan-space/src/designer/property/DslProperties.tsx              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
index a1a21153..e248d998 100644
--- a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
+++ b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
@@ -93,7 +93,7 @@ export function DslProperties(props: Props) {
     function getProperties(): PropertyMeta[] {
         const dslName = selectedStep?.dslName;
         return CamelDefinitionApiExt.getElementProperties(dslName)
-            .filter((p: PropertyMeta) => !(p.name === 'uri' && dslName !== 'ToDynamicDefinition')) // show uri only to Dynamic To
+            .filter((p: PropertyMeta) => p.name !== 'uri') // do not show uri
             // .filer((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced')))
             .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen'))
             .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name)));
diff --git a/karavan-designer/src/designer/property/DslProperties.tsx b/karavan-designer/src/designer/property/DslProperties.tsx
index a1a21153..e248d998 100644
--- a/karavan-designer/src/designer/property/DslProperties.tsx
+++ b/karavan-designer/src/designer/property/DslProperties.tsx
@@ -93,7 +93,7 @@ export function DslProperties(props: Props) {
     function getProperties(): PropertyMeta[] {
         const dslName = selectedStep?.dslName;
         return CamelDefinitionApiExt.getElementProperties(dslName)
-            .filter((p: PropertyMeta) => !(p.name === 'uri' && dslName !== 'ToDynamicDefinition')) // show uri only to Dynamic To
+            .filter((p: PropertyMeta) => p.name !== 'uri') // do not show uri
             // .filer((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced')))
             .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen'))
             .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name)));
diff --git a/karavan-space/src/designer/property/DslProperties.tsx b/karavan-space/src/designer/property/DslProperties.tsx
index a1a21153..e248d998 100644
--- a/karavan-space/src/designer/property/DslProperties.tsx
+++ b/karavan-space/src/designer/property/DslProperties.tsx
@@ -93,7 +93,7 @@ export function DslProperties(props: Props) {
     function getProperties(): PropertyMeta[] {
         const dslName = selectedStep?.dslName;
         return CamelDefinitionApiExt.getElementProperties(dslName)
-            .filter((p: PropertyMeta) => !(p.name === 'uri' && dslName !== 'ToDynamicDefinition')) // show uri only to Dynamic To
+            .filter((p: PropertyMeta) => p.name !== 'uri') // do not show uri
             // .filer((p: PropertyMeta) => (showAdvanced && p.label.includes('advanced')) || (!showAdvanced && !p.label.includes('advanced')))
             .filter((p: PropertyMeta) => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen'))
             .filter((p: PropertyMeta) => !(dslName === 'RestDefinition' && ['get', 'post', 'put', 'patch', 'delete', 'head'].includes(p.name)));


(camel-karavan) 02/02: Selector Performance

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit 25774912714994c199c1c6f7b850c81a607e56e5
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Oct 29 14:25:36 2024 -0400

    Selector Performance
---
 .../src/main/webui/src/designer/selector/DslSelector.tsx | 16 ++++++++++++++--
 karavan-designer/src/designer/selector/DslSelector.tsx   | 16 ++++++++++++++--
 karavan-space/src/designer/selector/DslSelector.tsx      | 16 ++++++++++++++--
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
index 2aaf32cc..c11e9b2f 100644
--- a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
+++ b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
@@ -26,7 +26,7 @@ import {
     TextInputGroup,
     TextInputGroupUtilities, TextVariants, Text,
     ToggleGroup,
-    ToggleGroupItem, TextContent, Badge, TextInput, Skeleton
+    ToggleGroupItem, TextContent, Badge, TextInput, Skeleton, Bullseye, Card
 } from '@patternfly/react-core';
 import './DslSelector.css';
 import {CamelUi} from "../utils/CamelUi";
@@ -65,11 +65,13 @@ export function DslSelector(props: Props) {
     const [elements, setElements] = useState<DslMetaModel[]>([]);
     const [preferredElements, setPreferredElements] = useState<string[]>([]);
     const [ready, setReady] = useState<boolean>(false);
+    const [pageSize, setPageSize] = useState<number>(100);
 
     useEffect(() => {
         setAllElements();
         setPreferences();
         setReady(true);
+        setPageSize(100);
     }, []);
 
     function setAllElements() {
@@ -246,6 +248,9 @@ export function DslSelector(props: Props) {
     const cCount = filteredElements.filter(e => e.navigation === 'component').length;
     const kCount = filteredElements.filter(e => e.navigation === 'kamelet').length;
 
+    const fElementCount = filteredElements.length;
+    const moreElements = fElementCount > pageSize ? fElementCount - pageSize : 0;
+
     const fastElements: DslMetaModel[] = elements
         .filter((d: DslMetaModel) => {
             if (selectedToggles.includes('eip') && d.navigation === 'eip') {
@@ -282,9 +287,16 @@ export function DslSelector(props: Props) {
                     )}
                 </Gallery>
                 <Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
-                    {showSelector && filteredElements.map((dsl: DslMetaModel, index: number) =>
+                    {showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
                         <DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
                     )}
+                    {moreElements > 0 &&
+                        <Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
+                            <Bullseye>
+                                <Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
+                            </Bullseye>
+                        </Card>
+                    }
                 </Gallery>
             </PageSection>
         </Modal>
diff --git a/karavan-designer/src/designer/selector/DslSelector.tsx b/karavan-designer/src/designer/selector/DslSelector.tsx
index 2aaf32cc..c11e9b2f 100644
--- a/karavan-designer/src/designer/selector/DslSelector.tsx
+++ b/karavan-designer/src/designer/selector/DslSelector.tsx
@@ -26,7 +26,7 @@ import {
     TextInputGroup,
     TextInputGroupUtilities, TextVariants, Text,
     ToggleGroup,
-    ToggleGroupItem, TextContent, Badge, TextInput, Skeleton
+    ToggleGroupItem, TextContent, Badge, TextInput, Skeleton, Bullseye, Card
 } from '@patternfly/react-core';
 import './DslSelector.css';
 import {CamelUi} from "../utils/CamelUi";
@@ -65,11 +65,13 @@ export function DslSelector(props: Props) {
     const [elements, setElements] = useState<DslMetaModel[]>([]);
     const [preferredElements, setPreferredElements] = useState<string[]>([]);
     const [ready, setReady] = useState<boolean>(false);
+    const [pageSize, setPageSize] = useState<number>(100);
 
     useEffect(() => {
         setAllElements();
         setPreferences();
         setReady(true);
+        setPageSize(100);
     }, []);
 
     function setAllElements() {
@@ -246,6 +248,9 @@ export function DslSelector(props: Props) {
     const cCount = filteredElements.filter(e => e.navigation === 'component').length;
     const kCount = filteredElements.filter(e => e.navigation === 'kamelet').length;
 
+    const fElementCount = filteredElements.length;
+    const moreElements = fElementCount > pageSize ? fElementCount - pageSize : 0;
+
     const fastElements: DslMetaModel[] = elements
         .filter((d: DslMetaModel) => {
             if (selectedToggles.includes('eip') && d.navigation === 'eip') {
@@ -282,9 +287,16 @@ export function DslSelector(props: Props) {
                     )}
                 </Gallery>
                 <Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
-                    {showSelector && filteredElements.map((dsl: DslMetaModel, index: number) =>
+                    {showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
                         <DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
                     )}
+                    {moreElements > 0 &&
+                        <Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
+                            <Bullseye>
+                                <Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
+                            </Bullseye>
+                        </Card>
+                    }
                 </Gallery>
             </PageSection>
         </Modal>
diff --git a/karavan-space/src/designer/selector/DslSelector.tsx b/karavan-space/src/designer/selector/DslSelector.tsx
index 2aaf32cc..c11e9b2f 100644
--- a/karavan-space/src/designer/selector/DslSelector.tsx
+++ b/karavan-space/src/designer/selector/DslSelector.tsx
@@ -26,7 +26,7 @@ import {
     TextInputGroup,
     TextInputGroupUtilities, TextVariants, Text,
     ToggleGroup,
-    ToggleGroupItem, TextContent, Badge, TextInput, Skeleton
+    ToggleGroupItem, TextContent, Badge, TextInput, Skeleton, Bullseye, Card
 } from '@patternfly/react-core';
 import './DslSelector.css';
 import {CamelUi} from "../utils/CamelUi";
@@ -65,11 +65,13 @@ export function DslSelector(props: Props) {
     const [elements, setElements] = useState<DslMetaModel[]>([]);
     const [preferredElements, setPreferredElements] = useState<string[]>([]);
     const [ready, setReady] = useState<boolean>(false);
+    const [pageSize, setPageSize] = useState<number>(100);
 
     useEffect(() => {
         setAllElements();
         setPreferences();
         setReady(true);
+        setPageSize(100);
     }, []);
 
     function setAllElements() {
@@ -246,6 +248,9 @@ export function DslSelector(props: Props) {
     const cCount = filteredElements.filter(e => e.navigation === 'component').length;
     const kCount = filteredElements.filter(e => e.navigation === 'kamelet').length;
 
+    const fElementCount = filteredElements.length;
+    const moreElements = fElementCount > pageSize ? fElementCount - pageSize : 0;
+
     const fastElements: DslMetaModel[] = elements
         .filter((d: DslMetaModel) => {
             if (selectedToggles.includes('eip') && d.navigation === 'eip') {
@@ -282,9 +287,16 @@ export function DslSelector(props: Props) {
                     )}
                 </Gallery>
                 <Gallery key={"gallery"} hasGutter className="dsl-gallery" minWidths={{default: '200px'}}>
-                    {showSelector && filteredElements.map((dsl: DslMetaModel, index: number) =>
+                    {showSelector && filteredElements.slice(0, pageSize).map((dsl: DslMetaModel, index: number) =>
                         <DslCard dsl={dsl} index={index} onDslSelect={selectDsl}/>
                     )}
+                    {moreElements > 0 &&
+                        <Card isCompact isPlain isFlat isRounded style={{minHeight: '140px'}}>
+                            <Bullseye>
+                                <Button variant='link' onClick={_ => setPageSize(pageSize + 10)}>{`${moreElements} more`}</Button>
+                            </Bullseye>
+                        </Card>
+                    }
                 </Gallery>
             </PageSection>
         </Modal>