This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 1e55ca92c12c4e5bb47a2089bde6bb93e5aab69c
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Thu Feb 29 18:24:54 2024 -0500
Fixed #1152
---
karavan-app/src/main/webui/package-lock.json | 2 +-
.../main/webui/src/designer/route/DslSelector.tsx | 65 +++++++----
.../src/designer/route/DslSelector.tsx | 71 +++++++-----
karavan-space/src/designer/karavan.css | 106 ------------------
karavan-space/src/designer/route/DslSelector.css | 122 +++++++++++++++++++++
karavan-space/src/designer/route/DslSelector.tsx | 89 ++++++++++-----
.../src/knowledgebase/KnowledgebasePage.tsx | 10 +-
.../src/knowledgebase/kamelets/KameletCard.tsx | 12 +-
8 files changed, 286 insertions(+), 191 deletions(-)
diff --git a/karavan-app/src/main/webui/package-lock.json
b/karavan-app/src/main/webui/package-lock.json
index 847ccf24..23163150 100644
--- a/karavan-app/src/main/webui/package-lock.json
+++ b/karavan-app/src/main/webui/package-lock.json
@@ -77,7 +77,7 @@
}
},
"../../../../karavan-core": {
- "version": "4.4.0",
+ "version": "4.4.1",
"license": "Apache-2.0",
"dependencies": {
"@types/js-yaml": "^4.0.7",
diff --git a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
index 7edfd421..14a4bb2b 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
@@ -129,26 +129,41 @@ export function DslSelector (props: Props) {
}
}
+ function filterElements(elements: DslMetaModel[]):DslMetaModel[] {
+ return elements.filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl,
filter))
+ .filter((dsl: DslMetaModel) => {
+ if (!isEip || selectedLabels.length === 0) {
+ return true;
+ } else {
+ return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
+ }
+ });
+ }
+
const isEip = selectorTabIndex === 'eip';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString()
: '';
const blockedComponents = ComponentApi.getBlockedComponentNames();
const blockedKamelets = KameletApi.getBlockedKameletNames();
const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
navigation, showSteps);
- let allowedElements = selectorTabIndex === 'component' ?
- elements.filter(dsl => (!blockedComponents.includes(dsl.uri ||
dsl.name))) :
- (selectorTabIndex === 'kamelet' ? elements.filter(dsl =>
(!blockedKamelets.includes(dsl.name))) : elements);
- const eipLabels = [...new Set(elements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
- if (customOnly) allowedElements = allowedElements.filter(k =>
KameletApi.getCustomKameletNames().includes(k.name));
- const filteredElement = allowedElements
- .filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl, filter))
- .filter((dsl: DslMetaModel) => {
- if (!isEip || selectedLabels.length === 0) {
- return true;
- } else {
- return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
- }
- });
+
+ const eipElements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
'eip', showSteps);
+ const componentElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'component', showSteps)
+ .filter(dsl =>
(!blockedComponents.includes(dsl.uri || dsl.name)));
+ let kameletElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'kamelet', showSteps)
+ .filter(dsl =>
(!blockedKamelets.includes(dsl.name)));
+ if (customOnly) kameletElements = kameletElements.filter(k =>
KameletApi.getCustomKameletNames().includes(k.name));
+
+ const filteredEipElements = filterElements(eipElements);
+ const filteredComponentElements = filterElements(componentElements);
+ const filteredKameletElements = filterElements(kameletElements);
+
+ const eipLabels = [...new Set(eipElements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
+
+
+ const filteredElement = navigation === 'component'
+ ? filteredComponentElements
+ : (navigation === 'kamelet' ? filteredKameletElements :
filteredEipElements);
return (
<Modal
@@ -166,17 +181,23 @@ export function DslSelector (props: Props) {
<FlexItem>
<Tabs style={{overflow: 'hidden'}}
activeKey={selectorTabIndex}
onSelect={selectTab}>
- {parentDsl !== undefined &&
+ {parentDsl !== undefined &&
filteredEipElements?.length > 0 &&
<Tab eventKey={"eip"} key={"tab-eip"}
- title={<TabTitleText>Integration
Patterns</TabTitleText>}>
+ title={<TabTitleText>{`Integration
Patterns (${filteredEipElements?.length})`}</TabTitleText>}>
+ </Tab>
+ }
+ {filteredKameletElements?.length > 0 &&
+ <Tab eventKey={'kamelet'} key={"tab-kamelet"}
+ title={
+ <TabTitleText>{`Kamelets
(${filteredKameletElements?.length})`}</TabTitleText>}>
+ </Tab>
+ }
+ {filteredComponentElements?.length > 0 &&
+ <Tab eventKey={'component'}
key={'tab-component'}
+ title={
+ <TabTitleText>{`Components
(${filteredComponentElements?.length})`}</TabTitleText>}>
</Tab>
}
- <Tab eventKey={'kamelet'} key={"tab-kamelet"}
- title={<TabTitleText>Kamelets</TabTitleText>}>
- </Tab>
- <Tab eventKey={'component'} key={'tab-component'}
-
title={<TabTitleText>Components</TabTitleText>}>
- </Tab>
</Tabs>
</FlexItem>
</Flex>
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx
b/karavan-designer/src/designer/route/DslSelector.tsx
index 7edfd421..68e62e22 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -68,7 +68,7 @@ export function DslSelector (props: Props) {
function searchInput() {
return (
<Flex className="search">
- {selectorTabIndex === 'kamelet' && <FlexItem>
+ {selectorTabIndex === 'kamelet' && <FlexItem>
<Switch
label="Custom only"
id="switch"
@@ -84,7 +84,7 @@ export function DslSelector (props: Props) {
</Flex>
)
}
-
+
function getCard(dsl: DslMetaModel, index: number) {
const labels = dsl.labels !== undefined ?
dsl.labels.split(",").filter(label => label !== 'eip') : [];
const isCustom = KameletApi.getCustomKameletNames().includes(dsl.name);
@@ -96,7 +96,7 @@ export function DslSelector (props: Props) {
{['kamelet',
'component'].includes(dsl.navigation.toLowerCase()) &&
<Badge isRead className="version
labels">{dsl.version}</Badge>
}
- {isCustom && <Badge className="custom">custom</Badge>}
+ {isCustom && <Badge className="custom">custom</Badge>}
</CardHeader>
<CardHeader>
{CamelUi.getIconForDsl(dsl)}
@@ -129,26 +129,41 @@ export function DslSelector (props: Props) {
}
}
+ function filterElements(elements: DslMetaModel[]):DslMetaModel[] {
+ return elements.filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl,
filter))
+ .filter((dsl: DslMetaModel) => {
+ if (!isEip || selectedLabels.length === 0) {
+ return true;
+ } else {
+ return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
+ }
+ });
+ }
+
const isEip = selectorTabIndex === 'eip';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString()
: '';
const blockedComponents = ComponentApi.getBlockedComponentNames();
const blockedKamelets = KameletApi.getBlockedKameletNames();
const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
navigation, showSteps);
- let allowedElements = selectorTabIndex === 'component' ?
- elements.filter(dsl => (!blockedComponents.includes(dsl.uri ||
dsl.name))) :
- (selectorTabIndex === 'kamelet' ? elements.filter(dsl =>
(!blockedKamelets.includes(dsl.name))) : elements);
- const eipLabels = [...new Set(elements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
- if (customOnly) allowedElements = allowedElements.filter(k =>
KameletApi.getCustomKameletNames().includes(k.name));
- const filteredElement = allowedElements
- .filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl, filter))
- .filter((dsl: DslMetaModel) => {
- if (!isEip || selectedLabels.length === 0) {
- return true;
- } else {
- return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
- }
- });
+
+ const eipElements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
'eip', showSteps);
+ const componentElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'component', showSteps)
+ .filter(dsl => (!blockedComponents.includes(dsl.uri || dsl.name)));
+ let kameletElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'kamelet', showSteps)
+ .filter(dsl => (!blockedKamelets.includes(dsl.name)));
+ if (customOnly) kameletElements = kameletElements.filter(k =>
KameletApi.getCustomKameletNames().includes(k.name));
+
+ const filteredEipElements = filterElements(eipElements);
+ const filteredComponentElements = filterElements(componentElements);
+ const filteredKameletElements = filterElements(kameletElements);
+
+ const eipLabels = [...new Set(eipElements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
+
+
+ const filteredElement = navigation === 'component'
+ ? filteredComponentElements
+ : (navigation === 'kamelet' ? filteredKameletElements :
filteredEipElements);
return (
<Modal
@@ -166,17 +181,23 @@ export function DslSelector (props: Props) {
<FlexItem>
<Tabs style={{overflow: 'hidden'}}
activeKey={selectorTabIndex}
onSelect={selectTab}>
- {parentDsl !== undefined &&
+ {parentDsl !== undefined &&
filteredEipElements?.length > 0 &&
<Tab eventKey={"eip"} key={"tab-eip"}
- title={<TabTitleText>Integration
Patterns</TabTitleText>}>
+ title={<TabTitleText>{`Integration
Patterns (${filteredEipElements?.length})`}</TabTitleText>}>
+ </Tab>
+ }
+ {filteredKameletElements?.length > 0 &&
+ <Tab eventKey={'kamelet'} key={"tab-kamelet"}
+ title={
+ <TabTitleText>{`Kamelets
(${filteredKameletElements?.length})`}</TabTitleText>}>
+ </Tab>
+ }
+ {filteredComponentElements?.length > 0 &&
+ <Tab eventKey={'component'}
key={'tab-component'}
+ title={
+ <TabTitleText>{`Components
(${filteredComponentElements?.length})`}</TabTitleText>}>
</Tab>
}
- <Tab eventKey={'kamelet'} key={"tab-kamelet"}
- title={<TabTitleText>Kamelets</TabTitleText>}>
- </Tab>
- <Tab eventKey={'component'} key={'tab-component'}
-
title={<TabTitleText>Components</TabTitleText>}>
- </Tab>
</Tabs>
</FlexItem>
</Flex>
diff --git a/karavan-space/src/designer/karavan.css
b/karavan-space/src/designer/karavan.css
index 78b2a135..9e5826a8 100644
--- a/karavan-space/src/designer/karavan.css
+++ b/karavan-space/src/designer/karavan.css
@@ -525,112 +525,6 @@
margin-top: 16px;
}
-.dsl-modal {
- height: 80%;
- color: var(--pf-v5-global--Color--100);
-}
-
-.dsl-modal .dsl-card {
- cursor: pointer;
-}
-
-.dsl-modal .dsl-card .pf-v5-c-card__header-main {
- display: flex;
- flex-direction: row;
-}
-
-.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.dsl-modal .dsl-card .icon {
- height: 20px;
- width: auto;
- border: none;
- margin-right: 6px;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-
-.dsl-modal .search {
- width: 300px;
- position: absolute;
- top: 24px;
- right: 72px;
-}
-
-
-.dsl-modal .search .pf-v5-c-form__group-label {
- padding: 0;
- margin: auto;
-}
-
-.dsl-modal .search .text-field {
- height: auto;
-}
-
-.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
- display: contents;
-}
-
-.dsl-modal .pf-v5-c-card__body {
- padding-bottom: 0;
- height: 54px;
-}
-
-
-.dsl-modal .dsl-card p {
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
-}
-.dsl-modal .pf-v5-c-card__footer {
- padding-bottom: 1em;
-}
-
-.dsl-modal .footer {
- display: flex;
- flex-direction: row;
- margin-top: 6px;
- flex-wrap: wrap;
-}
-
-.dsl-modal .dsl-card .header-labels {
- padding: 5px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.dsl-modal .dsl-card .footer-labels {
- padding: 5px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.dsl-modal .version,
-.dsl-modal .support-type,
-.dsl-modal .support-level {
- white-space: nowrap;
-}
-
-.dsl-modal .labels {
- opacity: 0.5;
- font-weight: 200;
- text-wrap: nowrap;
-}
-
-.dsl-modal .dsl-card:hover .labels {
- opacity: 1;
-}
-
.move-modal {
width: 270px !important;
}
diff --git a/karavan-space/src/designer/route/DslSelector.css
b/karavan-space/src/designer/route/DslSelector.css
new file mode 100644
index 00000000..4bca7774
--- /dev/null
+++ b/karavan-space/src/designer/route/DslSelector.css
@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dsl-modal {
+ height: 80%;
+ color: var(--pf-v5-global--Color--100);
+}
+
+.dsl-modal .dsl-card {
+ cursor: pointer;
+}
+
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+ display: flex;
+ flex-direction: row;
+}
+
+.dsl-modal .dsl-card .header-labels .pf-v5-c-card__header-main {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.dsl-modal .dsl-card .icon {
+ height: 20px;
+ width: auto;
+ border: none;
+ margin-right: 6px;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.dsl-modal .search {
+ position: absolute;
+ top: 24px;
+ right: 72px;
+ display:flex;
+ justify-content:flex-end;
+}
+
+.dsl-modal .search .pf-v5-c-form__group-label {
+ padding: 0;
+ margin: auto;
+}
+
+.dsl-modal .search .text-field {
+ height: auto;
+}
+
+.dsl-modal .pf-v5-c-form.pf-v5-m-horizontal .pf-v5-c-form__group {
+ display: contents;
+}
+
+.dsl-modal .pf-v5-c-card__body {
+ padding-bottom: 0;
+ height: 54px;
+}
+
+
+.dsl-modal .dsl-card p {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+.dsl-modal .pf-v5-c-card__footer {
+ padding-bottom: 1em;
+}
+
+.dsl-modal .footer {
+ display: flex;
+ flex-direction: row;
+ margin-top: 6px;
+ flex-wrap: wrap;
+}
+
+.dsl-modal .dsl-card .header-labels {
+ padding: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.dsl-modal .dsl-card .footer-labels {
+ padding: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.dsl-modal .version,
+.dsl-modal .support-type,
+.dsl-modal .support-level {
+ white-space: nowrap;
+}
+
+.dsl-modal .labels {
+ opacity: 0.5;
+ font-weight: 200;
+ text-wrap: nowrap;
+}
+
+.dsl-modal .dsl-card:hover .labels {
+ opacity: 1;
+}
diff --git a/karavan-space/src/designer/route/DslSelector.tsx
b/karavan-space/src/designer/route/DslSelector.tsx
index 3bc6bb7d..68e62e22 100644
--- a/karavan-space/src/designer/route/DslSelector.tsx
+++ b/karavan-space/src/designer/route/DslSelector.tsx
@@ -19,9 +19,9 @@ import {
Badge,
Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup,
Gallery, Modal, PageSection,
Tab, Tabs, TabTitleText,
- Text, TextInput, ToggleGroup, ToggleGroupItem,
+ Text, TextInput, ToggleGroup, ToggleGroupItem,Switch
} from '@patternfly/react-core';
-import '../karavan.css';
+import './DslSelector.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
import {useDesignerStore, useSelectorStore} from "../DesignerStore";
@@ -48,6 +48,7 @@ export function DslSelector (props: Props) {
const [filter, setFilter] = useState<string>('');
+ const [customOnly, setCustomOnly] = useState<boolean>(false);
useEffect(() => {
}, [selectedLabels]);
@@ -66,18 +67,27 @@ export function DslSelector (props: Props) {
function searchInput() {
return (
- <Form isHorizontal className="search" autoComplete="off">
- <FormGroup fieldId="search">
- <TextInput className="text-field" type="text" id="search"
name="search"
+ <Flex className="search">
+ {selectorTabIndex === 'kamelet' && <FlexItem>
+ <Switch
+ label="Custom only"
+ id="switch"
+ isChecked={customOnly}
+ onChange={(_event, checked) => setCustomOnly(checked)}
+ />
+ </FlexItem>}
+ <FlexItem>
+ <TextInput className="text-field" type="text" id="search"
name="search" autoComplete={"off"}
value={filter}
onChange={(_, value) => setFilter(value)}/>
- </FormGroup>
- </Form>
+ </FlexItem>
+ </Flex>
)
}
function getCard(dsl: DslMetaModel, index: number) {
const labels = dsl.labels !== undefined ?
dsl.labels.split(",").filter(label => label !== 'eip') : [];
+ const isCustom = KameletApi.getCustomKameletNames().includes(dsl.name);
return (
<Card key={dsl.dsl + index} isCompact className="dsl-card"
onClick={event => selectDsl(event, dsl)}>
@@ -86,6 +96,7 @@ export function DslSelector (props: Props) {
{['kamelet',
'component'].includes(dsl.navigation.toLowerCase()) &&
<Badge isRead className="version
labels">{dsl.version}</Badge>
}
+ {isCustom && <Badge className="custom">custom</Badge>}
</CardHeader>
<CardHeader>
{CamelUi.getIconForDsl(dsl)}
@@ -118,25 +129,41 @@ export function DslSelector (props: Props) {
}
}
+ function filterElements(elements: DslMetaModel[]):DslMetaModel[] {
+ return elements.filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl,
filter))
+ .filter((dsl: DslMetaModel) => {
+ if (!isEip || selectedLabels.length === 0) {
+ return true;
+ } else {
+ return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
+ }
+ });
+ }
+
const isEip = selectorTabIndex === 'eip';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString()
: '';
const blockedComponents = ComponentApi.getBlockedComponentNames();
const blockedKamelets = KameletApi.getBlockedKameletNames();
const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
navigation, showSteps);
- const allowedElements = selectorTabIndex === 'component' ?
- elements.filter(dsl => (!blockedComponents.includes(dsl.uri ||
dsl.name))) :
- (selectorTabIndex === 'kamelet' ? elements.filter(dsl =>
(!blockedKamelets.includes(dsl.name))) : elements);
- const eipLabels = [...new Set(elements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
- const filteredElement = allowedElements
- .filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl, filter))
- .filter((dsl: DslMetaModel) => {
- if (!isEip || selectedLabels.length === 0) {
- return true;
- } else {
- return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
- }
- });
+
+ const eipElements = CamelUi.getSelectorModelsForParentFiltered(parentDsl,
'eip', showSteps);
+ const componentElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'component', showSteps)
+ .filter(dsl => (!blockedComponents.includes(dsl.uri || dsl.name)));
+ let kameletElements =
CamelUi.getSelectorModelsForParentFiltered(parentDsl, 'kamelet', showSteps)
+ .filter(dsl => (!blockedKamelets.includes(dsl.name)));
+ if (customOnly) kameletElements = kameletElements.filter(k =>
KameletApi.getCustomKameletNames().includes(k.name));
+
+ const filteredEipElements = filterElements(eipElements);
+ const filteredComponentElements = filterElements(componentElements);
+ const filteredKameletElements = filterElements(kameletElements);
+
+ const eipLabels = [...new Set(eipElements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
+
+
+ const filteredElement = navigation === 'component'
+ ? filteredComponentElements
+ : (navigation === 'kamelet' ? filteredKameletElements :
filteredEipElements);
return (
<Modal
@@ -154,17 +181,23 @@ export function DslSelector (props: Props) {
<FlexItem>
<Tabs style={{overflow: 'hidden'}}
activeKey={selectorTabIndex}
onSelect={selectTab}>
- {parentDsl !== undefined &&
+ {parentDsl !== undefined &&
filteredEipElements?.length > 0 &&
<Tab eventKey={"eip"} key={"tab-eip"}
- title={<TabTitleText>Integration
Patterns</TabTitleText>}>
+ title={<TabTitleText>{`Integration
Patterns (${filteredEipElements?.length})`}</TabTitleText>}>
+ </Tab>
+ }
+ {filteredKameletElements?.length > 0 &&
+ <Tab eventKey={'kamelet'} key={"tab-kamelet"}
+ title={
+ <TabTitleText>{`Kamelets
(${filteredKameletElements?.length})`}</TabTitleText>}>
+ </Tab>
+ }
+ {filteredComponentElements?.length > 0 &&
+ <Tab eventKey={'component'}
key={'tab-component'}
+ title={
+ <TabTitleText>{`Components
(${filteredComponentElements?.length})`}</TabTitleText>}>
</Tab>
}
- <Tab eventKey={'kamelet'} key={"tab-kamelet"}
- title={<TabTitleText>Kamelets</TabTitleText>}>
- </Tab>
- <Tab eventKey={'component'} key={'tab-component'}
-
title={<TabTitleText>Components</TabTitleText>}>
- </Tab>
</Tabs>
</FlexItem>
</Flex>
diff --git a/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
b/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
index 86b777e5..f1630450 100644
--- a/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-space/src/knowledgebase/KnowledgebasePage.tsx
@@ -51,20 +51,22 @@ export const KnowledgebasePage = (props: Props) => {
function getTools() {
return <Toolbar id="toolbar-group-types">
<ToolbarContent>
- {tab === 'kamelets' && <ToolbarItem>
+ <Flex>
+ {tab === 'kamelets' && <FlexItem>
<Switch
label="Custom only"
isChecked={customOnly}
onChange={(_event, checked) => setCustomOnly(checked)}
/>
- </ToolbarItem>}
- <ToolbarItem>
+ </FlexItem>}
+ <FlexItem>
<TextInput className="text-field" type="search"
id="search" name="search"
value={filter}
onChange={(_event, value) => setFilter(value)}
autoComplete="off"
placeholder="Search by name"/>
- </ToolbarItem>
+ </FlexItem>
+ </Flex>
</ToolbarContent>
</Toolbar>
}
diff --git a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
index c773035c..d0784c02 100644
--- a/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
+++ b/karavan-space/src/knowledgebase/kamelets/KameletCard.tsx
@@ -16,7 +16,7 @@
*/
import React, { useEffect, useState } from 'react';
import {
- CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox
+ CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Checkbox, Flex,
FlexItem
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {KameletModel} from "karavan-core/lib/model/KameletModels";
@@ -38,7 +38,7 @@ export function KameletCard(props: Props) {
useEffect(() => {
setBlockedKamelets(KameletApi.getBlockedKameletNames());
}, []);
-
+
const kamelet = props.kamelet;
const isCustom =
KameletApi.getCustomKameletNames().includes(kamelet.metadata.name);
@@ -60,10 +60,12 @@ export function KameletCard(props: Props) {
onClick={event => click(event)}
>
<CardHeader className="header-labels">
- {isCustom && <Badge className="custom">custom</Badge>}
- <Badge isRead className="support-level
labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+ <Flex gap={{default:'gapNone'}}>
+ <Badge isRead className="support-level
labels">{kamelet.metadata.annotations["camel.apache.org/kamelet.support.level"]}</Badge>
+ {isCustom && <Badge className="custom
labels">custom</Badge>}
+ </Flex>
{showBlockCheckbox && <Checkbox id={kamelet.metadata.name}
className="block-checkbox labels" isChecked={!isblockedKamelet}
- onChange={(_, checked) => selectKamelet(_,
checked)}/>}
+ onChange={(_, checked) =>
selectKamelet(_, checked)}/>}
</CardHeader>
<CardHeader>
{CamelUi.getIconFromSource(kamelet.icon())}
