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 2022/11/19 02:03:40 UTC
[camel-karavan] 08/12: Show custom kamelets
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 d7e0cfd22813b17d10ced8efa90a685143075b84
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Fri Nov 18 18:27:57 2022 -0500
Show custom kamelets
---
.../apache/camel/karavan/api/KameletResources.java | 19 ++++++++++++++++-
.../apache/camel/karavan/api/ProjectResource.java | 4 ++--
karavan-app/src/main/webui/src/Main.tsx | 3 +++
karavan-app/src/main/webui/src/api/KaravanApi.tsx | 11 ++++++++++
.../src/main/webui/src/designer/karavan.css | 24 +++++++++++++++-------
.../src/main/webui/src/kamelets/KameletCard.tsx | 9 +++++---
karavan-core/src/core/api/KameletApi.ts | 10 +++++++++
karavan-designer/src/designer/karavan.css | 19 ++++++++++-------
karavan-designer/src/kamelets/KameletCard.tsx | 9 +++++---
9 files changed, 85 insertions(+), 23 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 d06f15d..afb61d2 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
@@ -20,13 +20,16 @@ import org.apache.camel.karavan.model.Project;
import org.apache.camel.karavan.model.ProjectFile;
import org.apache.camel.karavan.service.CodeService;
import org.apache.camel.karavan.service.InfinispanService;
+import org.yaml.snakeyaml.Yaml;
import javax.inject.Inject;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
+import java.util.LinkedHashMap;
import java.util.List;
+import java.util.Map;
import java.util.stream.Collectors;
@Path("/api/kamelet")
@@ -40,7 +43,7 @@ public class KameletResources {
@GET
@Produces(MediaType.TEXT_PLAIN)
- public String getCustomYamls() {
+ public String getKamelets() {
StringBuilder kamelets = new StringBuilder(codeService.getResourceFile("/kamelets/kamelets.yaml"));
List<ProjectFile> custom = infinispanService.getProjectFiles(Project.NAME_KAMELETS);
if (custom.size() > 0) {
@@ -51,4 +54,18 @@ public class KameletResources {
}
return kamelets.toString();
}
+
+ @GET
+ @Produces(MediaType.APPLICATION_JSON)
+ @Path("/names")
+ public List<String> getCustomNames() {
+ Yaml yaml = new Yaml();
+ return infinispanService.getProjectFiles(Project.NAME_KAMELETS).stream()
+ .map(projectFile -> {
+ Map<String, LinkedHashMap> obj = yaml.load(projectFile.getCode());
+ LinkedHashMap<String, Object> metadata = obj.get("metadata");
+ return metadata.get("name").toString();
+ })
+ .collect(Collectors.toList());
+ }
}
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 b2e12b6..c6620cf 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
@@ -48,8 +48,8 @@ public class ProjectResource {
@Produces(MediaType.APPLICATION_JSON)
public List<Project> getAll() throws Exception {
return infinispanService.getProjects().stream()
- .filter(project -> !project.getName().equalsIgnoreCase(Project.NAME_TEMPLATES))
- .filter(project -> !project.getName().equalsIgnoreCase(Project.NAME_KAMELETS))
+ .filter(project -> !project.getProjectId().equalsIgnoreCase(Project.NAME_TEMPLATES))
+ .filter(project -> !project.getProjectId().equalsIgnoreCase(Project.NAME_KAMELETS))
.sorted(Comparator.comparing(Project::getProjectId))
.collect(Collectors.toList());
}
diff --git a/karavan-app/src/main/webui/src/Main.tsx b/karavan-app/src/main/webui/src/Main.tsx
index b37908d..5975cd2 100644
--- a/karavan-app/src/main/webui/src/Main.tsx
+++ b/karavan-app/src/main/webui/src/Main.tsx
@@ -140,6 +140,9 @@ export class Main extends React.Component<Props, State> {
yamls.split("\n---\n").map(c => c.trim()).forEach(z => kamelets.push(z));
KameletApi.saveKamelets(kamelets, true);
})
+ KaravanApi.getCustomKameletNames(names => {
+ KameletApi.saveCustomKameletNames(names);
+ })
});
}
diff --git a/karavan-app/src/main/webui/src/api/KaravanApi.tsx b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
index e6e2003..c446efb 100644
--- a/karavan-app/src/main/webui/src/api/KaravanApi.tsx
+++ b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
@@ -446,6 +446,17 @@ 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/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css
index 77ff41e..17b9f6b 100644
--- a/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-app/src/main/webui/src/designer/karavan.css
@@ -125,7 +125,16 @@
}
.kamelets-page .kamelet-card .pf-c-card__header {
- padding-right: 6px;
+ /*padding-right: 6px;*/
+}
+
+.kamelets-page .kamelet-card .pf-c-card__header .custom {
+ margin-left: auto;
+}
+
+.kamelets-page .kamelet-card .pf-c-card__title {
+ font-size: 15px;
+ font-weight: 400;
}
.kamelets-page .kamelet-card .pf-c-card__body {
@@ -145,6 +154,13 @@
user-select: none;
}
+.karavan .kamelets-page .kamelet-card .pf-c-card__footer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+
/*kamelet modal*/
.kamelet-modal-card .pf-c-card__header {
padding-right: 6px;
@@ -1133,12 +1149,6 @@
margin-right: auto;
}
-/*Catalogues*/
-.karavan .kamelets-page .kamelet-card .pf-c-card__footer {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
.karavan .tools-section .tools .header {
display: flex;
diff --git a/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx b/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
index 20d4388..5d4faaf 100644
--- a/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
+++ b/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
@@ -21,6 +21,7 @@ import {
import '../designer/karavan.css';
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {CamelUi} from "../designer/utils/CamelUi";
+import {KameletApi} from "karavan-core/lib/api/KameletApi";
interface Props {
kamelet: KameletModel,
@@ -44,19 +45,21 @@ export class KameletCard extends React.Component<Props, State> {
render() {
const kamelet = this.state.kamelet;
+ const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
return (
<Card isHoverable isCompact key={kamelet.metadata.name} className="kamelet-card"
- onClick={event => this.click(event)}
+ onClick={event => this.click(event)}
>
<CardHeader>
{CamelUi.getIconFromSource(kamelet.icon())}
+ {isCustom && <Badge className="custom">custom</Badge>}
</CardHeader>
<CardTitle>{kamelet.spec.definition.title}</CardTitle>
<CardBody>{kamelet.spec.definition.description}</CardBody>
<CardFooter>
{/*<div style={{justifyContent: "space-between"}}>*/}
- <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- <Badge isRead className="version">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
+ <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
+ <Badge isRead className="version">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
{/*</div>*/}
</CardFooter>
</Card>
diff --git a/karavan-core/src/core/api/KameletApi.ts b/karavan-core/src/core/api/KameletApi.ts
index d29bf32..ea1bd47 100644
--- a/karavan-core/src/core/api/KameletApi.ts
+++ b/karavan-core/src/core/api/KameletApi.ts
@@ -20,9 +20,19 @@ import {Component} from "../model/ComponentModels";
import {Components} from "./ComponentApi";
export const Kamelets: KameletModel[] = [];
+export const CustomNames: string[] = [];
export const KameletApi = {
+ getCustomKameletNames: (): string [] => {
+ return CustomNames;
+ },
+
+ saveCustomKameletNames: (names: string[]) => {
+ CustomNames.length = 0;
+ CustomNames.push(...names);
+ },
+
getKameletProperties: (kameletName: string): Property[] => {
const kamelet: KameletModel | undefined = KameletApi.findKameletByName(kameletName);
const properties: Property[] = [];
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index ae823fb..17b9f6b 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -125,7 +125,11 @@
}
.kamelets-page .kamelet-card .pf-c-card__header {
- padding-right: 6px;
+ /*padding-right: 6px;*/
+}
+
+.kamelets-page .kamelet-card .pf-c-card__header .custom {
+ margin-left: auto;
}
.kamelets-page .kamelet-card .pf-c-card__title {
@@ -150,6 +154,13 @@
user-select: none;
}
+.karavan .kamelets-page .kamelet-card .pf-c-card__footer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+
/*kamelet modal*/
.kamelet-modal-card .pf-c-card__header {
padding-right: 6px;
@@ -1138,12 +1149,6 @@
margin-right: auto;
}
-/*Catalogues*/
-.karavan .kamelets-page .kamelet-card .pf-c-card__footer {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
.karavan .tools-section .tools .header {
display: flex;
diff --git a/karavan-designer/src/kamelets/KameletCard.tsx b/karavan-designer/src/kamelets/KameletCard.tsx
index 20d4388..5d4faaf 100644
--- a/karavan-designer/src/kamelets/KameletCard.tsx
+++ b/karavan-designer/src/kamelets/KameletCard.tsx
@@ -21,6 +21,7 @@ import {
import '../designer/karavan.css';
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {CamelUi} from "../designer/utils/CamelUi";
+import {KameletApi} from "karavan-core/lib/api/KameletApi";
interface Props {
kamelet: KameletModel,
@@ -44,19 +45,21 @@ export class KameletCard extends React.Component<Props, State> {
render() {
const kamelet = this.state.kamelet;
+ const isCustom = KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
return (
<Card isHoverable isCompact key={kamelet.metadata.name} className="kamelet-card"
- onClick={event => this.click(event)}
+ onClick={event => this.click(event)}
>
<CardHeader>
{CamelUi.getIconFromSource(kamelet.icon())}
+ {isCustom && <Badge className="custom">custom</Badge>}
</CardHeader>
<CardTitle>{kamelet.spec.definition.title}</CardTitle>
<CardBody>{kamelet.spec.definition.description}</CardBody>
<CardFooter>
{/*<div style={{justifyContent: "space-between"}}>*/}
- <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- <Badge isRead className="version">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
+ <Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
+ <Badge isRead className="version">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
{/*</div>*/}
</CardFooter>
</Card>