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/02/26 20:44:03 UTC

(camel-karavan) branch main updated (335386d7 -> 8a37d39f)

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 335386d7 reload kamelets on file editor route #1134 (#1140)
     new 7d20c2c0 Push Image on push to main
     new d65b578e DslSelector style
     new 8a37d39f fix #1134

The 3 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:
 .github/workflows/app.yml                          |   2 +-
 .../apache/camel/karavan/api/KameletResources.java |  13 ---
 .../apache/camel/karavan/service/GitService.java   |   2 +-
 .../camel/karavan/service/KaravanCacheService.java |   6 +-
 .../camel/karavan/service/KaravanService.java      |   2 +-
 .../camel/karavan/service/ProjectService.java      |   4 +
 karavan-app/src/main/webui/src/api/KaravanApi.tsx  |  11 --
 .../src/main/webui/src/api/ProjectService.ts       |   9 +-
 .../src/main/webui/src/designer/karavan.css        | 111 -------------------
 .../main/webui/src/designer/route/DslSelector.css  | 122 +++++++++++++++++++++
 .../main/webui/src/designer/route/DslSelector.tsx  |  19 ++--
 .../webui/src/knowledgebase/KnowledgebasePage.tsx  |  10 +-
 .../src/knowledgebase/kamelets/KameletCard.tsx     |   8 +-
 .../src/knowledgebase/kamelets/KameletsTab.tsx     |   3 +
 .../src/main/webui/src/main/useMainHook.tsx        |  17 ++-
 karavan-designer/src/designer/karavan.css          | 111 -------------------
 .../src/designer/route/DslSelector.css             | 122 +++++++++++++++++++++
 .../src/designer/route/DslSelector.tsx             |  19 ++--
 .../src/knowledgebase/KnowledgebasePage.tsx        |  10 +-
 .../src/knowledgebase/kamelets/KameletCard.tsx     |  12 +-
 20 files changed, 311 insertions(+), 302 deletions(-)
 create mode 100644 karavan-app/src/main/webui/src/designer/route/DslSelector.css
 create mode 100644 karavan-designer/src/designer/route/DslSelector.css


(camel-karavan) 01/03: Push Image on push to main

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 7d20c2c040bc08122c631518a9902c8d5f9fcf9c
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Feb 26 11:46:55 2024 -0500

    Push Image on push to main
---
 .github/workflows/app.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/app.yml b/.github/workflows/app.yml
index 959aac2d..d218f5ab 100644
--- a/.github/workflows/app.yml
+++ b/.github/workflows/app.yml
@@ -60,7 +60,7 @@ jobs:
           mvn package -Dquarkus.profile=public -DskipTests \
           -Dquarkus.quinoa.package-manager-install=false \
           -Dquarkus.container-image.build=true \
-          -Dquarkus.container-image.push=true \
+          -Dquarkus.container-image.push=${{ github.event_name != 'pull_request' }} \
           -Dquarkus.docker.buildx.platform=linux/amd64,linux/arm64 \
           -Dquarkus.container-image.image=${{ env.REGISTRY }}/${GITHUB_REPOSITORY}:${{ env.TAG }} \
           -Dquarkus.container-image.username=${{ github.actor }} \


(camel-karavan) 02/03: DslSelector style

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 d65b578e7f4af01cd626fb53aa5c23a8db58d07a
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Feb 26 11:58:21 2024 -0500

    DslSelector style
---
 karavan-designer/src/designer/karavan.css          | 111 -------------------
 .../src/designer/route/DslSelector.css             | 122 +++++++++++++++++++++
 .../src/designer/route/DslSelector.tsx             |  19 ++--
 3 files changed, 130 insertions(+), 122 deletions(-)

diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index 6184b230..9e5826a8 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -525,117 +525,6 @@
     margin-top: 16px;
 }
 
