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 2c146bf6 fix#947- Eip filter buttons included in knowledgebase (#1099)
2c146bf6 is described below
commit 2c146bf6e3859364c75462a433b82c288295de40
Author: Vidhya Sagar <36588343+vidhyasag...@users.noreply.github.com>
AuthorDate: Mon Feb 5 22:48:29 2024 +0800
fix#947- Eip filter buttons included in knowledgebase (#1099)
Co-authored-by: induja <induja.b...@gmail.com>
---
karavan-designer/src/designer/karavan.css | 3 ++
karavan-designer/src/knowledgebase/eip/EipTab.tsx | 43 ++++++++++++++++++----
.../src/main/webui/src/designer/karavan.css | 3 ++
.../main/webui/src/knowledgebase/eip/EipTab.tsx | 43 ++++++++++++++++++----
4 files changed, 76 insertions(+), 16 deletions(-)
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 5e558152..4d9a7162 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -811,3 +811,6 @@
background-color: var(--pf-v5-global--BackgroundColor--light-300);
margin-bottom: 100px;
}
+.karavan .knowledbase-eip-section .pf-v5-c-toggle-group{
+ margin:16px;
+}
\ No newline at end of file
diff --git a/karavan-designer/src/knowledgebase/eip/EipTab.tsx
b/karavan-designer/src/knowledgebase/eip/EipTab.tsx
index e2757f9d..35cc9741 100644
--- a/karavan-designer/src/knowledgebase/eip/EipTab.tsx
+++ b/karavan-designer/src/knowledgebase/eip/EipTab.tsx
@@ -17,7 +17,7 @@
import React from 'react';
import {
Gallery,
- PageSection, PageSectionVariants
+ PageSection, PageSectionVariants,ToggleGroup,ToggleGroupItem
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {EipCard} from "./EipCard";
@@ -25,6 +25,7 @@ import {EipModal} from "./EipModal";
import {CamelModelMetadata, ElementMeta} from
"karavan-core/lib/model/CamelMetadata";
import {useKnowledgebaseStore} from "../KnowledgebaseStore";
import {shallow} from "zustand/shallow";
+import { useSelectorStore } from '../../designer/DesignerStore';
interface Props {
dark: boolean,
@@ -36,20 +37,46 @@ export function EipTab(props: Props) {
const [isModalOpen] = useKnowledgebaseStore((s) =>
[s.isModalOpen], shallow)
-
- const {filter} = props;
- const elements = CamelModelMetadata
- .filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
+ const [ selectedLabels, addSelectedLabel, deleteSelectedLabel] =
+ useSelectorStore((s) =>
+ [s.selectedLabels, s.addSelectedLabel, s.deleteSelectedLabel],
shallow)
+ const { filter } = props;
+ const elements = CamelModelMetadata;
+ const filteredElements=CamelModelMetadata
+ .filter(c =>
c.name.toLowerCase().includes(filter.toLowerCase())).filter((dsl: ElementMeta)
=> {
+ if (selectedLabels.length === 0) {
+ return true;
+ } else {
+ return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
+ }
+ })
.sort((a: ElementMeta, b: ElementMeta) => a.name > b.name ? 1 : -1);
-
+ const eipLabels = [...new Set(elements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
+ function selectLabel(eipLabel: string) {
+ if (!selectedLabels.includes(eipLabel)) {
+ addSelectedLabel(eipLabel);
+ } else {
+ deleteSelectedLabel(eipLabel);
+ }
+ }
return (
<PageSection variant={props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}
- padding={{default: 'noPadding'}}
className="kamelet-section">
+ padding={{ default: 'noPadding' }} className="kamelet-section
knowledbase-eip-section">
+ <ToggleGroup aria-label="Labels" isCompact >
+ {eipLabels.map(eipLabel => <ToggleGroupItem
+ key={eipLabel}
+ text={eipLabel}
+ buttonId={eipLabel}
+ isSelected={selectedLabels.includes(eipLabel)}
+ onChange={selected => selectLabel(eipLabel)}
+ />)}
+ </ToggleGroup>
+
{isModalOpen && <EipModal/>}
<PageSection isFilled className="kamelets-page"
variant={props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Gallery hasGutter>
- {elements.map(c => (
+ {filteredElements.map(c => (
<EipCard key={c.name} element={c}/>
))}
</Gallery>
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 5e558152..4d9a7162 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
@@ -811,3 +811,6 @@
background-color: var(--pf-v5-global--BackgroundColor--light-300);
margin-bottom: 100px;
}
+.karavan .knowledbase-eip-section .pf-v5-c-toggle-group{
+ margin:16px;
+}
\ No newline at end of file
diff --git
a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
index e2757f9d..35cc9741 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/eip/EipTab.tsx
@@ -17,7 +17,7 @@
import React from 'react';
import {
Gallery,
- PageSection, PageSectionVariants
+ PageSection, PageSectionVariants,ToggleGroup,ToggleGroupItem
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {EipCard} from "./EipCard";
@@ -25,6 +25,7 @@ import {EipModal} from "./EipModal";
import {CamelModelMetadata, ElementMeta} from
"karavan-core/lib/model/CamelMetadata";
import {useKnowledgebaseStore} from "../KnowledgebaseStore";
import {shallow} from "zustand/shallow";
+import { useSelectorStore } from '../../designer/DesignerStore';
interface Props {
dark: boolean,
@@ -36,20 +37,46 @@ export function EipTab(props: Props) {
const [isModalOpen] = useKnowledgebaseStore((s) =>
[s.isModalOpen], shallow)
-
- const {filter} = props;
- const elements = CamelModelMetadata
- .filter(c => c.name.toLowerCase().includes(filter.toLowerCase()))
+ const [ selectedLabels, addSelectedLabel, deleteSelectedLabel] =
+ useSelectorStore((s) =>
+ [s.selectedLabels, s.addSelectedLabel, s.deleteSelectedLabel],
shallow)
+ const { filter } = props;
+ const elements = CamelModelMetadata;
+ const filteredElements=CamelModelMetadata
+ .filter(c =>
c.name.toLowerCase().includes(filter.toLowerCase())).filter((dsl: ElementMeta)
=> {
+ if (selectedLabels.length === 0) {
+ return true;
+ } else {
+ return dsl.labels.split(",").some(r =>
selectedLabels.includes(r));
+ }
+ })
.sort((a: ElementMeta, b: ElementMeta) => a.name > b.name ? 1 : -1);
-
+ const eipLabels = [...new Set(elements.map(e =>
e.labels).join(",").split(",").filter(e => e !== 'eip'))];
+ function selectLabel(eipLabel: string) {
+ if (!selectedLabels.includes(eipLabel)) {
+ addSelectedLabel(eipLabel);
+ } else {
+ deleteSelectedLabel(eipLabel);
+ }
+ }
return (
<PageSection variant={props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}
- padding={{default: 'noPadding'}}
className="kamelet-section">
+ padding={{ default: 'noPadding' }} className="kamelet-section
knowledbase-eip-section">
+ <ToggleGroup aria-label="Labels" isCompact >
+ {eipLabels.map(eipLabel => <ToggleGroupItem
+ key={eipLabel}
+ text={eipLabel}
+ buttonId={eipLabel}
+ isSelected={selectedLabels.includes(eipLabel)}
+ onChange={selected => selectLabel(eipLabel)}
+ />)}
+ </ToggleGroup>
+
{isModalOpen && <EipModal/>}
<PageSection isFilled className="kamelets-page"
variant={props.dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Gallery hasGutter>
- {elements.map(c => (
+ {filteredElements.map(c => (
<EipCard key={c.name} element={c}/>
))}
</Gallery>
