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/03/29 21:09:51 UTC

(camel-karavan) 01/02: Paths redesign

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 24fe564aebc8c7fbe1253d78b5b7b9d390a7d5c4
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Fri Mar 29 16:46:15 2024 -0400

    Paths redesign
---
 .../apache/camel/karavan/api/BuildResource.java    |   2 +-
 .../camel/karavan/api/ComponentResources.java      |   2 +-
 .../camel/karavan/api/ConfigurationResource.java   |   2 +-
 .../camel/karavan/api/ContainerResource.java       |   2 +-
 .../apache/camel/karavan/api/DevModeResource.java  |   2 +-
 .../apache/camel/karavan/api/ImagesResource.java   |   2 +-
 .../camel/karavan/api/InfrastructureResource.java  |   2 +-
 .../apache/camel/karavan/api/KameletResources.java |   2 +-
 .../apache/camel/karavan/api/LogWatchResource.java |   2 +-
 .../camel/karavan/api/NotificationResource.java    |   2 +-
 .../camel/karavan/api/ProjectFileResource.java     |   2 +-
 .../camel/karavan/api/ProjectGitResource.java      |   2 +-
 .../apache/camel/karavan/api/ProjectResource.java  |   2 +-
 .../apache/camel/karavan/api/StatusResource.java   |   2 +-
 .../apache/camel/karavan/api/UsersResource.java    |   2 +-
 .../apache/camel/karavan/service/GitService.java   |   2 +-
 .../src/main/resources/application.properties      |   5 +-
 karavan-app/src/main/webui/src/api/KaravanApi.tsx  | 100 ++++++++++-----------
 karavan-app/src/main/webui/src/api/LogWatchApi.tsx |   2 +-
 .../src/main/webui/src/api/NotificationApi.tsx     |   4 +-
 karavan-app/src/main/webui/src/index.css           |  47 ----------
 .../src/main/webui/src/projects/ProjectsPage.css   |  68 ++++++++++++++
 .../src/main/webui/src/projects/ProjectsPage.tsx   |   6 +-
 23 files changed, 142 insertions(+), 122 deletions(-)

diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/BuildResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/BuildResource.java
index 7dd5fbda..f8590a56 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/BuildResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/BuildResource.java
@@ -27,7 +27,7 @@ import org.apache.camel.karavan.service.KaravanCacheService;
 import org.apache.camel.karavan.code.CodeService;
 import org.apache.camel.karavan.kubernetes.KubernetesService;
 
