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 2023/08/04 18:21:16 UTC
[camel-karavan] branch main updated: Fix #484
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
The following commit(s) were added to refs/heads/main by this push:
new 7c3f0850 Fix #484
7c3f0850 is described below
commit 7c3f08506e4fe7294af7fd769b9c832796688048
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Fri Aug 4 14:21:07 2023 -0400
Fix #484
---
karavan-designer/src/designer/karavan.css | 6 +-
.../src/designer/route/DslConnections.tsx | 43 +-
karavan-designer/src/designer/utils/CamelUi.tsx | 213 +++-
.../src/designer/utils/KaravanIcons.tsx | 1123 ++++++++++++++++-
.../src/knowledgebase/components/ComponentCard.tsx | 6 +-
.../knowledgebase/components/ComponentModal.tsx | 4 +-
karavan-space/package-lock.json | 32 +-
karavan-space/package.json | 3 +
karavan-space/src/designer/beans/BeanCard.tsx | 10 +-
.../src/designer/beans/BeanProperties.tsx | 12 +-
karavan-space/src/designer/beans/BeansDesigner.tsx | 14 +-
karavan-space/src/designer/karavan.css | 6 +-
.../src/designer/route/DslConnections.tsx | 43 +-
karavan-space/src/designer/route/DslProperties.tsx | 3 +-
.../src/designer/route/RouteDesignerLogic.tsx | 5 +-
.../route/property/ComponentParameterField.tsx | 2 +-
karavan-space/src/designer/utils/CamelUi.tsx | 219 +++-
karavan-space/src/designer/utils/KaravanIcons.tsx | 1311 +++++++++++++++++++-
.../src/knowledgebase/components/ComponentCard.tsx | 6 +-
.../knowledgebase/components/ComponentModal.tsx | 4 +-
karavan-space/tsconfig.json | 7 +-
21 files changed, 2950 insertions(+), 122 deletions(-)
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index 3b2574e4..f8f9f634 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -142,9 +142,10 @@
.kamelets-page .kamelet-card .icon {
height: 24px;
+ width: 24px;
margin-top: auto;
margin-bottom: auto;
- margin-right: 3px;
+ margin-right: 5px;
border: none;
-webkit-user-select: none;
-khtml-user-select: none;
@@ -201,6 +202,7 @@
.kamelet-modal-card .icon {
height: 36px;
+ width: 36px;
margin-top: auto;
margin-bottom: auto;
border: none;
@@ -560,6 +562,7 @@
.karavan .dsl-page .graph .connections .icon {
height: 20px;
+ width: 20px;
}
.karavan .dsl-page .graph .connections .arrow {
@@ -956,6 +959,7 @@
.dsl-modal .labels {
opacity: 0.5;
font-weight: 200;
+ text-wrap: nowrap;
}
.dsl-modal .dsl-card:hover .labels {
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 7ccfe8fe..4e4f9f53 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -73,6 +73,7 @@ export class DslConnections extends React.Component<Props, State> {
getIncomings() {
let outs: [string, number][] = Array.from(this.state.steps.values())
.filter(pos => ["FromDefinition"].includes(pos.step.dslName))
+ .filter(pos => !CamelUi.isElementInternalComponent(pos.step))
.filter(pos => !(pos.step.dslName === 'FromDefinition' && CamelUi.hasInternalUri(pos.step)))
.sort((pos1: DslPosition, pos2: DslPosition) => {
const y1 = pos1.headerRect.y + pos1.headerRect.height / 2;
@@ -104,7 +105,7 @@ export class DslConnections extends React.Component<Props, State> {
return (
<g key={pos.step.uuid + "-incoming"}>
<circle cx={incomingX} cy={fromY} r={r} className="circle-incoming"/>
- <image x={imageX} y={imageY} href={CamelUi.getConnectionIcon(pos.step)} className="icon"/>
+ {/*<image x={imageX} y={imageY} href={CamelUi.getConnectionIconString(pos.step)} className="icon"/>*/}
{/*<text x={imageX - 5} y={imageY + 40} className="caption" textAnchor="start">{CamelUi.getTitle(pos.step)}</text>*/}
<path d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
@@ -113,6 +114,22 @@ export class DslConnections extends React.Component<Props, State> {
}
}
+ getIncomingIcons(data: [string, number]) {
+ const pos = this.state.steps.get(data[0]);
+ if (pos) {
+ const fromY = pos.headerRect.y + pos.headerRect.height / 2 - this.props.top;
+ const r = pos.headerRect.height / 2;
+ const incomingX = 20;
+ const imageX = incomingX - r + 5;
+ const imageY = fromY - r + 5;
+ return (
+ <div style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ </div>
+ )
+ }
+ }
+
hasOverlap(data: [string, number][]): boolean {
let result = false;
data.forEach((d, i, arr) => {
@@ -135,7 +152,7 @@ export class DslConnections extends React.Component<Props, State> {
let outs: [string, number][] = Array.from(this.state.steps.values())
.filter(pos => outgoingDefinitions.includes(pos.step.dslName))
.filter(pos => pos.step.dslName !== 'KameletDefinition' || (pos.step.dslName === 'KameletDefinition' && !CamelUi.isActionKamelet(pos.step)))
- .filter(pos => pos.step.dslName === 'ToDefinition' && !CamelUi.isActionKamelet(pos.step))
+ .filter(pos => pos.step.dslName === 'ToDefinition' && !CamelUi.isActionKamelet(pos.step) && !CamelUi.isElementInternalComponent(pos.step))
.filter(pos => !(outgoingDefinitions.includes(pos.step.dslName) && CamelUi.hasInternalUri(pos.step)))
.filter(pos => pos.step.dslName !== 'SagaDefinition')
.sort((pos1: DslPosition, pos2: DslPosition) => {
@@ -168,13 +185,13 @@ export class DslConnections extends React.Component<Props, State> {
const lineXi = lineX1 + 40;
const lineYi = lineY2;
- let image = CamelUi.getConnectionIcon(pos.step);
+ let image = CamelUi.getConnectionIconString(pos.step);
const imageX = outgoingX - r + 5;
const imageY = outgoingY - r + 5;
return (
<g key={pos.step.uuid + "-outgoing"}>
<circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
- <image x={imageX} y={imageY} href={image} className="icon"/>
+ {/*<image x={imageX} y={imageY} href={image} className="icon"/>*/}
{/*<text x={imageX + 25} y={imageY + 40} className="caption" textAnchor="end">{CamelUi.getOutgoingTitle(pos.step)}</text>*/}
<path d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
@@ -183,6 +200,22 @@ export class DslConnections extends React.Component<Props, State> {
}
}
+ getOutgoingIcons(data: [string, number]) {
+ const pos = this.state.steps.get(data[0]);
+ if (pos) {
+ const r = pos.headerRect.height / 2;
+ const outgoingX = this.props.width - 20;
+ const outgoingY = data[1] + 15;
+ const imageX = outgoingX - r + 5;
+ const imageY = outgoingY - r + 5;
+ return (
+ <div style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ </div>
+ )
+ }
+ }
+
getInternals(): [string, number, boolean][] {
let outs: [string, number, boolean][] = Array.from(this.state.steps.values())
.filter(pos => outgoingDefinitions.includes(pos.step.dslName) && CamelUi.hasInternalUri(pos.step))
@@ -432,6 +465,8 @@ export class DslConnections extends React.Component<Props, State> {
return (
<div className="connections" style={{width: this.props.width, height: this.props.height, marginTop: "8px"}}>
{this.getSvg()}
+ {this.getIncomings().map(p => this.getIncomingIcons(p))}
+ {this.getOutgoings().map(p => this.getOutgoingIcons(p))}
</div>
);
}
diff --git a/karavan-designer/src/designer/utils/CamelUi.tsx b/karavan-designer/src/designer/utils/CamelUi.tsx
index c55a8ef8..e21544ad 100644
--- a/karavan-designer/src/designer/utils/CamelUi.tsx
+++ b/karavan-designer/src/designer/utils/CamelUi.tsx
@@ -29,8 +29,65 @@ import {
ToDefinition
} from "karavan-core/lib/model/CamelDefinition";
import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
-import {AggregateIcon, ChoiceIcon, FilterIcon, Intercept, InterceptFrom, InterceptSendToEndpoint, OnCompletion, SagaIcon, SortIcon, SplitIcon} from "./KaravanIcons";
+import {
+ AggregateIcon,
+ ApiIcon,
+ AwsIcon,
+ AzureIcon,
+ BlockchainIcon,
+ ChatIcon,
+ ChoiceIcon,
+ CloudIcon,
+ ClusterIcon,
+ DatabaseIcon,
+ DebeziumIcon,
+ DocumentIcon,
+ FileIcon,
+ FilterIcon,
+ GithubIcon,
+ GitIcon,
+ GoogleCloudIcon,
+ GrapeIcon,
+ HazelcastIcon,
+ HealthIcon,
+ HttpIcon,
+ IgniteIcon,
+ InfinispanIcon,
+ Intercept,
+ InterceptFrom,
+ InterceptSendToEndpoint,
+ IotIcon,
+ KubernetesIcon,
+ MachineLearningIcon,
+ MailIcon,
+ MessagingIcon,
+ MobileIcon,
+ MonitoringIcon,
+ NetworkingIcon,
+ OnCompletion,
+ OpenshiftIcon,
+ OpenstackIcon,
+ RedisIcon,
+ RefIcon,
+ RpcIcon,
+ SagaIcon,
+ SapIcon,
+ SchedulingIcon,
+ ScriptIcon,
+ SearchIcon,
+ SocialIcon,
+ SortIcon,
+ SplitIcon,
+ SpringIcon,
+ TerminalIcon,
+ TestingIcon,
+ TransformationIcon,
+ ValidationIcon,
+ WebserviceIcon,
+ WorkflowIcon
+} from "./KaravanIcons";
import React from "react";
+import {Icon} from "@patternfly/react-core";
const StepElements: string[] = [
"AggregateDefinition",
@@ -426,7 +483,7 @@ export class CamelUi {
case "SagaDefinition":
return "data:image/svg+xml,%0A%3Csvg width='32px' height='32px' viewBox='0 0 32 32' id='icon' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eexpand-categories%3C/title%3E%3Crect x='20' y='26' width='6' height='2'/%3E%3Crect x='20' y='18' width='8' height='2'/%3E%3Crect x='20' y='10' width='10' height='2'/%3E%3Crect x='15' y='4' width='2' height='24'/%3E%3Cpolygon points='10.586 3.959 7 7.249 3.412 3.958 2 [...]
case "FromDefinition":
- return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.6577283,22.7532553 L12,23.3275712 L11.3422717,22.7532553 C5.81130786,17.9237218 3,13.70676 3,10 C3,4.7506636 7.09705254,1 12,1 C16.9029475,1 21,4.7506636 21,10 C21,13.70676 18.1886921,17.9237218 12.6577283,22.7532553 Z M5,10 C5,12.8492324 7.30661202,16.4335466 12,20.6634039 C16.693388,16.4335466 19,12.8492324 19,10 C19,5. [...]
+ return "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMy4yNUMxMi40MTQyIDMuMjUgMTIuNzUgMy41ODU3OSAxMi43NSA0TDEyLjc1IDE4LjE4OTNMMT [...]
case "ToDefinition":
return "data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7B fill: none; %7D%3C/style%3E%3C/defs%3E%3Cg class='layer'%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath d='m24.08924,9.30736l-1.67194,1.57734l4.23986,3.99986l-5.47865,0a5.92883,5.59337 0 0 0 -4.60981,-4.34899l0,-10.15173l-2.36467,0l0,10.15173a5.91168,5.5772 0 0 0 0,10.92886l0,10.15173l2.36467,0l0,-10.15173a5.92883,5. [...]
case "SwitchDefinition":
@@ -479,18 +536,147 @@ export class CamelUi {
&& dsl.uri?.startsWith("kamelet")) {
return this.getIconFromSource(CamelUi.getKameletIconByUri(dsl.uri));
} else if (dsl.navigation === 'component' ){
- return this.getIconFromSource(camelIcon);
+ return CamelUi.getIconForComponent(dsl.title, dsl.labels);
} else {
return CamelUi.getIconForDslName(dsl.dsl);
}
}
+ static getIconForComponent = (title: string, label: string):JSX.Element => {
+ const labels = label.split(",");
+ if (title === "Ref") {
+ return RefIcon();
+ } else if (title === "Exec") {
+ return TerminalIcon();
+ } else if (title === "Grape") {
+ return GrapeIcon();
+ } else if (title.startsWith("Google")) {
+ return GoogleCloudIcon();
+ } else if (title.startsWith("Spring")) {
+ return SpringIcon();
+ } else if (title.startsWith("Kubernetes")) {
+ return KubernetesIcon();
+ } else if (title.startsWith("SAP")) {
+ return SapIcon();
+ } else if (title.toLowerCase().startsWith("openstack")) {
+ return OpenstackIcon();
+ } else if (title.toLowerCase().startsWith("openshift")) {
+ return OpenshiftIcon();
+ } else if (title.includes("Redis")) {
+ return RedisIcon();
+ } else if (title.startsWith("Azure")) {
+ return AzureIcon();
+ } else if (title.startsWith("AWS")) {
+ return AwsIcon();
+ } else if (title.startsWith("Debezium")) {
+ return DebeziumIcon();
+ } else if (title.startsWith("Infinispan")) {
+ return InfinispanIcon();
+ } else if (title.startsWith("Ignite")) {
+ return IgniteIcon();
+ } else if (title.startsWith("GitHub")) {
+ return GithubIcon();
+ } else if (title.startsWith("Git")) {
+ return GitIcon();
+ } else if (title.startsWith("Hazelcast")) {
+ return HazelcastIcon();
+ } else if (title.startsWith("FHIR") || title.startsWith("MLLP")) {
+ return HealthIcon();
+ } else if (labels.includes('transformation')) {
+ return TransformationIcon();
+ } else if (labels.includes("validation")){
+ return ValidationIcon();
+ } else if (labels.includes("scheduling")){
+ return SchedulingIcon();
+ } else if (labels.includes("database")){
+ return DatabaseIcon();
+ } else if (labels.includes("cloud")){
+ return CloudIcon();
+ } else if (labels.includes("chat")){
+ return ChatIcon();
+ } else if (labels.includes("messaging")){
+ return MessagingIcon();
+ } else if (labels.includes("script")){
+ return ScriptIcon();
+ } else if (labels.includes("file")){
+ return FileIcon();
+ } else if (labels.includes("monitoring")){
+ return MonitoringIcon();
+ } else if (labels.includes("iot")){
+ return IotIcon();
+ } else if (labels.includes("mail")){
+ return MailIcon();
+ } else if (labels.includes("http")){
+ return HttpIcon();
+ } else if (labels.includes("document")){
+ return DocumentIcon();
+ } else if (labels.includes("social")){
+ return SocialIcon();
+ } else if (labels.includes("networking")){
+ return NetworkingIcon();
+ } else if (labels.includes("api")){
+ return ApiIcon();
+ } else if (labels.includes("testing")){
+ return TestingIcon();
+ } else if (labels.includes("clustering")){
+ return ClusterIcon();
+ } else if (labels.includes("mobile")){
+ return MobileIcon();
+ } else if (labels.includes("workflow")){
+ return WorkflowIcon();
+ } else if (labels.includes("webservice") || labels.includes("rest")){
+ return WebserviceIcon();
+ } else if (labels.includes("search")){
+ return SearchIcon();
+ } else if (labels.includes("blockchain")){
+ return BlockchainIcon();
+ } else if (labels.includes("ai")){
+ return MachineLearningIcon();
+ } else if (labels.includes("rpc")){
+ return RpcIcon();
+ } else {
+ return this.getIconFromSource(camelIcon);
+ }
+ }
+
+ static isElementInternalComponent = (element: CamelElement):boolean => {
+ const uri = (element as any).uri;
+ const component = ComponentApi.findByName(uri);
+ return component !== undefined && CamelUi.isComponentInternal(component.component.label);
+ }
+
+ static isComponentInternal = (label: string):boolean => {
+ const labels = label.split(",");
+ if (labels.includes('core') && (
+ labels.includes('transformation')
+ || labels.includes('testing')
+ || labels.includes('scheduling')
+ || labels.includes('monitoring')
+ || labels.includes('transformation')
+ || labels.includes('java')
+ || labels.includes('endpoint')
+ || labels.includes('script')
+ || labels.includes('validation')
+ )) {
+ return true;
+ } else if (label === 'transformation') {
+ return true;
+ }
+ return false;
+ }
+
static getIconForElement = (element: CamelElement):JSX.Element => {
+ const uri = (element as any).uri;
+ const component = ComponentApi.findByName(uri);
const k: KameletModel | undefined = CamelUtil.getKamelet(element);
- if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
+ if (["FromDefinition", "KameletDefinition"].includes(element.dslName) && k !== undefined) {
return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
+ } else if ("FromDefinition" === element.dslName && component !== undefined && CamelUi.isComponentInternal(component.component.label)) {
+ return this.getIconForComponent(component?.component.title, component?.component.label);
} else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) {
return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
+ } else if (element.dslName === "ToDefinition" && component && CamelUi.isComponentInternal(component.component.label)) {
+ return this.getIconForComponent(component?.component.title, component?.component.label);
} else {
return this.getIconForDslName(element.dslName);
}
@@ -515,7 +701,24 @@ export class CamelUi {
return <img draggable={false} src={src} className="icon" alt="icon"/>
}
- static getConnectionIcon = (element: CamelElement): string => {
+ static getConnectionIcon = (element: CamelElement): JSX.Element => {
+ const k: KameletModel | undefined = CamelUtil.getKamelet(element);
+ const uri = (element as any).uri;
+ const component = ComponentApi.findByName(uri);
+ if (component) {
+ return CamelUi.getIconForComponent(component.component.title, component.component.label);
+ } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
+ const icon = k ? k.icon() : externalIcon;
+ return <img src={icon} className="icon"/>
+ } else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) {
+ const icon = k ? k.icon() : CamelUi.getIconSrcForName(element.dslName);
+ return <img src={icon} className="icon"/>
+ } else {
+ return <img src={externalIcon} className="icon"/>;
+ }
+ }
+
+ static getConnectionIconString = (element: CamelElement): string => {
const k: KameletModel | undefined = CamelUtil.getKamelet(element);
if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
return k ? k.icon() : externalIcon;
diff --git a/karavan-designer/src/designer/utils/KaravanIcons.tsx b/karavan-designer/src/designer/utils/KaravanIcons.tsx
index 6bd0e15b..78991e01 100644
--- a/karavan-designer/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-designer/src/designer/utils/KaravanIcons.tsx
@@ -198,9 +198,9 @@ export function CamelIcon(props?: (JSX.IntrinsicAttributes & React.SVGProps<SVGS
y1="108.214%"
y2="-1.964%"
>
- <stop offset="0%" stopColor="#F69923" />
- <stop offset="10.996%" stopColor="#F79A23" />
- <stop offset="94.502%" stopColor="#E97826" />
+ <stop offset="0%" stopColor="#F69923"/>
+ <stop offset="10.996%" stopColor="#F79A23"/>
+ <stop offset="94.502%" stopColor="#E97826"/>
</linearGradient>
<linearGradient
id="d"
@@ -209,9 +209,9 @@ export function CamelIcon(props?: (JSX.IntrinsicAttributes & React.SVGProps<SVGS
y1="108.214%"
y2="-1.964%"
>
- <stop offset="0%" stopColor="#F69923" />
- <stop offset="8.048%" stopColor="#F79A23" />
- <stop offset="41.874%" stopColor="#E97826" />
+ <stop offset="0%" stopColor="#F69923"/>
+ <stop offset="8.048%" stopColor="#F79A23"/>
+ <stop offset="41.874%" stopColor="#E97826"/>
</linearGradient>
<linearGradient
id="e"
@@ -220,14 +220,14 @@ export function CamelIcon(props?: (JSX.IntrinsicAttributes & React.SVGProps<SVGS
y1="-3.059%"
y2="100.066%"
>
- <stop offset="0%" stopColor="#F6E423" />
- <stop offset="41.191%" stopColor="#F79A23" />
- <stop offset="73.271%" stopColor="#E97826" />
+ <stop offset="0%" stopColor="#F6E423"/>
+ <stop offset="41.191%" stopColor="#F79A23"/>
+ <stop offset="73.271%" stopColor="#E97826"/>
</linearGradient>
- <circle id="a" cx={128} cy={128} r={128} />
+ <circle id="a" cx={128} cy={128} r={128}/>
</defs>
<mask id="c" fill="#fff">
- <use xlinkHref="#a" />
+ <use xlinkHref="#a"/>
</mask>
<circle
cx={127.994}
@@ -713,4 +713,1103 @@ export function QuarkusIcon() {
></path>
</svg>
);
-}
\ No newline at end of file
+}
+
+export function DatabaseIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="800"
+ height="800"
+ viewBox="0 0 24 24"
+ className="icon">
+ <path
+ fillRule="evenodd"
+ d="M12 1.25c-2.487 0-4.774.402-6.466 1.079-.844.337-1.577.758-2.112 1.264C2.886 4.1 2.5 4.744 2.5 5.5v12.987l.026.013H2.5c0 .756.386 1.4.922 1.907.535.506 1.268.927 2.112 1.264 1.692.677 3.979 1.079 6.466 1.079s4.773-.402 6.466-1.079c.844-.337 1.577-.758 2.112-1.264.536-.507.922-1.151.922-1.907h-.026l.026-.013V5.5c0-.756-.386-1.4-.922-1.907-.535-.506-1.268-.927-2.112-1.264C16.773 1.652 14.487 1.25 12 1.25zM4 5.5c0-.21.104-.487.453-.817.35-.332.899-.666 1.638-.962C7.566 3. [...]
+ ></path>
+ </svg>
+ );
+}
+
+export function CloudIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path
+ d="M16 7a7.66 7.66 0 0 1 1.51.15 8 8 0 0 1 6.35 6.34l.26 1.35 1.35.24a5.5 5.5 0 0 1-1 10.92H7.5a5.5 5.5 0 0 1-1-10.92l1.34-.24.26-1.35A8 8 0 0 1 16 7m0-2a10 10 0 0 0-9.83 8.12A7.5 7.5 0 0 0 7.49 28h17a7.5 7.5 0 0 0 1.32-14.88 10 10 0 0 0-7.94-7.94A10.27 10.27 0 0 0 16 5Z"/>
+ <path
+ d="M0 0h32v32H0z"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
+export function FileIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"document"}</title>
+ <path
+ d="m25.7 9.3-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z"/>
+ <path d="M10 22h12v2H10zM10 16h12v2H10z"/>
+ <path
+ d="M0 0h32v32H0z"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
+export function MessagingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M28 28H4a2.002 2.002 0 0 1-2-2v-5h2v5h24v-5h2v5a2.002 2.002 0 0 1-2 2Z"/>
+ <path d="M7 21h18v2H7zM7 16h18v2H7zM7 11h18v2H7zM7 6h18v2H7z"/>
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function SchedulingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z" />
+ <path d="M20.59 22 15 16.41V7h2v8.58l5 5.01L20.59 22z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
+export function HttpIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2Zm-3 5v-3h3l.001 3ZM10 13h2v8h2v-8h2v-2h-6v2zM23 11h-6v2h2v8h2v-8h2v-2zM6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function GoogleCloudIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -25 256 256"
+ className="icon">
+ <path
+ fill="#EA4335"
+ d="m170.252 56.819 22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39Z"
+ />
+ <path
+ fill="#4285F4"
+ d="M224.205 73.918a100.249 100.249 0 0 0-30.217-48.722l-31.232 31.232a55.515 55.515 0 0 1 20.379 44.037v5.544c15.35 0 27.797 12.445 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 0 0-31.793-60.453"
+ />
+ <path
+ fill="#34A853"
+ d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 0 1-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"
+ />
+ <path
+ fill="#FBBC05"
+ d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.159a72.301 72.301 0 0 0 28.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0 1 13.887 13.888l32.248-32.248A72.224 72.224 0 0 0 71.87 61.425"
+ />
+ </svg>
+ );
+}
+export function AwsIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ fill="none"
+ viewBox="0 0 16 16"
+ className="icon">
+ <path
+ fill="#252F3E"
+ d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 0 1 .037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 0 1-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 0 1-.192-.251 4.137 4.137 0 0 1-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.37 [...]
+ />
+ <g fill="#F90" fillRule="evenodd" clipRule="evenodd">
+ <path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" />
+ <path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z" />
+ </g>
+ </svg>
+ );
+}
+export function MailIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"email"}</title>
+ <path d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm-2.2 2L16 14.78 6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function IotIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"iot--platform"}</title>
+ <path d="M30 19h-4v-4h-2v9H8V8h9V6h-4V2h-2v4H8a2.002 2.002 0 0 0-2 2v3H2v2h4v6H2v2h4v3a2.002 2.002 0 0 0 2 2h3v4h2v-4h6v4h2v-4h3a2.003 2.003 0 0 0 2-2v-3h4Z" />
+ <path d="M21 21H11V11h10Zm-8-2h6v-6h-6ZM31 13h-2A10.012 10.012 0 0 0 19 3V1a12.013 12.013 0 0 1 12 12Z" />
+ <path d="M26 13h-2a5.006 5.006 0 0 0-5-5V6a7.008 7.008 0 0 1 7 7Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function GithubIcon() {
+ return (
+ <svg
+ width={32}
+ height={32}
+ aria-hidden="true"
+ data-view-component="true"
+ viewBox="0 0 16 16"
+ className="icon">
+ <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16. [...]
+ </svg>
+ );
+}
+export function GrapeIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ viewBox="0 0 512 512"
+ className="icon">
+ <path
+ d="M438.557 512H19.785c-8.216 0-14.876-6.66-14.876-14.876V256.916c0-8.216 6.66-14.876 14.876-14.876s14.876 6.66 14.876 14.876v225.332h389.021v-32.833c0-8.216 6.661-14.876 14.876-14.876s14.876 6.66 14.876 14.876v47.709c-.001 8.216-6.662 14.876-14.877 14.876z"
+ style={{
+ fill: "#2d527c",
+ }}
+ />
+ <path
+ d="M19.785 177.122v-4.79L175.581 14.876v162.246zM196.154 219.435h296.061v163.65H196.154z"
+ style={{
+ fill: "#cee8fa",
+ }}
+ />
+ <path
+ d="M492.215 204.559h-38.782V14.876C453.433 6.66 446.772 0 438.557 0H175.581c-.182 0-.361.021-.543.027a14.949 14.949 0 0 0-2.41.269c-.018.003-.036.01-.054.013-.613.126-1.211.302-1.8.504-.158.054-.315.11-.472.171-.58.22-1.148.466-1.697.756-.024.012-.048.021-.071.034-.567.305-1.105.66-1.63 1.037a10.84 10.84 0 0 0-.403.302c-.521.402-1.026.827-1.495 1.3L9.21 161.868c-.35.353-.678.721-.988 1.104-.207.254-.388.521-.576.784-.092.131-.195.256-.283.388a15.3 15.3 0 0 0-.592.998c-.04 [...]
+ style={{
+ fill: "#2d527c",
+ }}
+ />
+ <path
+ d="M265.4 270.343c-3.927 0-6.153-4.188-6.153-9.031 0-4.189 1.831-8.771 6.153-8.771h22.907c4.451 0 8.902 2.095 8.902 6.285v59.298c0 22.516-14.269 30.894-31.418 30.894-18.718 0-32.857-9.949-32.857-27.36 0-7.854 3.273-9.687 10.342-9.687 5.236 0 9.687 1.309 10.078 6.153.393 5.105 1.047 13.091 11.521 13.091 7.593 0 11.913-4.188 11.913-13.091v-47.78H265.4v-.001zM304.411 339.854c0-.393.131-.916.262-1.44l24.349-79.853c1.44-4.58 7.331-6.806 13.353-6.806s11.913 2.225 13.353 6.806l2 [...]
+ style={{
+ fill: "#2d527c",
+ }}
+ />
+ </svg>
+ );
+}
+export function MachineLearningIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A2.966 2.966 0 0 0 24 27a3 3 0 1 0 3-3Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 13a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 2a3.003 3.003 0 0 0-3 3 2.966 2.966 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z" />
+ <path d="M18 6h2V4h-2a3.976 3.976 0 0 0-3 1.382A3.976 3.976 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.976 3.976 0 0 0 3-1.382A3.976 3.976 0 0 0 18 28h2v-2h-2a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2Zm-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2.002 2.002 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2.002 2.002 0 0 1-2 2Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function TerminalIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"terminal"}</title>
+ <path d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2Zm0 2v4H6v-4Zm-20 20v-14h20v14Z" />
+ <path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41 4.24-4.24-4.24-4.24-1.41 1.41z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function SapIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 1024 1024"
+ className="icon">
+ <circle
+ cx={512}
+ cy={512}
+ r={512}
+ style={{
+ fill: "#007cc5",
+ }}
+ />
+ <path
+ d="M256 359.88v304.24h310.82L871 359.88zm83.62 56.58h.14c22.11 0 49.06 6.29 68.56 16.22l-21 36.64C365.92 459 355.17 458 343 457.36c-18.14-1-27.26 5.51-27.4 12.5-.18 8.52 17.13 16.23 33.45 21.47 24.7 7.85 56.1 18.33 60.9 48.7l45.15-119.36h52.45l52.88 142.91-.2-142.86H621c57.84 0 85 19.58 85 64.53 0 40.36-28 64.42-75.25 64.42h-19.56l-.19 53.69-92-.09-6.38-23.27a101.65 101.65 0 0 1-31.56 4.83 100.52 100.52 0 0 1-32.32-5.12l-9.19 23.54-51.25.16 2.3-11.84c-.73.64-1.43 1.29-2.2 [...]
+ style={{
+ fill: "#fff",
+ }}
+ />
+ </svg>
+ );
+}
+export function ScriptIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"script"}</title>
+ <path d="m18.83 26 2.58-2.58L20 22l-4 4 4 4 1.42-1.41L18.83 26zM27.17 26l-2.58 2.58L26 30l4-4-4-4-1.42 1.41L27.17 26z" />
+ <path d="M14 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h6Zm4-23.6 5.6 5.6H18Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ValidationIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="m22 27.18-2.59-2.59L18 26l4 4 8-8-1.41-1.41L22 27.18z" />
+ <path d="M15 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h7Zm3-23.6 5.6 5.6H18Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function OpenstackIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -2.5 256 256"
+ className="icon">
+ <path
+ fill="#DA1A32"
+ d="M57.82 170.723v9.156c0 7.104 5.756 12.86 12.86 12.86h114.65c7.104 0 12.86-5.756 12.86-12.86v-9.156H256v56.051c0 13.082-10.703 23.785-23.785 23.785H23.785C10.703 250.559 0 239.856 0 226.774v-56.051h57.82Zm-.01-74.353v57.809H0v-57.81h57.81Zm198.19 0v57.809h-57.81v-57.81H256ZM232.215 0C245.297 0 256 10.703 256 23.795v56.041h-57.81V70.68c0-7.104-5.756-12.86-12.86-12.86H70.67c-7.104 0-12.86 5.756-12.86 12.86v9.156H0V23.785C0 10.703 10.703 0 23.785 0Z"
+ />
+ </svg>
+ );
+}
+export function OpenshiftIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -9.5 256 256"
+ className="icon">
+ <path
+ fill="#DA2430"
+ d="m74.84 106.893-40.869 14.87c.525 6.552 1.652 13.024 3.24 19.366l38.818-14.137c-1.244-6.552-1.689-13.32-1.18-20.1M255.444 61.702c-2.85-5.879-6.147-11.561-9.966-16.916l-40.857 14.87c4.755 4.864 8.743 10.33 12.007 16.176L255.445 61.7v.002Z"
+ />
+ <path
+ fill="#DA2430"
+ d="M182.95 61.461c-5.14-4.46-10.946-8.31-17.408-11.324h-.003C127.6 32.449 82.33 48.905 64.642 86.859a73.976 73.976 0 0 0-2.653 6.487c-2.208 6.423-3.498 12.99-3.991 19.546l-.144.054-.011.144-24.596 8.95-15.826 5.849-.007-.088-.434.158c-1.536-19.435 1.74-39.512 10.553-58.411a117.952 117.952 0 0 1 3.687-7.246c29.054-54.116 95.164-76.736 150.918-50.33a115.314 115.314 0 0 1 30.557 21.074 116.597 116.597 0 0 1 15.78 17.94L187.618 65.86a79.69 79.69 0 0 0-.635-.641l-.113.041a78.6 [...]
+ />
+ <path
+ fill="#E82429"
+ d="m19.261 193.896-.064.024A118.404 118.404 0 0 1 .939 154.347l38.825-14.14.002.003.024.125.252-.093.006.015c1.994 10.56 6.145 20.635 12.198 29.494a75.287 75.287 0 0 0 7.722 9.326l-.154.057.294.308-40.488 14.97c-.12-.171-.24-.343-.359-.516Z"
+ />
+ <path
+ fill="#DA2430"
+ d="M173.465 183.447c-21.051 13.017-48.053 15.532-72.113 4.312a75.139 75.139 0 0 1-22.118-15.695l-40.772 14.844.313.437-.02.008c11.21 16.016 26.502 29.404 45.266 38.298 40.47 19.163 86.387 12.501 119.634-13.284 14.888-11.152 27.317-26.016 35.713-44.02 8.819-18.895 12.076-38.964 10.515-58.384l-1.136.414c-.015-.208-.03-.416-.047-.624l-40.49 14.957.002.004a76.457 76.457 0 0 1-6.806 26.46c-6.315 13.753-16.164 24.708-27.94 32.273Z"
+ />
+ <path
+ fill="#E82429"
+ d="m218.552 75.13.607-.222v-.001a117.732 117.732 0 0 1 11.454 42.055l-40.773 14.834.022-.304-.77.285c1.11-15.088-2.275-30.093-9.435-43.123l38.548-14.25.002-.004c.116.243.231.486.345.73Z"
+ />
+ <path
+ fill="#C22035"
+ d="M74.89 106.654 34.31 121.65c.52 6.61 1.64 13.136 3.219 19.532l38.546-14.258c-1.247-6.622-1.695-13.438-1.169-20.274M254.227 61.083c-2.83-5.929-6.106-11.658-9.898-17.059L203.76 59.02c4.72 4.906 8.68 10.418 11.92 16.315l38.542-14.256.006.004Z"
+ />
+ <path
+ fill="#AC223B"
+ d="m34.308 121.653 40.482-14.829-.165 8.133-39.056 14.749-1.266-8.063.005.01ZM203.766 58.897l41.113-14.108 4.273 6.449-39.946 14.121-5.434-6.465-.006.003Z"
+ />
+ <path
+ fill="#B92135"
+ d="m38.764 187.201 40.53-14.749 12.258 11.565-42.503 15.956-10.283-12.776-.002.004ZM249.38 109.862l-41.165 14.844-3.032 16.478 43.892-15.643.311-15.677-.005-.002Z"
+ />
+ </svg>
+ );
+}
+export function RefIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M4 20v2h4.586L2 28.586 3.414 30 10 23.414V28h2v-8H4zM30 30h-8v-8h8Zm-6-2h4v-4h-4ZM20 20h-8v-8h8Zm-6-2h4v-4h-4Z" />
+ <path d="M24 17h-2v-2h2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12ZM10 10H2V2h8ZM4 8h4V4H4Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function RedisIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -18 256 256"
+ className="icon">
+ <path
+ fill="#912626"
+ d="M245.97 168.943c-13.662 7.121-84.434 36.22-99.501 44.075-15.067 7.856-23.437 7.78-35.34 2.09-11.902-5.69-87.216-36.112-100.783-42.597C3.566 169.271 0 166.535 0 163.951v-25.876s98.05-21.345 113.879-27.024c15.828-5.679 21.32-5.884 34.79-.95 13.472 4.936 94.018 19.468 107.331 24.344l-.006 25.51c.002 2.558-3.07 5.364-10.024 8.988"
+ />
+ <path
+ fill="#C6302B"
+ d="M245.965 143.22c-13.661 7.118-84.431 36.218-99.498 44.072-15.066 7.857-23.436 7.78-35.338 2.09-11.903-5.686-87.214-36.113-100.78-42.594-13.566-6.485-13.85-10.948-.524-16.166 13.326-5.22 88.224-34.605 104.055-40.284 15.828-5.677 21.319-5.884 34.789-.948 13.471 4.934 83.819 32.935 97.13 37.81 13.316 4.881 13.827 8.9.166 16.02"
+ />
+ <path
+ fill="#912626"
+ d="M245.97 127.074c-13.662 7.122-84.434 36.22-99.501 44.078-15.067 7.853-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.112-100.783-42.597C3.566 127.402 0 124.67 0 122.085V96.206s98.05-21.344 113.879-27.023c15.828-5.679 21.32-5.885 34.79-.95C162.142 73.168 242.688 87.697 256 92.574l-.006 25.513c.002 2.557-3.07 5.363-10.024 8.987"
+ />
+ <path
+ fill="#C6302B"
+ d="M245.965 101.351c-13.661 7.12-84.431 36.218-99.498 44.075-15.066 7.854-23.436 7.777-35.338 2.087-11.903-5.686-87.214-36.112-100.78-42.594-13.566-6.483-13.85-10.947-.524-16.167C23.151 83.535 98.05 54.148 113.88 48.47c15.828-5.678 21.319-5.884 34.789-.949 13.471 4.934 83.819 32.933 97.13 37.81 13.316 4.88 13.827 8.9.166 16.02"
+ />
+ <path
+ fill="#912626"
+ d="M245.97 83.653c-13.662 7.12-84.434 36.22-99.501 44.078-15.067 7.854-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.113-100.783-42.595C3.566 83.98 0 81.247 0 78.665v-25.88s98.05-21.343 113.879-27.021c15.828-5.68 21.32-5.884 34.79-.95C162.142 29.749 242.688 44.278 256 49.155l-.006 25.512c.002 2.555-3.07 5.361-10.024 8.986"
+ />
+ <path
+ fill="#C6302B"
+ d="M245.965 57.93c-13.661 7.12-84.431 36.22-99.498 44.074-15.066 7.854-23.436 7.777-35.338 2.09C99.227 98.404 23.915 67.98 10.35 61.497-3.217 55.015-3.5 50.55 9.825 45.331 23.151 40.113 98.05 10.73 113.88 5.05c15.828-5.679 21.319-5.883 34.789-.948 13.471 4.935 83.819 32.934 97.13 37.811 13.316 4.876 13.827 8.897.166 16.017"
+ />
+ <path
+ fill="#FFF"
+ d="m159.283 32.757-22.01 2.285-4.927 11.856-7.958-13.23-25.415-2.284 18.964-6.839-5.69-10.498 17.755 6.944 16.738-5.48-4.524 10.855 17.067 6.391M131.032 90.275 89.955 73.238l58.86-9.035-17.783 26.072M74.082 39.347c17.375 0 31.46 5.46 31.46 12.194 0 6.736-14.085 12.195-31.46 12.195s-31.46-5.46-31.46-12.195c0-6.734 14.085-12.194 31.46-12.194"
+ />
+ <path
+ fill="#621B1C"
+ d="m185.295 35.998 34.836 13.766-34.806 13.753-.03-27.52"
+ />
+ <path
+ fill="#9A2928"
+ d="m146.755 51.243 38.54-15.245.03 27.519-3.779 1.478-34.791-13.752"
+ />
+ </svg>
+ );
+}
+export function SearchIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function BlockchainIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"blockchain"}</title>
+ <path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ChatIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"chat"}</title>
+ <path d="M17.74 30 16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z" />
+ <path d="M8 10h16v2H8zM8 16h10v2H8z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function WorkflowIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ width={800}
+ height={800}
+ viewBox="0 0 512 512"
+ className="icon">
+ <path d="M445.66 49.341H340.206L294.008 3.143c-4.192-4.191-10.99-4.191-15.183 0l-49.341 49.342c-4.192 4.192-4.192 10.99 0 15.183l46.198 46.198v38.494h-80.516c-5.929 0-10.736 4.806-10.736 10.735v21.471h-42.942v-21.471c0-5.929-4.806-10.735-10.736-10.735H66.34c-5.929 0-10.735 4.806-10.735 10.735v64.413c0 5.929 4.806 10.735 10.735 10.735h20.755v93.798c0 5.929 4.806 10.736 10.735 10.736h95.437l-10.346 10.346c-4.192 4.192-4.193 10.99 0 15.182a10.7 10.7 0 0 0 7.591 3.144c2.747 0 5.4 [...]
+ </svg>
+ );
+}
+export function WebserviceIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"fog"}</title>
+ <path d="M25.829 13.116A10.02 10.02 0 0 0 16 5v2a8.023 8.023 0 0 1 7.865 6.493l.259 1.346 1.349.245A5.502 5.502 0 0 1 24.508 26H16v2h8.508a7.502 7.502 0 0 0 1.32-14.884ZM8 24h6v2H8zM4 24h2v2H4zM6 20h8v2H6zM2 20h2v2H2zM8 16h6v2H8zM4 16h2v2H4zM10 12h4v2h-4zM6 12h2v2H6zM12 8h2v2h-2z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function MobileIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M23 7h4v4h-4zM23 13h4v4h-4zM17 7h4v4h-4zM17 13h4v4h-4z" />
+ <circle cx={14.5} cy={24.5} r={1.5} />
+ <path d="M21 30H8a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h13v2H8v24h13v-8h2v8a2.002 2.002 0 0 1-2 2Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ClusterIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M16 7a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM11 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM7 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM21 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM25 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM4 21a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 [...]
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function RpcIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="m14 26 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function InfinispanIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ id="artwork"
+ viewBox="0 0 1024 1024"
+ className="icon">
+ <defs>
+ <style>{".cls-2{fill:#fff}"}</style>
+ </defs>
+ <path
+ d="M1 1h1022v1022H1z"
+ style={{
+ fill: "#599fc6",
+ }}
+ />
+ <path
+ d="M566.84 512c0-221.39-179.47-400.86-400.86-400.86v109.68c160.56 0 291.18 130.62 291.18 291.18 0 221.39 179.47 400.86 400.86 400.86V803.18c-160.56 0-291.18-130.62-291.18-291.18Z"
+ className="cls-2"
+ />
+ <path
+ d="M436.76 618.86C394.05 726.69 288.82 803.18 166 803.18v109.68c134.26 0 253-66.07 325.76-167.4a432.16 432.16 0 0 1-55-126.6ZM587.24 405.14C630 297.31 735.19 220.82 858 220.82V111.14c-134.26 0-253 66.07-325.77 167.4a431.92 431.92 0 0 1 55.01 126.6Z"
+ className="cls-2"
+ />
+ </svg>
+ );
+}
+export function TransformationIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"data-share"}</title>
+ <path d="M5 25v-9.172l-3.586 3.586L0 18l6-6 6 6-1.414 1.414L7 15.828V25h12v2H7a2.002 2.002 0 0 1-2-2ZM24 22h4a2.002 2.002 0 0 1 2 2v4a2.002 2.002 0 0 1-2 2h-4a2.002 2.002 0 0 1-2-2v-4a2.002 2.002 0 0 1 2-2Zm4 6v-4h-4.002L24 28ZM27 6v9.172l3.586-3.586L32 13l-6 6-6-6 1.414-1.414L25 15.172V6H13V4h12a2.002 2.002 0 0 1 2 2ZM2 6h6v2H2zM2 2h8v2H2z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function TestingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M28 17v5H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-5ZM18 28h-4v-4h4Z" />
+ <path d="M30 10V8h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49-1.414-1.414-1.49 1.49A4.968 4.968 0 0 0 24 4.101V2h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49-1.414 1.414 1.49 1.49A4.968 4.968 0 0 0 18.101 8H16v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49 1.414 1.414 1.49-1.49a4.968 4.968 0 0 0 1.753.732V16h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49 1.414-1.414-1.49-1.49A4.968 4.968 0 0 0 27.899 10Zm-7 2a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ApiIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"api"}</title>
+ <path d="M26 22a3.86 3.86 0 0 0-2 .57l-3.09-3.1a6 6 0 0 0 0-6.94L24 9.43a3.86 3.86 0 0 0 2 .57 4 4 0 1 0-4-4 3.86 3.86 0 0 0 .57 2l-3.1 3.09a6 6 0 0 0-6.94 0L9.43 8A3.86 3.86 0 0 0 10 6a4 4 0 1 0-4 4 3.86 3.86 0 0 0 2-.57l3.09 3.1a6 6 0 0 0 0 6.94L8 22.57A3.86 3.86 0 0 0 6 22a4 4 0 1 0 4 4 3.86 3.86 0 0 0-.57-2l3.1-3.09a6 6 0 0 0 6.94 0l3.1 3.09a3.86 3.86 0 0 0-.57 2 4 4 0 1 0 4-4Zm0-18a2 2 0 1 1-2 2 2 2 0 0 1 2-2ZM4 6a2 2 0 1 1 2 2 2 2 0 0 1-2-2Zm2 22a2 2 0 1 1 2-2 2 2 0 0 1 [...]
+ <path
+ d="M0 0h32v32H0z"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function MonitoringIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z" />
+ <path d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76 3.009-9.78A1.014 1.014 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04-3.082 10.018A1 1 0 0 1 18 18Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function NetworkingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ width={800}
+ height={800}
+ viewBox="0 0 511.984 511.984"
+ className="icon">
+ <path d="M207.29 287.991H48.735C30.687 287.991 16 302.375 16 320.054v111.868c0 17.679 14.688 32.063 32.735 32.063H207.29c18.031 0 32.703-14.384 32.703-32.063V320.054c0-17.679-14.672-32.063-32.703-32.063zm0 143.996-159.291-.064.736-111.932 159.259.064.048 111.645c0 .015-.192.287-.752.287z" />
+ <path d="M383.988 239.992H127.996c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-31.999h223.993v31.999c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c0-8.832-7.167-16-15.999-16z" />
+ <path d="M463.25 287.991H304.727c-18.047 0-32.735 14.384-32.735 32.063v111.868c0 17.679 14.688 32.063 32.735 32.063H463.25c18.047 0 32.735-14.384 32.735-32.063V320.054c-.001-17.679-14.688-32.063-32.735-32.063zm0 143.996-159.259-.064.736-111.932 159.259.064.064 111.645c-.016-.001-.208.287-.8.287zM415.987 479.985h-63.998c-8.832 0-16 7.168-16 16s7.168 16 16 16h63.998c8.832 0 16-7.168 16-16s-7.168-16-16-16zM335.253 0H176.73c-18.047 0-32.735 14.384-32.735 32.063v111.869c0 17.679 1 [...]
+ <path d="M255.992 191.994c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c.001-8.832-7.167-16-15.999-16z" />
+ </svg>
+ );
+}
+export function HealthIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ id="Icons"
+ viewBox="0 0 32 32"
+ className="icon">
+ <style>
+ {
+ ".st0{fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}"
+ }
+ </style>
+ <path
+ d="M27 7h0c-2.6-2.7-6.9-2.7-9.5 0l-1.3 1.4c-.1.1-.4.1-.5 0L14.4 7C11.8 4.3 7.6 4.3 5 7h0c-2.6 2.7-2.6 7.1 0 9.8l1.6 1.6 9.2 9.5c.1.1.4.1.5 0l9.2-9.5 1.6-1.6c2.6-2.7 2.6-7.1-.1-9.8z"
+ className="st0"
+ />
+ <path d="M9 15h3l2-2 2 4 2-5 2 3h3" className="st0" />
+ </svg>
+ );
+}
+export function KubernetesIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 -10.44 722.846 722.846"
+ className="icon">
+ <path
+ fill="#326ce5"
+ d="M358.986 10.06a46.725 46.342 0 0 0-17.906 4.531L96.736 131.341a46.725 46.342 0 0 0-25.28 31.438l-60.282 262.25a46.725 46.342 0 0 0 6.344 35.531 46.725 46.342 0 0 0 2.656 3.688l169.125 210.28a46.725 46.342 0 0 0 36.531 17.438l271.219-.062a46.725 46.342 0 0 0 36.531-17.406l169.063-210.313a46.725 46.342 0 0 0 9.03-39.219L651.3 162.716a46.725 46.342 0 0 0-25.281-31.437L381.643 14.59a46.725 46.342 0 0 0-22.657-4.53z"
+ />
+ <path
+ fill="#fff"
+ stroke="#fff"
+ strokeWidth={0.25}
+ d="M361.408 99.307c-8.077.001-14.626 7.276-14.625 16.25 0 .138.028.27.03.406-.011 1.22-.07 2.689-.03 3.75.192 5.176 1.32 9.138 2 13.907 1.23 10.206 2.26 18.667 1.625 26.531-.62 2.965-2.803 5.677-4.75 7.562l-.344 6.188a190.337 190.337 0 0 0-26.438 4.062c-37.974 8.623-70.67 28.184-95.562 54.594a245.167 245.167 0 0 1-5.281-3.75c-2.612.353-5.25 1.159-8.688-.844-6.545-4.405-12.506-10.486-19.719-17.812-3.305-3.504-5.698-6.841-9.625-10.219-.891-.767-2.252-1.804-3.25-2.594-3.07-2 [...]
+ color="#000"
+ fontFamily="Sans"
+ fontWeight={400}
+ overflow="visible"
+ style={{
+ textIndent: 0,
+ textAlign: "start",
+ lineHeight: "normal",
+ textTransform: "none",
+ marker: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function DocumentIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"document--blank"}</title>
+ <path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.908.908 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function GitIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ fill="none"
+ viewBox="0 0 24 24"
+ className="icon">
+ <path
+ fill="#000"
+ fillRule="evenodd"
+ d="M13.414 3.828a2 2 0 0 0-2.828 0l-.672.672 1.568 1.568a2.002 2.002 0 0 1 2.45 2.45l2.05 2.05a2 2 0 1 1-1.414 1.414L13 10.414v4.854A2 2 0 0 1 12 19a2 2 0 0 1-1-3.732V9.732a2 2 0 0 1-.932-2.25L8.5 5.914l-4.672 4.672a2 2 0 0 0 0 2.828l6.758 6.758a2 2 0 0 0 2.828 0l6.758-6.758a2 2 0 0 0 0-2.828l-6.758-6.758ZM9.172 2.414a4 4 0 0 1 5.656 0l6.758 6.758a4 4 0 0 1 0 5.656l-6.758 6.758a4 4 0 0 1-5.656 0l-6.758-6.758a4 4 0 0 1 0-5.656l6.758-6.758Z"
+ clipRule="evenodd"
+ />
+ </svg>
+ );
+}
+export function SocialIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 1024 1024"
+ className="icon">
+ <path
+ fill="#FFB89A"
+ d="M570.2 842c-50.6 0-278.7-180-278.7-401.9 0-58.8-2.9-133.1-1-183.9-50.8 3.2-91.4 45.7-91.4 97.3v272.1c37.4 194.7 137.5 334 255.2 334 69.5 0 132.9-48.6 180.9-128.5-20.8 7.1-42.6 10.9-65 10.9z"
+ />
+ <path
+ fill="#4E5155"
+ d="M926.1 191.8C900.5 74.1 817.9 62.1 704.9 62.1c-29.1 0-60.3.8-93 .8-36 0-70.5-1.1-102.5-1.1-109.7 0-189.8 12.5-201.3 123.7-20.4 198.3 30 617.1 306.1 617.1S939 414.3 926.1 191.8zm-76.9 268.5c-9.5 47.9-22.3 90.8-38.1 127.7-16.8 39.2-37 71.4-60 95.8-37.3 39.5-82.1 58.7-137 58.7-53.4 0-97.6-20.1-134.9-61.6-45.5-50.5-79.8-131.5-99-234.2-15.6-83.5-20.3-178.9-12.4-255.2 1.8-17.3 5.7-30.7 11.6-39.8 4.4-6.8 10.1-11.7 18.7-15.8 25.8-12.5 70.8-14.2 111.4-14.2 15 0 30.7.2 47.3.5 17 [...]
+ />
+ <path
+ fill="#4E5155"
+ d="M532 841.7c-32.5 22.3-70.6 33.7-113.2 33.7-29.7 0-57.3-6-82.1-17.7-23.2-11-44.7-27.4-63.9-48.7-46-50.9-80.3-131.3-99.2-232.4-15.1-80.6-19.6-172.9-12-246.8 3-29.5 12-50.2 27.5-63.2 14.2-12 35.1-19.2 65.8-22.9 16.5-2 28.2-16.9 26.3-33.3-2-16.5-16.9-28.2-33.3-26.3-42.9 5.1-73.8 16.7-97.4 36.5-27.9 23.5-43.8 57.2-48.5 103-8.2 79.3-3.4 178.1 12.7 264 9.7 51.9 23.4 99.4 40.6 141.2 19.8 48.1 44.4 88.6 73 120.4 51.6 57.2 115.7 86.2 190.6 86.2 55 0 104.5-14.9 147.2-44.2 13.7-9. [...]
+ />
+ <path
+ fill="#3C9"
+ d="M519.7 248.5c-16.6 0-30 13.4-30 30v91.3c0 16.6 13.4 30 30 30s30-13.4 30-30v-91.3c0-16.6-13.5-30-30-30zm-220.2 137c0-16.6-13.4-30-30-30s-30 13.4-30 30v91.3c0 16.6 13.4 30 30 30s30-13.4 30-30v-91.3zm455.1-137c-16.6 0-30 13.4-30 30v91.3c0 16.6 13.4 30 30 30s30-13.4 30-30v-91.3c0-16.6-13.4-30-30-30zm-37.9 306c0-16.6-13.4-30-30-30H551v30c0 58.5 38.1 123.7 92.8 123.7 22.9 0 45-11.9 62.2-33.6 10.3-13 8.1-31.9-4.9-42.1-13-10.3-31.9-8.1-42.1 4.9-5.3 6.7-11.1 10.9-15.1 10.9-4.3 [...]
+ />
+ </svg>
+ );
+}
+export function DebeziumIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 130.93 130.93"
+ className="icon">
+ <defs>
+ <linearGradient
+ id="linear-gradient"
+ x1={19.74}
+ x2={114.03}
+ y1={19.73}
+ y2={114.02}
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#91d443" />
+ <stop offset={1} stopColor="#48bfe0" />
+ </linearGradient>
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-2"
+ x1={43.19}
+ x2={137.48}
+ y1={-3.72}
+ y2={90.57}
+ />
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-3"
+ x1={66.56}
+ x2={160.85}
+ y1={-27.09}
+ y2={67.2}
+ />
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-4"
+ x1={-3.72}
+ x2={90.57}
+ y1={43.18}
+ y2={137.47}
+ />
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-5"
+ x1={-27.09}
+ x2={67.2}
+ y1={66.55}
+ y2={160.84}
+ />
+ <style>{".cls-1{fill:#fff}"}</style>
+ </defs>
+ <g id="Layer_1" data-name="Layer 1">
+ <path
+ d="M93.79 114.29a16.65 16.65 0 0 0 16.63 16.63h20.53v-20.53a16.65 16.65 0 0 0-16.63-16.63h-3.91A26.39 26.39 0 0 1 84 67.4v-3.89a16.65 16.65 0 0 0-16.59-16.62h-3.9a26.39 26.39 0 0 1-26.35-26.37v-3.9A16.65 16.65 0 0 0 20.53 0H0v20.52a16.65 16.65 0 0 0 16.63 16.63h3.91A26.39 26.39 0 0 1 46.9 63.51v3.89A16.65 16.65 0 0 0 63.53 84h3.9a26.39 26.39 0 0 1 26.36 26.36Z"
+ style={{
+ fill: "url(#linear-gradient)",
+ }}
+ />
+ <path
+ d="M130.94 63.51a16.65 16.65 0 0 0-16.63-16.63h-3.91A26.39 26.39 0 0 1 84 20.52v-3.9A16.65 16.65 0 0 0 67.41 0H46.9v20.75a16.64 16.64 0 0 0 16.62 16.4h3.91a26.39 26.39 0 0 1 26.36 26.36v3.89A16.65 16.65 0 0 0 110.36 84h20.58Z"
+ style={{
+ fill: "url(#linear-gradient-2)",
+ }}
+ />
+ <path
+ d="M130.94 16.49A16.63 16.63 0 0 0 115 0H93.47v20.7a16.64 16.64 0 0 0 16.62 16.44h20.85Z"
+ style={{
+ fill: "url(#linear-gradient-3)",
+ }}
+ />
+ <path
+ d="M0 67.44a16.65 16.65 0 0 0 16.64 16.62h3.91a26.39 26.39 0 0 1 26.36 26.36v3.89a16.65 16.65 0 0 0 16.63 16.63H84v-20.75A16.64 16.64 0 0 0 67.43 93.8h-3.9a26.39 26.39 0 0 1-26.37-26.36v-3.9a16.65 16.65 0 0 0-16.57-16.63H0Z"
+ style={{
+ fill: "url(#linear-gradient-4)",
+ }}
+ />
+ <path
+ d="M0 114.45a16.63 16.63 0 0 0 16 16.5h21.48v-20.71A16.64 16.64 0 0 0 20.86 93.8H0Z"
+ style={{
+ fill: "url(#linear-gradient-5)",
+ }}
+ />
+ </g>
+ </svg>
+ );
+}
+export function IgniteIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={48}
+ height={48}
+ fill="none"
+ viewBox="0 0 48 48"
+ className="icon">
+ <path
+ fill="#ED1C24"
+ d="M7.686 8.136S-8.95 18.28 6.73 28.355c3.016 1.962 13.956 7.418 13.644 12.466 0 0 6.631-9.81-3.064-15.983C7.351 18.52 4.862 11.772 7.686 8.135Z"
+ />
+ <path
+ fill="#ED1C24"
+ d="M1.893 27.517s-5.936 8.997 5.745 10.84c1.15.144 9.6 1.029 11.802 3.804 0 0-.192-4.785-7.086-7.609-6.87-2.823-9.695-3.517-10.46-7.035Zm22.981-9.451C17.74 10.6 15.754 5.982 18.818 0c0 0-21.281 8.183-.264 22.708 7.517 5.192 6.272 10.504 6.272 10.696 1.173-1.22 7.181-7.873.048-15.338Z"
+ />
+ </svg>
+ );
+}
+export function HazelcastIcon() {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.3 133.3" className="icon">
+ <defs>
+ <style>{".a{fill:#00e1e1}"}</style>
+ </defs>
+ <path
+ d="M133.3 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.93v.38c0 6.07-6.42 12.49-12.49 12.49h-.38v.93h.36c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM26.66 12.86h-.38C20.21 12.86 13.8 6.45 13.8.38V0h-.94v.38c0 6.07-6.41 12.48-12.48 12.48H0v.94h.38c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.94Z"
+ className="a"
+ />
+ <path
+ d="M26.66 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.53v-.38h-.94V27c0 6.07-6.41 12.49-12.48 12.49H0v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M53.32 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94V27c0 6.07-6.41 12.49-12.48 12.49h-.38v.93H27c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM26.66 66.19h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94v.38c0 6.07-6.41 12.49-12.48 12.49H0v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.4h.94v-.4c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M53.32 66.19h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94v.38c0 6.07-6.41 12.49-12.48 12.49h-.38v.93H27c6.07 0 12.48 6.41 12.48 12.48v.4h.94v-.4c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M80 66.19h-.4c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94v.38c0 6.07-6.41 12.49-12.48 12.49h-.38v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.4h.94v-.4c0-6.07 6.41-12.48 12.48-12.48h.4v-.93ZM26.66 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.94v.38c0 6.07-6.41 12.49-12.48 12.49H0v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M53.32 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.94v.38c0 6.07-6.41 12.49-12.48 12.49h-.38v.93H27c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM106.64 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.93V27c0 6.07-6.42 12.49-12.49 12.49H80v.93h.38c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM106.64 66.19h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.93v.38c0 6.07-6.42 12.49-12.49 12.49H80v.93h. [...]
+ className="a"
+ />
+ <path
+ d="M106.64 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.93v.38c0 6.07-6.42 12.49-12.49 12.49H80v.93h.38c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM133.3 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.93V27c0 6.07-6.42 12.49-12.49 12.49h-.38v.93h.36c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM133.3 12.86h-.38c-6.07 0-12.48-6.41-12.48-12.48V0h-.93v.38c0 6.07-6.42 12.48-12.49 12.48h-.38v.94h.3 [...]
+ className="a"
+ />
+ </svg>
+ );
+}
+export function AzureIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={150}
+ height={150}
+ viewBox="0 0 96 96"
+ className="icon">
+ <defs>
+ <linearGradient
+ id="a"
+ x1={-1032.172}
+ x2={-1059.213}
+ y1={145.312}
+ y2={65.426}
+ gradientTransform="matrix(1 0 0 -1 1075 158)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#114a8b" />
+ <stop offset={1} stopColor="#0669bc" />
+ </linearGradient>
+ <linearGradient
+ id="b"
+ x1={-1023.725}
+ x2={-1029.98}
+ y1={108.083}
+ y2={105.968}
+ gradientTransform="matrix(1 0 0 -1 1075 158)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopOpacity={0.3} />
+ <stop offset={0.071} stopOpacity={0.2} />
+ <stop offset={0.321} stopOpacity={0.1} />
+ <stop offset={0.623} stopOpacity={0.05} />
+ <stop offset={1} stopOpacity={0} />
+ </linearGradient>
+ <linearGradient
+ id="c"
+ x1={-1027.165}
+ x2={-997.482}
+ y1={147.642}
+ y2={68.561}
+ gradientTransform="matrix(1 0 0 -1 1075 158)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#3ccbf4" />
+ <stop offset={1} stopColor="#2892df" />
+ </linearGradient>
+ </defs>
+ <path
+ fill="url(#a)"
+ d="M33.338 6.544h26.038l-27.03 80.087a4.152 4.152 0 0 1-3.933 2.824H8.149a4.145 4.145 0 0 1-3.928-5.47L29.404 9.368a4.152 4.152 0 0 1 3.934-2.825z"
+ />
+ <path
+ fill="#0078d4"
+ d="M71.175 60.261h-41.29a1.911 1.911 0 0 0-1.305 3.309l26.532 24.764a4.171 4.171 0 0 0 2.846 1.121h23.38z"
+ />
+ <path
+ fill="url(#b)"
+ d="M33.338 6.544a4.118 4.118 0 0 0-3.943 2.879L4.252 83.917a4.14 4.14 0 0 0 3.908 5.538h20.787a4.443 4.443 0 0 0 3.41-2.9l5.014-14.777 17.91 16.705a4.237 4.237 0 0 0 2.666.972H81.24L71.024 60.261l-29.781.007L59.47 6.544z"
+ />
+ <path
+ fill="url(#c)"
+ d="M66.595 9.364a4.145 4.145 0 0 0-3.928-2.82H33.648a4.146 4.146 0 0 1 3.928 2.82l25.184 74.62a4.146 4.146 0 0 1-3.928 5.472h29.02a4.146 4.146 0 0 0 3.927-5.472z"
+ />
+ </svg>
+ );
+}
+
+
diff --git a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
index 0e907c8b..9226bb52 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentCard.tsx
@@ -19,7 +19,7 @@ import {
CardHeader, Card, CardTitle, CardBody, CardFooter, Badge
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {camelIcon, CamelUi} from "../../designer/utils/CamelUi";
+import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
interface Props {
@@ -45,7 +45,7 @@ export class ComponentCard extends React.Component<Props, State> {
render() {
const component = this.state.component;
return (
- <Card isHoverable isCompact key={component.component.name} className="kamelet-card"
+ <Card isCompact key={component.component.name} className="kamelet-card"
onClick={event => this.click(event)}
>
<CardHeader className="header-labels">
@@ -53,7 +53,7 @@ export class ComponentCard extends React.Component<Props, State> {
<Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
</CardHeader>
<CardHeader>
- {CamelUi.getIconFromSource(camelIcon)}
+ {CamelUi.getIconForComponent(component.component.title, component.component.label)}
<CardTitle>{component.component.title}</CardTitle>
</CardHeader>
<CardBody>{component.component.description}</CardBody>
diff --git a/karavan-designer/src/knowledgebase/components/ComponentModal.tsx b/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
index 7b10b3f1..7d622425 100644
--- a/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-designer/src/knowledgebase/components/ComponentModal.tsx
@@ -27,7 +27,7 @@ import {
import '../../designer/karavan.css';
import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {Component} from "karavan-core/lib/model/ComponentModels";
-import {camelIcon, CamelUi} from "../../designer/utils/CamelUi";
+import {CamelUi} from "../../designer/utils/CamelUi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
@@ -85,7 +85,7 @@ export class ComponentModal extends React.Component<Props, State> {
<Flex direction={{default: 'column'}} key={component?.component.name}
className="kamelet-modal-card">
<CardHeader>
- {CamelUi.getIconFromSource(camelIcon)}
+ {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
<CardActions>
<Badge className="badge"
isRead> {component?.component.label}</Badge>
diff --git a/karavan-space/package-lock.json b/karavan-space/package-lock.json
index 0eaecee0..c8f2a906 100644
--- a/karavan-space/package-lock.json
+++ b/karavan-space/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "karavan-space",
- "version": "3.21.1-SNAPSHOT",
+ "version": "4.0.0-RC2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "karavan-space",
- "version": "3.21.1-SNAPSHOT",
+ "version": "4.0.0-RC2",
"license": "Apache-2.0",
"dependencies": {
"@monaco-editor/react": "4.5.0",
@@ -20,6 +20,7 @@
"dagre": "0.8.5",
"html-to-image": "1.11.11",
"karavan-core": "file:../karavan-core",
+ "lodash.debounce": "^4.0.8",
"netlify-auth-providers": "^1.0.0-alpha5",
"octokit": "^2.0.10",
"react": "18.2.0",
@@ -31,6 +32,8 @@
"devDependencies": {
"@svgr/webpack": "^7.0.0",
"@types/dagre": "^0.7.48",
+ "@types/lodash": "^4.14.195",
+ "@types/lodash.debounce": "^4.0.7",
"@types/netlify-auth-providers": "^1.0.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.1",
@@ -42,12 +45,13 @@
}
},
"../karavan-core": {
- "version": "3.21.1-SNAPSHOT",
+ "version": "4.0.0-RC2",
"license": "Apache-2.0",
"dependencies": {
"@types/js-yaml": "^4.0.5",
"@types/uuid": "^8.3.4",
- "typescript": "^4.9.4",
+ "tsconfig-paths": "^4.2.0",
+ "typescript": "^5.1",
"uuid": "8.3.2"
},
"devDependencies": {
@@ -58,8 +62,9 @@
"chai": "^4.3.4",
"cross-env": "^7.0.3",
"fs": "^0.0.1-security",
- "mocha": "^9.2.0",
- "ts-node": "^10.4.0"
+ "mocha": "^10.2.0",
+ "ts-node": "^10.9.1",
+ "tsc-alias": "^1.8.7"
}
},
"node_modules/@alloc/quick-lru": {
@@ -4044,6 +4049,21 @@
"@types/node": "*"
}
},
+ "node_modules/@types/lodash": {
+ "version": "4.14.196",
+ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.196.tgz",
+ "integrity": "sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==",
+ "dev": true
+ },
+ "node_modules/@types/lodash.debounce": {
+ "version": "4.0.7",
+ "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz",
+ "integrity": "sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==",
+ "dev": true,
+ "dependencies": {
+ "@types/lodash": "*"
+ }
+ },
"node_modules/@types/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-5.1.1.tgz",
diff --git a/karavan-space/package.json b/karavan-space/package.json
index b97177ed..bd111fa6 100644
--- a/karavan-space/package.json
+++ b/karavan-space/package.json
@@ -42,6 +42,7 @@
"dagre": "0.8.5",
"html-to-image": "1.11.11",
"karavan-core": "file:../karavan-core",
+ "lodash.debounce": "^4.0.8",
"netlify-auth-providers": "^1.0.0-alpha5",
"octokit": "^2.0.10",
"react": "18.2.0",
@@ -53,6 +54,8 @@
"devDependencies": {
"@svgr/webpack": "^7.0.0",
"@types/dagre": "^0.7.48",
+ "@types/lodash": "^4.14.195",
+ "@types/lodash.debounce": "^4.0.7",
"@types/netlify-auth-providers": "^1.0.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.1",
diff --git a/karavan-space/src/designer/beans/BeanCard.tsx b/karavan-space/src/designer/beans/BeanCard.tsx
index 803272f5..d9eac357 100644
--- a/karavan-space/src/designer/beans/BeanCard.tsx
+++ b/karavan-space/src/designer/beans/BeanCard.tsx
@@ -20,15 +20,15 @@ import {
} from '@patternfly/react-core';
import '../karavan.css';
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
-import {NamedBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
interface Props {
- bean: NamedBeanDefinition
- selectedStep?: NamedBeanDefinition
+ bean: RegistryBeanDefinition
+ selectedStep?: RegistryBeanDefinition
integration: Integration
- selectElement: (element: NamedBeanDefinition) => void
- deleteElement: (element: NamedBeanDefinition) => void
+ selectElement: (element: RegistryBeanDefinition) => void
+ deleteElement: (element: RegistryBeanDefinition) => void
}
export class BeanCard extends React.Component<Props, any> {
diff --git a/karavan-space/src/designer/beans/BeanProperties.tsx b/karavan-space/src/designer/beans/BeanProperties.tsx
index 24c1e202..45f773fc 100644
--- a/karavan-space/src/designer/beans/BeanProperties.tsx
+++ b/karavan-space/src/designer/beans/BeanProperties.tsx
@@ -23,7 +23,7 @@ import {
import '../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import {
- NamedBeanDefinition,
+ RegistryBeanDefinition,
} from "karavan-core/lib/model/CamelDefinition";
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
@@ -44,14 +44,14 @@ import DockerIcon from "@patternfly/react-icons/dist/js/icons/docker-icon";
interface Props {
integration: Integration
- bean?: NamedBeanDefinition
+ bean?: RegistryBeanDefinition
dark: boolean
- onChange: (bean: NamedBeanDefinition) => void
- onClone: (bean: NamedBeanDefinition) => void
+ onChange: (bean: RegistryBeanDefinition) => void
+ onClone: (bean: RegistryBeanDefinition) => void
}
interface State {
- bean?: NamedBeanDefinition
+ bean?: RegistryBeanDefinition
properties: Map<string, [string, string, boolean]>
key: string,
showInfrastructureSelector: boolean
@@ -88,7 +88,7 @@ export class BeanProperties extends React.Component<Props, State> {
}
}
- setBean = (bean?: NamedBeanDefinition) => {
+ setBean = (bean?: RegistryBeanDefinition) => {
this.setState({
bean: bean,
properties: bean?.properties ? this.preparePropertiesMap(bean.properties) : new Map<string, [string, string, false]>()
diff --git a/karavan-space/src/designer/beans/BeansDesigner.tsx b/karavan-space/src/designer/beans/BeansDesigner.tsx
index 037df834..2c9a681f 100644
--- a/karavan-space/src/designer/beans/BeansDesigner.tsx
+++ b/karavan-space/src/designer/beans/BeansDesigner.tsx
@@ -19,7 +19,7 @@ import {
Button, Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent, Modal, PageSection
} from '@patternfly/react-core';
import '../karavan.css';
-import {NamedBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {RegistryBeanDefinition} from "karavan-core/lib/model/CamelDefinition";
import {Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUi} from "../utils/CamelUi";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
@@ -37,7 +37,7 @@ interface Props {
interface State {
integration: Integration
showDeleteConfirmation: boolean
- selectedBean?: NamedBeanDefinition
+ selectedBean?: RegistryBeanDefinition
key: string
propertyOnly: boolean
}
@@ -57,7 +57,7 @@ export class BeansDesigner extends React.Component<Props, State> {
}
}
- showDeleteConfirmation = (bean: NamedBeanDefinition) => {
+ showDeleteConfirmation = (bean: RegistryBeanDefinition) => {
this.setState({selectedBean: bean, showDeleteConfirmation: true});
}
@@ -71,12 +71,12 @@ export class BeansDesigner extends React.Component<Props, State> {
integration: i,
showDeleteConfirmation: false,
key: Math.random().toString(),
- selectedBean: new NamedBeanDefinition(),
+ selectedBean: new RegistryBeanDefinition(),
propertyOnly: false
});
}
- changeBean = (bean: NamedBeanDefinition) => {
+ changeBean = (bean: RegistryBeanDefinition) => {
const clone = CamelUtil.cloneIntegration(this.state.integration);
const i = CamelDefinitionApiExt.addBeanToIntegration(clone, bean);
this.setState({integration: i, propertyOnly: false, key: Math.random().toString(), selectedBean: bean});
@@ -100,7 +100,7 @@ export class BeansDesigner extends React.Component<Props, State> {
</Modal>)
}
- selectBean = (bean?: NamedBeanDefinition) => {
+ selectBean = (bean?: RegistryBeanDefinition) => {
this.setState({selectedBean: bean})
}
@@ -112,7 +112,7 @@ export class BeansDesigner extends React.Component<Props, State> {
};
createBean = () => {
- this.changeBean(new NamedBeanDefinition());
+ this.changeBean(new RegistryBeanDefinition());
}
getPropertiesPanel() {
diff --git a/karavan-space/src/designer/karavan.css b/karavan-space/src/designer/karavan.css
index 3b2574e4..f8f9f634 100644
--- a/karavan-space/src/designer/karavan.css
+++ b/karavan-space/src/designer/karavan.css
@@ -142,9 +142,10 @@
.kamelets-page .kamelet-card .icon {
height: 24px;
+ width: 24px;
margin-top: auto;
margin-bottom: auto;
- margin-right: 3px;
+ margin-right: 5px;
border: none;
-webkit-user-select: none;
-khtml-user-select: none;
@@ -201,6 +202,7 @@
.kamelet-modal-card .icon {
height: 36px;
+ width: 36px;
margin-top: auto;
margin-bottom: auto;
border: none;
@@ -560,6 +562,7 @@
.karavan .dsl-page .graph .connections .icon {
height: 20px;
+ width: 20px;
}
.karavan .dsl-page .graph .connections .arrow {
@@ -956,6 +959,7 @@
.dsl-modal .labels {
opacity: 0.5;
font-weight: 200;
+ text-wrap: nowrap;
}
.dsl-modal .dsl-card:hover .labels {
diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx
index 7ccfe8fe..4e4f9f53 100644
--- a/karavan-space/src/designer/route/DslConnections.tsx
+++ b/karavan-space/src/designer/route/DslConnections.tsx
@@ -73,6 +73,7 @@ export class DslConnections extends React.Component<Props, State> {
getIncomings() {
let outs: [string, number][] = Array.from(this.state.steps.values())
.filter(pos => ["FromDefinition"].includes(pos.step.dslName))
+ .filter(pos => !CamelUi.isElementInternalComponent(pos.step))
.filter(pos => !(pos.step.dslName === 'FromDefinition' && CamelUi.hasInternalUri(pos.step)))
.sort((pos1: DslPosition, pos2: DslPosition) => {
const y1 = pos1.headerRect.y + pos1.headerRect.height / 2;
@@ -104,7 +105,7 @@ export class DslConnections extends React.Component<Props, State> {
return (
<g key={pos.step.uuid + "-incoming"}>
<circle cx={incomingX} cy={fromY} r={r} className="circle-incoming"/>
- <image x={imageX} y={imageY} href={CamelUi.getConnectionIcon(pos.step)} className="icon"/>
+ {/*<image x={imageX} y={imageY} href={CamelUi.getConnectionIconString(pos.step)} className="icon"/>*/}
{/*<text x={imageX - 5} y={imageY + 40} className="caption" textAnchor="start">{CamelUi.getTitle(pos.step)}</text>*/}
<path d={`M ${lineX1},${lineY1} C ${lineX1},${lineY2} ${lineX2},${lineY1} ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
@@ -113,6 +114,22 @@ export class DslConnections extends React.Component<Props, State> {
}
}
+ getIncomingIcons(data: [string, number]) {
+ const pos = this.state.steps.get(data[0]);
+ if (pos) {
+ const fromY = pos.headerRect.y + pos.headerRect.height / 2 - this.props.top;
+ const r = pos.headerRect.height / 2;
+ const incomingX = 20;
+ const imageX = incomingX - r + 5;
+ const imageY = fromY - r + 5;
+ return (
+ <div style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ </div>
+ )
+ }
+ }
+
hasOverlap(data: [string, number][]): boolean {
let result = false;
data.forEach((d, i, arr) => {
@@ -135,7 +152,7 @@ export class DslConnections extends React.Component<Props, State> {
let outs: [string, number][] = Array.from(this.state.steps.values())
.filter(pos => outgoingDefinitions.includes(pos.step.dslName))
.filter(pos => pos.step.dslName !== 'KameletDefinition' || (pos.step.dslName === 'KameletDefinition' && !CamelUi.isActionKamelet(pos.step)))
- .filter(pos => pos.step.dslName === 'ToDefinition' && !CamelUi.isActionKamelet(pos.step))
+ .filter(pos => pos.step.dslName === 'ToDefinition' && !CamelUi.isActionKamelet(pos.step) && !CamelUi.isElementInternalComponent(pos.step))
.filter(pos => !(outgoingDefinitions.includes(pos.step.dslName) && CamelUi.hasInternalUri(pos.step)))
.filter(pos => pos.step.dslName !== 'SagaDefinition')
.sort((pos1: DslPosition, pos2: DslPosition) => {
@@ -168,13 +185,13 @@ export class DslConnections extends React.Component<Props, State> {
const lineXi = lineX1 + 40;
const lineYi = lineY2;
- let image = CamelUi.getConnectionIcon(pos.step);
+ let image = CamelUi.getConnectionIconString(pos.step);
const imageX = outgoingX - r + 5;
const imageY = outgoingY - r + 5;
return (
<g key={pos.step.uuid + "-outgoing"}>
<circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
- <image x={imageX} y={imageY} href={image} className="icon"/>
+ {/*<image x={imageX} y={imageY} href={image} className="icon"/>*/}
{/*<text x={imageX + 25} y={imageY + 40} className="caption" textAnchor="end">{CamelUi.getOutgoingTitle(pos.step)}</text>*/}
<path d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
@@ -183,6 +200,22 @@ export class DslConnections extends React.Component<Props, State> {
}
}
+ getOutgoingIcons(data: [string, number]) {
+ const pos = this.state.steps.get(data[0]);
+ if (pos) {
+ const r = pos.headerRect.height / 2;
+ const outgoingX = this.props.width - 20;
+ const outgoingY = data[1] + 15;
+ const imageX = outgoingX - r + 5;
+ const imageY = outgoingY - r + 5;
+ return (
+ <div style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
+ {CamelUi.getConnectionIcon(pos.step)}
+ </div>
+ )
+ }
+ }
+
getInternals(): [string, number, boolean][] {
let outs: [string, number, boolean][] = Array.from(this.state.steps.values())
.filter(pos => outgoingDefinitions.includes(pos.step.dslName) && CamelUi.hasInternalUri(pos.step))
@@ -432,6 +465,8 @@ export class DslConnections extends React.Component<Props, State> {
return (
<div className="connections" style={{width: this.props.width, height: this.props.height, marginTop: "8px"}}>
{this.getSvg()}
+ {this.getIncomings().map(p => this.getIncomingIcons(p))}
+ {this.getOutgoings().map(p => this.getOutgoingIcons(p))}
</div>
);
}
diff --git a/karavan-space/src/designer/route/DslProperties.tsx b/karavan-space/src/designer/route/DslProperties.tsx
index 41fe2d3e..53ae4bde 100644
--- a/karavan-space/src/designer/route/DslProperties.tsx
+++ b/karavan-space/src/designer/route/DslProperties.tsx
@@ -31,7 +31,6 @@ import {
} from "karavan-core/lib/model/CamelDefinition";
import {Integration, CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
-import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelUi, RouteToCreate} from "../utils/CamelUi";
import {CamelMetadataApi, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
@@ -218,4 +217,4 @@ export class DslProperties extends React.Component<Props, State> {
</div>
)
}
-}
\ No newline at end of file
+}
diff --git a/karavan-space/src/designer/route/RouteDesignerLogic.tsx b/karavan-space/src/designer/route/RouteDesignerLogic.tsx
index 7dc03980..782b4b29 100644
--- a/karavan-space/src/designer/route/RouteDesignerLogic.tsx
+++ b/karavan-space/src/designer/route/RouteDesignerLogic.tsx
@@ -29,6 +29,7 @@ import {toPng} from 'html-to-image';
import {RouteDesigner, RouteDesignerState} from "./RouteDesigner";
import {findDOMNode} from "react-dom";
import {Subscription} from "rxjs";
+import debounce from 'lodash.debounce';
export class RouteDesignerLogic {
@@ -143,7 +144,7 @@ export class RouteDesignerLogic {
}
}
- onPropertyUpdate = (element: CamelElement, newRoute?: RouteToCreate) => {
+ onPropertyUpdate = debounce((element: CamelElement, newRoute?: RouteToCreate) => {
if (newRoute) {
let i = CamelDefinitionApiExt.updateIntegrationRouteElement(this.routeDesigner.state.integration, element);
const f = CamelDefinitionApi.createFromDefinition({uri: newRoute.componentName + ":" + newRoute.name})
@@ -163,7 +164,7 @@ export class RouteDesignerLogic {
const i = CamelDefinitionApiExt.updateIntegrationRouteElement(clone, element);
this.routeDesigner.setState({integration: i, propertyOnly: true, key: Math.random().toString()});
}
- }
+ }, 300, {leading: true})
showDeleteConfirmation = (id: string) => {
let message: string;
diff --git a/karavan-space/src/designer/route/property/ComponentParameterField.tsx b/karavan-space/src/designer/route/property/ComponentParameterField.tsx
index ca1f6a0d..e0a6f99f 100644
--- a/karavan-space/src/designer/route/property/ComponentParameterField.tsx
+++ b/karavan-space/src/designer/route/property/ComponentParameterField.tsx
@@ -139,7 +139,7 @@ export class ComponentParameterField extends React.Component<Props, State> {
const internalUris = CamelUi.getInternalRouteUris(this.props.integration, componentName, false);
const uris: string [] = [];
uris.push(...internalUris);
- if (value.length > 0 && !uris.includes(value)) {
+ if (value && value.length > 0 && !uris.includes(value)) {
uris.unshift(value);
}
if (uris && uris.length > 0) {
diff --git a/karavan-space/src/designer/utils/CamelUi.tsx b/karavan-space/src/designer/utils/CamelUi.tsx
index a577a069..e21544ad 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -22,15 +22,72 @@ import {CamelMetadataApi} from "karavan-core/lib/model/CamelMetadata";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import {
- NamedBeanDefinition,
+ RegistryBeanDefinition,
RouteConfigurationDefinition,
RouteDefinition,
SagaDefinition,
ToDefinition
} from "karavan-core/lib/model/CamelDefinition";
import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
-import {AggregateIcon, ChoiceIcon, FilterIcon, Intercept, InterceptFrom, InterceptSendToEndpoint, OnCompletion, SagaIcon, SortIcon, SplitIcon} from "./KaravanIcons";
+import {
+ AggregateIcon,
+ ApiIcon,
+ AwsIcon,
+ AzureIcon,
+ BlockchainIcon,
+ ChatIcon,
+ ChoiceIcon,
+ CloudIcon,
+ ClusterIcon,
+ DatabaseIcon,
+ DebeziumIcon,
+ DocumentIcon,
+ FileIcon,
+ FilterIcon,
+ GithubIcon,
+ GitIcon,
+ GoogleCloudIcon,
+ GrapeIcon,
+ HazelcastIcon,
+ HealthIcon,
+ HttpIcon,
+ IgniteIcon,
+ InfinispanIcon,
+ Intercept,
+ InterceptFrom,
+ InterceptSendToEndpoint,
+ IotIcon,
+ KubernetesIcon,
+ MachineLearningIcon,
+ MailIcon,
+ MessagingIcon,
+ MobileIcon,
+ MonitoringIcon,
+ NetworkingIcon,
+ OnCompletion,
+ OpenshiftIcon,
+ OpenstackIcon,
+ RedisIcon,
+ RefIcon,
+ RpcIcon,
+ SagaIcon,
+ SapIcon,
+ SchedulingIcon,
+ ScriptIcon,
+ SearchIcon,
+ SocialIcon,
+ SortIcon,
+ SplitIcon,
+ SpringIcon,
+ TerminalIcon,
+ TestingIcon,
+ TransformationIcon,
+ ValidationIcon,
+ WebserviceIcon,
+ WorkflowIcon
+} from "./KaravanIcons";
import React from "react";
+import {Icon} from "@patternfly/react-core";
const StepElements: string[] = [
"AggregateDefinition",
@@ -426,7 +483,7 @@ export class CamelUi {
case "SagaDefinition":
return "data:image/svg+xml,%0A%3Csvg width='32px' height='32px' viewBox='0 0 32 32' id='icon' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eexpand-categories%3C/title%3E%3Crect x='20' y='26' width='6' height='2'/%3E%3Crect x='20' y='18' width='8' height='2'/%3E%3Crect x='20' y='10' width='10' height='2'/%3E%3Crect x='15' y='4' width='2' height='24'/%3E%3Cpolygon points='10.586 3.959 7 7.249 3.412 3.958 2 [...]
case "FromDefinition":
- return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.6577283,22.7532553 L12,23.3275712 L11.3422717,22.7532553 C5.81130786,17.9237218 3,13.70676 3,10 C3,4.7506636 7.09705254,1 12,1 C16.9029475,1 21,4.7506636 21,10 C21,13.70676 18.1886921,17.9237218 12.6577283,22.7532553 Z M5,10 C5,12.8492324 7.30661202,16.4335466 12,20.6634039 C16.693388,16.4335466 19,12.8492324 19,10 C19,5. [...]
+ return "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMy4yNUMxMi40MTQyIDMuMjUgMTIuNzUgMy41ODU3OSAxMi43NSA0TDEyLjc1IDE4LjE4OTNMMT [...]
case "ToDefinition":
return "data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7B fill: none; %7D%3C/style%3E%3C/defs%3E%3Cg class='layer'%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath d='m24.08924,9.30736l-1.67194,1.57734l4.23986,3.99986l-5.47865,0a5.92883,5.59337 0 0 0 -4.60981,-4.34899l0,-10.15173l-2.36467,0l0,10.15173a5.91168,5.5772 0 0 0 0,10.92886l0,10.15173l2.36467,0l0,-10.15173a5.92883,5. [...]
case "SwitchDefinition":
@@ -479,18 +536,147 @@ export class CamelUi {
&& dsl.uri?.startsWith("kamelet")) {
return this.getIconFromSource(CamelUi.getKameletIconByUri(dsl.uri));
} else if (dsl.navigation === 'component' ){
- return this.getIconFromSource(camelIcon);
+ return CamelUi.getIconForComponent(dsl.title, dsl.labels);
} else {
return CamelUi.getIconForDslName(dsl.dsl);
}
}
+ static getIconForComponent = (title: string, label: string):JSX.Element => {
+ const labels = label.split(",");
+ if (title === "Ref") {
+ return RefIcon();
+ } else if (title === "Exec") {
+ return TerminalIcon();
+ } else if (title === "Grape") {
+ return GrapeIcon();
+ } else if (title.startsWith("Google")) {
+ return GoogleCloudIcon();
+ } else if (title.startsWith("Spring")) {
+ return SpringIcon();
+ } else if (title.startsWith("Kubernetes")) {
+ return KubernetesIcon();
+ } else if (title.startsWith("SAP")) {
+ return SapIcon();
+ } else if (title.toLowerCase().startsWith("openstack")) {
+ return OpenstackIcon();
+ } else if (title.toLowerCase().startsWith("openshift")) {
+ return OpenshiftIcon();
+ } else if (title.includes("Redis")) {
+ return RedisIcon();
+ } else if (title.startsWith("Azure")) {
+ return AzureIcon();
+ } else if (title.startsWith("AWS")) {
+ return AwsIcon();
+ } else if (title.startsWith("Debezium")) {
+ return DebeziumIcon();
+ } else if (title.startsWith("Infinispan")) {
+ return InfinispanIcon();
+ } else if (title.startsWith("Ignite")) {
+ return IgniteIcon();
+ } else if (title.startsWith("GitHub")) {
+ return GithubIcon();
+ } else if (title.startsWith("Git")) {
+ return GitIcon();
+ } else if (title.startsWith("Hazelcast")) {
+ return HazelcastIcon();
+ } else if (title.startsWith("FHIR") || title.startsWith("MLLP")) {
+ return HealthIcon();
+ } else if (labels.includes('transformation')) {
+ return TransformationIcon();
+ } else if (labels.includes("validation")){
+ return ValidationIcon();
+ } else if (labels.includes("scheduling")){
+ return SchedulingIcon();
+ } else if (labels.includes("database")){
+ return DatabaseIcon();
+ } else if (labels.includes("cloud")){
+ return CloudIcon();
+ } else if (labels.includes("chat")){
+ return ChatIcon();
+ } else if (labels.includes("messaging")){
+ return MessagingIcon();
+ } else if (labels.includes("script")){
+ return ScriptIcon();
+ } else if (labels.includes("file")){
+ return FileIcon();
+ } else if (labels.includes("monitoring")){
+ return MonitoringIcon();
+ } else if (labels.includes("iot")){
+ return IotIcon();
+ } else if (labels.includes("mail")){
+ return MailIcon();
+ } else if (labels.includes("http")){
+ return HttpIcon();
+ } else if (labels.includes("document")){
+ return DocumentIcon();
+ } else if (labels.includes("social")){
+ return SocialIcon();
+ } else if (labels.includes("networking")){
+ return NetworkingIcon();
+ } else if (labels.includes("api")){
+ return ApiIcon();
+ } else if (labels.includes("testing")){
+ return TestingIcon();
+ } else if (labels.includes("clustering")){
+ return ClusterIcon();
+ } else if (labels.includes("mobile")){
+ return MobileIcon();
+ } else if (labels.includes("workflow")){
+ return WorkflowIcon();
+ } else if (labels.includes("webservice") || labels.includes("rest")){
+ return WebserviceIcon();
+ } else if (labels.includes("search")){
+ return SearchIcon();
+ } else if (labels.includes("blockchain")){
+ return BlockchainIcon();
+ } else if (labels.includes("ai")){
+ return MachineLearningIcon();
+ } else if (labels.includes("rpc")){
+ return RpcIcon();
+ } else {
+ return this.getIconFromSource(camelIcon);
+ }
+ }
+
+ static isElementInternalComponent = (element: CamelElement):boolean => {
+ const uri = (element as any).uri;
+ const component = ComponentApi.findByName(uri);
+ return component !== undefined && CamelUi.isComponentInternal(component.component.label);
+ }
+
+ static isComponentInternal = (label: string):boolean => {
+ const labels = label.split(",");
+ if (labels.includes('core') && (
+ labels.includes('transformation')
+ || labels.includes('testing')
+ || labels.includes('scheduling')
+ || labels.includes('monitoring')
+ || labels.includes('transformation')
+ || labels.includes('java')
+ || labels.includes('endpoint')
+ || labels.includes('script')
+ || labels.includes('validation')
+ )) {
+ return true;
+ } else if (label === 'transformation') {
+ return true;
+ }
+ return false;
+ }
+
static getIconForElement = (element: CamelElement):JSX.Element => {
+ const uri = (element as any).uri;
+ const component = ComponentApi.findByName(uri);
const k: KameletModel | undefined = CamelUtil.getKamelet(element);
- if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
+ if (["FromDefinition", "KameletDefinition"].includes(element.dslName) && k !== undefined) {
return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
+ } else if ("FromDefinition" === element.dslName && component !== undefined && CamelUi.isComponentInternal(component.component.label)) {
+ return this.getIconForComponent(component?.component.title, component?.component.label);
} else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) {
return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
+ } else if (element.dslName === "ToDefinition" && component && CamelUi.isComponentInternal(component.component.label)) {
+ return this.getIconForComponent(component?.component.title, component?.component.label);
} else {
return this.getIconForDslName(element.dslName);
}
@@ -515,7 +701,24 @@ export class CamelUi {
return <img draggable={false} src={src} className="icon" alt="icon"/>
}
- static getConnectionIcon = (element: CamelElement): string => {
+ static getConnectionIcon = (element: CamelElement): JSX.Element => {
+ const k: KameletModel | undefined = CamelUtil.getKamelet(element);
+ const uri = (element as any).uri;
+ const component = ComponentApi.findByName(uri);
+ if (component) {
+ return CamelUi.getIconForComponent(component.component.title, component.component.label);
+ } else if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
+ const icon = k ? k.icon() : externalIcon;
+ return <img src={icon} className="icon"/>
+ } else if (element.dslName === "ToDefinition" && (element as ToDefinition).uri?.startsWith("kamelet:")) {
+ const icon = k ? k.icon() : CamelUi.getIconSrcForName(element.dslName);
+ return <img src={icon} className="icon"/>
+ } else {
+ return <img src={externalIcon} className="icon"/>;
+ }
+ }
+
+ static getConnectionIconString = (element: CamelElement): string => {
const k: KameletModel | undefined = CamelUtil.getKamelet(element);
if (["FromDefinition", "KameletDefinition"].includes(element.dslName)) {
return k ? k.icon() : externalIcon;
@@ -545,8 +748,8 @@ export class CamelUi {
return result;
}
- static getBeans = (integration: Integration): NamedBeanDefinition[] => {
- const result: NamedBeanDefinition[] = [];
+ static getBeans = (integration: Integration): RegistryBeanDefinition[] => {
+ const result: RegistryBeanDefinition[] = [];
const beans = integration.spec.flows?.filter((e: any) => e.dslName === 'Beans');
if (beans && beans.length > 0 && beans[0].beans) {
result.push(...beans[0].beans);
diff --git a/karavan-space/src/designer/utils/KaravanIcons.tsx b/karavan-space/src/designer/utils/KaravanIcons.tsx
index 63bb26db..78991e01 100644
--- a/karavan-space/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-space/src/designer/utils/KaravanIcons.tsx
@@ -180,17 +180,102 @@ export function KaravanIcon(className?: string) {
);
}
+export function CamelIcon(props?: (JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) | undefined) {
+ return (<svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ width={24}
+ height={24}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 0 256 256"
+ {...props}
+ className="icon">
+ <defs>
+ <linearGradient
+ id="b"
+ x1="-12.564%"
+ x2="101.304%"
+ y1="108.214%"
+ y2="-1.964%"
+ >
+ <stop offset="0%" stopColor="#F69923"/>
+ <stop offset="10.996%" stopColor="#F79A23"/>
+ <stop offset="94.502%" stopColor="#E97826"/>
+ </linearGradient>
+ <linearGradient
+ id="d"
+ x1="-12.564%"
+ x2="101.304%"
+ y1="108.214%"
+ y2="-1.964%"
+ >
+ <stop offset="0%" stopColor="#F69923"/>
+ <stop offset="8.048%" stopColor="#F79A23"/>
+ <stop offset="41.874%" stopColor="#E97826"/>
+ </linearGradient>
+ <linearGradient
+ id="e"
+ x1="74.724%"
+ x2="6.653%"
+ y1="-3.059%"
+ y2="100.066%"
+ >
+ <stop offset="0%" stopColor="#F6E423"/>
+ <stop offset="41.191%" stopColor="#F79A23"/>
+ <stop offset="73.271%" stopColor="#E97826"/>
+ </linearGradient>
+ <circle id="a" cx={128} cy={128} r={128}/>
+ </defs>
+ <mask id="c" fill="#fff">
+ <use xlinkHref="#a"/>
+ </mask>
+ <circle
+ cx={127.994}
+ cy={127.994}
+ r={123.111}
+ fill="url(#b)"
+ mask="url(#c)"
+ />
+ <path
+ fill="url(#d)"
+ d="M128 256C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128Zm0-9.768c65.298 0 118.232-52.934 118.232-118.232S193.298 9.768 128 9.768 9.768 62.702 9.768 128 62.702 246.232 128 246.232Z"
+ mask="url(#c)"
+ />
+ <path
+ fill="url(#e)"
+ d="M98.044 75.517c-1.751-.002-3.524.01-5.292.061-2.056.06-4.817.713-8 1.785 53.775 40.834 73.108 114.497 39.875 178.514 1.129.03 2.249.123 3.385.123 60.736 0 111.492-42.323 124.609-99.071-38.542-45.178-90.813-81.314-154.578-81.412Z"
+ mask="url(#c)"
+ opacity={0.75}
+ />
+ <path
+ fill="#28170B"
+ d="M84.752 77.368C66.895 83.378 32.83 104.546.079 132.81c2.487 67.334 57.028 121.313 124.548 123.07 33.233-64.016 13.901-137.68-39.875-178.513Z"
+ mask="url(#c)"
+ opacity={0.75}
+ />
+ <path
+ fill="#FFF"
+ d="M128.747 54.005c-10.985 5.495 0 27.466 0 27.466C95.774 108.954 102.78 155.9 64.312 155.9c-20.97 0-42.242-24.077-64.233-38.828-.283 3.479-.785 6.972-.785 10.524 0 48.095 26.263 89.924 65.42 111.897 10.952-1.38 22.838-4.114 31.05-9.592 43.146-28.765 53.857-83.491 71.487-109.925 10.979-16.492 62.434-15.061 65.906-22.01 5.502-10.991-10.99-27.467-16.491-27.467h-43.958c-3.071 0-7.897-5.456-10.974-5.456h-16.492s-7.307-11.085-13.794-11.526c-.93-.066-1.83.053-2.7.488Z"
+ mask="url(#c)"
+ />
+ </svg>
+ );
+}
+
export function getDesignerIcon(icon: string) {
if (icon === 'routes') return (
<svg className="top-icon" width="32px" height="32px" viewBox="0 0 32 32" id="icon">
<defs>
<style>{".cls-1{fill:none;}"}</style>
</defs>
- <path d="M29,10H24v2h5v6H22v2h3v2.142a4,4,0,1,0,2,0V20h2a2.0027,2.0027,0,0,0,2-2V12A2.0023,2.0023,0,0,0,29,10ZM28,26a2,2,0,1,1-2-2A2.0027,2.0027,0,0,1,28,26Z"/>
- <path d="M19,6H14V8h5v6H12v2h3v6.142a4,4,0,1,0,2,0V16h2a2.0023,2.0023,0,0,0,2-2V8A2.0023,2.0023,0,0,0,19,6ZM18,26a2,2,0,1,1-2-2A2.0027,2.0027,0,0,1,18,26Z"/>
+ <path
+ d="M29,10H24v2h5v6H22v2h3v2.142a4,4,0,1,0,2,0V20h2a2.0027,2.0027,0,0,0,2-2V12A2.0023,2.0023,0,0,0,29,10ZM28,26a2,2,0,1,1-2-2A2.0027,2.0027,0,0,1,28,26Z"/>
+ <path
+ d="M19,6H14V8h5v6H12v2h3v6.142a4,4,0,1,0,2,0V16h2a2.0023,2.0023,0,0,0,2-2V8A2.0023,2.0023,0,0,0,19,6ZM18,26a2,2,0,1,1-2-2A2.0027,2.0027,0,0,1,18,26Z"/>
<path
d="M9,2H3A2.002,2.002,0,0,0,1,4v6a2.002,2.002,0,0,0,2,2H5V22.142a4,4,0,1,0,2,0V12H9a2.002,2.002,0,0,0,2-2V4A2.002,2.002,0,0,0,9,2ZM8,26a2,2,0,1,1-2-2A2.0023,2.0023,0,0,1,8,26ZM3,10V4H9l.0015,6Z"/>
- <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32" height="32"/>
+ <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32"
+ height="32"/>
</svg>)
if (icon === 'rest') return (
<svg className="top-icon" viewBox="0 0 32 32">
@@ -216,7 +301,8 @@ export function getDesignerIcon(icon: string) {
<rect x="4" y="15" width="13" height="2"/>
<path d="M7,11a4,4,0,1,1,4-4A4,4,0,0,1,7,11ZM7,5A2,2,0,1,0,9,7,2,2,0,0,0,7,5Z" transform="translate(0 0)"/>
<path d="M7,29a4,4,0,1,1,4-4A4,4,0,0,1,7,29Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,7,23Z" transform="translate(0 0)"/>
- <path d="M25,20a4,4,0,1,1,4-4A4,4,0,0,1,25,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,25,14Z" transform="translate(0 0)"/>
+ <path d="M25,20a4,4,0,1,1,4-4A4,4,0,0,1,25,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,25,14Z"
+ transform="translate(0 0)"/>
<g id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>">
<rect className="cls-1" width="32" height="32"/>
</g>
@@ -228,20 +314,27 @@ export function getDesignerIcon(icon: string) {
<style>{".cls-1 {fill: none;}"}</style>
</defs>
<title>application</title>
- <path d="M16,18H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H16a2,2,0,0,1,2,2V16A2,2,0,0,1,16,18ZM6,6V16H16V6Z" transform="translate(0 0)"/>
- <path d="M26,12v4H22V12h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V12a2,2,0,0,0-2-2Z" transform="translate(0 0)"/>
- <path d="M26,22v4H22V22h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z" transform="translate(0 0)"/>
- <path d="M16,22v4H12V22h4m0-2H12a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z" transform="translate(0 0)"/>
+ <path d="M16,18H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H16a2,2,0,0,1,2,2V16A2,2,0,0,1,16,18ZM6,6V16H16V6Z"
+ transform="translate(0 0)"/>
+ <path d="M26,12v4H22V12h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V12a2,2,0,0,0-2-2Z"
+ transform="translate(0 0)"/>
+ <path d="M26,22v4H22V22h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z"
+ transform="translate(0 0)"/>
+ <path d="M16,22v4H12V22h4m0-2H12a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z"
+ transform="translate(0 0)"/>
<g id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>">
<rect className="cls-1" width="32" height="32"/>
</g>
</svg>
)
if (icon === 'error') return (
- <svg className="top-icon" width="36px" height="36px" viewBox="0 0 36 36" version="1.1" preserveAspectRatio="xMidYMid meet">
+ <svg className="top-icon" width="36px" height="36px" viewBox="0 0 36 36" version="1.1"
+ preserveAspectRatio="xMidYMid meet">
<circle className="clr-i-outline clr-i-outline-path-1" cx="18" cy="26.06" r="1.33"/>
- <path className="clr-i-outline clr-i-outline-path-2" d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"/>
- <path className="clr-i-outline clr-i-outline-path-3" d="M18,34A16,16,0,1,1,34,18,16,16,0,0,1,18,34ZM18,4A14,14,0,1,0,32,18,14,14,0,0,0,18,4Z"/>
+ <path className="clr-i-outline clr-i-outline-path-2"
+ d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"/>
+ <path className="clr-i-outline clr-i-outline-path-3"
+ d="M18,34A16,16,0,1,1,34,18,16,16,0,0,1,18,34ZM18,4A14,14,0,1,0,32,18,14,14,0,0,0,18,4Z"/>
<rect x="0" y="0" width="36" height="36" fillOpacity="0"/>
</svg>)
if (icon === 'exception') return (
@@ -250,16 +343,20 @@ export function getDesignerIcon(icon: string) {
<style>{".cls-1{fill:none;}"}</style>
</defs>
<title>misuse--alt</title>
- <polygon points="21.41 23 16 17.591 10.59 23 9 21.41 14.409 16 9 10.591 10.591 9 16 14.409 21.409 9 23 10.591 17.591 16 23 21.41 21.41 23"/>
- <path d="M16,4A12,12,0,1,1,4,16,12.0136,12.0136,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z" transform="translate(0)"/>
- <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32" height="32"/>
+ <polygon
+ points="21.41 23 16 17.591 10.59 23 9 21.41 14.409 16 9 10.591 10.591 9 16 14.409 21.409 9 23 10.591 17.591 16 23 21.41 21.41 23"/>
+ <path d="M16,4A12,12,0,1,1,4,16,12.0136,12.0136,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
+ transform="translate(0)"/>
+ <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32"
+ height="32"/>
</svg>)
if (icon === 'routeConfiguration') return (
<svg className="top-icon" width="32" height="32" viewBox="0 0 32 32">
<defs>
<style>{".cls-1{fill:none;}"}</style>
</defs>
- <path d="M28.83 21.17L25 17.37l.67-.67a1 1 0 000-1.41l-6-6a1 1 0 00-1.41 0l-.79.79-6.76-6.79a1 1 0 00-1.41 0l-4 4-.12.15-4 6a1 1 0 00.12 1.26l3 3a1 1 0 001.42 0L10 13.41l2.09 2.09-4.8 4.79a1 1 0 000 1.41l2 2a1 1 0 00.71.3 1 1 0 00.52-.15l4.33-2.6 2.44 2.45a1 1 0 001.41 0l.67-.7 3.79 3.83a4 4 0 005.66-5.66zM10 10.58l-5 5-1.71-1.71 3.49-5.24L10 5.41l6.09 6.09-2.59 2.58zm8 11l-2.84-2.84-5 3-.74-.74L19 11.41 23.59 16zm9.42 3.83a2 2 0 01-2.83 0l-3.8-3.79 2.83-2.83 3.8 3.79a2 2 0 0 [...]
+ <path
+ d="M28.83 21.17L25 17.37l.67-.67a1 1 0 000-1.41l-6-6a1 1 0 00-1.41 0l-.79.79-6.76-6.79a1 1 0 00-1.41 0l-4 4-.12.15-4 6a1 1 0 00.12 1.26l3 3a1 1 0 001.42 0L10 13.41l2.09 2.09-4.8 4.79a1 1 0 000 1.41l2 2a1 1 0 00.71.3 1 1 0 00.52-.15l4.33-2.6 2.44 2.45a1 1 0 001.41 0l.67-.7 3.79 3.83a4 4 0 005.66-5.66zM10 10.58l-5 5-1.71-1.71 3.49-5.24L10 5.41l6.09 6.09-2.59 2.58zm8 11l-2.84-2.84-5 3-.74-.74L19 11.41 23.59 16zm9.42 3.83a2 2 0 01-2.83 0l-3.8-3.79 2.83-2.83 3.8 3.79a2 2 0 010 [...]
<path
d="M0 0H32V32H0z"
className="cls-1"
@@ -286,7 +383,8 @@ export function getDesignerIcon(icon: string) {
<polygon points="31 16 24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16"/>
<polygon points="1 16 8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16"/>
<rect x="5.91" y="15" width="20.17" height="2" transform="translate(-3.6 27.31) rotate(-75)"/>
- <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32" height="32" transform="translate(0 32) rotate(-90)"/>
+ <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32"
+ height="32" transform="translate(0 32) rotate(-90)"/>
</svg>)
}
@@ -303,9 +401,12 @@ export class BeanIcon extends React.Component<any> {
<rect x="15" y="6" width="13" height="2"/>
<rect x="15" y="24" width="13" height="2"/>
<rect x="4" y="15" width="13" height="2"/>
- <path d="M7,11a4,4,0,1,1,4-4A4,4,0,0,1,7,11ZM7,5A2,2,0,1,0,9,7,2,2,0,0,0,7,5Z" transform="translate(0 0)"/>
- <path d="M7,29a4,4,0,1,1,4-4A4,4,0,0,1,7,29Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,7,23Z" transform="translate(0 0)"/>
- <path d="M25,20a4,4,0,1,1,4-4A4,4,0,0,1,25,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,25,14Z" transform="translate(0 0)"/>
+ <path d="M7,11a4,4,0,1,1,4-4A4,4,0,0,1,7,11ZM7,5A2,2,0,1,0,9,7,2,2,0,0,0,7,5Z"
+ transform="translate(0 0)"/>
+ <path d="M7,29a4,4,0,1,1,4-4A4,4,0,0,1,7,29Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,7,23Z"
+ transform="translate(0 0)"/>
+ <path d="M25,20a4,4,0,1,1,4-4A4,4,0,0,1,25,20Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,25,14Z"
+ transform="translate(0 0)"/>
<g id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>">
<rect className="cls-1" width="32" height="32"/>
</g>
@@ -323,10 +424,14 @@ export class DependencyIcon extends React.Component<any> {
<style>{".cls-1 {fill: none;}"}</style>
</defs>
<title>application</title>
- <path d="M16,18H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H16a2,2,0,0,1,2,2V16A2,2,0,0,1,16,18ZM6,6V16H16V6Z" transform="translate(0 0)"/>
- <path d="M26,12v4H22V12h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V12a2,2,0,0,0-2-2Z" transform="translate(0 0)"/>
- <path d="M26,22v4H22V22h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z" transform="translate(0 0)"/>
- <path d="M16,22v4H12V22h4m0-2H12a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z" transform="translate(0 0)"/>
+ <path d="M16,18H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H16a2,2,0,0,1,2,2V16A2,2,0,0,1,16,18ZM6,6V16H16V6Z"
+ transform="translate(0 0)"/>
+ <path d="M26,12v4H22V12h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V12a2,2,0,0,0-2-2Z"
+ transform="translate(0 0)"/>
+ <path d="M26,22v4H22V22h4m0-2H22a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z"
+ transform="translate(0 0)"/>
+ <path d="M16,22v4H12V22h4m0-2H12a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V22a2,2,0,0,0-2-2Z"
+ transform="translate(0 0)"/>
<g id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>">
<rect className="cls-1" width="32" height="32"/>
</g>
@@ -365,7 +470,8 @@ export class ConceptIcon extends React.Component<any> {
<title>concept</title>
<path
d="M20.8851,19.4711a5.9609,5.9609,0,0,0,0-6.9422L23,10.4141l1.293,1.2929a.9995.9995,0,0,0,1.414,0l4-4a.9994.9994,0,0,0,0-1.414l-4-4a.9994.9994,0,0,0-1.414,0l-4,4a.9994.9994,0,0,0,0,1.414L21.5859,9l-2.1148,2.1149a5.9609,5.9609,0,0,0-6.9422,0L10,8.5859V2H2v8H8.5859l2.529,2.5289a5.9609,5.9609,0,0,0,0,6.9422L9,21.5859,7.707,20.293a.9994.9994,0,0,0-1.414,0l-4,4a.9994.9994,0,0,0,0,1.414l4,4a.9995.9995,0,0,0,1.414,0l4-4a.9994.9994,0,0,0,0-1.414L10.4141,23l2.1148-2.1149a5.960 [...]
- <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1" width="32" height="32"/>
+ <rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" className="cls-1"
+ width="32" height="32"/>
</svg>
)
}
@@ -374,12 +480,16 @@ export class ConceptIcon extends React.Component<any> {
export function AggregateIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" className="icon">
- <path d="M496.2 417.71l-130.22 101.1c-.19.14-.39.29-.59.42a28.39 28.39 0 01-30.77 0c-.21-.13-.4-.28-.59-.42L203.8 417.71h292.4z"></path>
- <path d="M516.1 426.23v202.1c0 4.12-3.34 7.46-7.45 7.46H191.36c-4.11 0-7.46-3.34-7.46-7.46V426.22l138.52 107.53c.68.53 1.31.98 1.94 1.38 7.79 5.04 16.72 7.55 25.66 7.55s17.86-2.52 25.66-7.55c.62-.4 1.25-.85 1.94-1.38l138.5-107.52zM247.14 358.45l-12.91 30.22-.03.06v.03c-.11.21-.21.43-.32.64s-.23.42-.36.61c-.08.14-.17.27-.27.4-.08.11-.16.21-.24.31-.1.13-.21.25-.31.36-.08.09-.16.18-.24.25-.05.06-.1.11-.16.15l-.27.25c-.17.15-.33.29-.51.42-.15.13-.3.23-.47.33-.19.13-.39.25-.59.36s [...]
- <path d="M277.46 154.15V264.2c0 5.52-4.48 10-10 10H82.69c-5.52 0-10-4.48-10-10V154.14l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
+ <path
+ d="M496.2 417.71l-130.22 101.1c-.19.14-.39.29-.59.42a28.39 28.39 0 01-30.77 0c-.21-.13-.4-.28-.59-.42L203.8 417.71h292.4z"></path>
+ <path
+ d="M516.1 426.23v202.1c0 4.12-3.34 7.46-7.45 7.46H191.36c-4.11 0-7.46-3.34-7.46-7.46V426.22l138.52 107.53c.68.53 1.31.98 1.94 1.38 7.79 5.04 16.72 7.55 25.66 7.55s17.86-2.52 25.66-7.55c.62-.4 1.25-.85 1.94-1.38l138.5-107.52zM247.14 358.45l-12.91 30.22-.03.06v.03c-.11.21-.21.43-.32.64s-.23.42-.36.61c-.08.14-.17.27-.27.4-.08.11-.16.21-.24.31-.1.13-.21.25-.31.36-.08.09-.16.18-.24.25-.05.06-.1.11-.16.15l-.27.25c-.17.15-.33.29-.51.42-.15.13-.3.23-.47.33-.19.13-.39.25-.59.36s-. [...]
+ <path
+ d="M277.46 154.15V264.2c0 5.52-4.48 10-10 10H82.69c-5.52 0-10-4.48-10-10V154.14l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
<g>
<path d="M610.57 145.6l-76.07 57.24c-5.52 4.16-13.24 4.16-18.76 0l-76.08-57.24h170.91z"></path>
- <path d="M627.5 154.15V264.2c0 5.52-4.48 10-10 10H432.73c-5.52 0-10-4.48-10-10V154.14l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
+ <path
+ d="M627.5 154.15V264.2c0 5.52-4.48 10-10 10H432.73c-5.52 0-10-4.48-10-10V154.14l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
</g>
</svg>
);
@@ -388,7 +498,8 @@ export function AggregateIcon() {
export function ChoiceIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" className="icon">
- <path d="M407.33 113.97V609.2c0 2.75-1.9 5-4.22 5H291.55c-2.33 0-4.22-2.25-4.22-5V113.97c0-2.76 1.89-5 4.22-5h111.56c2.32 0 4.22 2.24 4.22 5zM27.1 437.55l60.87-57.64c.95-.9 2.32-1.41 3.76-1.41H258.2c2.76 0 5 1.87 5 4.17v111.65c0 2.3-2.24 4.17-5 4.17H91.54c-1.38 0-2.7-.48-3.65-1.32L27.2 443.15c-1.77-1.58-1.81-3.99-.1-5.61zM667.57 285.62l-60.87 57.64c-.95.9-2.32 1.41-3.76 1.41H436.47c-2.76 0-5-1.87-5-4.17V228.85c0-2.3 2.24-4.17 5-4.17h166.66c1.38 0 2.7.48 3.65 1.32l60.69 54.02c [...]
+ <path
+ d="M407.33 113.97V609.2c0 2.75-1.9 5-4.22 5H291.55c-2.33 0-4.22-2.25-4.22-5V113.97c0-2.76 1.89-5 4.22-5h111.56c2.32 0 4.22 2.24 4.22 5zM27.1 437.55l60.87-57.64c.95-.9 2.32-1.41 3.76-1.41H258.2c2.76 0 5 1.87 5 4.17v111.65c0 2.3-2.24 4.17-5 4.17H91.54c-1.38 0-2.7-.48-3.65-1.32L27.2 443.15c-1.77-1.58-1.81-3.99-.1-5.61zM667.57 285.62l-60.87 57.64c-.95.9-2.32 1.41-3.76 1.41H436.47c-2.76 0-5-1.87-5-4.17V228.85c0-2.3 2.24-4.17 5-4.17h166.66c1.38 0 2.7.48 3.65 1.32l60.69 54.02c1. [...]
</svg>
);
}
@@ -397,12 +508,16 @@ export function ChoiceIcon() {
export function SplitIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" className="icon">
- <path d="M496.2 83.65l-130.22 101.1c-.19.14-.39.29-.59.42a28.39 28.39 0 01-30.77 0c-.21-.13-.4-.28-.59-.42L203.8 83.65h292.4z"></path>
- <path d="M516.1 92.17v202.1c0 4.12-3.34 7.46-7.45 7.46H191.36c-4.11 0-7.46-3.34-7.46-7.46V92.16l138.52 107.53c.68.53 1.31.98 1.94 1.38 7.79 5.04 16.72 7.55 25.66 7.55s17.86-2.52 25.66-7.55c.62-.4 1.25-.85 1.94-1.38l138.5-107.52zM524.34 397.22l-12.91 30.22-.03.06v.03c-.11.21-.21.43-.32.64s-.23.42-.36.61c-.08.14-.17.27-.27.4-.08.11-.16.21-.24.31-.1.13-.21.25-.31.36-.08.09-.16.18-.24.25-.05.06-.1.11-.16.15l-.27.25c-.17.15-.33.29-.51.42-.15.13-.3.23-.47.33-.19.13-.39.25-.59.36s-. [...]
- <path d="M277.36 476.26v110.05c0 5.52-4.48 10-10 10H82.59c-5.52 0-10-4.48-10-10V476.25l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
+ <path
+ d="M496.2 83.65l-130.22 101.1c-.19.14-.39.29-.59.42a28.39 28.39 0 01-30.77 0c-.21-.13-.4-.28-.59-.42L203.8 83.65h292.4z"></path>
+ <path
+ d="M516.1 92.17v202.1c0 4.12-3.34 7.46-7.45 7.46H191.36c-4.11 0-7.46-3.34-7.46-7.46V92.16l138.52 107.53c.68.53 1.31.98 1.94 1.38 7.79 5.04 16.72 7.55 25.66 7.55s17.86-2.52 25.66-7.55c.62-.4 1.25-.85 1.94-1.38l138.5-107.52zM524.34 397.22l-12.91 30.22-.03.06v.03c-.11.21-.21.43-.32.64s-.23.42-.36.61c-.08.14-.17.27-.27.4-.08.11-.16.21-.24.31-.1.13-.21.25-.31.36-.08.09-.16.18-.24.25-.05.06-.1.11-.16.15l-.27.25c-.17.15-.33.29-.51.42-.15.13-.3.23-.47.33-.19.13-.39.25-.59.36s-.42 [...]
+ <path
+ d="M277.36 476.26v110.05c0 5.52-4.48 10-10 10H82.59c-5.52 0-10-4.48-10-10V476.25l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
<g>
<path d="M610.48 467.71l-76.07 57.24c-5.52 4.16-13.24 4.16-18.76 0l-76.08-57.24h170.91z"></path>
- <path d="M627.41 476.26v110.05c0 5.52-4.48 10-10 10H432.64c-5.52 0-10-4.48-10-10V476.25l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
+ <path
+ d="M627.41 476.26v110.05c0 5.52-4.48 10-10 10H432.64c-5.52 0-10-4.48-10-10V476.25l82.79 62.29c5.77 4.34 12.69 6.51 19.6 6.51s13.83-2.17 19.6-6.51l82.78-62.28z"></path>
</g>
</svg>
);
@@ -411,7 +526,8 @@ export function SplitIcon() {
export function SagaIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" className="icon">
- <path d="M626.41 255.77c-.56-4.77-2.95-9.03-6.71-11.99l-46.46-36.64-1.06-1.09-.8-.28c-.81-.52-1.67-.98-2.56-1.36-.43-.19-.85-.36-1.25-.5-.47-.16-.96-.31-1.51-.45-.47-.11-.96-.22-1.45-.3-.49-.08-.97-.14-1.43-.18-.96-.08-1.95-.08-2.91-.01-.41.03-.83.08-1.23.14-.41.06-.82.14-1.25.23l-.58.14c-.1.03-.2.05-.31.08-.11.03-.21.06-.3.09-.29.08-.57.18-.86.28-.49.17-.99.37-1.53.61l-.16.08c-.32.15-.65.31-.97.49-.49.26-.93.53-1.34.81-.39.26-.76.52-1.12.8l-46.96 37.05a17.823 17.823 0 00-6.7 [...]
+ <path
+ d="M626.41 255.77c-.56-4.77-2.95-9.03-6.71-11.99l-46.46-36.64-1.06-1.09-.8-.28c-.81-.52-1.67-.98-2.56-1.36-.43-.19-.85-.36-1.25-.5-.47-.16-.96-.31-1.51-.45-.47-.11-.96-.22-1.45-.3-.49-.08-.97-.14-1.43-.18-.96-.08-1.95-.08-2.91-.01-.41.03-.83.08-1.23.14-.41.06-.82.14-1.25.23l-.58.14c-.1.03-.2.05-.31.08-.11.03-.21.06-.3.09-.29.08-.57.18-.86.28-.49.17-.99.37-1.53.61l-.16.08c-.32.15-.65.31-.97.49-.49.26-.93.53-1.34.81-.39.26-.76.52-1.12.8l-46.96 37.05a17.823 17.823 0 00-6.72 [...]
</svg>
);
}
@@ -419,8 +535,10 @@ export function SagaIcon() {
export function TransformIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" className="icon">
- <path d="M441.77 277.51l-82.73 64.23c-.07.05-.13.09-.19.13-5.37 3.48-12.33 3.48-17.69.01-.07-.05-.13-.09-.18-.13l-82.76-64.24h183.54z"></path>
- <path d="M462.2 287.02V420.7c0 .98-.79 1.77-1.77 1.77H239.57c-.98 0-1.77-.79-1.77-1.77V287.02l90.91 70.56c.54.44 1.06.8 1.57 1.12 5.99 3.88 12.86 5.81 19.72 5.81s13.73-1.94 19.73-5.81c.49-.32 1.01-.68 1.58-1.13l90.89-70.55zM622.28 330.68l-35.89 31.78a1.48 1.48 0 01-1.98 0l-35.89-31.78c-.3-.26-.48-.63-.51-1.03-.02-.4.11-.79.38-1.09l11.28-12.73c.55-.61 1.49-.67 2.11-.12l12.44 11.02c-5.24-51.26-28.18-99.47-64.84-136.12-35.82-35.82-81.13-58.05-131.04-64.27-.1 0-.19-.03-.28-.06v.0 [...]
+ <path
+ d="M441.77 277.51l-82.73 64.23c-.07.05-.13.09-.19.13-5.37 3.48-12.33 3.48-17.69.01-.07-.05-.13-.09-.18-.13l-82.76-64.24h183.54z"></path>
+ <path
+ d="M462.2 287.02V420.7c0 .98-.79 1.77-1.77 1.77H239.57c-.98 0-1.77-.79-1.77-1.77V287.02l90.91 70.56c.54.44 1.06.8 1.57 1.12 5.99 3.88 12.86 5.81 19.72 5.81s13.73-1.94 19.73-5.81c.49-.32 1.01-.68 1.58-1.13l90.89-70.55zM622.28 330.68l-35.89 31.78a1.48 1.48 0 01-1.98 0l-35.89-31.78c-.3-.26-.48-.63-.51-1.03-.02-.4.11-.79.38-1.09l11.28-12.73c.55-.61 1.49-.67 2.11-.12l12.44 11.02c-5.24-51.26-28.18-99.47-64.84-136.12-35.82-35.82-81.13-58.05-131.04-64.27-.1 0-.19-.03-.28-.06v.09s [...]
</svg>
);
}
@@ -428,7 +546,8 @@ export function TransformIcon() {
export function FilterIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 700 700" className="icon">
- <path d="M565.62 156.56L413.36 350.33a10.032 10.032 0 00-2.14 6.18v190.52c0 19.05-25.01 34.49-55.86 34.49s-55.86-15.44-55.86-34.49V356.51c0-2.24-.75-4.42-2.14-6.18L145.1 156.56c-5.15-6.56-.48-16.18 7.87-16.18h404.79c8.34 0 13.02 9.62 7.86 16.18z"></path>
+ <path
+ d="M565.62 156.56L413.36 350.33a10.032 10.032 0 00-2.14 6.18v190.52c0 19.05-25.01 34.49-55.86 34.49s-55.86-15.44-55.86-34.49V356.51c0-2.24-.75-4.42-2.14-6.18L145.1 156.56c-5.15-6.56-.48-16.18 7.87-16.18h404.79c8.34 0 13.02 9.62 7.86 16.18z"></path>
</svg>
);
}
@@ -489,7 +608,8 @@ export function Intercept() {
<style>{".cls-1 { fill: none; }"}</style>
</defs>
<path d="M15 4H17V28H15z"></path>
- <path d="M10 7v18H4V7h6m0-2H4a2 2 0 00-2 2v18a2 2 0 002 2h6a2 2 0 002-2V7a2 2 0 00-2-2zM28 7v18h-6V7h6m0-2h-6a2 2 0 00-2 2v18a2 2 0 002 2h6a2 2 0 002-2V7a2 2 0 00-2-2z"></path>
+ <path
+ d="M10 7v18H4V7h6m0-2H4a2 2 0 00-2 2v18a2 2 0 002 2h6a2 2 0 002-2V7a2 2 0 00-2-2zM28 7v18h-6V7h6m0-2h-6a2 2 0 00-2 2v18a2 2 0 002 2h6a2 2 0 002-2V7a2 2 0 00-2-2z"></path>
<path
id="_Transparent_Rectangle_"
d="M0 0H32V32H0z"
@@ -536,8 +656,10 @@ export function InterceptSendToEndpoint() {
<defs>
<style>{".cls-1 { fill: none; }"}</style>
</defs>
- <path d="M6 30h12a2.002 2.002 0 002-2v-3h-2v3H6V4h12v3h2V4a2.002 2.002 0 00-2-2H6a2.002 2.002 0 00-2 2v24a2.002 2.002 0 002 2z"></path>
- <path d="M20.586 20.586L24.172 17 10 17 10 15 24.172 15 20.586 11.414 22 10 28 16 22 22 20.586 20.586z"></path>
+ <path
+ d="M6 30h12a2.002 2.002 0 002-2v-3h-2v3H6V4h12v3h2V4a2.002 2.002 0 00-2-2H6a2.002 2.002 0 00-2 2v24a2.002 2.002 0 002 2z"></path>
+ <path
+ d="M20.586 20.586L24.172 17 10 17 10 15 24.172 15 20.586 11.414 22 10 28 16 22 22 20.586 20.586z"></path>
<path
id="_Transparent_Rectangle_"
d="M0 0H32V32H0z"
@@ -553,8 +675,8 @@ export function SpringIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
- width="32"
- height="32"
+ width="24"
+ height="24"
viewBox="0 0 32 32"
className="icon">
<g fill="none" fillRule="evenodd">
@@ -572,8 +694,8 @@ export function QuarkusIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
- width="257"
- height="257"
+ width="24"
+ height="24"
preserveAspectRatio="xMidYMid"
viewBox="-0.5 0 257 257"
className="icon">
@@ -591,4 +713,1103 @@ export function QuarkusIcon() {
></path>
</svg>
);
-}
\ No newline at end of file
+}
+
+export function DatabaseIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="800"
+ height="800"
+ viewBox="0 0 24 24"
+ className="icon">
+ <path
+ fillRule="evenodd"
+ d="M12 1.25c-2.487 0-4.774.402-6.466 1.079-.844.337-1.577.758-2.112 1.264C2.886 4.1 2.5 4.744 2.5 5.5v12.987l.026.013H2.5c0 .756.386 1.4.922 1.907.535.506 1.268.927 2.112 1.264 1.692.677 3.979 1.079 6.466 1.079s4.773-.402 6.466-1.079c.844-.337 1.577-.758 2.112-1.264.536-.507.922-1.151.922-1.907h-.026l.026-.013V5.5c0-.756-.386-1.4-.922-1.907-.535-.506-1.268-.927-2.112-1.264C16.773 1.652 14.487 1.25 12 1.25zM4 5.5c0-.21.104-.487.453-.817.35-.332.899-.666 1.638-.962C7.566 3. [...]
+ ></path>
+ </svg>
+ );
+}
+
+export function CloudIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path
+ d="M16 7a7.66 7.66 0 0 1 1.51.15 8 8 0 0 1 6.35 6.34l.26 1.35 1.35.24a5.5 5.5 0 0 1-1 10.92H7.5a5.5 5.5 0 0 1-1-10.92l1.34-.24.26-1.35A8 8 0 0 1 16 7m0-2a10 10 0 0 0-9.83 8.12A7.5 7.5 0 0 0 7.49 28h17a7.5 7.5 0 0 0 1.32-14.88 10 10 0 0 0-7.94-7.94A10.27 10.27 0 0 0 16 5Z"/>
+ <path
+ d="M0 0h32v32H0z"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
+export function FileIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"document"}</title>
+ <path
+ d="m25.7 9.3-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z"/>
+ <path d="M10 22h12v2H10zM10 16h12v2H10z"/>
+ <path
+ d="M0 0h32v32H0z"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
+export function MessagingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M28 28H4a2.002 2.002 0 0 1-2-2v-5h2v5h24v-5h2v5a2.002 2.002 0 0 1-2 2Z"/>
+ <path d="M7 21h18v2H7zM7 16h18v2H7zM7 11h18v2H7zM7 6h18v2H7z"/>
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function SchedulingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z" />
+ <path d="M20.59 22 15 16.41V7h2v8.58l5 5.01L20.59 22z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
+export function HttpIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2Zm-3 5v-3h3l.001 3ZM10 13h2v8h2v-8h2v-2h-6v2zM23 11h-6v2h2v8h2v-8h2v-2zM6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function GoogleCloudIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -25 256 256"
+ className="icon">
+ <path
+ fill="#EA4335"
+ d="m170.252 56.819 22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39Z"
+ />
+ <path
+ fill="#4285F4"
+ d="M224.205 73.918a100.249 100.249 0 0 0-30.217-48.722l-31.232 31.232a55.515 55.515 0 0 1 20.379 44.037v5.544c15.35 0 27.797 12.445 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 0 0-31.793-60.453"
+ />
+ <path
+ fill="#34A853"
+ d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 0 1-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"
+ />
+ <path
+ fill="#FBBC05"
+ d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.159a72.301 72.301 0 0 0 28.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0 1 13.887 13.888l32.248-32.248A72.224 72.224 0 0 0 71.87 61.425"
+ />
+ </svg>
+ );
+}
+export function AwsIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ fill="none"
+ viewBox="0 0 16 16"
+ className="icon">
+ <path
+ fill="#252F3E"
+ d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 0 1 .037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 0 1-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 0 1-.192-.251 4.137 4.137 0 0 1-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.37 [...]
+ />
+ <g fill="#F90" fillRule="evenodd" clipRule="evenodd">
+ <path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" />
+ <path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z" />
+ </g>
+ </svg>
+ );
+}
+export function MailIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"email"}</title>
+ <path d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm-2.2 2L16 14.78 6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function IotIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"iot--platform"}</title>
+ <path d="M30 19h-4v-4h-2v9H8V8h9V6h-4V2h-2v4H8a2.002 2.002 0 0 0-2 2v3H2v2h4v6H2v2h4v3a2.002 2.002 0 0 0 2 2h3v4h2v-4h6v4h2v-4h3a2.003 2.003 0 0 0 2-2v-3h4Z" />
+ <path d="M21 21H11V11h10Zm-8-2h6v-6h-6ZM31 13h-2A10.012 10.012 0 0 0 19 3V1a12.013 12.013 0 0 1 12 12Z" />
+ <path d="M26 13h-2a5.006 5.006 0 0 0-5-5V6a7.008 7.008 0 0 1 7 7Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function GithubIcon() {
+ return (
+ <svg
+ width={32}
+ height={32}
+ aria-hidden="true"
+ data-view-component="true"
+ viewBox="0 0 16 16"
+ className="icon">
+ <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16. [...]
+ </svg>
+ );
+}
+export function GrapeIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ viewBox="0 0 512 512"
+ className="icon">
+ <path
+ d="M438.557 512H19.785c-8.216 0-14.876-6.66-14.876-14.876V256.916c0-8.216 6.66-14.876 14.876-14.876s14.876 6.66 14.876 14.876v225.332h389.021v-32.833c0-8.216 6.661-14.876 14.876-14.876s14.876 6.66 14.876 14.876v47.709c-.001 8.216-6.662 14.876-14.877 14.876z"
+ style={{
+ fill: "#2d527c",
+ }}
+ />
+ <path
+ d="M19.785 177.122v-4.79L175.581 14.876v162.246zM196.154 219.435h296.061v163.65H196.154z"
+ style={{
+ fill: "#cee8fa",
+ }}
+ />
+ <path
+ d="M492.215 204.559h-38.782V14.876C453.433 6.66 446.772 0 438.557 0H175.581c-.182 0-.361.021-.543.027a14.949 14.949 0 0 0-2.41.269c-.018.003-.036.01-.054.013-.613.126-1.211.302-1.8.504-.158.054-.315.11-.472.171-.58.22-1.148.466-1.697.756-.024.012-.048.021-.071.034-.567.305-1.105.66-1.63 1.037a10.84 10.84 0 0 0-.403.302c-.521.402-1.026.827-1.495 1.3L9.21 161.868c-.35.353-.678.721-.988 1.104-.207.254-.388.521-.576.784-.092.131-.195.256-.283.388a15.3 15.3 0 0 0-.592.998c-.04 [...]
+ style={{
+ fill: "#2d527c",
+ }}
+ />
+ <path
+ d="M265.4 270.343c-3.927 0-6.153-4.188-6.153-9.031 0-4.189 1.831-8.771 6.153-8.771h22.907c4.451 0 8.902 2.095 8.902 6.285v59.298c0 22.516-14.269 30.894-31.418 30.894-18.718 0-32.857-9.949-32.857-27.36 0-7.854 3.273-9.687 10.342-9.687 5.236 0 9.687 1.309 10.078 6.153.393 5.105 1.047 13.091 11.521 13.091 7.593 0 11.913-4.188 11.913-13.091v-47.78H265.4v-.001zM304.411 339.854c0-.393.131-.916.262-1.44l24.349-79.853c1.44-4.58 7.331-6.806 13.353-6.806s11.913 2.225 13.353 6.806l2 [...]
+ style={{
+ fill: "#2d527c",
+ }}
+ />
+ </svg>
+ );
+}
+export function MachineLearningIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A2.966 2.966 0 0 0 24 27a3 3 0 1 0 3-3Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 13a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 2a3.003 3.003 0 0 0-3 3 2.966 2.966 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z" />
+ <path d="M18 6h2V4h-2a3.976 3.976 0 0 0-3 1.382A3.976 3.976 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.976 3.976 0 0 0 3-1.382A3.976 3.976 0 0 0 18 28h2v-2h-2a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2Zm-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2.002 2.002 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2.002 2.002 0 0 1-2 2Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function TerminalIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"terminal"}</title>
+ <path d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2Zm0 2v4H6v-4Zm-20 20v-14h20v14Z" />
+ <path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41 4.24-4.24-4.24-4.24-1.41 1.41z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function SapIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 1024 1024"
+ className="icon">
+ <circle
+ cx={512}
+ cy={512}
+ r={512}
+ style={{
+ fill: "#007cc5",
+ }}
+ />
+ <path
+ d="M256 359.88v304.24h310.82L871 359.88zm83.62 56.58h.14c22.11 0 49.06 6.29 68.56 16.22l-21 36.64C365.92 459 355.17 458 343 457.36c-18.14-1-27.26 5.51-27.4 12.5-.18 8.52 17.13 16.23 33.45 21.47 24.7 7.85 56.1 18.33 60.9 48.7l45.15-119.36h52.45l52.88 142.91-.2-142.86H621c57.84 0 85 19.58 85 64.53 0 40.36-28 64.42-75.25 64.42h-19.56l-.19 53.69-92-.09-6.38-23.27a101.65 101.65 0 0 1-31.56 4.83 100.52 100.52 0 0 1-32.32-5.12l-9.19 23.54-51.25.16 2.3-11.84c-.73.64-1.43 1.29-2.2 [...]
+ style={{
+ fill: "#fff",
+ }}
+ />
+ </svg>
+ );
+}
+export function ScriptIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"script"}</title>
+ <path d="m18.83 26 2.58-2.58L20 22l-4 4 4 4 1.42-1.41L18.83 26zM27.17 26l-2.58 2.58L26 30l4-4-4-4-1.42 1.41L27.17 26z" />
+ <path d="M14 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h6Zm4-23.6 5.6 5.6H18Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ValidationIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="m22 27.18-2.59-2.59L18 26l4 4 8-8-1.41-1.41L22 27.18z" />
+ <path d="M15 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h7Zm3-23.6 5.6 5.6H18Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function OpenstackIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -2.5 256 256"
+ className="icon">
+ <path
+ fill="#DA1A32"
+ d="M57.82 170.723v9.156c0 7.104 5.756 12.86 12.86 12.86h114.65c7.104 0 12.86-5.756 12.86-12.86v-9.156H256v56.051c0 13.082-10.703 23.785-23.785 23.785H23.785C10.703 250.559 0 239.856 0 226.774v-56.051h57.82Zm-.01-74.353v57.809H0v-57.81h57.81Zm198.19 0v57.809h-57.81v-57.81H256ZM232.215 0C245.297 0 256 10.703 256 23.795v56.041h-57.81V70.68c0-7.104-5.756-12.86-12.86-12.86H70.67c-7.104 0-12.86 5.756-12.86 12.86v9.156H0V23.785C0 10.703 10.703 0 23.785 0Z"
+ />
+ </svg>
+ );
+}
+export function OpenshiftIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -9.5 256 256"
+ className="icon">
+ <path
+ fill="#DA2430"
+ d="m74.84 106.893-40.869 14.87c.525 6.552 1.652 13.024 3.24 19.366l38.818-14.137c-1.244-6.552-1.689-13.32-1.18-20.1M255.444 61.702c-2.85-5.879-6.147-11.561-9.966-16.916l-40.857 14.87c4.755 4.864 8.743 10.33 12.007 16.176L255.445 61.7v.002Z"
+ />
+ <path
+ fill="#DA2430"
+ d="M182.95 61.461c-5.14-4.46-10.946-8.31-17.408-11.324h-.003C127.6 32.449 82.33 48.905 64.642 86.859a73.976 73.976 0 0 0-2.653 6.487c-2.208 6.423-3.498 12.99-3.991 19.546l-.144.054-.011.144-24.596 8.95-15.826 5.849-.007-.088-.434.158c-1.536-19.435 1.74-39.512 10.553-58.411a117.952 117.952 0 0 1 3.687-7.246c29.054-54.116 95.164-76.736 150.918-50.33a115.314 115.314 0 0 1 30.557 21.074 116.597 116.597 0 0 1 15.78 17.94L187.618 65.86a79.69 79.69 0 0 0-.635-.641l-.113.041a78.6 [...]
+ />
+ <path
+ fill="#E82429"
+ d="m19.261 193.896-.064.024A118.404 118.404 0 0 1 .939 154.347l38.825-14.14.002.003.024.125.252-.093.006.015c1.994 10.56 6.145 20.635 12.198 29.494a75.287 75.287 0 0 0 7.722 9.326l-.154.057.294.308-40.488 14.97c-.12-.171-.24-.343-.359-.516Z"
+ />
+ <path
+ fill="#DA2430"
+ d="M173.465 183.447c-21.051 13.017-48.053 15.532-72.113 4.312a75.139 75.139 0 0 1-22.118-15.695l-40.772 14.844.313.437-.02.008c11.21 16.016 26.502 29.404 45.266 38.298 40.47 19.163 86.387 12.501 119.634-13.284 14.888-11.152 27.317-26.016 35.713-44.02 8.819-18.895 12.076-38.964 10.515-58.384l-1.136.414c-.015-.208-.03-.416-.047-.624l-40.49 14.957.002.004a76.457 76.457 0 0 1-6.806 26.46c-6.315 13.753-16.164 24.708-27.94 32.273Z"
+ />
+ <path
+ fill="#E82429"
+ d="m218.552 75.13.607-.222v-.001a117.732 117.732 0 0 1 11.454 42.055l-40.773 14.834.022-.304-.77.285c1.11-15.088-2.275-30.093-9.435-43.123l38.548-14.25.002-.004c.116.243.231.486.345.73Z"
+ />
+ <path
+ fill="#C22035"
+ d="M74.89 106.654 34.31 121.65c.52 6.61 1.64 13.136 3.219 19.532l38.546-14.258c-1.247-6.622-1.695-13.438-1.169-20.274M254.227 61.083c-2.83-5.929-6.106-11.658-9.898-17.059L203.76 59.02c4.72 4.906 8.68 10.418 11.92 16.315l38.542-14.256.006.004Z"
+ />
+ <path
+ fill="#AC223B"
+ d="m34.308 121.653 40.482-14.829-.165 8.133-39.056 14.749-1.266-8.063.005.01ZM203.766 58.897l41.113-14.108 4.273 6.449-39.946 14.121-5.434-6.465-.006.003Z"
+ />
+ <path
+ fill="#B92135"
+ d="m38.764 187.201 40.53-14.749 12.258 11.565-42.503 15.956-10.283-12.776-.002.004ZM249.38 109.862l-41.165 14.844-3.032 16.478 43.892-15.643.311-15.677-.005-.002Z"
+ />
+ </svg>
+ );
+}
+export function RefIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M4 20v2h4.586L2 28.586 3.414 30 10 23.414V28h2v-8H4zM30 30h-8v-8h8Zm-6-2h4v-4h-4ZM20 20h-8v-8h8Zm-6-2h4v-4h-4Z" />
+ <path d="M24 17h-2v-2h2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12ZM10 10H2V2h8ZM4 8h4V4H4Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function RedisIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 -18 256 256"
+ className="icon">
+ <path
+ fill="#912626"
+ d="M245.97 168.943c-13.662 7.121-84.434 36.22-99.501 44.075-15.067 7.856-23.437 7.78-35.34 2.09-11.902-5.69-87.216-36.112-100.783-42.597C3.566 169.271 0 166.535 0 163.951v-25.876s98.05-21.345 113.879-27.024c15.828-5.679 21.32-5.884 34.79-.95 13.472 4.936 94.018 19.468 107.331 24.344l-.006 25.51c.002 2.558-3.07 5.364-10.024 8.988"
+ />
+ <path
+ fill="#C6302B"
+ d="M245.965 143.22c-13.661 7.118-84.431 36.218-99.498 44.072-15.066 7.857-23.436 7.78-35.338 2.09-11.903-5.686-87.214-36.113-100.78-42.594-13.566-6.485-13.85-10.948-.524-16.166 13.326-5.22 88.224-34.605 104.055-40.284 15.828-5.677 21.319-5.884 34.789-.948 13.471 4.934 83.819 32.935 97.13 37.81 13.316 4.881 13.827 8.9.166 16.02"
+ />
+ <path
+ fill="#912626"
+ d="M245.97 127.074c-13.662 7.122-84.434 36.22-99.501 44.078-15.067 7.853-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.112-100.783-42.597C3.566 127.402 0 124.67 0 122.085V96.206s98.05-21.344 113.879-27.023c15.828-5.679 21.32-5.885 34.79-.95C162.142 73.168 242.688 87.697 256 92.574l-.006 25.513c.002 2.557-3.07 5.363-10.024 8.987"
+ />
+ <path
+ fill="#C6302B"
+ d="M245.965 101.351c-13.661 7.12-84.431 36.218-99.498 44.075-15.066 7.854-23.436 7.777-35.338 2.087-11.903-5.686-87.214-36.112-100.78-42.594-13.566-6.483-13.85-10.947-.524-16.167C23.151 83.535 98.05 54.148 113.88 48.47c15.828-5.678 21.319-5.884 34.789-.949 13.471 4.934 83.819 32.933 97.13 37.81 13.316 4.88 13.827 8.9.166 16.02"
+ />
+ <path
+ fill="#912626"
+ d="M245.97 83.653c-13.662 7.12-84.434 36.22-99.501 44.078-15.067 7.854-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.113-100.783-42.595C3.566 83.98 0 81.247 0 78.665v-25.88s98.05-21.343 113.879-27.021c15.828-5.68 21.32-5.884 34.79-.95C162.142 29.749 242.688 44.278 256 49.155l-.006 25.512c.002 2.555-3.07 5.361-10.024 8.986"
+ />
+ <path
+ fill="#C6302B"
+ d="M245.965 57.93c-13.661 7.12-84.431 36.22-99.498 44.074-15.066 7.854-23.436 7.777-35.338 2.09C99.227 98.404 23.915 67.98 10.35 61.497-3.217 55.015-3.5 50.55 9.825 45.331 23.151 40.113 98.05 10.73 113.88 5.05c15.828-5.679 21.319-5.883 34.789-.948 13.471 4.935 83.819 32.934 97.13 37.811 13.316 4.876 13.827 8.897.166 16.017"
+ />
+ <path
+ fill="#FFF"
+ d="m159.283 32.757-22.01 2.285-4.927 11.856-7.958-13.23-25.415-2.284 18.964-6.839-5.69-10.498 17.755 6.944 16.738-5.48-4.524 10.855 17.067 6.391M131.032 90.275 89.955 73.238l58.86-9.035-17.783 26.072M74.082 39.347c17.375 0 31.46 5.46 31.46 12.194 0 6.736-14.085 12.195-31.46 12.195s-31.46-5.46-31.46-12.195c0-6.734 14.085-12.194 31.46-12.194"
+ />
+ <path
+ fill="#621B1C"
+ d="m185.295 35.998 34.836 13.766-34.806 13.753-.03-27.52"
+ />
+ <path
+ fill="#9A2928"
+ d="m146.755 51.243 38.54-15.245.03 27.519-3.779 1.478-34.791-13.752"
+ />
+ </svg>
+ );
+}
+export function SearchIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function BlockchainIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"blockchain"}</title>
+ <path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ChatIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"chat"}</title>
+ <path d="M17.74 30 16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z" />
+ <path d="M8 10h16v2H8zM8 16h10v2H8z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function WorkflowIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ width={800}
+ height={800}
+ viewBox="0 0 512 512"
+ className="icon">
+ <path d="M445.66 49.341H340.206L294.008 3.143c-4.192-4.191-10.99-4.191-15.183 0l-49.341 49.342c-4.192 4.192-4.192 10.99 0 15.183l46.198 46.198v38.494h-80.516c-5.929 0-10.736 4.806-10.736 10.735v21.471h-42.942v-21.471c0-5.929-4.806-10.735-10.736-10.735H66.34c-5.929 0-10.735 4.806-10.735 10.735v64.413c0 5.929 4.806 10.735 10.735 10.735h20.755v93.798c0 5.929 4.806 10.736 10.735 10.736h95.437l-10.346 10.346c-4.192 4.192-4.193 10.99 0 15.182a10.7 10.7 0 0 0 7.591 3.144c2.747 0 5.4 [...]
+ </svg>
+ );
+}
+export function WebserviceIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"fog"}</title>
+ <path d="M25.829 13.116A10.02 10.02 0 0 0 16 5v2a8.023 8.023 0 0 1 7.865 6.493l.259 1.346 1.349.245A5.502 5.502 0 0 1 24.508 26H16v2h8.508a7.502 7.502 0 0 0 1.32-14.884ZM8 24h6v2H8zM4 24h2v2H4zM6 20h8v2H6zM2 20h2v2H2zM8 16h6v2H8zM4 16h2v2H4zM10 12h4v2h-4zM6 12h2v2H6zM12 8h2v2h-2z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function MobileIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M23 7h4v4h-4zM23 13h4v4h-4zM17 7h4v4h-4zM17 13h4v4h-4z" />
+ <circle cx={14.5} cy={24.5} r={1.5} />
+ <path d="M21 30H8a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h13v2H8v24h13v-8h2v8a2.002 2.002 0 0 1-2 2Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ClusterIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M16 7a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM11 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM7 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM21 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM25 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM4 21a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 [...]
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function RpcIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="m14 26 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function InfinispanIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ id="artwork"
+ viewBox="0 0 1024 1024"
+ className="icon">
+ <defs>
+ <style>{".cls-2{fill:#fff}"}</style>
+ </defs>
+ <path
+ d="M1 1h1022v1022H1z"
+ style={{
+ fill: "#599fc6",
+ }}
+ />
+ <path
+ d="M566.84 512c0-221.39-179.47-400.86-400.86-400.86v109.68c160.56 0 291.18 130.62 291.18 291.18 0 221.39 179.47 400.86 400.86 400.86V803.18c-160.56 0-291.18-130.62-291.18-291.18Z"
+ className="cls-2"
+ />
+ <path
+ d="M436.76 618.86C394.05 726.69 288.82 803.18 166 803.18v109.68c134.26 0 253-66.07 325.76-167.4a432.16 432.16 0 0 1-55-126.6ZM587.24 405.14C630 297.31 735.19 220.82 858 220.82V111.14c-134.26 0-253 66.07-325.77 167.4a431.92 431.92 0 0 1 55.01 126.6Z"
+ className="cls-2"
+ />
+ </svg>
+ );
+}
+export function TransformationIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"data-share"}</title>
+ <path d="M5 25v-9.172l-3.586 3.586L0 18l6-6 6 6-1.414 1.414L7 15.828V25h12v2H7a2.002 2.002 0 0 1-2-2ZM24 22h4a2.002 2.002 0 0 1 2 2v4a2.002 2.002 0 0 1-2 2h-4a2.002 2.002 0 0 1-2-2v-4a2.002 2.002 0 0 1 2-2Zm4 6v-4h-4.002L24 28ZM27 6v9.172l3.586-3.586L32 13l-6 6-6-6 1.414-1.414L25 15.172V6H13V4h12a2.002 2.002 0 0 1 2 2ZM2 6h6v2H2zM2 2h8v2H2z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function TestingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M28 17v5H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-5ZM18 28h-4v-4h4Z" />
+ <path d="M30 10V8h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49-1.414-1.414-1.49 1.49A4.968 4.968 0 0 0 24 4.101V2h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49-1.414 1.414 1.49 1.49A4.968 4.968 0 0 0 18.101 8H16v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49 1.414 1.414 1.49-1.49a4.968 4.968 0 0 0 1.753.732V16h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49 1.414-1.414-1.49-1.49A4.968 4.968 0 0 0 27.899 10Zm-7 2a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function ApiIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"api"}</title>
+ <path d="M26 22a3.86 3.86 0 0 0-2 .57l-3.09-3.1a6 6 0 0 0 0-6.94L24 9.43a3.86 3.86 0 0 0 2 .57 4 4 0 1 0-4-4 3.86 3.86 0 0 0 .57 2l-3.1 3.09a6 6 0 0 0-6.94 0L9.43 8A3.86 3.86 0 0 0 10 6a4 4 0 1 0-4 4 3.86 3.86 0 0 0 2-.57l3.09 3.1a6 6 0 0 0 0 6.94L8 22.57A3.86 3.86 0 0 0 6 22a4 4 0 1 0 4 4 3.86 3.86 0 0 0-.57-2l3.1-3.09a6 6 0 0 0 6.94 0l3.1 3.09a3.86 3.86 0 0 0-.57 2 4 4 0 1 0 4-4Zm0-18a2 2 0 1 1-2 2 2 2 0 0 1 2-2ZM4 6a2 2 0 1 1 2 2 2 2 0 0 1-2-2Zm2 22a2 2 0 1 1 2-2 2 2 0 0 1 [...]
+ <path
+ d="M0 0h32v32H0z"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function MonitoringIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <path d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z" />
+ <path d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76 3.009-9.78A1.014 1.014 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04-3.082 10.018A1 1 0 0 1 18 18Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function NetworkingIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ width={800}
+ height={800}
+ viewBox="0 0 511.984 511.984"
+ className="icon">
+ <path d="M207.29 287.991H48.735C30.687 287.991 16 302.375 16 320.054v111.868c0 17.679 14.688 32.063 32.735 32.063H207.29c18.031 0 32.703-14.384 32.703-32.063V320.054c0-17.679-14.672-32.063-32.703-32.063zm0 143.996-159.291-.064.736-111.932 159.259.064.048 111.645c0 .015-.192.287-.752.287z" />
+ <path d="M383.988 239.992H127.996c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-31.999h223.993v31.999c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c0-8.832-7.167-16-15.999-16z" />
+ <path d="M463.25 287.991H304.727c-18.047 0-32.735 14.384-32.735 32.063v111.868c0 17.679 14.688 32.063 32.735 32.063H463.25c18.047 0 32.735-14.384 32.735-32.063V320.054c-.001-17.679-14.688-32.063-32.735-32.063zm0 143.996-159.259-.064.736-111.932 159.259.064.064 111.645c-.016-.001-.208.287-.8.287zM415.987 479.985h-63.998c-8.832 0-16 7.168-16 16s7.168 16 16 16h63.998c8.832 0 16-7.168 16-16s-7.168-16-16-16zM335.253 0H176.73c-18.047 0-32.735 14.384-32.735 32.063v111.869c0 17.679 1 [...]
+ <path d="M255.992 191.994c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c.001-8.832-7.167-16-15.999-16z" />
+ </svg>
+ );
+}
+export function HealthIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlSpace="preserve"
+ id="Icons"
+ viewBox="0 0 32 32"
+ className="icon">
+ <style>
+ {
+ ".st0{fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}"
+ }
+ </style>
+ <path
+ d="M27 7h0c-2.6-2.7-6.9-2.7-9.5 0l-1.3 1.4c-.1.1-.4.1-.5 0L14.4 7C11.8 4.3 7.6 4.3 5 7h0c-2.6 2.7-2.6 7.1 0 9.8l1.6 1.6 9.2 9.5c.1.1.4.1.5 0l9.2-9.5 1.6-1.6c2.6-2.7 2.6-7.1-.1-9.8z"
+ className="st0"
+ />
+ <path d="M9 15h3l2-2 2 4 2-5 2 3h3" className="st0" />
+ </svg>
+ );
+}
+export function KubernetesIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 -10.44 722.846 722.846"
+ className="icon">
+ <path
+ fill="#326ce5"
+ d="M358.986 10.06a46.725 46.342 0 0 0-17.906 4.531L96.736 131.341a46.725 46.342 0 0 0-25.28 31.438l-60.282 262.25a46.725 46.342 0 0 0 6.344 35.531 46.725 46.342 0 0 0 2.656 3.688l169.125 210.28a46.725 46.342 0 0 0 36.531 17.438l271.219-.062a46.725 46.342 0 0 0 36.531-17.406l169.063-210.313a46.725 46.342 0 0 0 9.03-39.219L651.3 162.716a46.725 46.342 0 0 0-25.281-31.437L381.643 14.59a46.725 46.342 0 0 0-22.657-4.53z"
+ />
+ <path
+ fill="#fff"
+ stroke="#fff"
+ strokeWidth={0.25}
+ d="M361.408 99.307c-8.077.001-14.626 7.276-14.625 16.25 0 .138.028.27.03.406-.011 1.22-.07 2.689-.03 3.75.192 5.176 1.32 9.138 2 13.907 1.23 10.206 2.26 18.667 1.625 26.531-.62 2.965-2.803 5.677-4.75 7.562l-.344 6.188a190.337 190.337 0 0 0-26.438 4.062c-37.974 8.623-70.67 28.184-95.562 54.594a245.167 245.167 0 0 1-5.281-3.75c-2.612.353-5.25 1.159-8.688-.844-6.545-4.405-12.506-10.486-19.719-17.812-3.305-3.504-5.698-6.841-9.625-10.219-.891-.767-2.252-1.804-3.25-2.594-3.07-2 [...]
+ color="#000"
+ fontFamily="Sans"
+ fontWeight={400}
+ overflow="visible"
+ style={{
+ textIndent: 0,
+ textAlign: "start",
+ lineHeight: "normal",
+ textTransform: "none",
+ marker: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function DocumentIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 32 32"
+ className="icon">
+ <title>{"document--blank"}</title>
+ <path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.908.908 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z" />
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+export function GitIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ fill="none"
+ viewBox="0 0 24 24"
+ className="icon">
+ <path
+ fill="#000"
+ fillRule="evenodd"
+ d="M13.414 3.828a2 2 0 0 0-2.828 0l-.672.672 1.568 1.568a2.002 2.002 0 0 1 2.45 2.45l2.05 2.05a2 2 0 1 1-1.414 1.414L13 10.414v4.854A2 2 0 0 1 12 19a2 2 0 0 1-1-3.732V9.732a2 2 0 0 1-.932-2.25L8.5 5.914l-4.672 4.672a2 2 0 0 0 0 2.828l6.758 6.758a2 2 0 0 0 2.828 0l6.758-6.758a2 2 0 0 0 0-2.828l-6.758-6.758ZM9.172 2.414a4 4 0 0 1 5.656 0l6.758 6.758a4 4 0 0 1 0 5.656l-6.758 6.758a4 4 0 0 1-5.656 0l-6.758-6.758a4 4 0 0 1 0-5.656l6.758-6.758Z"
+ clipRule="evenodd"
+ />
+ </svg>
+ );
+}
+export function SocialIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={800}
+ height={800}
+ viewBox="0 0 1024 1024"
+ className="icon">
+ <path
+ fill="#FFB89A"
+ d="M570.2 842c-50.6 0-278.7-180-278.7-401.9 0-58.8-2.9-133.1-1-183.9-50.8 3.2-91.4 45.7-91.4 97.3v272.1c37.4 194.7 137.5 334 255.2 334 69.5 0 132.9-48.6 180.9-128.5-20.8 7.1-42.6 10.9-65 10.9z"
+ />
+ <path
+ fill="#4E5155"
+ d="M926.1 191.8C900.5 74.1 817.9 62.1 704.9 62.1c-29.1 0-60.3.8-93 .8-36 0-70.5-1.1-102.5-1.1-109.7 0-189.8 12.5-201.3 123.7-20.4 198.3 30 617.1 306.1 617.1S939 414.3 926.1 191.8zm-76.9 268.5c-9.5 47.9-22.3 90.8-38.1 127.7-16.8 39.2-37 71.4-60 95.8-37.3 39.5-82.1 58.7-137 58.7-53.4 0-97.6-20.1-134.9-61.6-45.5-50.5-79.8-131.5-99-234.2-15.6-83.5-20.3-178.9-12.4-255.2 1.8-17.3 5.7-30.7 11.6-39.8 4.4-6.8 10.1-11.7 18.7-15.8 25.8-12.5 70.8-14.2 111.4-14.2 15 0 30.7.2 47.3.5 17 [...]
+ />
+ <path
+ fill="#4E5155"
+ d="M532 841.7c-32.5 22.3-70.6 33.7-113.2 33.7-29.7 0-57.3-6-82.1-17.7-23.2-11-44.7-27.4-63.9-48.7-46-50.9-80.3-131.3-99.2-232.4-15.1-80.6-19.6-172.9-12-246.8 3-29.5 12-50.2 27.5-63.2 14.2-12 35.1-19.2 65.8-22.9 16.5-2 28.2-16.9 26.3-33.3-2-16.5-16.9-28.2-33.3-26.3-42.9 5.1-73.8 16.7-97.4 36.5-27.9 23.5-43.8 57.2-48.5 103-8.2 79.3-3.4 178.1 12.7 264 9.7 51.9 23.4 99.4 40.6 141.2 19.8 48.1 44.4 88.6 73 120.4 51.6 57.2 115.7 86.2 190.6 86.2 55 0 104.5-14.9 147.2-44.2 13.7-9. [...]
+ />
+ <path
+ fill="#3C9"
+ d="M519.7 248.5c-16.6 0-30 13.4-30 30v91.3c0 16.6 13.4 30 30 30s30-13.4 30-30v-91.3c0-16.6-13.5-30-30-30zm-220.2 137c0-16.6-13.4-30-30-30s-30 13.4-30 30v91.3c0 16.6 13.4 30 30 30s30-13.4 30-30v-91.3zm455.1-137c-16.6 0-30 13.4-30 30v91.3c0 16.6 13.4 30 30 30s30-13.4 30-30v-91.3c0-16.6-13.4-30-30-30zm-37.9 306c0-16.6-13.4-30-30-30H551v30c0 58.5 38.1 123.7 92.8 123.7 22.9 0 45-11.9 62.2-33.6 10.3-13 8.1-31.9-4.9-42.1-13-10.3-31.9-8.1-42.1 4.9-5.3 6.7-11.1 10.9-15.1 10.9-4.3 [...]
+ />
+ </svg>
+ );
+}
+export function DebeziumIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 130.93 130.93"
+ className="icon">
+ <defs>
+ <linearGradient
+ id="linear-gradient"
+ x1={19.74}
+ x2={114.03}
+ y1={19.73}
+ y2={114.02}
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#91d443" />
+ <stop offset={1} stopColor="#48bfe0" />
+ </linearGradient>
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-2"
+ x1={43.19}
+ x2={137.48}
+ y1={-3.72}
+ y2={90.57}
+ />
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-3"
+ x1={66.56}
+ x2={160.85}
+ y1={-27.09}
+ y2={67.2}
+ />
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-4"
+ x1={-3.72}
+ x2={90.57}
+ y1={43.18}
+ y2={137.47}
+ />
+ <linearGradient
+ xlinkHref="#linear-gradient"
+ id="linear-gradient-5"
+ x1={-27.09}
+ x2={67.2}
+ y1={66.55}
+ y2={160.84}
+ />
+ <style>{".cls-1{fill:#fff}"}</style>
+ </defs>
+ <g id="Layer_1" data-name="Layer 1">
+ <path
+ d="M93.79 114.29a16.65 16.65 0 0 0 16.63 16.63h20.53v-20.53a16.65 16.65 0 0 0-16.63-16.63h-3.91A26.39 26.39 0 0 1 84 67.4v-3.89a16.65 16.65 0 0 0-16.59-16.62h-3.9a26.39 26.39 0 0 1-26.35-26.37v-3.9A16.65 16.65 0 0 0 20.53 0H0v20.52a16.65 16.65 0 0 0 16.63 16.63h3.91A26.39 26.39 0 0 1 46.9 63.51v3.89A16.65 16.65 0 0 0 63.53 84h3.9a26.39 26.39 0 0 1 26.36 26.36Z"
+ style={{
+ fill: "url(#linear-gradient)",
+ }}
+ />
+ <path
+ d="M130.94 63.51a16.65 16.65 0 0 0-16.63-16.63h-3.91A26.39 26.39 0 0 1 84 20.52v-3.9A16.65 16.65 0 0 0 67.41 0H46.9v20.75a16.64 16.64 0 0 0 16.62 16.4h3.91a26.39 26.39 0 0 1 26.36 26.36v3.89A16.65 16.65 0 0 0 110.36 84h20.58Z"
+ style={{
+ fill: "url(#linear-gradient-2)",
+ }}
+ />
+ <path
+ d="M130.94 16.49A16.63 16.63 0 0 0 115 0H93.47v20.7a16.64 16.64 0 0 0 16.62 16.44h20.85Z"
+ style={{
+ fill: "url(#linear-gradient-3)",
+ }}
+ />
+ <path
+ d="M0 67.44a16.65 16.65 0 0 0 16.64 16.62h3.91a26.39 26.39 0 0 1 26.36 26.36v3.89a16.65 16.65 0 0 0 16.63 16.63H84v-20.75A16.64 16.64 0 0 0 67.43 93.8h-3.9a26.39 26.39 0 0 1-26.37-26.36v-3.9a16.65 16.65 0 0 0-16.57-16.63H0Z"
+ style={{
+ fill: "url(#linear-gradient-4)",
+ }}
+ />
+ <path
+ d="M0 114.45a16.63 16.63 0 0 0 16 16.5h21.48v-20.71A16.64 16.64 0 0 0 20.86 93.8H0Z"
+ style={{
+ fill: "url(#linear-gradient-5)",
+ }}
+ />
+ </g>
+ </svg>
+ );
+}
+export function IgniteIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={48}
+ height={48}
+ fill="none"
+ viewBox="0 0 48 48"
+ className="icon">
+ <path
+ fill="#ED1C24"
+ d="M7.686 8.136S-8.95 18.28 6.73 28.355c3.016 1.962 13.956 7.418 13.644 12.466 0 0 6.631-9.81-3.064-15.983C7.351 18.52 4.862 11.772 7.686 8.135Z"
+ />
+ <path
+ fill="#ED1C24"
+ d="M1.893 27.517s-5.936 8.997 5.745 10.84c1.15.144 9.6 1.029 11.802 3.804 0 0-.192-4.785-7.086-7.609-6.87-2.823-9.695-3.517-10.46-7.035Zm22.981-9.451C17.74 10.6 15.754 5.982 18.818 0c0 0-21.281 8.183-.264 22.708 7.517 5.192 6.272 10.504 6.272 10.696 1.173-1.22 7.181-7.873.048-15.338Z"
+ />
+ </svg>
+ );
+}
+export function HazelcastIcon() {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.3 133.3" className="icon">
+ <defs>
+ <style>{".a{fill:#00e1e1}"}</style>
+ </defs>
+ <path
+ d="M133.3 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.93v.38c0 6.07-6.42 12.49-12.49 12.49h-.38v.93h.36c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM26.66 12.86h-.38C20.21 12.86 13.8 6.45 13.8.38V0h-.94v.38c0 6.07-6.41 12.48-12.48 12.48H0v.94h.38c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.94Z"
+ className="a"
+ />
+ <path
+ d="M26.66 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.53v-.38h-.94V27c0 6.07-6.41 12.49-12.48 12.49H0v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M53.32 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94V27c0 6.07-6.41 12.49-12.48 12.49h-.38v.93H27c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM26.66 66.19h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94v.38c0 6.07-6.41 12.49-12.48 12.49H0v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.4h.94v-.4c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M53.32 66.19h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94v.38c0 6.07-6.41 12.49-12.48 12.49h-.38v.93H27c6.07 0 12.48 6.41 12.48 12.48v.4h.94v-.4c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M80 66.19h-.4c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.94v.38c0 6.07-6.41 12.49-12.48 12.49h-.38v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.4h.94v-.4c0-6.07 6.41-12.48 12.48-12.48h.4v-.93ZM26.66 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.94v.38c0 6.07-6.41 12.49-12.48 12.49H0v.93h.38c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93Z"
+ className="a"
+ />
+ <path
+ d="M53.32 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.94v.38c0 6.07-6.41 12.49-12.48 12.49h-.38v.93H27c6.07 0 12.48 6.41 12.48 12.48v.38h.94v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM106.64 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.93V27c0 6.07-6.42 12.49-12.49 12.49H80v.93h.38c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM106.64 66.19h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.93v.38c0 6.07-6.42 12.49-12.49 12.49H80v.93h. [...]
+ className="a"
+ />
+ <path
+ d="M106.64 92.85h-.38c-6.07 0-12.48-6.42-12.48-12.49V80h-.93v.38c0 6.07-6.42 12.49-12.49 12.49H80v.93h.38c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM133.3 39.53h-.38c-6.07 0-12.48-6.42-12.48-12.49v-.38h-.93V27c0 6.07-6.42 12.49-12.49 12.49h-.38v.93h.36c6.07 0 12.49 6.41 12.49 12.48v.38h.93v-.38c0-6.07 6.41-12.48 12.48-12.48h.38v-.93ZM133.3 12.86h-.38c-6.07 0-12.48-6.41-12.48-12.48V0h-.93v.38c0 6.07-6.42 12.48-12.49 12.48h-.38v.94h.3 [...]
+ className="a"
+ />
+ </svg>
+ );
+}
+export function AzureIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={150}
+ height={150}
+ viewBox="0 0 96 96"
+ className="icon">
+ <defs>
+ <linearGradient
+ id="a"
+ x1={-1032.172}
+ x2={-1059.213}
+ y1={145.312}
+ y2={65.426}
+ gradientTransform="matrix(1 0 0 -1 1075 158)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#114a8b" />
+ <stop offset={1} stopColor="#0669bc" />
+ </linearGradient>
+ <linearGradient
+ id="b"
+ x1={-1023.725}
+ x2={-1029.98}
+ y1={108.083}
+ y2={105.968}
+ gradientTransform="matrix(1 0 0 -1 1075 158)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopOpacity={0.3} />
+ <stop offset={0.071} stopOpacity={0.2} />
+ <stop offset={0.321} stopOpacity={0.1} />
+ <stop offset={0.623} stopOpacity={0.05} />
+ <stop offset={1} stopOpacity={0} />
+ </linearGradient>
+ <linearGradient
+ id="c"
+ x1={-1027.165}
+ x2={-997.482}
+ y1={147.642}
+ y2={68.561}
+ gradientTransform="matrix(1 0 0 -1 1075 158)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#3ccbf4" />
+ <stop offset={1} stopColor="#2892df" />
+ </linearGradient>
+ </defs>
+ <path
+ fill="url(#a)"
+ d="M33.338 6.544h26.038l-27.03 80.087a4.152 4.152 0 0 1-3.933 2.824H8.149a4.145 4.145 0 0 1-3.928-5.47L29.404 9.368a4.152 4.152 0 0 1 3.934-2.825z"
+ />
+ <path
+ fill="#0078d4"
+ d="M71.175 60.261h-41.29a1.911 1.911 0 0 0-1.305 3.309l26.532 24.764a4.171 4.171 0 0 0 2.846 1.121h23.38z"
+ />
+ <path
+ fill="url(#b)"
+ d="M33.338 6.544a4.118 4.118 0 0 0-3.943 2.879L4.252 83.917a4.14 4.14 0 0 0 3.908 5.538h20.787a4.443 4.443 0 0 0 3.41-2.9l5.014-14.777 17.91 16.705a4.237 4.237 0 0 0 2.666.972H81.24L71.024 60.261l-29.781.007L59.47 6.544z"
+ />
+ <path
+ fill="url(#c)"
+ d="M66.595 9.364a4.145 4.145 0 0 0-3.928-2.82H33.648a4.146 4.146 0 0 1 3.928 2.82l25.184 74.62a4.146 4.146 0 0 1-3.928 5.472h29.02a4.146 4.146 0 0 0 3.927-5.472z"
+ />
+ </svg>
+ );
+}
+
+
diff --git a/karavan-space/src/knowledgebase/components/ComponentCard.tsx b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
index 0e907c8b..9226bb52 100644
--- a/karavan-space/src/knowledgebase/components/ComponentCard.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentCard.tsx
@@ -19,7 +19,7 @@ import {
CardHeader, Card, CardTitle, CardBody, CardFooter, Badge
} from '@patternfly/react-core';
import '../../designer/karavan.css';
-import {camelIcon, CamelUi} from "../../designer/utils/CamelUi";
+import {CamelUi} from "../../designer/utils/CamelUi";
import {Component} from "karavan-core/lib/model/ComponentModels";
interface Props {
@@ -45,7 +45,7 @@ export class ComponentCard extends React.Component<Props, State> {
render() {
const component = this.state.component;
return (
- <Card isHoverable isCompact key={component.component.name} className="kamelet-card"
+ <Card isCompact key={component.component.name} className="kamelet-card"
onClick={event => this.click(event)}
>
<CardHeader className="header-labels">
@@ -53,7 +53,7 @@ export class ComponentCard extends React.Component<Props, State> {
<Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
</CardHeader>
<CardHeader>
- {CamelUi.getIconFromSource(camelIcon)}
+ {CamelUi.getIconForComponent(component.component.title, component.component.label)}
<CardTitle>{component.component.title}</CardTitle>
</CardHeader>
<CardBody>{component.component.description}</CardBody>
diff --git a/karavan-space/src/knowledgebase/components/ComponentModal.tsx b/karavan-space/src/knowledgebase/components/ComponentModal.tsx
index 7b10b3f1..7d622425 100644
--- a/karavan-space/src/knowledgebase/components/ComponentModal.tsx
+++ b/karavan-space/src/knowledgebase/components/ComponentModal.tsx
@@ -27,7 +27,7 @@ import {
import '../../designer/karavan.css';
import {TableComposable, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
import {Component} from "karavan-core/lib/model/ComponentModels";
-import {camelIcon, CamelUi} from "../../designer/utils/CamelUi";
+import {CamelUi} from "../../designer/utils/CamelUi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
@@ -85,7 +85,7 @@ export class ComponentModal extends React.Component<Props, State> {
<Flex direction={{default: 'column'}} key={component?.component.name}
className="kamelet-modal-card">
<CardHeader>
- {CamelUi.getIconFromSource(camelIcon)}
+ {component && CamelUi.getIconForComponent(component.component.title, component.component.label)}
<CardActions>
<Badge className="badge"
isRead> {component?.component.label}</Badge>
diff --git a/karavan-space/tsconfig.json b/karavan-space/tsconfig.json
index cbb7cd49..b2dc6064 100644
--- a/karavan-space/tsconfig.json
+++ b/karavan-space/tsconfig.json
@@ -1,13 +1,14 @@
{
"compilerOptions": {
- "target": "es5",
- "module": "esnext",
+ "target": "es2022",
+ "module": "es2022",
"outDir": "out",
"sourceMap": true,
"lib": [
"dom",
"dom.iterable",
- "esnext"
+ "esnext",
+ "es2022"
],
"allowJs": true,
"skipLibCheck": true,