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 2023/10/26 00:05:10 UTC
[camel-karavan] 06/07: Kamelet Editor in App for #315
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 62ba6f147b9f89b417192a800cba46cff2118cd2
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Oct 23 20:39:22 2023 -0400
Kamelet Editor in App for #315
---
.../src/main/webui/src/api/ProjectService.ts | 12 +++++++++
.../webui/src/knowledgebase/KnowledgebasePage.tsx | 22 +++++++++++++++-
.../src/main/webui/src/main/useMainHook.tsx | 10 ++------
.../webui/src/project/ImageDownloadToolbar.tsx | 8 +++---
.../webui/src/project/files/CreateFileModal.tsx | 1 -
.../main/webui/src/project/files/FilesToolbar.tsx | 29 +++++++++++++++++++++-
6 files changed, 67 insertions(+), 15 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/api/ProjectService.ts b/karavan-web/karavan-app/src/main/webui/src/api/ProjectService.ts
index 7f3f2128..5e074888 100644
--- a/karavan-web/karavan-app/src/main/webui/src/api/ProjectService.ts
+++ b/karavan-web/karavan-app/src/main/webui/src/api/ProjectService.ts
@@ -29,6 +29,7 @@ import {
} from './ProjectStore';
import {ProjectEventBus} from './ProjectEventBus';
import {EventBus} from "../designer/utils/EventBus";
+import {KameletApi} from "karavan-core/lib/api/KameletApi";
export class ProjectService {
@@ -135,6 +136,17 @@ export class ProjectService {
});
}
+ public static reloadKamelets() {
+ 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);
+ })
+ }
+
public static saveFile(file: ProjectFile, active: boolean) {
KaravanApi.postProjectFile(file, res => {
if (res.status === 200) {
diff --git a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
index 02c6b641..35368b54 100644
--- a/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/knowledgebase/KnowledgebasePage.tsx
@@ -16,7 +16,21 @@
*/
import React, {useState} from 'react';
import '../designer/karavan.css';
-import {Flex, FlexItem, PageSection, Switch, Tab, Tabs, Text, TextContent, TextInput, Toolbar, ToolbarContent, ToolbarItem} from "@patternfly/react-core";
+import {
+ Button,
+ Flex,
+ FlexItem,
+ PageSection,
+ Switch,
+ Tab,
+ Tabs,
+ Text,
+ TextContent,
+ TextInput,
+ Toolbar,
+ ToolbarContent,
+ ToolbarItem
+} from "@patternfly/react-core";
import {MainToolbar} from "../designer/MainToolbar";
import {KameletsTab} from "./kamelets/KameletsTab";
import {EipTab} from "./eip/EipTab";
@@ -24,6 +38,7 @@ import {ComponentsTab} from "./components/ComponentsTab";
interface Props {
dark: boolean,
+ onKameletsReload? (): void;
}
export const KnowledgebasePage = (props: Props) => {
@@ -41,6 +56,11 @@ export const KnowledgebasePage = (props: Props) => {
function getTools() {
return <Toolbar id="toolbar-group-types">
<ToolbarContent>
+ {tab === 'kamelets' && <ToolbarItem>
+ <Button
+ onClick={(_event) => props.onKameletsReload?.()}
+ >Reload</Button>
+ </ToolbarItem>}
{tab === 'kamelets' && <ToolbarItem>
<Switch
label="Custom only"
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx b/karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx
index c0433632..a11c87c9 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx
@@ -23,6 +23,7 @@ import {AppConfig, ContainerStatus} from "../api/ProjectModels";
import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
import {InfrastructureAPI} from "../designer/utils/InfrastructureAPI";
import {shallow} from "zustand/shallow";
+import {ProjectService} from "../api/ProjectService";
export function useMainHook () {
@@ -51,14 +52,7 @@ export function useMainHook () {
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);
- })
+ ProjectService.reloadKamelets();
});
}
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx b/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
index 82b5e6f8..3316b008 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ImageDownloadToolbar.tsx
@@ -55,10 +55,10 @@ export function ImageDownloadToolbar() {
<ToolbarContent>
{isIntegration() &&
<FlexItem>
- <Tooltip content="Download image" position={"bottom-end"}>
- <Button size="sm" variant="control" icon={<DownloadImageIcon/>}
- onClick={e => downloadImage()}/>
- </Tooltip>
+ {/*<Tooltip content="Download image" position={"bottom-end"}>*/}
+ {/* <Button size="sm" variant="control" icon={<DownloadImageIcon/>}*/}
+ {/* onClick={e => downloadImage()}/>*/}
+ {/*</Tooltip>*/}
</FlexItem>
}
</ToolbarContent>
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx b/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
index 1221dc38..60723466 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/files/CreateFileModal.tsx
@@ -71,7 +71,6 @@ export function CreateFileModal (props: Props) {
const integration = Integration.createNew(kameletName, 'kamelet');
const meta:MetadataLabels = new MetadataLabels({"camel.apache.org/kamelet.type": kameletType});
integration.metadata.labels = meta;
- console.log(integration);
return CamelDefinitionYaml.integrationToYaml(integration);
} else {
return '';
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx b/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
index e73a5ace..9acb08b9 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx
@@ -18,7 +18,16 @@ import React, {useEffect, useState} from 'react';
import {
Button,
Flex,
- FlexItem, Form, FormGroup, FormHelperText, Label, Modal, ModalVariant, TextInput, Tooltip, TooltipPosition,
+ FlexItem,
+ Form,
+ FormGroup,
+ FormHelperText,
+ Label,
+ Modal,
+ ModalVariant,
+ TextInput,
+ Tooltip,
+ TooltipPosition,
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import UploadIcon from "@patternfly/react-icons/dist/esm/icons/upload-icon";
@@ -27,6 +36,7 @@ import {useFilesStore, useFileStore, useProjectStore} from "../../api/ProjectSto
import {shallow} from "zustand/shallow";
import {ProjectService} from "../../api/ProjectService";
import PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
+import RefreshIcon from "@patternfly/react-icons/dist/esm/icons/sync-alt-icon";
export function FileToolbar () {
@@ -108,7 +118,24 @@ export function FileToolbar () {
)
}
+ function isKameletsProject(): boolean {
+ return project.projectId === 'kamelets';
+ }
+
return <Flex className="toolbar" direction={{default: "row"}} justifyContent={{default: "justifyContentFlexEnd"}}>
+ {isKameletsProject() && <FlexItem align={{default: "alignLeft"}} flex={{default: "flex_3"}}>
+ <Tooltip content="Load Custom Kamelets to Library" position={TooltipPosition.right}>
+ <Button size="sm"
+ variant={"secondary"}
+ className="project-button"
+ icon={<RefreshIcon/>}
+ onClick={() => {
+ ProjectService.reloadKamelets();
+ }}>
+ Load
+ </Button>
+ </Tooltip>
+ </FlexItem>}
<FlexItem>{getLastUpdatePanel()}</FlexItem>
<FlexItem>
<Tooltip content="Commit and push to git" position={"bottom-end"}>