-@Path("/api/build")
+@Path("/ui/build")
 public class BuildResource {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ComponentResources.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ComponentResources.java
index d763fefb..46148989 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ComponentResources.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ComponentResources.java
@@ -23,7 +23,7 @@ import jakarta.ws.rs.Produces;
 import jakarta.ws.rs.core.MediaType;
 import org.apache.camel.karavan.code.CodeService;
 
-@Path("/api/component")
+@Path("/ui/component")
 public class ComponentResources {
     
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ConfigurationResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ConfigurationResource.java
index df877078..43860129 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ConfigurationResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ConfigurationResource.java
@@ -25,7 +25,7 @@ import jakarta.ws.rs.core.Response;
 import org.apache.camel.karavan.docker.DockerService;
 import org.apache.camel.karavan.service.ConfigService;
 
-@Path("/api/configuration")
+@Path("/ui/configuration")
 public class ConfigurationResource {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ContainerResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ContainerResource.java
index a5450dc2..2cd59af9 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ContainerResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ContainerResource.java
@@ -41,7 +41,7 @@ import java.util.stream.Collectors;
 import static org.apache.camel.karavan.service.ContainerStatusService.CONTAINER_STATUS;
 import static org.apache.camel.karavan.shared.Constants.*;
 
-@Path("/api/container")
+@Path("/ui/container")
 public class ContainerResource {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/DevModeResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/DevModeResource.java
index ce6f4903..514a4690 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/DevModeResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/DevModeResource.java
@@ -35,7 +35,7 @@ import org.jboss.logging.Logger;
 
 import static org.apache.camel.karavan.service.ContainerStatusService.CONTAINER_STATUS;
 
-@Path("/api/devmode")
+@Path("/ui/devmode")
 public class DevModeResource {
 
     private static final Logger LOGGER = Logger.getLogger(DevModeResource.class.getName());
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ImagesResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ImagesResource.java
index 69bebd01..dc4ab97d 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ImagesResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ImagesResource.java
@@ -31,7 +31,7 @@ import org.jose4j.base64url.Base64;
 import java.util.Comparator;
 import java.util.List;
 
-@Path("/api/image")
+@Path("/ui/image")
 public class ImagesResource {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/InfrastructureResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/InfrastructureResource.java
index ff917c59..255499fb 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/InfrastructureResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/InfrastructureResource.java
@@ -32,7 +32,7 @@ import java.util.Comparator;
 import java.util.List;
 import java.util.stream.Collectors;
 
-@Path("/api/infrastructure")
+@Path("/ui/infrastructure")
 public class InfrastructureResource {
 
     @Inject
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 af589b27..8da60022 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
@@ -30,7 +30,7 @@ import org.yaml.snakeyaml.Yaml;
 import java.util.List;
 import java.util.stream.Collectors;
 
-@Path("/api/kamelet")
+@Path("/ui/kamelet")
 public class KameletResources {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/LogWatchResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/LogWatchResource.java
index f0d71eb0..63d7202b 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/LogWatchResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/LogWatchResource.java
@@ -43,7 +43,7 @@ import java.io.IOException;
 import java.io.InputStreamReader;
 import java.util.concurrent.ConcurrentHashMap;
 
-@Path("/api/logwatch")
+@Path("/ui/logwatch")
 public class LogWatchResource {
 
     private static final Logger LOGGER = Logger.getLogger(LogWatchResource.class.getName());
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/NotificationResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/NotificationResource.java
index d7f2deb7..bad21349 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/NotificationResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/NotificationResource.java
@@ -32,7 +32,7 @@ import org.jboss.resteasy.reactive.RestStreamElementType;
 
 import static org.apache.camel.karavan.shared.Constants.*;
 
-@Path("/api/notification")
+@Path("/ui/notification")
 public class NotificationResource {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectFileResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectFileResource.java
index 994e6b60..366c9423 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectFileResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectFileResource.java
@@ -32,7 +32,7 @@ import java.util.Comparator;
 import java.util.List;
 import java.util.stream.Collectors;
 
-@Path("/api/file")
+@Path("/ui/file")
 public class ProjectFileResource {
 
     @Inject
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectGitResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectGitResource.java
index 871c700b..b0fdd476 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectGitResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectGitResource.java
@@ -29,7 +29,7 @@ import java.util.HashMap;
 
 import static org.apache.camel.karavan.service.ProjectService.PUSH_PROJECT;
 
-@Path("/api/git")
+@Path("/ui/git")
 public class ProjectGitResource {
 
     private static final Logger LOGGER = Logger.getLogger(ProjectGitResource.class.getName());
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectResource.java
index 9e0e8d71..846a502b 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/ProjectResource.java
@@ -37,7 +37,7 @@ import java.nio.charset.StandardCharsets;
 import java.util.List;
 import java.util.Objects;
 
-@Path("/api/project")
+@Path("/ui/project")
 public class ProjectResource {
     private static final Logger LOGGER = Logger.getLogger(ProjectResource.class.getName());
 
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/StatusResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/StatusResource.java
index f1bc1ad9..5e427fdc 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/StatusResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/StatusResource.java
@@ -28,7 +28,7 @@ import org.jboss.logging.Logger;
 
 import java.util.List;
 
-@Path("/api/status")
+@Path("/ui/status")
 public class StatusResource {
 
     private static final Logger LOGGER = Logger.getLogger(StatusResource.class.getName());
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/api/UsersResource.java b/karavan-app/src/main/java/org/apache/camel/karavan/api/UsersResource.java
index 36d0a12f..26a0bc7c 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/api/UsersResource.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/api/UsersResource.java
@@ -28,7 +28,7 @@ import org.jboss.resteasy.reactive.NoCache;
 
 import java.util.Set;
 
-@Path("/api/users")
+@Path("/ui/users")
 @Produces(MediaType.APPLICATION_JSON)
 public class UsersResource {
 
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 db176e71..7b03d317 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
@@ -191,8 +191,8 @@ public class GitService {
     }
 
     public Git getGit(boolean checkout, String folder) throws GitAPIException, IOException, URISyntaxException {
-        LOGGER.info("Git checkout");
         GitConfig gitConfig = getGitConfig();
+        LOGGER.info("Git checkout " + gitConfig.getUri());
         LOGGER.info("Temp folder created " + folder);
         Git git = null;
         if (ephemeral) {
diff --git a/karavan-app/src/main/resources/application.properties b/karavan-app/src/main/resources/application.properties
index d1382f7f..27aee6db 100644
--- a/karavan-app/src/main/resources/application.properties
+++ b/karavan-app/src/main/resources/application.properties
@@ -60,12 +60,11 @@ karavan.container-image.registry-password=
 %public.karavan.auth=public
 %public.quarkus.oidc.enabled=false
 %public.quarkus.http.auth.basic=false
-%public.quarkus.security.users.embedded.enabled=false
 %public.quarkus.http.auth.permission.authenticated.enabled=false
 %public.quarkus.http.auth.permission.public.enabled=false
 
 # Authentication
-quarkus.http.auth.permission.authenticated.paths=/api/*
+quarkus.http.auth.permission.authenticated.paths=/ui/*
 quarkus.http.auth.permission.authenticated.policy=authenticated
 
 quarkus.http.auth.permission.public.paths=/public/*,/static/*,/robots.txt,/favicon.ico
@@ -111,4 +110,4 @@ quarkus.quinoa.package-manager-install=false
 quarkus.quinoa.package-manager-install.node-version=18.12.1
 quarkus.quinoa.dev-server.port=3003
 quarkus.quinoa.dev-server.check-timeout=60000
-quarkus.quinoa.ignored-path-prefixes=/api,/public
+quarkus.quinoa.ignored-path-prefixes=/ui,/public
diff --git a/karavan-app/src/main/webui/src/api/KaravanApi.tsx b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
index 3bdb20f8..bae8382d 100644
--- a/karavan-app/src/main/webui/src/api/KaravanApi.tsx
+++ b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
@@ -186,7 +186,7 @@ export class KaravanApi {
     }
 
     static async getMe(after: (user: {}) => void) {
-        instance.get('/api/users/me')
+        instance.get('/ui/users/me')
             .then(res => {
                 if (res.status === 200) {
                     KaravanApi.me = res.data;
@@ -198,7 +198,7 @@ export class KaravanApi {
     }
 
     static async getConfiguration(after: (config: AppConfig) => void) {
-        instance.get('/api/configuration')
+        instance.get('/ui/configuration')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -209,7 +209,7 @@ export class KaravanApi {
     }
 
     static async getInfrastructureInfo(after: (info: any) => void) {
-        instance.get('/api/configuration/info')
+        instance.get('/ui/configuration/info')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -220,7 +220,7 @@ export class KaravanApi {
     }
 
     static async getProject(projectId: string, after: (project: Project) => void) {
-        instance.get('/api/project/' + projectId)
+        instance.get('/ui/project/' + projectId)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -231,7 +231,7 @@ export class KaravanApi {
     }
 
     static async getProjectDeploymentStatus(projectId: string, env: string, after: (status?: DeploymentStatus) => void) {
-        instance.get('/api/status/deployment/' + projectId + "/" + env)
+        instance.get('/ui/status/deployment/' + projectId + "/" + env)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -244,7 +244,7 @@ export class KaravanApi {
     }
 
     static async getProjectCamelStatus(projectId: string, env: string, after: (status: CamelStatus) => void) {
-        instance.get('/api/status/camel/' + projectId + "/" + env)
+        instance.get('/ui/status/camel/' + projectId + "/" + env)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -255,7 +255,7 @@ export class KaravanApi {
     }
 
     static async getAllCamelContextStatuses(after: (statuses: CamelStatus[]) => void) {
-        instance.get('/api/status/camel/context')
+        instance.get('/ui/status/camel/context')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -266,7 +266,7 @@ export class KaravanApi {
     }
 
     static async getProjects(after: (projects: Project[]) => void, type?: ProjectType.normal) {
-        instance.get('/api/project' + (type !== undefined ? "?type=" + type : ""))
+        instance.get('/ui/project' + (type !== undefined ? "?type=" + type : ""))
             .then(res => {
                 if (res.status === 200) {
                     after(res.data.map((p: Partial<Project> | undefined) => new Project(p)));
@@ -277,15 +277,15 @@ export class KaravanApi {
     }
 
     static async postProject(project: Project) {
-        return instance.post('/api/project', project);
+        return instance.post('/ui/project', project);
     }
 
     static async copyProject(sourceProject: string, project: Project) {
-        return instance.post('/api/project/copy/' + sourceProject, project);
+        return instance.post('/ui/project/copy/' + sourceProject, project);
     }
 
     static async deleteProject(project: Project, deleteContainers: boolean, after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/project/' + encodeURI(project.projectId) + (deleteContainers ? '?deleteContainers=true' : ''))
+        instance.delete('/ui/project/' + encodeURI(project.projectId) + (deleteContainers ? '?deleteContainers=true' : ''))
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -294,7 +294,7 @@ export class KaravanApi {
     }
 
     static async buildProject(project: Project, tag: string, after: (res: AxiosResponse<any>) => void) {
-        instance.post('/api/project/build/' + tag, project)
+        instance.post('/ui/project/build/' + tag, project)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -303,7 +303,7 @@ export class KaravanApi {
     }
 
     static async updateBuildConfigMap(after: (res: AxiosResponse<any>) => void) {
-        instance.post('/api/build/update-config-map', "{}")
+        instance.post('/ui/build/update-config-map', "{}")
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -314,7 +314,7 @@ export class KaravanApi {
     }
 
     static async getFiles(projectId: string, after: (files: ProjectFile[]) => void) {
-        instance.get('/api/file/' + projectId)
+        instance.get('/ui/file/' + projectId)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -325,11 +325,11 @@ export class KaravanApi {
     }
 
     static async saveProjectFile(file: ProjectFile) {
-        return instance.post('/api/file', file);
+        return instance.post('/ui/file', file);
     }
 
     static async putProjectFile(file: ProjectFile, after: (res: AxiosResponse<any>) => void) {
-        instance.put('/api/file', file)
+        instance.put('/ui/file', file)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -338,7 +338,7 @@ export class KaravanApi {
     }
 
     static async deleteProjectFile(file: ProjectFile, after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/file/' + file.projectId + '/' + file.name)
+        instance.delete('/ui/file/' + file.projectId + '/' + file.name)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -347,7 +347,7 @@ export class KaravanApi {
     }
 
     static async push(params: {}, after: (res: AxiosResponse<any>) => void) {
-        instance.post('/api/git', params)
+        instance.post('/ui/git', params)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -356,7 +356,7 @@ export class KaravanApi {
     }
 
     static async pull(projectId: string, after: (res: AxiosResponse<any> | any) => void) {
-        instance.put('/api/git/' + projectId)
+        instance.put('/ui/git/' + projectId)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -365,7 +365,7 @@ export class KaravanApi {
     }
 
     static async getTemplatesFiles( after: (files: []) => void) {
-        instance.get('/api/file/templates')
+        instance.get('/ui/file/templates')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -376,7 +376,7 @@ export class KaravanApi {
     }
 
     static async getBeanTemplatesFiles( after: (files: ProjectFile []) => void) {
-        instance.get('/api/file/templates/beans')
+        instance.get('/ui/file/templates/beans')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -387,7 +387,7 @@ export class KaravanApi {
     }
 
     static async getDevModePodStatus(projectId: string, after: (res: AxiosResponse<ContainerStatus>) => void) {
-        instance.get('/api/devmode/container/' + projectId)
+        instance.get('/ui/devmode/container/' + projectId)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -396,7 +396,7 @@ export class KaravanApi {
     }
 
     static async reloadDevModeCode(projectId: string, after: (res: AxiosResponse<any>) => void) {
-        instance.get('/api/devmode/reload/' + projectId)
+        instance.get('/ui/devmode/reload/' + projectId)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -405,7 +405,7 @@ export class KaravanApi {
     }
 
     static async getProjectCamelStatuses(projectId: string, env: string, after: (res: AxiosResponse<CamelStatus[]>) => void) {
-        instance.get('/api/project/status/camel/' + projectId + "/" + env)
+        instance.get('/ui/project/status/camel/' + projectId + "/" + env)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -414,7 +414,7 @@ export class KaravanApi {
     }
 
     static async getProjectCamelTraces(projectId: string, env: string, after: (res: AxiosResponse<CamelStatus[]>) => void) {
-        instance.get('/api/project/traces/' + projectId + "/" + env)
+        instance.get('/ui/project/traces/' + projectId + "/" + env)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -423,7 +423,7 @@ export class KaravanApi {
     }
 
     static async startDevModeContainer(project: Project, verbose: boolean, after: (res: AxiosResponse<string>) => void) {
-        instance.post('/api/devmode' + (verbose ? '/--verbose' : ''), project)
+        instance.post('/ui/devmode' + (verbose ? '/--verbose' : ''), project)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -432,7 +432,7 @@ export class KaravanApi {
     }
 
     static async deleteDevModeContainer(name: string, deletePVC: boolean, after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/devmode/' +  name + "/" + deletePVC)
+        instance.delete('/ui/devmode/' +  name + "/" + deletePVC)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -441,7 +441,7 @@ export class KaravanApi {
     }
 
     static async setProjectImage(projectId: string, imageName: string, commit: boolean, message: string, after: (res: AxiosResponse<any>) => void) {
-        instance.post('/api/image/' + projectId, {imageName: imageName, commit: commit, message: message})
+        instance.post('/ui/image/' + projectId, {imageName: imageName, commit: commit, message: message})
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -450,7 +450,7 @@ export class KaravanApi {
     }
 
     static async stopBuild(environment: string, buildName: string, after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/project/build/' + environment + "/" + buildName)
+        instance.delete('/ui/project/build/' + environment + "/" + buildName)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -461,7 +461,7 @@ export class KaravanApi {
     }
 
     static async getContainerLog(environment: string, name: string, after: (res: AxiosResponse<string>) => void) {
-        instance.get('/api/container/log/' + environment + "/" + name)
+        instance.get('/ui/container/log/' + environment + "/" + name)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -472,7 +472,7 @@ export class KaravanApi {
     }
 
     static async getAllServiceStatuses(after: (statuses: ServiceStatus[]) => void) {
-        instance.get('/api/infrastructure/service')
+        instance.get('/ui/infrastructure/service')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -483,7 +483,7 @@ export class KaravanApi {
     }
 
     static async getAllContainerStatuses(after: (statuses: ContainerStatus[]) => void) {
-        instance.get('/api/container')
+        instance.get('/ui/container')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -494,7 +494,7 @@ export class KaravanApi {
     }
 
     static async getAllDeploymentStatuses(after: (statuses: DeploymentStatus[]) => void) {
-        instance.get('/api/infrastructure/deployment')
+        instance.get('/ui/infrastructure/deployment')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -505,7 +505,7 @@ export class KaravanApi {
     }
 
     static async getDeploymentStatuses(env: string, after: (statuses: DeploymentStatus[]) => void) {
-        instance.get('/api/infrastructure/deployment/' + env)
+        instance.get('/ui/infrastructure/deployment/' + env)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -516,7 +516,7 @@ export class KaravanApi {
     }
 
     static async rolloutDeployment(name: string, environment: string, after: (res: AxiosResponse<any>) => void) {
-        instance.post('/api/infrastructure/deployment/rollout/' + environment + '/' + name, "")
+        instance.post('/ui/infrastructure/deployment/rollout/' + environment + '/' + name, "")
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -525,7 +525,7 @@ export class KaravanApi {
     }
 
     static async deleteDeployment(environment: string, name: string, after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/infrastructure/deployment/' + environment + '/' + name)
+        instance.delete('/ui/infrastructure/deployment/' + environment + '/' + name)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -539,7 +539,7 @@ export class KaravanApi {
                                  command: 'deploy' | 'run' | 'pause' | 'stop' | 'delete',
                                  pullImage: boolean,
                                  after: (res: AxiosResponse<any> | any) => void) {
-        instance.post('/api/container/' + projectId + '/' + type + "/" + name, {command: command, pullImage: pullImage})
+        instance.post('/ui/container/' + projectId + '/' + type + "/" + name, {command: command, pullImage: pullImage})
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -548,7 +548,7 @@ export class KaravanApi {
     }
 
     static async deleteContainer(projectId: string, type: 'devmode' | 'devservice' | 'project' | 'internal' | 'build' | 'unknown', name: string, after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/container/' + projectId + '/' + type + "/" + name)
+        instance.delete('/ui/container/' + projectId + '/' + type + "/" + name)
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -557,7 +557,7 @@ export class KaravanApi {
     }
 
     static async getConfigMaps(after: (any: []) => void) {
-        instance.get('/api/infrastructure/configmaps/')
+        instance.get('/ui/infrastructure/configmaps/')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -568,7 +568,7 @@ export class KaravanApi {
     }
 
     static async getImages(projectId: string, after: (string: []) => void) {
-        instance.get('/api/image/' + projectId)
+        instance.get('/ui/image/' + projectId)
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -579,7 +579,7 @@ export class KaravanApi {
     }
 
     static async deleteImage(imageName: string, after: () => void) {
-        instance.delete('/api/image/' + Buffer.from(imageName).toString('base64'))
+        instance.delete('/ui/image/' + Buffer.from(imageName).toString('base64'))
             .then(res => {
                 if (res.status === 200) {
                     after();
@@ -590,7 +590,7 @@ export class KaravanApi {
     }
 
     static async getSecrets(after: (any: []) => void) {
-        instance.get('/api/infrastructure/secrets')
+        instance.get('/ui/infrastructure/secrets')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -601,7 +601,7 @@ export class KaravanApi {
     }
 
     static async getServices(after: (any: []) => void) {
-        instance.get('/api/infrastructure/services')
+        instance.get('/ui/infrastructure/services')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -612,7 +612,7 @@ export class KaravanApi {
     }
 
     static async deleteAllStatuses(after: (res: AxiosResponse<any>) => void) {
-        instance.delete('/api/status/all/')
+        instance.delete('/ui/status/all/')
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -621,7 +621,7 @@ export class KaravanApi {
     }
 
     static async restartInformers(after: (res: AxiosResponse<any>) => void) {
-        instance.put('/api/infrastructure/informers/')
+        instance.put('/ui/infrastructure/informers/')
             .then(res => {
                 after(res);
             }).catch(err => {
@@ -630,7 +630,7 @@ export class KaravanApi {
     }
 
     static async getKamelets(after: (yaml: string) => void) {
-        instance.get('/api/kamelet', {headers: {'Accept': 'text/plain'}})
+        instance.get('/ui/kamelet', {headers: {'Accept': 'text/plain'}})
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -641,7 +641,7 @@ export class KaravanApi {
     }
 
     static async getComponents(after: (json: string) => void) {
-        instance.get('/api/component')
+        instance.get('/ui/component')
             .then(res => {
                 if (res.status === 200) {
                     after(JSON.stringify(res.data));
@@ -652,7 +652,7 @@ export class KaravanApi {
     }
 
     static async getSupportedComponents(after: (json: string) => void) {
-        instance.get('/api/supported-component')
+        instance.get('/ui/supported-component')
             .then(res => {
                 if (res.status === 200) {
                     after(JSON.stringify(res.data));
@@ -663,7 +663,7 @@ export class KaravanApi {
     }
 
     static async getOpenApis(after: (openapis: []) => void) {
-        instance.get('/api/openapi')
+        instance.get('/ui/openapi')
             .then(res => {
                 if (res.status === 200) {
                     after(res.data);
@@ -674,7 +674,7 @@ export class KaravanApi {
     }
 
     static async getOpenApi(name: string, after: (res: AxiosResponse<any>) => void) {
-        instance.get('/api/openapi/' + name, {headers: {'Accept': 'text/plain'}})
+        instance.get('/ui/openapi/' + name, {headers: {'Accept': 'text/plain'}})
             .then(res => {
                 after(res);
             }).catch(err => {
diff --git a/karavan-app/src/main/webui/src/api/LogWatchApi.tsx b/karavan-app/src/main/webui/src/api/LogWatchApi.tsx
index eb8abf73..1b17dcb1 100644
--- a/karavan-app/src/main/webui/src/api/LogWatchApi.tsx
+++ b/karavan-app/src/main/webui/src/api/LogWatchApi.tsx
@@ -36,7 +36,7 @@ export class LogWatchApi {
                 ready = KaravanApi.authType === 'public';
             }
             if (ready) {
-                await fetchEventSource("/api/logwatch/" + type + "/" + podName, {
+                await fetchEventSource('/ui/logwatch/' + type + '/' + podName, {
                     method: "GET",
                     headers: headers,
                     signal: controller.signal,
diff --git a/karavan-app/src/main/webui/src/api/NotificationApi.tsx b/karavan-app/src/main/webui/src/api/NotificationApi.tsx
index 93692dd7..23f5a8dd 100644
--- a/karavan-app/src/main/webui/src/api/NotificationApi.tsx
+++ b/karavan-app/src/main/webui/src/api/NotificationApi.tsx
@@ -54,9 +54,9 @@ export class NotificationApi {
                 ready = KaravanApi.authType === 'public';
             }
             if (ready) {
-                NotificationApi.fetch('/api/notification/system', controller, headers,
+                NotificationApi.fetch('/ui/notification/system', controller, headers,
                     ev => NotificationApi.onSystemMessage(ev));
-                NotificationApi.fetch('/api/notification/user/' + KaravanApi.getUserId(), controller, headers,
+                NotificationApi.fetch('/ui/notification/user/' + KaravanApi.getUserId(), controller, headers,
                     ev => NotificationApi.onUserMessage(ev));
             }
         };
diff --git a/karavan-app/src/main/webui/src/index.css b/karavan-app/src/main/webui/src/index.css
index e22ee363..2695e881 100644
--- a/karavan-app/src/main/webui/src/index.css
+++ b/karavan-app/src/main/webui/src/index.css
@@ -106,53 +106,6 @@
   font-weight: initial;
 }
 
-/*Projects*/
-
-.karavan .tools .pf-v5-c-button {
-  font-size: 14px;
-}
-
-.karavan .projects-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.karavan .projects-page .pf-v5-c-table tr {
-  --pf-v5-c-table--cell--FontSize: 14px;
-}
-
-.karavan .projects-page .icon-td {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.karavan .projects-page .icon {
-  height: 21px;
-  width: 21px;
-  margin-top: 8px;
-  position: absolute;
-}
-
-.karavan .project-page .badge,
-.karavan .projects-page .badge {
-  font-size: 14px;
-  font-weight: 400;
-  padding: 4px 8px 4px 8px;
-  min-width: 70px;
-}
-
-.karavan .projects-page .runtime-badge {
-  min-width: 27px;
-  font-size: 14px;
-  font-weight: 400;
-  padding: 2px 8px 2px 8px;
-}
-
-.karavan .projects-page .pf-m-link {
-  font-size: 14px;
-}
-
 .karavan .project-page {
   display: flex;
   flex-direction: column;
diff --git a/karavan-app/src/main/webui/src/projects/ProjectsPage.css b/karavan-app/src/main/webui/src/projects/ProjectsPage.css
new file mode 100644
index 00000000..cbaa4ffc
--- /dev/null
+++ b/karavan-app/src/main/webui/src/projects/ProjectsPage.css
@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+.karavan .tools .pf-v5-c-button {
+    font-size: 14px;
+}
+
+.karavan .projects-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.karavan .projects-page .project-section {
+    overflow: auto;
+    flex-shrink: unset;
+    flex-grow: 1;
+    background-color: var(--pf-v5-global--BackgroundColor--light-300);
+}
+
+.karavan .projects-page .pf-v5-c-table tr {
+    --pf-v5-c-table--cell--FontSize: 14px;
+}
+
+.karavan .projects-page .icon-td {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.karavan .projects-page .icon {
+    height: 21px;
+    width: 21px;
+    margin-top: 8px;
+    position: absolute;
+}
+
+.karavan .project-page .badge,
+.karavan .projects-page .badge {
+    font-size: 14px;
+    font-weight: 400;
+    padding: 4px 8px 4px 8px;
+    min-width: 70px;
+}
+
+.karavan .projects-page .runtime-badge {
+    min-width: 27px;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 2px 8px 2px 8px;
+}
+
+.karavan .projects-page .pf-m-link {
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/projects/ProjectsPage.tsx b/karavan-app/src/main/webui/src/projects/ProjectsPage.tsx
index b7f86709..4089fcdc 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectsPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectsPage.tsx
@@ -30,7 +30,7 @@ import {
     EmptyStateVariant,
     EmptyStateIcon, EmptyStateHeader
 } from '@patternfly/react-core';
-import '../designer/karavan.css';
+import './ProjectsPage.css';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import {
     Tbody,
@@ -142,11 +142,11 @@ export function ProjectsPage () {
     }
 
     return (
-        <PageSection className="kamelet-section projects-page" padding={{default: 'noPadding'}}>
+        <PageSection className="projects-page" padding={{default: 'noPadding'}}>
             <PageSection className="tools-section" padding={{default: 'noPadding'}}>
                 <MainToolbar title={title()} tools={getTools()}/>
             </PageSection>
-            <PageSection isFilled className="kamelets-page">
+            <PageSection isFilled className="project-section">
                 {getProjectsTable()}
             </PageSection>
             {["create", "copy"].includes(operation) && <CreateProjectModal/>}