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 e13945352b462547e04a25d71a4e355b3f250d8f
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Fri Nov 18 19:14:55 2022 -0500
Filter custom Kamelets
---
.../src/main/webui/src/kamelets/KameletsPage.tsx | 43 +++++++++++++---------
.../src/main/webui/src/projects/ProjectPage.tsx | 37 +++++++++++++------
karavan-designer/src/kamelets/KameletsPage.tsx | 43 +++++++++++++---------
3 files changed, 77 insertions(+), 46 deletions(-)
diff --git a/karavan-app/src/main/webui/src/kamelets/KameletsPage.tsx
b/karavan-app/src/main/webui/src/kamelets/KameletsPage.tsx
index 0635917..1c500e4 100644
--- a/karavan-app/src/main/webui/src/kamelets/KameletsPage.tsx
+++ b/karavan-app/src/main/webui/src/kamelets/KameletsPage.tsx
@@ -21,7 +21,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem,
Badge, Button
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem,
Badge, Button, Switch
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KameletCard} from "./KameletCard";
@@ -41,7 +41,8 @@ interface State {
repository: string,
path: string,
kamelets: KameletModel[],
- filter: string
+ filter: string,
+ customOnly: boolean
}
export class KameletsPage extends React.Component<Props, State> {
@@ -51,7 +52,8 @@ export class KameletsPage extends React.Component<Props,
State> {
repository: '',
path: '',
kamelets: [],
- filter: ''
+ filter: '',
+ customOnly: false
};
componentDidMount() {
@@ -63,26 +65,26 @@ export class KameletsPage extends React.Component<Props,
State> {
}
search(filter: string) {
- this.setState({
- filter: filter,
- isModalOpen: false,
- kamelets: KameletApi.getKamelets().filter(kamelet =>
kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()))
- })
+ this.setState({ filter: filter, isModalOpen: false})
}
render() {
+ const {dark, onRefresh} = this.props;
+ const {kamelets, kamelet, isModalOpen, customOnly, filter} =
this.state;
+ let kameletList = kamelets.filter(kamelet =>
kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
+ if (customOnly) kameletList = kameletList.filter(k =>
KameletApi.getCustomKameletNames().includes(k.metadata.name));
return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker
: PageSectionVariants.light}
+ <PageSection variant={dark ? PageSectionVariants.darker :
PageSectionVariants.light}
padding={{default: 'noPadding'}}
className="kamelet-section">
- <KameletModal key={this.state.kamelet?.metadata.name +
this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen}
kamelet={this.state.kamelet}/>
+ <KameletModal key={kamelet?.metadata.name +
isModalOpen.toString()}
+ isOpen={isModalOpen} kamelet={kamelet}/>
<PageSection className="tools-section"
- variant={this.props.dark ?
PageSectionVariants.darker : PageSectionVariants.light}>
+ variant={dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
<TextContent className="header">
<Text component="h2">Kamelet Catalog</Text>
- <Badge isRead
className="labels">{this.state.kamelets.length}</Badge>
+ <Badge isRead
className="labels">{kamelets.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
@@ -91,14 +93,21 @@ export class KameletsPage extends React.Component<Props,
State> {
<ToolbarItem>
<Button icon={<RefreshIcon/>}
variant="link"
onClick={e => {
-
this.props.onRefresh?.call(this).then(value => {
+
onRefresh?.call(this).then(value => {
this.setState({kamelets: KameletApi.getKamelets()});
})
}}/>
</ToolbarItem>
+ <ToolbarItem>
+ <Switch
+ label="Custom only"
+ isChecked={customOnly}
+ onChange={checked =>
this.setState({customOnly: checked})}
+ />
+ </ToolbarItem>
<ToolbarItem>
<TextInput className="text-field"
type="search" id="search" name="search"
- value={this.state.filter}
+ value={filter}
onChange={value =>
this.search(value)}
autoComplete="off"
placeholder="Search by
name"/>
@@ -109,9 +118,9 @@ export class KameletsPage extends React.Component<Props,
State> {
</Flex>
</PageSection>
<PageSection isFilled className="kamelets-page"
- variant={this.props.dark ?
PageSectionVariants.darker : PageSectionVariants.light}>
+ variant={dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Gallery hasGutter>
- {this.state.kamelets.map(k => (
+ {kameletList.map(k => (
<KameletCard key={k.metadata.name} kamelet={k}
onClickCard={this.select}/>
))}
</Gallery>
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
index 387d875..b748442 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
@@ -100,15 +100,17 @@ export class ProjectPage extends React.Component<Props,
State> {
this.setState({files: files})
});
KubernetesAPI.inKubernetes = true;
- KaravanApi.getConfigMaps(this.state.environment, (any: []) => {
- KubernetesAPI.setConfigMaps(any);
- });
- KaravanApi.getSecrets(this.state.environment, (any: []) => {
- KubernetesAPI.setSecrets(any);
- });
- KaravanApi.getServices(this.state.environment, (any: []) => {
- KubernetesAPI.setServices(any);
- });
+ if (!this.props.isTemplates){
+ KaravanApi.getConfigMaps(this.state.environment, (any: []) => {
+ KubernetesAPI.setConfigMaps(any);
+ });
+ KaravanApi.getSecrets(this.state.environment, (any: []) => {
+ KubernetesAPI.setSecrets(any);
+ });
+ KaravanApi.getServices(this.state.environment, (any: []) => {
+ KubernetesAPI.setServices(any);
+ });
+ }
}
}
@@ -401,10 +403,21 @@ export class ProjectPage extends React.Component<Props,
State> {
}
getTemplatePanel() {
+ const {tab} = this.state;
return (
- <PageSection isFilled className="kamelets-page
project-page-section" padding={{default: 'padding'}}>
- {this.getProjectFiles()}
- </PageSection>
+ <Flex direction={{default: "column"}} spaceItems={{default:
"spaceItemsNone"}}>
+ {/*<FlexItem className="project-tabs">*/}
+ {/* <Tabs activeKey={tab} onSelect={(event, tabIndex) =>
this.setState({tab: tabIndex})}>*/}
+ {/* <Tab eventKey="templates" title="Templates"/>*/}
+ {/* <Tab eventKey="kamelets" title="Kamelets"/>*/}
+ {/* </Tabs>*/}
+ {/*</FlexItem>*/}
+ <FlexItem>
+ <PageSection padding={{default: "padding"}}>
+ {this.getProjectFiles()}
+ </PageSection>
+ </FlexItem>
+ </Flex>
)
}
diff --git a/karavan-designer/src/kamelets/KameletsPage.tsx
b/karavan-designer/src/kamelets/KameletsPage.tsx
index 0635917..1c500e4 100644
--- a/karavan-designer/src/kamelets/KameletsPage.tsx
+++ b/karavan-designer/src/kamelets/KameletsPage.tsx
@@ -21,7 +21,7 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem,
Badge, Button
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem,
Badge, Button, Switch
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KameletCard} from "./KameletCard";
@@ -41,7 +41,8 @@ interface State {
repository: string,
path: string,
kamelets: KameletModel[],
- filter: string
+ filter: string,
+ customOnly: boolean
}
export class KameletsPage extends React.Component<Props, State> {
@@ -51,7 +52,8 @@ export class KameletsPage extends React.Component<Props,
State> {
repository: '',
path: '',
kamelets: [],
- filter: ''
+ filter: '',
+ customOnly: false
};
componentDidMount() {
@@ -63,26 +65,26 @@ export class KameletsPage extends React.Component<Props,
State> {
}
search(filter: string) {
- this.setState({
- filter: filter,
- isModalOpen: false,
- kamelets: KameletApi.getKamelets().filter(kamelet =>
kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()))
- })
+ this.setState({ filter: filter, isModalOpen: false})
}
render() {
+ const {dark, onRefresh} = this.props;
+ const {kamelets, kamelet, isModalOpen, customOnly, filter} =
this.state;
+ let kameletList = kamelets.filter(kamelet =>
kamelet.spec.definition.title.toLowerCase().includes(filter.toLowerCase()));
+ if (customOnly) kameletList = kameletList.filter(k =>
KameletApi.getCustomKameletNames().includes(k.metadata.name));
return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker
: PageSectionVariants.light}
+ <PageSection variant={dark ? PageSectionVariants.darker :
PageSectionVariants.light}
padding={{default: 'noPadding'}}
className="kamelet-section">
- <KameletModal key={this.state.kamelet?.metadata.name +
this.state.isModalOpen.toString()}
- isOpen={this.state.isModalOpen}
kamelet={this.state.kamelet}/>
+ <KameletModal key={kamelet?.metadata.name +
isModalOpen.toString()}
+ isOpen={isModalOpen} kamelet={kamelet}/>
<PageSection className="tools-section"
- variant={this.props.dark ?
PageSectionVariants.darker : PageSectionVariants.light}>
+ variant={dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default:
'justifyContentSpaceBetween'}}>
<FlexItem>
<TextContent className="header">
<Text component="h2">Kamelet Catalog</Text>
- <Badge isRead
className="labels">{this.state.kamelets.length}</Badge>
+ <Badge isRead
className="labels">{kamelets.length}</Badge>
</TextContent>
</FlexItem>
<FlexItem>
@@ -91,14 +93,21 @@ export class KameletsPage extends React.Component<Props,
State> {
<ToolbarItem>
<Button icon={<RefreshIcon/>}
variant="link"
onClick={e => {
-
this.props.onRefresh?.call(this).then(value => {
+
onRefresh?.call(this).then(value => {
this.setState({kamelets: KameletApi.getKamelets()});
})
}}/>
</ToolbarItem>
+ <ToolbarItem>
+ <Switch
+ label="Custom only"
+ isChecked={customOnly}
+ onChange={checked =>
this.setState({customOnly: checked})}
+ />
+ </ToolbarItem>
<ToolbarItem>
<TextInput className="text-field"
type="search" id="search" name="search"
- value={this.state.filter}
+ value={filter}
onChange={value =>
this.search(value)}
autoComplete="off"
placeholder="Search by
name"/>
@@ -109,9 +118,9 @@ export class KameletsPage extends React.Component<Props,
State> {
</Flex>
</PageSection>
<PageSection isFilled className="kamelets-page"
- variant={this.props.dark ?
PageSectionVariants.darker : PageSectionVariants.light}>
+ variant={dark ? PageSectionVariants.darker :
PageSectionVariants.light}>
<Gallery hasGutter>
- {this.state.kamelets.map(k => (
+ {kameletList.map(k => (
<KameletCard key={k.metadata.name} kamelet={k}
onClickCard={this.select}/>
))}
</Gallery>