-.dsl-modal {
-    height: 80%;
-    color: var(--pf-v5-global--Color--100);
-}
-
-.dsl-modal .dsl-card {
-    cursor: pointer;
-}
-
-.dsl-modal .dsl-card .pf-v5-c-card__header-main {
-    display: flex;
-    flex-direction: row;
-}
-
-.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dsl-modal .dsl-card .icon {
-    height: 20px;
-    width: auto;
-    border: none;
-    margin-right: 6px;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-
-.dsl-modal .search {
-    width: 350px;
-    position: absolute;
-    top: 24px;
-    right: 72px;
-    display:flex;
-    justify-content:flex-end;
-}
-
-.dsl-modal .search .pf-v5-c-form__group{
-    grid-template-columns:auto !important;
-}
-
-.dsl-modal .search .pf-v5-c-form__group-label {
-    padding: 0;
-    margin: auto;
-}
-
-.dsl-modal .search .text-field {
-    height: auto;
-}
-
-.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
-    display: contents;
-}
-
-.dsl-modal .pf-v5-c-card__body {
-    padding-bottom: 0;
-    height: 54px;
-}
-
-
-.dsl-modal .dsl-card p {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-.dsl-modal .pf-v5-c-card__footer {
-    padding-bottom: 1em;
-}
-
-.dsl-modal .footer {
-    display: flex;
-    flex-direction: row;
-    margin-top: 6px;
-    flex-wrap: wrap;
-}
-
-.dsl-modal .dsl-card .header-labels {
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dsl-modal .dsl-card .footer-labels {
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dsl-modal .version,
-.dsl-modal .support-type,
-.dsl-modal .support-level {
-    white-space: nowrap;
-}
-
-.dsl-modal .labels {
-    opacity: 0.5;
-    font-weight: 200;
-    text-wrap: nowrap;
-}
-
-.dsl-modal .dsl-card:hover .labels {
-    opacity: 1;
-}
-
 .move-modal {
     width: 270px !important;
 }
diff --git a/karavan-designer/src/designer/route/DslSelector.css b/karavan-designer/src/designer/route/DslSelector.css
new file mode 100644
index 00000000..4bca7774
--- /dev/null
+++ b/karavan-designer/src/designer/route/DslSelector.css
@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dsl-modal {
+    height: 80%;
+    color: var(--pf-v5-global--Color--100);
+}
+
+.dsl-modal .dsl-card {
+    cursor: pointer;
+}
+
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    display: flex;
+    flex-direction: row;
+}
+
+.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dsl-modal .dsl-card .icon {
+    height: 20px;
+    width: auto;
+    border: none;
+    margin-right: 6px;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.dsl-modal .search {
+    position: absolute;
+    top: 24px;
+    right: 72px;
+    display:flex;
+    justify-content:flex-end;
+}
+
+.dsl-modal .search .pf-v5-c-form__group-label {
+    padding: 0;
+    margin: auto;
+}
+
+.dsl-modal .search .text-field {
+    height: auto;
+}
+
+.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
+    display: contents;
+}
+
+.dsl-modal .pf-v5-c-card__body {
+    padding-bottom: 0;
+    height: 54px;
+}
+
+
+.dsl-modal .dsl-card p {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.dsl-modal .pf-v5-c-card__footer {
+    padding-bottom: 1em;
+}
+
+.dsl-modal .footer {
+    display: flex;
+    flex-direction: row;
+    margin-top: 6px;
+    flex-wrap: wrap;
+}
+
+.dsl-modal .dsl-card .header-labels {
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dsl-modal .dsl-card .footer-labels {
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dsl-modal .version,
+.dsl-modal .support-type,
+.dsl-modal .support-level {
+    white-space: nowrap;
+}
+
+.dsl-modal .labels {
+    opacity: 0.5;
+    font-weight: 200;
+    text-wrap: nowrap;
+}
+
+.dsl-modal .dsl-card:hover .labels {
+    opacity: 1;
+}
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index d5613b70..7edfd421 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -21,7 +21,7 @@ import {
     Tab, Tabs, TabTitleText,
     Text, TextInput, ToggleGroup, ToggleGroupItem,Switch
 } from '@patternfly/react-core';
-import '../karavan.css';
+import './DslSelector.css';
 import {CamelUi} from "../utils/CamelUi";
 import {DslMetaModel} from "../utils/DslMetaModel";
 import {useDesignerStore, useSelectorStore} from "../DesignerStore";
@@ -67,24 +67,21 @@ export function DslSelector (props: Props) {
 
     function searchInput() {
         return (
-            <Form isHorizontal className="search" autoComplete="off">
-              {selectorTabIndex === 'kamelet' &&   <FormGroup fieldId="switch">
-                
+            <Flex className="search">
+              {selectorTabIndex === 'kamelet' && <FlexItem>
                     <Switch
                         label="Custom only"
                         id="switch"
                         isChecked={customOnly}
                         onChange={(_event, checked) => setCustomOnly(checked)}
                     />
-                </FormGroup>}
-                  
-                
-                <FormGroup fieldId="search">
-                    <TextInput className="text-field" type="text" id="search" name="search"
+                </FlexItem>}
+                <FlexItem>
+                    <TextInput className="text-field" type="text" id="search" name="search" autoComplete={"off"}
                                value={filter}
                                onChange={(_, value) => setFilter(value)}/>
-                </FormGroup>
-            </Form>
+                </FlexItem>
+            </Flex>
         )
     }
     


(camel-karavan) 03/03: fix #1134

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 8a37d39f3788641cdd7e21b5584f6426a994553a
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Feb 26 15:43:51 2024 -0500

    fix #1134
---
 .../apache/camel/karavan/api/KameletResources.java |  13 ---
 .../apache/camel/karavan/service/GitService.java   |   2 +-
 .../camel/karavan/service/KaravanCacheService.java |   6 +-
 .../camel/karavan/service/KaravanService.java      |   2 +-
 .../camel/karavan/service/ProjectService.java      |   4 +
 karavan-app/src/main/webui/src/api/KaravanApi.tsx  |  11 --
 .../src/main/webui/src/api/ProjectService.ts       |   9 +-
 .../src/main/webui/src/designer/karavan.css        | 111 -------------------
 .../main/webui/src/designer/route/DslSelector.css  | 122 +++++++++++++++++++++
 .../main/webui/src/designer/route/DslSelector.tsx  |  19 ++--
 .../webui/src/knowledgebase/KnowledgebasePage.tsx  |  10 +-
 .../src/knowledgebase/kamelets/KameletCard.tsx     |   8 +-
 .../src/knowledgebase/kamelets/KameletsTab.tsx     |   3 +
 .../src/main/webui/src/main/useMainHook.tsx        |  17 ++-
 .../src/knowledgebase/KnowledgebasePage.tsx        |  10 +-
 .../src/knowledgebase/kamelets/KameletCard.tsx     |  12 +-
 16 files changed, 180 insertions(+), 179 deletions(-)

diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/KameletResources.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/KameletResources.java
index f2090ae0..af589b27 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/KameletResources.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/KameletResources.java
@@ -55,17 +55,4 @@ public class KameletResources {
         return kamelets.toString();
     }
 
-    @GET
-    @Produces(MediaType.APPLICATION_JSON)
-    @Path("/names")
-    public List<String> getCustomNames() {
-        if (karavanCacheService.isReady()) {
-            Yaml yaml = new Yaml();
-            return karavanCacheService.getProjectFiles(Project.Type.kamelets.name()).stream()
-                    .map(projectFile -> projectFile.getName().replace(".kamelet.yaml", ""))
-                    .collect(Collectors.toList());
-        } else {
-            return List.of();
-        }
-    }
 }
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/service/GitService.java b/karavan-app/src/main/java/org/apache/camel/karavan/service/GitService.java
index db329be3..14da6248 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/service/GitService.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/service/GitService.java
@@ -66,7 +66,7 @@ public class GitService {
     @ConfigProperty(name = "karavan.git.password")
     Optional<String> password;
 
-    @ConfigProperty(name = "karavan.git.branch")
+    @ConfigProperty(name = "karavan.git.branch", defaultValue = "main")
     String branch;
 
     @ConfigProperty(name = "karavan.private-key-path")
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanCacheService.java b/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanCacheService.java
index 60960238..ce2b178b 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanCacheService.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanCacheService.java
@@ -62,7 +62,7 @@ public class KaravanCacheService {
 
     public static final String DEFAULT_ENVIRONMENT = "dev";
 
-    @ConsumeEvent(value = START_SERVICES, blocking = true)
+    @ConsumeEvent(value = START_SERVICES)
     void start(String data) {
         LOGGER.info("KaravanCacheService is starting");
         Config config = new ClasspathYamlConfig("hazelcast.yaml");
@@ -80,7 +80,9 @@ public class KaravanCacheService {
 
     void onStop(@Observes ShutdownEvent ev) {
         LOGGER.info("KaravanCacheService is stopping");
-        hz.shutdown();
+        if (hz != null){
+            hz.shutdown();
+        }
         ready.set(false);
     }
 
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanService.java b/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanService.java
index 39f576e4..353c1b53 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanService.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/service/KaravanService.java
@@ -77,7 +77,6 @@ public class KaravanService implements HealthCheck {
         if (!dockerService.checkDocker()){
             Quarkus.asyncExit();
         } else {
-            dockerService.createNetwork();
             dockerService.startListeners();
         }
     }
@@ -90,6 +89,7 @@ public class KaravanService implements HealthCheck {
 
     @ConsumeEvent(value = START_SERVICES, blocking = true)
     void startServices(String data) throws Exception {
+        LOGGER.info("Starting Karavan services");
         projectService.tryStart();
     }
 
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/service/ProjectService.java b/karavan-app/src/main/java/org/apache/camel/karavan/service/ProjectService.java
index 7acf1b52..00d1f5be 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/service/ProjectService.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/service/ProjectService.java
@@ -274,6 +274,10 @@ public class ProjectService implements HealthCheck {
 
     @Retry(maxRetries = 20, delay = 3000)
     public void tryStart() throws Exception {
+        boolean cache = karavanCacheService.isReady();
+        boolean git = gitService.checkGit();
+        LOGGER.info("Starting Project service: cache is " + (cache ? "ready" : "not ready"));
+        LOGGER.info("Starting Project service: git is " + (git ? "ready" : "not ready"));
         if (karavanCacheService.isReady() && gitService.checkGit()) {
             if (karavanCacheService.getProjects().isEmpty()) {
                 importAllProjects();
diff --git a/karavan-app/src/main/webui/src/api/KaravanApi.tsx b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
index 78239239..8ef409dd 100644
--- a/karavan-app/src/main/webui/src/api/KaravanApi.tsx
+++ b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
@@ -598,17 +598,6 @@ export class KaravanApi {
         });
     }
 
-    static async getCustomKameletNames(after: (names: []) => void) {
-        instance.get('/api/kamelet/names')
-            .then(res => {
-                if (res.status === 200) {
-                    after(res.data);
-                }
-            }).catch(err => {
-            console.log(err);
-        });
-    }
-
     static async getComponents(after: (json: string) => void) {
         instance.get('/api/component')
             .then(res => {
diff --git a/karavan-app/src/main/webui/src/api/ProjectService.ts b/karavan-app/src/main/webui/src/api/ProjectService.ts
index df52aa72..6b76a1bb 100644
--- a/karavan-app/src/main/webui/src/api/ProjectService.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectService.ts
@@ -133,9 +133,12 @@ export class ProjectService {
             yamls.split(/\n?---\n?/).map(c => c.trim()).forEach(z => kamelets.push(z));
             KameletApi.saveKamelets(kamelets, true);
         })
-        KaravanApi.getCustomKameletNames(names => {
-            KameletApi.saveCustomKameletNames(names);
-        })
+
+        KaravanApi.getFiles("kamelets", (files: ProjectFile[]) => {
+            console.log(files)
+            files.map(f => f.name.replace('.kamelet.yaml', ''))
+                .forEach(name => KameletApi.saveCustomKameletName(name))
+        });
     }
     public static updateFile(file: ProjectFile, active: boolean) {
         KaravanApi.putProjectFile(file, res => {
diff --git a/karavan-app/src/main/webui/src/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css
index 6184b230..9e5826a8 100644
--- a/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-app/src/main/webui/src/designer/karavan.css
@@ -525,117 +525,6 @@
     margin-top: 16px;
 }
 
-.dsl-modal {
-    height: 80%;
-    color: var(--pf-v5-global--Color--100);
-}
-
-.dsl-modal .dsl-card {
-    cursor: pointer;
-}
-
-.dsl-modal .dsl-card .pf-v5-c-card__header-main {
-    display: flex;
-    flex-direction: row;
-}
-
-.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dsl-modal .dsl-card .icon {
-    height: 20px;
-    width: auto;
-    border: none;
-    margin-right: 6px;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-
-.dsl-modal .search {
-    width: 350px;
-    position: absolute;
-    top: 24px;
-    right: 72px;
-    display:flex;
-    justify-content:flex-end;
-}
-
-.dsl-modal .search .pf-v5-c-form__group{
-    grid-template-columns:auto !important;
-}
-
-.dsl-modal .search .pf-v5-c-form__group-label {
-    padding: 0;
-    margin: auto;
-}
-
-.dsl-modal .search .text-field {
-    height: auto;
-}
-
-.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
-    display: contents;
-}
-
-.dsl-modal .pf-v5-c-card__body {
-    padding-bottom: 0;
-    height: 54px;
-}
-
-
-.dsl-modal .dsl-card p {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-.dsl-modal .pf-v5-c-card__footer {
-    padding-bottom: 1em;
-}
-
-.dsl-modal .footer {
-    display: flex;
-    flex-direction: row;
-    margin-top: 6px;
-    flex-wrap: wrap;
-}
-
-.dsl-modal .dsl-card .header-labels {
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dsl-modal .dsl-card .footer-labels {
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dsl-modal .version,
-.dsl-modal .support-type,
-.dsl-modal .support-level {
-    white-space: nowrap;
-}
-
-.dsl-modal .labels {
-    opacity: 0.5;
-    font-weight: 200;
-    text-wrap: nowrap;
-}
-
-.dsl-modal .dsl-card:hover .labels {
-    opacity: 1;
-}
-
 .move-modal {
     width: 270px !important;
 }
diff --git a/karavan-app/src/main/webui/src/designer/route/DslSelector.css b/karavan-app/src/main/webui/src/designer/route/DslSelector.css
new file mode 100644
index 00000000..4bca7774
--- /dev/null
+++ b/karavan-app/src/main/webui/src/designer/route/DslSelector.css
@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dsl-modal {
+    height: 80%;
+    color: var(--pf-v5-global--Color--100);
+}
+
+.dsl-modal .dsl-card {
+    cursor: pointer;
+}
+
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    display: flex;
+    flex-direction: row;
+}
+
+.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dsl-modal .dsl-card .icon {
+    height: 20px;
+    width: auto;
+    border: none;
+    margin-right: 6px;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.dsl-modal .search {
+    position: absolute;
+    top: 24px;
+    right: 72px;
+    display:flex;
+    justify-content:flex-end;
+}
+
+.dsl-modal .search .pf-v5-c-form__group-label {
+    padding: 0;
+    margin: auto;
+}
+
+.dsl-modal .search .text-field {
+    height: auto;
+}
+
+.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
+    display: contents;
+}
+
+.dsl-modal .pf-v5-c-card__body {
+    padding-bottom: 0;
+    height: 54px;
+}
+
+
+.dsl-modal .dsl-card p {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.dsl-modal .pf-v5-c-card__footer {
+    padding-bottom: 1em;
+}
+
+.dsl-modal .footer {
+    display: flex;
+    flex-direction: row;
+    margin-top: 6px;
+    flex-wrap: wrap;
+}
+
+.dsl-modal .dsl-card .header-labels {
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dsl-modal .dsl-card .footer-labels {
+    padding: 5px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dsl-modal .version,
+.dsl-modal .support-type,
+.dsl-modal .support-level {
+    white-space: nowrap;
+}
+
+.dsl-modal .labels {
+    opacity: 0.5;
+    font-weight: 200;
+    text-wrap: nowrap;
+}
+
+.dsl-modal .dsl-card:hover .labels {
+    opacity: 1;
+}
diff --git a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
index d5613b70..7edfd421 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
@@ -21,7 +21,7 @@ import {
     Tab, Tabs, TabTitleText,
     Text, TextInput, ToggleGroup, ToggleGroupItem,Switch
 } from '@patternfly/react-core';
-import '../karavan.css';
+import './DslSelector.css';
 import {CamelUi} from "../utils/CamelUi";
 import {DslMetaModel} from "../utils/DslMetaModel";
 import {useDesignerStore, useSelectorStore} from "../DesignerStore";
@@ -67,24 +67,21 @@ export function DslSelector (props: Props) {
 
     function searchInput() {
         return (
-            <Form isHorizontal className="search" autoComplete="off">
-              {selectorTabIndex === 'kamelet' &&   <FormGroup fieldId="switch">
-                
+            <Flex className="search">
+              {selectorTabIndex === 'kamelet' && <FlexItem>
                     <Switch
                         label="Custom only"
                         id="switch"
                         isChecked={customOnly}
                         onChange={(_event, checked) => setCustomOnly(checked)}
                     />
-                </FormGroup>}
-                  
-                
-                <FormGroup fieldId="search">
-                    <TextInput className="text-field" type="text" id="search" name="search"
+                </FlexItem>}
+                <FlexItem>
+                    <TextInput className="text-field" type="text" id="search" name="search" autoComplete={"off"}
                                value={filter}
                                onChange={(_, value) => setFilter(value)}/>
-                </FormGroup>
-            </Form>
+                </FlexItem>
+            </Flex>
         )
     }
     
diff --git a/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx b/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
index 86b777e5..f1630450 100644
--- a/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
@@ -51,20 +51,22 @@ export const KnowledgebasePage = (props: Props) => {
     function getTools() {
         return <Toolbar id="toolbar-group-types">
             <ToolbarContent>
-                {tab === 'kamelets' && <ToolbarItem>
+                <Flex>
+                {tab === 'kamelets' && <FlexItem>
                     <Switch
                         label="Custom only"
                         isChecked={customOnly}
                         onChange={(_event, checked) => setCustomOnly(checked)}
                     />
-                </ToolbarItem>}
-                <ToolbarItem>
+                </FlexItem>}
+                <FlexItem>
                     <TextInput className="text-field" type="search" id="search" name="search"
                                value={filter}
                                onChange={(_event, value) => setFilter(value)}
                                autoComplete="off"
                                placeholder="Search by name"/>
-                </ToolbarItem>
+                </FlexItem>
+                </Flex>
             </ToolbarContent>
         </Toolbar>
     }
diff --git a/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx b/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx
index c773035c..8a043507 100644
--- a/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletCard.tsx
@@ -16,7 +16,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import {
-    CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox
+    CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex, FlexItem
 } from '@patternfly/react-core';
 import '../../designer/karavan.css';
 import {KameletModel} from "karavan-core/lib/model/KameletModels";
@@ -60,8 +60,10 @@ export function KameletCard(props: Props) {
                onClick={event => click(event)}
         >
             <CardHeader className="header-labels">
-                {isCustom && <Badge className="custom">custom</Badge>}
-                <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+                <Flex gap={{default:'gapNone'}}>
+                    <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+                    {isCustom && <Badge className="custom labels">custom</Badge>}
+                </Flex>
                 {showBlockCheckbox && <Checkbox id={kamelet.metadata.name} className="block-checkbox labels" isChecked={!isblockedKamelet}
                            onChange={(_, checked) => selectKamelet(_, checked)}/>}
             </CardHeader>
diff --git a/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx b/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx
index 353819e4..d25e843d 100644
--- a/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx
+++ b/karavan-app/src/main/webui/src/knowledgebase/kamelets/KameletsTab.tsx
@@ -43,6 +43,9 @@ export function KameletsTab(props: Props) {
     let kameletList = KameletApi.getKamelets().filter(kamelet =>
         kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
     if (customOnly) kameletList = kameletList.filter(k => KameletApi.getCustomKameletNames().includes(k.metadata.name));
+
+    console.log("KameletApi.getCustomKameletNames()", KameletApi.getCustomKameletNames())
+
     return (
         <PageSection variant={dark ? PageSectionVariants.darker : PageSectionVariants.light}
                      padding={{default: 'noPadding'}} className="kamelet-section">
diff --git a/karavan-app/src/main/webui/src/main/useMainHook.tsx b/karavan-app/src/main/webui/src/main/useMainHook.tsx
index 5508002f..f5ce1015 100644
--- a/karavan-app/src/main/webui/src/main/useMainHook.tsx
+++ b/karavan-app/src/main/webui/src/main/useMainHook.tsx
@@ -19,8 +19,8 @@ import {KaravanApi} from "../api/KaravanApi";
 import {KameletApi} from "karavan-core/lib/api/KameletApi";
 import '../designer/karavan.css';
 import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
-import {AppConfig, ContainerStatus} from "../api/ProjectModels";
-import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
+import {AppConfig, ContainerStatus, Project} from "../api/ProjectModels";
+import {useAppConfigStore, useProjectsStore, useStatusesStore} from "../api/ProjectStore";
 import {InfrastructureAPI} from "../designer/utils/InfrastructureAPI";
 import {shallow} from "zustand/shallow";
 import {ProjectService} from "../api/ProjectService";
@@ -28,6 +28,7 @@ import {ProjectService} from "../api/ProjectService";
 export function useMainHook () {
 
     const [setConfig] = useAppConfigStore((state) => [state.setConfig], shallow)
+    const [setProjects] = useProjectsStore((s) => [s.setProjects], shallow)
     const [setContainers] = useStatusesStore((state) => [state.setContainers], shallow);
     const [selectedEnv, selectEnvironment] = useAppConfigStore((state) => [state.selectedEnv, state.selectEnvironment], shallow)
 
@@ -48,20 +49,16 @@ export function useMainHook () {
                 }
                 InfrastructureAPI.infrastructure = config.infrastructure;
             });
-            updateKamelets();
+            KaravanApi.getProjects((projects: Project[]) => {
+                setProjects(projects);
+            });
             updateComponents();
+            ProjectService.reloadKamelets();
             ProjectService.reloadBlockedTemplates();
             // updateSupportedComponents(); // not implemented yet
         }
     }
 
-    async function updateKamelets(): Promise<void> {
-        await new Promise(resolve => {
-            ProjectService.reloadKamelets();
-        });
-    }
- 
-   
     async function updateComponents(): Promise<void> {
         await new Promise(resolve => {
             KaravanApi.getComponents(code => {
diff --git a/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx b/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
index 86b777e5..f1630450 100644
--- a/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-designer/src/knowledgebase/KnowledgebasePage.tsx
@@ -51,20 +51,22 @@ export const KnowledgebasePage = (props: Props) => {
     function getTools() {
         return <Toolbar id="toolbar-group-types">
             <ToolbarContent>
-                {tab === 'kamelets' && <ToolbarItem>
+                <Flex>
+                {tab === 'kamelets' && <FlexItem>
                     <Switch
                         label="Custom only"
                         isChecked={customOnly}
                         onChange={(_event, checked) => setCustomOnly(checked)}
                     />
-                </ToolbarItem>}
-                <ToolbarItem>
+                </FlexItem>}
+                <FlexItem>
                     <TextInput className="text-field" type="search" id="search" name="search"
                                value={filter}
                                onChange={(_event, value) => setFilter(value)}
                                autoComplete="off"
                                placeholder="Search by name"/>
-                </ToolbarItem>
+                </FlexItem>
+                </Flex>
             </ToolbarContent>
         </Toolbar>
     }
diff --git a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
index c773035c..d0784c02 100644
--- a/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-designer/src/knowledgebase/kamelets/KameletCard.tsx
@@ -16,7 +16,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import {
-    CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox
+    CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex, FlexItem
 } from '@patternfly/react-core';
 import '../../designer/karavan.css';
 import {KameletModel} from "karavan-core/lib/model/KameletModels";
@@ -38,7 +38,7 @@ export function KameletCard(props: Props) {
     useEffect(() => {
         setBlockedKamelets(KameletApi.getBlockedKameletNames());
     }, []);
-    
+
     const kamelet = props.kamelet;
     const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
 
@@ -60,10 +60,12 @@ export function KameletCard(props: Props) {
                onClick={event => click(event)}
         >
             <CardHeader className="header-labels">
-                {isCustom && <Badge className="custom">custom</Badge>}
-                <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+                <Flex gap={{default:'gapNone'}}>
+                    <Badge isRead className="support-level labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+                    {isCustom && <Badge className="custom labels">custom</Badge>}
+                </Flex>
                 {showBlockCheckbox && <Checkbox id={kamelet.metadata.name} className="block-checkbox labels" isChecked={!isblockedKamelet}
-                           onChange={(_, checked) => selectKamelet(_, checked)}/>}
+                                                onChange={(_, checked) => selectKamelet(_, checked)}/>}
             </CardHeader>
             <CardHeader>
                 {CamelUi.getIconFromSource(kamelet.icon())}