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 ac2efa61 Fix #484
ac2efa61 is described below
commit ac2efa61fae9a7b298edf425246eafe5cae22355
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Fri Aug 4 14:30:47 2023 -0400
Fix #484
---
karavan-designer/src/designer/utils/CamelUi.tsx | 4 +-
.../src/designer/utils/KaravanIcons.tsx | 16 +
karavan-space/src/designer/utils/CamelUi.tsx | 4 +-
karavan-space/src/designer/utils/KaravanIcons.tsx | 16 +
.../src/main/webui/src/api/ProjectStore.ts | 16 +-
.../src/main/webui/src/designer/karavan.css | 6 +-
.../webui/src/designer/route/DslConnections.tsx | 43 +-
.../src/main/webui/src/designer/utils/CamelUi.tsx | 215 +++-
.../main/webui/src/designer/utils/KaravanIcons.tsx | 1139 +++++++++++++++++++-
.../karavan-app/src/main/webui/src/index.tsx | 2 +-
.../src/knowledgebase/components/ComponentCard.tsx | 6 +-
.../knowledgebase/components/ComponentModal.tsx | 4 +-
.../src/main/webui/src/main/DataPoller.tsx | 103 ++
.../src/main/webui/src/{ => main}/Main.tsx | 126 +--
.../src/main/webui/src/{ => main}/MainLogin.tsx | 0
.../src/main/webui/src/{ => main}/Notification.tsx | 6 +-
.../src/main/webui/src/main/PageNavigation.tsx | 104 ++
17 files changed, 1667 insertions(+), 143 deletions(-)
diff --git a/karavan-designer/src/designer/utils/CamelUi.tsx
b/karavan-designer/src/designer/utils/CamelUi.tsx
index e21544ad..8974019e 100644
--- a/karavan-designer/src/designer/utils/CamelUi.tsx
+++ b/karavan-designer/src/designer/utils/CamelUi.tsx
@@ -56,7 +56,7 @@ import {
Intercept,
InterceptFrom,
InterceptSendToEndpoint,
- IotIcon,
+ IotIcon, KafkaIcon,
KubernetesIcon,
MachineLearningIcon,
MailIcon,
@@ -574,6 +574,8 @@ export class CamelUi {
return InfinispanIcon();
} else if (title.startsWith("Ignite")) {
return IgniteIcon();
+ } else if (title.startsWith("Kafka")) {
+ return KafkaIcon();
} else if (title.startsWith("GitHub")) {
return GithubIcon();
} else if (title.startsWith("Git")) {
diff --git a/karavan-designer/src/designer/utils/KaravanIcons.tsx
b/karavan-designer/src/designer/utils/KaravanIcons.tsx
index 78991e01..0e9b6d82 100644
--- a/karavan-designer/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-designer/src/designer/utils/KaravanIcons.tsx
@@ -937,6 +937,22 @@ export function GithubIcon() {
</svg>
);
}
+export function KafkaIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="-78.5 0 413 413"
+ className="icon">
+ <path
+ fill="#1A1919"
+ d="M87.932 36.714c-4.55-4.571-10.896-7.394-17.951-7.394-7.029
0-13.326 2.823-17.822 7.394h-.13c-4.535 4.55-7.358 10.9-7.358 17.93 0 7.055
2.823 13.352 7.359 17.875l.129.102c4.496 4.55 10.793 7.346 17.822 7.346 7.055 0
13.402-2.797 17.951-7.346L88 72.52c4.558-4.523 7.354-10.82 7.354-17.876
0-7.029-2.796-13.38-7.354-17.929h-.067Zm-17.951 346.64a25.504 25.504 0 0 0
17.951-7.368l.067-.134c4.558-4.487 7.354-10.838 7.354-17.817
0-7.056-2.796-13.38-7.354-17.952h-.067c-4.55-4.625 [...]
+ />
+ </svg>
+ );
+}
export function GrapeIcon() {
return (
<svg
diff --git a/karavan-space/src/designer/utils/CamelUi.tsx
b/karavan-space/src/designer/utils/CamelUi.tsx
index e21544ad..8974019e 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -56,7 +56,7 @@ import {
Intercept,
InterceptFrom,
InterceptSendToEndpoint,
- IotIcon,
+ IotIcon, KafkaIcon,
KubernetesIcon,
MachineLearningIcon,
MailIcon,
@@ -574,6 +574,8 @@ export class CamelUi {
return InfinispanIcon();
} else if (title.startsWith("Ignite")) {
return IgniteIcon();
+ } else if (title.startsWith("Kafka")) {
+ return KafkaIcon();
} else if (title.startsWith("GitHub")) {
return GithubIcon();
} else if (title.startsWith("Git")) {
diff --git a/karavan-space/src/designer/utils/KaravanIcons.tsx
b/karavan-space/src/designer/utils/KaravanIcons.tsx
index 78991e01..0e9b6d82 100644
--- a/karavan-space/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-space/src/designer/utils/KaravanIcons.tsx
@@ -937,6 +937,22 @@ export function GithubIcon() {
</svg>
);
}
+export function KafkaIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="-78.5 0 413 413"
+ className="icon">
+ <path
+ fill="#1A1919"
+ d="M87.932 36.714c-4.55-4.571-10.896-7.394-17.951-7.394-7.029
0-13.326 2.823-17.822 7.394h-.13c-4.535 4.55-7.358 10.9-7.358 17.93 0 7.055
2.823 13.352 7.359 17.875l.129.102c4.496 4.55 10.793 7.346 17.822 7.346 7.055 0
13.402-2.797 17.951-7.346L88 72.52c4.558-4.523 7.354-10.82 7.354-17.876
0-7.029-2.796-13.38-7.354-17.929h-.067Zm-17.951 346.64a25.504 25.504 0 0 0
17.951-7.368l.067-.134c4.558-4.487 7.354-10.838 7.354-17.817
0-7.056-2.796-13.38-7.354-17.952h-.067c-4.55-4.625 [...]
+ />
+ </svg>
+ );
+}
export function GrapeIcon() {
return (
<svg
diff --git a/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
b/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
index 4c554926..deebf7ee 100644
--- a/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
+++ b/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
@@ -23,13 +23,19 @@ import {unstable_batchedUpdates} from "react-dom";
interface AppConfigState {
config: AppConfig;
setConfig: (config: AppConfig) => void;
+ pageId: string;
+ setPageId: (pageId: string) => void;
}
export const useAppConfigStore = create<AppConfigState>((set) => ({
config: new AppConfig(),
+ pageId: 'projects',
setConfig: (config: AppConfig) => {
set({config: config})
},
+ setPageId: (pageId: string) => {
+ set({pageId: pageId})
+ },
}))
@@ -107,7 +113,7 @@ export const useFilesStore = create<FilesState>((set) => ({
interface FileState {
file?: ProjectFile;
operation: "create" | "select" | "delete" | "none" | "copy" | "upload";
- setFile: (file: ProjectFile, operation: "create" | "select" | "delete"|
"none" | "copy" | "upload") => void;
+ setFile: (operation: "create" | "select" | "delete"| "none" | "copy" |
"upload", file?: ProjectFile) => void;
editAdvancedProperties: boolean;
setEditAdvancedProperties: (editAdvancedProperties: boolean) => void;
addProperty: string;
@@ -119,7 +125,7 @@ export const useFileStore = create<FileState>((set) => ({
operation: "none",
editAdvancedProperties: false,
addProperty: '',
- setFile: (file: ProjectFile, operation: "create" | "select" | "delete"|
"none" | "copy" | "upload") => {
+ setFile: (operation: "create" | "select" | "delete"| "none" | "copy" |
"upload", file?: ProjectFile) => {
set((state: FileState) => ({
file: file,
operation: operation
@@ -137,6 +143,7 @@ interface DevModeState {
podName?: string,
status: "none" | "wip",
setStatus: (status: "none" | "wip") => void,
+ setPodName: (podName?: string) => void,
}
export const useDevModeStore = create<DevModeState>((set) => ({
@@ -147,6 +154,11 @@ export const useDevModeStore = create<DevModeState>((set)
=> ({
status: status,
}));
},
+ setPodName: (podName?: string) => {
+ set((state: DevModeState) => ({
+ podName: podName,
+ }));
+ },
}))
interface StatusesState {
diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/karavan.css
b/karavan-web/karavan-app/src/main/webui/src/designer/karavan.css
index 3b2574e4..f8f9f634 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-web/karavan-app/src/main/webui/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-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
index 7ccfe8fe..4e4f9f53 100644
---
a/karavan-web/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
+++
b/karavan-web/karavan-app/src/main/webui/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-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
index c55a8ef8..8974019e 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
+++ b/karavan-web/karavan-app/src/main/webui/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, KafkaIcon,
+ 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,149 @@ 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("Kafka")) {
+ return KafkaIcon();
+ } 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 +703,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-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx
index 6bd0e15b..0e9b6d82 100644
--- a/karavan-web/karavan-app/src/main/webui/src/designer/utils/KaravanIcons.tsx
+++ b/karavan-web/karavan-app/src/main/webui/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,1119 @@ 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 KafkaIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg";
+ width={800}
+ height={800}
+ preserveAspectRatio="xMidYMid"
+ viewBox="-78.5 0 413 413"
+ className="icon">
+ <path
+ fill="#1A1919"
+ d="M87.932 36.714c-4.55-4.571-10.896-7.394-17.951-7.394-7.029
0-13.326 2.823-17.822 7.394h-.13c-4.535 4.55-7.358 10.9-7.358 17.93 0 7.055
2.823 13.352 7.359 17.875l.129.102c4.496 4.55 10.793 7.346 17.822 7.346 7.055 0
13.402-2.797 17.951-7.346L88 72.52c4.558-4.523 7.354-10.82 7.354-17.876
0-7.029-2.796-13.38-7.354-17.929h-.067Zm-17.951 346.64a25.504 25.504 0 0 0
17.951-7.368l.067-.134c4.558-4.487 7.354-10.838 7.354-17.817
0-7.056-2.796-13.38-7.354-17.952h-.067c-4.55-4.625 [...]
+ />
+ </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-web/karavan-app/src/main/webui/src/index.tsx
b/karavan-web/karavan-app/src/main/webui/src/index.tsx
index d112e5b8..8eeda047 100644
--- a/karavan-web/karavan-app/src/main/webui/src/index.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import {createRoot} from "react-dom/client";
import "@patternfly/patternfly/patternfly.css";
import './index.css';
-import {Main} from "./Main";
+import {Main} from "./main/Main";
const container = document.getElementById('root');
const root = createRoot(container!);
diff --git
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
index 0e907c8b..9226bb52 100644
---
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentCard.tsx
+++
b/karavan-web/karavan-app/src/main/webui/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-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx
b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx
index 7b10b3f1..7d622425 100644
---
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/components/ComponentModal.tsx
+++
b/karavan-web/karavan-app/src/main/webui/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-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
new file mode 100644
index 00000000..5c3aa622
--- /dev/null
+++ b/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
@@ -0,0 +1,103 @@
+import React, {useEffect, useState} from 'react';
+import {
+ Page,
+ Flex,
+ FlexItem,
+ Spinner, Bullseye
+} from '@patternfly/react-core';
+import {KaravanApi} from "../api/KaravanApi";
+import {SsoApi} from "../api/SsoApi";
+import {KameletApi} from "karavan-core/lib/api/KameletApi";
+import '../designer/karavan.css';
+import {v4 as uuidv4} from "uuid";
+import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import Icon from "../Logo";
+import {ProjectsPage} from "../projects/ProjectsPage";
+import {MainLogin} from "./MainLogin";
+import {DashboardPage} from "../dashboard/DashboardPage";
+import {ContainersPage} from "../containers/ContainersPage";
+import {ProjectEventBus} from "../api/ProjectEventBus";
+import {AppConfig, ContainerStatus, Project, ToastMessage} from
"../api/ProjectModels";
+import {ProjectPage} from "../project/ProjectPage";
+import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
+import {Notification} from "./Notification";
+import {InfrastructureAPI} from "../designer/utils/InfrastructureAPI";
+import {KnowledgebasePage} from "../knowledgebase/KnowledgebasePage";
+import {ServicesPage} from "../services/ServicesPage";
+import {shallow} from "zustand/shallow";
+import {PageNavigation} from "./PageNavigation";
+
+export const DataPoller = () => {
+
+ const [config, pageId, setPageId, setConfig] = useAppConfigStore((state)
=> [state.config, state.pageId, state.setPageId, state.setConfig], shallow)
+ const [setContainers] = useStatusesStore((state) => [state.setContainers],
shallow);
+ const [request, setRequest] = useState<string>(uuidv4());
+
+ useEffect(() => {
+ console.log("DataPoller Start");
+ const interval = setInterval(() => {
+ getStatuses();
+ }, 1000);
+ return () => {
+ console.log("DataPoller End");
+ clearInterval(interval);
+ };
+ }, []);
+
+ function getStatuses() {
+ if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
+ KaravanApi.getAllContainerStatuses((statuses: ContainerStatus[])
=> {
+ setContainers(statuses);
+ });
+ }
+ }
+
+ function getData() {
+ if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
+ KaravanApi.getConfiguration((config: AppConfig) => {
+ setRequest(uuidv4());
+ setConfig(config);
+ InfrastructureAPI.infrastructure = config.infrastructure;
+ });
+ updateKamelets();
+ updateComponents();
+ // updateSupportedComponents(); // not implemented yet
+ }
+ }
+
+ async function updateKamelets(): Promise<void> {
+ await new Promise(resolve => {
+ KaravanApi.getKamelets(yamls => {
+ const kamelets: string[] = [];
+ yamls.split("\n---\n").map(c => c.trim()).forEach(z =>
kamelets.push(z));
+ KameletApi.saveKamelets(kamelets, true);
+ })
+ KaravanApi.getCustomKameletNames(names => {
+ KameletApi.saveCustomKameletNames(names);
+ })
+ });
+ }
+
+ async function updateComponents(): Promise<void> {
+ await new Promise(resolve => {
+ KaravanApi.getComponents(code => {
+ const components: [] = JSON.parse(code);
+ const jsons: string[] = [];
+ components.forEach(c => jsons.push(JSON.stringify(c)));
+ ComponentApi.saveComponents(jsons, true);
+ })
+ });
+ }
+
+ async function updateSupportedComponents(): Promise<void> {
+ await new Promise(resolve => {
+ KaravanApi.getSupportedComponents(jsons => {
+ ComponentApi.saveSupportedComponents(jsons);
+ })
+ });
+ }
+
+ return (
+ <React.Fragment></React.Fragment>
+ )
+}
\ No newline at end of file
diff --git a/karavan-web/karavan-app/src/main/webui/src/Main.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
similarity index 50%
rename from karavan-web/karavan-app/src/main/webui/src/Main.tsx
rename to karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
index 98ca08f1..2d40b1f4 100644
--- a/karavan-web/karavan-app/src/main/webui/src/Main.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
@@ -1,60 +1,37 @@
import React, {useEffect, useState} from 'react';
import {
Page,
- Button,
Flex,
FlexItem,
- Tooltip,
- Divider, Spinner, Bullseye, Popover, Badge
+ Spinner, Bullseye
} from '@patternfly/react-core';
-import {KaravanApi} from "./api/KaravanApi";
-import {SsoApi} from "./api/SsoApi";
+import {KaravanApi} from "../api/KaravanApi";
+import {SsoApi} from "../api/SsoApi";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
-import './designer/karavan.css';
+import '../designer/karavan.css';
import {v4 as uuidv4} from "uuid";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
-import Icon from "./Logo";
-import {ProjectsPage} from "./projects/ProjectsPage";
-import UserIcon from "@patternfly/react-icons/dist/js/icons/user-icon";
-import ProjectsIcon from
"@patternfly/react-icons/dist/js/icons/repository-icon";
-import KnowledgebaseIcon from
"@patternfly/react-icons/dist/js/icons/book-open-icon";
-import ContainersIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
-import DashboardIcon from
"@patternfly/react-icons/dist/js/icons/tachometer-alt-icon";
-import ServicesIcon from "@patternfly/react-icons/dist/js/icons/services-icon";
-import ComponentsIcon from "@patternfly/react-icons/dist/js/icons/module-icon";
+import Icon from "../Logo";
+import {ProjectsPage} from "../projects/ProjectsPage";
import {MainLogin} from "./MainLogin";
-import {DashboardPage} from "./dashboard/DashboardPage";
-import {ContainersPage} from "./containers/ContainersPage";
-import {ProjectEventBus} from "./api/ProjectEventBus";
-import {AppConfig, ContainerStatus, Project, ToastMessage} from
"./api/ProjectModels";
-import {ProjectPage} from "./project/ProjectPage";
-import {useAppConfigStore, useDevModeStore, useFileStore, useProjectStore,
useStatusesStore} from "./api/ProjectStore";
+import {DashboardPage} from "../dashboard/DashboardPage";
+import {ContainersPage} from "../containers/ContainersPage";
+import {ProjectEventBus} from "../api/ProjectEventBus";
+import {AppConfig, ContainerStatus, Project, ToastMessage} from
"../api/ProjectModels";
+import {ProjectPage} from "../project/ProjectPage";
+import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
import {Notification} from "./Notification";
-import {InfrastructureAPI} from "./designer/utils/InfrastructureAPI";
-import {KnowledgebasePage} from "./knowledgebase/KnowledgebasePage";
-import {ServicesPage} from "./services/ServicesPage";
+import {InfrastructureAPI} from "../designer/utils/InfrastructureAPI";
+import {KnowledgebasePage} from "../knowledgebase/KnowledgebasePage";
+import {ServicesPage} from "../services/ServicesPage";
import {shallow} from "zustand/shallow";
-import {ProjectService} from "./api/ProjectService";
-
-class MenuItem {
- pageId: string = '';
- tooltip: string = '';
- icon: any;
-
- constructor(pageId: string, tooltip: string, icon: any) {
- this.pageId = pageId;
- this.tooltip = tooltip;
- this.icon = icon;
- }
-}
+import {PageNavigation} from "./PageNavigation";
export const Main = () => {
- const [config, setConfig] = useAppConfigStore((state) => [state.config,
state.setConfig], shallow)
+ const [config, pageId, setPageId, setConfig] = useAppConfigStore((state)
=> [state.config, state.pageId, state.setPageId, state.setConfig], shallow)
const [setContainers] = useStatusesStore((state) => [state.setContainers],
shallow);
- const [pageId, setPageId] = useState<string>('projects');
const [request, setRequest] = useState<string>(uuidv4());
- const [showUser, setShowUser] = useState<boolean>(false);
useEffect(() => {
console.log("Main Start");
@@ -104,7 +81,6 @@ export const Main = () => {
KaravanApi.getConfiguration((config: AppConfig) => {
setRequest(uuidv4());
setConfig(config);
- useAppConfigStore.setState({config: config});
InfrastructureAPI.infrastructure = config.infrastructure;
});
updateKamelets();
@@ -145,72 +121,6 @@ export const Main = () => {
});
}
- function getMenu() : MenuItem[] {
- const pages: MenuItem[] = [
- new MenuItem("dashboard", "Dashboard", <DashboardIcon/>),
- new MenuItem("projects", "Projects", <ProjectsIcon/>),
- ]
- if (config.infrastructure === 'docker') {
- pages.push(
- new MenuItem("services", "Services", <ServicesIcon/>),
- new MenuItem("containers", "Containers", <ContainersIcon/>)
- )
- }
- pages.push(new MenuItem("knowledgebase", "Knowledgebase",
<KnowledgebaseIcon/>));
- return pages;
- }
-
- function pageNav() {
- return (<Flex className="nav-buttons" direction={{default: "column"}}
style={{height: "100%"}}
- spaceItems={{default: "spaceItemsNone"}}>
- <FlexItem alignSelf={{default: "alignSelfCenter"}}>
- <Tooltip className="logo-tooltip" content={"Apache Camel
Karavan " + config.version}
- position={"right"}>
- {Icon()}
- </Tooltip>
- </FlexItem>
- {getMenu().map(page =>
- <FlexItem key={page.pageId} className={pageId === page.pageId
? "nav-button-selected" : ""}>
- <Tooltip content={page.tooltip} position={"right"}>
- <Button id={page.pageId} icon={page.icon}
variant={"plain"}
- className={pageId === page.pageId ?
"nav-button-selected" : ""}
- onClick={event => {
- useFileStore.setState({operation: 'none',
file: undefined})
- useDevModeStore.setState({podName:
undefined, status: "none"})
- setPageId(page.pageId);
- }}
- />
- </Tooltip>
- </FlexItem>
- )}
- <FlexItem flex={{default: "flex_2"}} alignSelf={{default:
"alignSelfCenter"}}>
- <Divider/>
- </FlexItem>
- {KaravanApi.authType !== 'public' &&
- <FlexItem alignSelf={{default: "alignSelfCenter"}}>
- <Popover
- aria-label="Current user"
- position={"right-end"}
- hideOnOutsideClick={false}
- isVisible={showUser}
- shouldClose={tip => setShowUser(false)}
- shouldOpen={tip => setShowUser(true)}
- headerContent={<div>{KaravanApi.me.userName}</div>}
- bodyContent={
- <Flex direction={{default: "row"}}>
- {KaravanApi.me.roles &&
Array.isArray(KaravanApi.me.roles)
- && KaravanApi.me.roles
- .filter((r: string) =>
['administrator', 'developer', 'viewer'].includes(r))
- .map((role: string) => <Badge
id={role} isRead>{role}</Badge>)}
- </Flex>
- }
- >
- <UserIcon className="avatar"/>
- </Popover>
- </FlexItem>}
- </Flex>)
- }
-
function toast(title: string, text: string, variant: 'success' | 'danger'
| 'warning' | 'info' | 'default') {
ProjectEventBus.sendAlert(new ToastMessage(title, text, variant))
}
@@ -221,7 +131,7 @@ export const Main = () => {
<Flex direction={{default: "row"}} style={{width: "100%",
height: "100%"}}
alignItems={{default: "alignItemsStretch"}}
spaceItems={{default: 'spaceItemsNone'}}>
<FlexItem>
- {pageNav()}
+ {<PageNavigation/>}
</FlexItem>
<FlexItem flex={{default: "flex_2"}} style={{height:
"100%"}}>
{pageId === 'dashboard' && <DashboardPage
key='dashboard'/>}
diff --git a/karavan-web/karavan-app/src/main/webui/src/MainLogin.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/MainLogin.tsx
similarity index 100%
rename from karavan-web/karavan-app/src/main/webui/src/MainLogin.tsx
rename to karavan-web/karavan-app/src/main/webui/src/main/MainLogin.tsx
diff --git a/karavan-web/karavan-app/src/main/webui/src/Notification.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/Notification.tsx
similarity index 90%
rename from karavan-web/karavan-app/src/main/webui/src/Notification.tsx
rename to karavan-web/karavan-app/src/main/webui/src/main/Notification.tsx
index 5216ddd4..2b12b01a 100644
--- a/karavan-web/karavan-app/src/main/webui/src/Notification.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/Notification.tsx
@@ -3,9 +3,9 @@ import {
Alert,
AlertActionCloseButton, AlertGroup,
} from '@patternfly/react-core';
-import './designer/karavan.css';
-import {ToastMessage} from "./api/ProjectModels";
-import {ProjectEventBus} from "./api/ProjectEventBus";
+import '../designer/karavan.css';
+import {ToastMessage} from "../api/ProjectModels";
+import {ProjectEventBus} from "../api/ProjectEventBus";
export const Notification = () => {
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
b/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
new file mode 100644
index 00000000..f723cd34
--- /dev/null
+++ b/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
@@ -0,0 +1,104 @@
+import React, { useState} from 'react';
+import {
+ Button,
+ Flex,
+ FlexItem,
+ Tooltip,
+ Divider, Popover, Badge
+} from '@patternfly/react-core';
+import {KaravanApi} from "../api/KaravanApi";
+import '../designer/karavan.css';
+import Icon from "../Logo";
+import UserIcon from "@patternfly/react-icons/dist/js/icons/user-icon";
+import ProjectsIcon from
"@patternfly/react-icons/dist/js/icons/repository-icon";
+import KnowledgebaseIcon from
"@patternfly/react-icons/dist/js/icons/book-open-icon";
+import ContainersIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
+import DashboardIcon from
"@patternfly/react-icons/dist/js/icons/tachometer-alt-icon";
+import ServicesIcon from "@patternfly/react-icons/dist/js/icons/services-icon";
+import {useAppConfigStore, useDevModeStore, useFileStore} from
"../api/ProjectStore";
+import {shallow} from "zustand/shallow";
+
+class MenuItem {
+ pageId: string = '';
+ tooltip: string = '';
+ icon: any;
+
+ constructor(pageId: string, tooltip: string, icon: any) {
+ this.pageId = pageId;
+ this.tooltip = tooltip;
+ this.icon = icon;
+ }
+}
+
+export const PageNavigation = () => {
+
+ const [config, pageId, setPageId] = useAppConfigStore((state) =>
[state.config, state.pageId, state.setPageId], shallow)
+ const [setFile] = useFileStore((state) => [state.setFile], shallow)
+ const [setStatus, setPodName] = useDevModeStore((state) =>
[state.setStatus, state.setPodName], shallow)
+ const [showUser, setShowUser] = useState<boolean>(false);
+
+ function getMenu() : MenuItem[] {
+ const pages: MenuItem[] = [
+ new MenuItem("dashboard", "Dashboard", <DashboardIcon/>),
+ new MenuItem("projects", "Projects", <ProjectsIcon/>),
+ ]
+ if (config.infrastructure === 'docker') {
+ pages.push(
+ new MenuItem("services", "Services", <ServicesIcon/>),
+ new MenuItem("containers", "Containers", <ContainersIcon/>)
+ )
+ }
+ pages.push(new MenuItem("knowledgebase", "Knowledgebase",
<KnowledgebaseIcon/>));
+ return pages;
+ }
+
+ return (<Flex className="nav-buttons" direction={{default: "column"}}
style={{height: "100%"}}
+ spaceItems={{default: "spaceItemsNone"}}>
+ <FlexItem alignSelf={{default: "alignSelfCenter"}}>
+ <Tooltip className="logo-tooltip" content={"Apache Camel Karavan "
+ config.version}
+ position={"right"}>
+ {Icon()}
+ </Tooltip>
+ </FlexItem>
+ {getMenu().map(page =>
+ <FlexItem key={page.pageId} className={pageId === page.pageId ?
"nav-button-selected" : ""}>
+ <Tooltip content={page.tooltip} position={"right"}>
+ <Button id={page.pageId} icon={page.icon} variant={"plain"}
+ className={pageId === page.pageId ?
"nav-button-selected" : ""}
+ onClick={event => {
+ setFile('none',undefined);
+ setPodName(undefined);
+ setStatus("none");
+ setPageId(page.pageId);
+ }}
+ />
+ </Tooltip>
+ </FlexItem>
+ )}
+ <FlexItem flex={{default: "flex_2"}} alignSelf={{default:
"alignSelfCenter"}}>
+ <Divider/>
+ </FlexItem>
+ {KaravanApi.authType !== 'public' &&
+ <FlexItem alignSelf={{default: "alignSelfCenter"}}>
+ <Popover
+ aria-label="Current user"
+ position={"right-end"}
+ hideOnOutsideClick={false}
+ isVisible={showUser}
+ shouldClose={tip => setShowUser(false)}
+ shouldOpen={tip => setShowUser(true)}
+ headerContent={<div>{KaravanApi.me.userName}</div>}
+ bodyContent={
+ <Flex direction={{default: "row"}}>
+ {KaravanApi.me.roles &&
Array.isArray(KaravanApi.me.roles)
+ && KaravanApi.me.roles
+ .filter((r: string) => ['administrator',
'developer', 'viewer'].includes(r))
+ .map((role: string) => <Badge id={role}
isRead>{role}</Badge>)}
+ </Flex>
+ }
+ >
+ <UserIcon className="avatar"/>
+ </Popover>
+ </FlexItem>}
+ </Flex>)
+}
\ No newline at end of file
