You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/10/13 23:47:28 UTC
[camel-karavan] branch main updated: Refresh Components and Kamelets Button
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 d829a11 Refresh Components and Kamelets Button
d829a11 is described below
commit d829a11fdea079da697186a4708702c62c1e6964
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Thu Oct 13 19:47:17 2022 -0400
Refresh Components and Kamelets Button
---
karavan-app/src/main/webapp/src/Main.tsx | 39 ++++++++++++++--------
.../main/webapp/src/components/ComponentsPage.tsx | 14 ++++++--
.../src/main/webapp/src/kamelets/KameletsPage.tsx | 27 +++++++++++----
karavan-designer/src/components/ComponentsPage.tsx | 14 ++++++--
karavan-designer/src/kamelets/KameletsPage.tsx | 27 +++++++++++----
5 files changed, 90 insertions(+), 31 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/Main.tsx b/karavan-app/src/main/webapp/src/Main.tsx
index b056697..adea4ca 100644
--- a/karavan-app/src/main/webapp/src/Main.tsx
+++ b/karavan-app/src/main/webapp/src/Main.tsx
@@ -32,6 +32,7 @@ import EipIcon from "@patternfly/react-icons/dist/js/icons/topology-icon";
import ComponentsIcon from "@patternfly/react-icons/dist/js/icons/module-icon";
import ConfigurationIcon from "@patternfly/react-icons/dist/js/icons/cogs-icon";
import {MainLogin} from "./MainLogin";
+import {Thenable} from "monaco-editor";
class ToastMessage {
id: string = ''
@@ -126,17 +127,29 @@ export class Main extends React.Component<Props, State> {
KaravanApi.getConfiguration((config: any) => {
this.setState({ config: config })
});
- KaravanApi.getKamelets(yamls => {
- const kamelets: string[] = [];
- yamls.split("\n---\n").map(c => c.trim()).forEach(z => kamelets.push(z));
- KameletApi.saveKamelets(kamelets, true);
- })
- KaravanApi.getComponents(code => {
- const components: [] = JSON.parse(code);
- const jsons: string[] = [];
- components.forEach(c => jsons.push(JSON.stringify(c)));
- ComponentApi.saveComponents(jsons, true);
- })
+ this.updateKamelets();
+ this.updateComponents();
+ }
+
+ updateKamelets: () => Promise<void> = async () => {
+ 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);
+ })
+ });
+ }
+
+ updateComponents: () => Promise<void> = async () => {
+ 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);
+ })
+ });
}
deleteErrorMessage = (id: string) => {
@@ -221,8 +234,8 @@ export class Main extends React.Component<Props, State> {
config={this.state.config}/>}
{this.state.pageId === 'project' && this.state.project && <ProjectPage project={this.state.project} config={this.state.config}/>}
{this.state.pageId === 'configuration' && <ConfigurationPage/>}
- {this.state.pageId === 'kamelets' && <KameletsPage dark={false}/>}
- {this.state.pageId === 'components' && <ComponentsPage dark={false}/>}
+ {this.state.pageId === 'kamelets' && <KameletsPage dark={false} onRefresh={this.updateKamelets}/>}
+ {this.state.pageId === 'components' && <ComponentsPage dark={false} onRefresh={this.updateComponents}/>}
{this.state.pageId === 'eip' && <EipPage dark={false}/>}
</FlexItem>
</Flex>
diff --git a/karavan-app/src/main/webapp/src/components/ComponentsPage.tsx b/karavan-app/src/main/webapp/src/components/ComponentsPage.tsx
index 182ce03..a7d5193 100644
--- a/karavan-app/src/main/webapp/src/components/ComponentsPage.tsx
+++ b/karavan-app/src/main/webapp/src/components/ComponentsPage.tsx
@@ -21,16 +21,18 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge, Button
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
import {ComponentModal} from "./ComponentModal";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import RefreshIcon from "@patternfly/react-icons/dist/esm/icons/sync-alt-icon";
interface Props {
- dark: boolean
+ dark: boolean,
+ onRefresh?: () => Promise<void>
}
interface State {
@@ -86,6 +88,14 @@ export class ComponentsPage extends React.Component<Props, State> {
<FlexItem>
<Toolbar id="toolbar-group-types">
<ToolbarContent>
+ <ToolbarItem>
+ <Button icon={<RefreshIcon/>} variant="link"
+ onClick={e => {
+ this.props.onRefresh?.call(this).then(value => {
+ this.setState({components: ComponentApi.getComponents()});
+ })
+ }}/>
+ </ToolbarItem>
<ToolbarItem>
<TextInput className="text-field" type="search" id="search" name="search"
value={this.state.filter}
diff --git a/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx b/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx
index 9176532..0635917 100644
--- a/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx
+++ b/karavan-app/src/main/webapp/src/kamelets/KameletsPage.tsx
@@ -21,16 +21,18 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge, Button
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KameletCard} from "./KameletCard";
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import {KameletModal} from "./KameletModal";
+import RefreshIcon from "@patternfly/react-icons/dist/esm/icons/sync-alt-icon";
interface Props {
- dark: boolean
+ dark: boolean,
+ onRefresh?: () => Promise<void>
}
interface State {
@@ -56,11 +58,11 @@ export class KameletsPage extends React.Component<Props, State> {
this.setState({kamelets: KameletApi.getKamelets()})
}
- select = (k: KameletModel)=> {
+ select = (k: KameletModel) => {
this.setState({kamelet: k, isModalOpen: true})
}
- search(filter: string){
+ search(filter: string) {
this.setState({
filter: filter,
isModalOpen: false,
@@ -70,10 +72,12 @@ export class KameletsPage extends React.Component<Props, State> {
render() {
return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
+ <PageSection variant={this.props.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}/>
- <PageSection className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <PageSection className="tools-section"
+ variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
<FlexItem>
<TextContent className="header">
@@ -84,6 +88,14 @@ export class KameletsPage extends React.Component<Props, State> {
<FlexItem>
<Toolbar id="toolbar-group-types">
<ToolbarContent>
+ <ToolbarItem>
+ <Button icon={<RefreshIcon/>} variant="link"
+ onClick={e => {
+ this.props.onRefresh?.call(this).then(value => {
+ this.setState({kamelets: KameletApi.getKamelets()});
+ })
+ }}/>
+ </ToolbarItem>
<ToolbarItem>
<TextInput className="text-field" type="search" id="search" name="search"
value={this.state.filter}
@@ -96,7 +108,8 @@ export class KameletsPage extends React.Component<Props, State> {
</FlexItem>
</Flex>
</PageSection>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <PageSection isFilled className="kamelets-page"
+ variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
<Gallery hasGutter>
{this.state.kamelets.map(k => (
<KameletCard key={k.metadata.name} kamelet={k} onClickCard={this.select}/>
diff --git a/karavan-designer/src/components/ComponentsPage.tsx b/karavan-designer/src/components/ComponentsPage.tsx
index 182ce03..a7d5193 100644
--- a/karavan-designer/src/components/ComponentsPage.tsx
+++ b/karavan-designer/src/components/ComponentsPage.tsx
@@ -21,16 +21,18 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge, Button
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {ComponentCard} from "./ComponentCard";
import {ComponentModal} from "./ComponentModal";
import {Component} from "karavan-core/lib/model/ComponentModels";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
+import RefreshIcon from "@patternfly/react-icons/dist/esm/icons/sync-alt-icon";
interface Props {
- dark: boolean
+ dark: boolean,
+ onRefresh?: () => Promise<void>
}
interface State {
@@ -86,6 +88,14 @@ export class ComponentsPage extends React.Component<Props, State> {
<FlexItem>
<Toolbar id="toolbar-group-types">
<ToolbarContent>
+ <ToolbarItem>
+ <Button icon={<RefreshIcon/>} variant="link"
+ onClick={e => {
+ this.props.onRefresh?.call(this).then(value => {
+ this.setState({components: ComponentApi.getComponents()});
+ })
+ }}/>
+ </ToolbarItem>
<ToolbarItem>
<TextInput className="text-field" type="search" id="search" name="search"
value={this.state.filter}
diff --git a/karavan-designer/src/kamelets/KameletsPage.tsx b/karavan-designer/src/kamelets/KameletsPage.tsx
index 9176532..0635917 100644
--- a/karavan-designer/src/kamelets/KameletsPage.tsx
+++ b/karavan-designer/src/kamelets/KameletsPage.tsx
@@ -21,16 +21,18 @@ import {
Gallery,
ToolbarItem,
TextInput,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
+ PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge, Button
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KameletCard} from "./KameletCard";
import {KameletModel} from "karavan-core/lib/model/KameletModels";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import {KameletModal} from "./KameletModal";
+import RefreshIcon from "@patternfly/react-icons/dist/esm/icons/sync-alt-icon";
interface Props {
- dark: boolean
+ dark: boolean,
+ onRefresh?: () => Promise<void>
}
interface State {
@@ -56,11 +58,11 @@ export class KameletsPage extends React.Component<Props, State> {
this.setState({kamelets: KameletApi.getKamelets()})
}
- select = (k: KameletModel)=> {
+ select = (k: KameletModel) => {
this.setState({kamelet: k, isModalOpen: true})
}
- search(filter: string){
+ search(filter: string) {
this.setState({
filter: filter,
isModalOpen: false,
@@ -70,10 +72,12 @@ export class KameletsPage extends React.Component<Props, State> {
render() {
return (
- <PageSection variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light} padding={{ default: 'noPadding' }} className="kamelet-section">
+ <PageSection variant={this.props.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}/>
- <PageSection className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <PageSection className="tools-section"
+ variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
<Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
<FlexItem>
<TextContent className="header">
@@ -84,6 +88,14 @@ export class KameletsPage extends React.Component<Props, State> {
<FlexItem>
<Toolbar id="toolbar-group-types">
<ToolbarContent>
+ <ToolbarItem>
+ <Button icon={<RefreshIcon/>} variant="link"
+ onClick={e => {
+ this.props.onRefresh?.call(this).then(value => {
+ this.setState({kamelets: KameletApi.getKamelets()});
+ })
+ }}/>
+ </ToolbarItem>
<ToolbarItem>
<TextInput className="text-field" type="search" id="search" name="search"
value={this.state.filter}
@@ -96,7 +108,8 @@ export class KameletsPage extends React.Component<Props, State> {
</FlexItem>
</Flex>
</PageSection>
- <PageSection isFilled className="kamelets-page" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
+ <PageSection isFilled className="kamelets-page"
+ variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
<Gallery hasGutter>
{this.state.kamelets.map(k => (
<KameletCard key={k.metadata.name} kamelet={k} onClickCard={this.select}/>