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/03/02 17:20:29 UTC
[camel-karavan] branch main updated: Fix #669
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 44ee0615 Fix #669
44ee0615 is described below
commit 44ee061565e8d4fc6150f4ebea4c314f1547bae1
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Thu Mar 2 12:19:52 2023 -0500
Fix #669
---
karavan-space/package-lock.json | 43 +++++++---
karavan-space/package.json | 2 +-
karavan-space/src/components/ComponentCard.tsx | 12 ++-
karavan-space/src/designer/karavan.css | 102 ++++++++++++++++-------
karavan-space/src/designer/route/DslSelector.tsx | 23 ++---
karavan-space/src/designer/utils/CamelUi.tsx | 2 +
karavan-space/src/designer/utils/DslMetaModel.ts | 1 +
karavan-space/src/eip/EipCard.tsx | 7 +-
karavan-space/src/kamelets/KameletCard.tsx | 12 +--
karavan-space/src/space/GithubModal.tsx | 4 +-
karavan-space/src/space/SpacePage.tsx | 16 +++-
karavan-space/src/space/UploadModal.tsx | 3 +-
12 files changed, 160 insertions(+), 67 deletions(-)
diff --git a/karavan-space/package-lock.json b/karavan-space/package-lock.json
index 884566c9..e750e3ab 100644
--- a/karavan-space/package-lock.json
+++ b/karavan-space/package-lock.json
@@ -42,6 +42,27 @@
"typescript": "^4.9.5"
}
},
+ "../karavan-core": {
+ "version": "3.20.1-SNAPSHOT",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@types/js-yaml": "^4.0.5",
+ "@types/uuid": "^8.3.4",
+ "typescript": "^4.9.4",
+ "uuid": "8.3.2"
+ },
+ "devDependencies": {
+ "@types/chai": "^4.3.0",
+ "@types/dagre": "^0.7.47",
+ "@types/mocha": "^9.1.0",
+ "@types/node": "^18.11.18",
+ "chai": "^4.3.4",
+ "cross-env": "^7.0.3",
+ "fs": "^0.0.1-security",
+ "mocha": "^9.2.0",
+ "ts-node": "^10.4.0"
+ }
+ },
"node_modules/@ampproject/remapping": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -12147,15 +12168,8 @@
}
},
"node_modules/karavan-core": {
- "version": "3.20.1-SNAPSHOT",
- "resolved": "file:../karavan-core",
- "license": "Apache-2.0",
- "dependencies": {
- "@types/js-yaml": "^4.0.5",
- "@types/uuid": "^8.3.4",
- "typescript": "^4.9.4",
- "uuid": "8.3.2"
- }
+ "resolved": "../karavan-core",
+ "link": true
},
"node_modules/kind-of": {
"version": "6.0.3",
@@ -26453,10 +26467,19 @@
}
},
"karavan-core": {
- "version": "3.20.1-SNAPSHOT",
+ "version": "file:../karavan-core",
"requires": {
+ "@types/chai": "^4.3.0",
+ "@types/dagre": "^0.7.47",
"@types/js-yaml": "^4.0.5",
+ "@types/mocha": "^9.1.0",
+ "@types/node": "^18.11.18",
"@types/uuid": "^8.3.4",
+ "chai": "^4.3.4",
+ "cross-env": "^7.0.3",
+ "fs": "^0.0.1-security",
+ "mocha": "^9.2.0",
+ "ts-node": "^10.4.0",
"typescript": "^4.9.4",
"uuid": "8.3.2"
}
diff --git a/karavan-space/package.json b/karavan-space/package.json
index 3701d7ed..44098ffd 100644
--- a/karavan-space/package.json
+++ b/karavan-space/package.json
@@ -1,6 +1,6 @@
{
"name": "karavan-space",
- "version": "3.18.6",
+ "version": "3.20.1",
"license": "Apache-2.0",
"scripts": {
"cp-designer": "cp -r ../karavan-designer/src/designer src",
diff --git a/karavan-space/src/components/ComponentCard.tsx b/karavan-space/src/components/ComponentCard.tsx
index ba18bd4f..83521a66 100644
--- a/karavan-space/src/components/ComponentCard.tsx
+++ b/karavan-space/src/components/ComponentCard.tsx
@@ -16,7 +16,7 @@
*/
import React from 'react';
import {
- CardHeader, Card, CardTitle, CardBody, CardFooter,Badge
+ CardHeader, Card, CardTitle, CardBody, CardFooter, Badge, Text
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {camelIcon, CamelUi} from "../designer/utils/CamelUi";
@@ -48,14 +48,18 @@ export class ComponentCard extends React.Component<Props, State> {
<Card isHoverable isCompact key={component.component.name} className="kamelet-card"
onClick={event => this.click(event)}
>
+ <CardHeader className="header-labels">
+ {component.component.supportType === 'Supported' && <Badge isRead className="support-type labels">{component.component.supportType}</Badge>}
+ <Badge isRead className="support-level labels">{component.component.supportLevel}</Badge>
+ </CardHeader>
<CardHeader>
{CamelUi.getIconFromSource(camelIcon)}
+ <CardTitle>{component.component.title}</CardTitle>
</CardHeader>
- <CardTitle>{component.component.title}</CardTitle>
<CardBody>{component.component.description}</CardBody>
- <CardFooter>
+ <CardFooter className="footer-labels">
<Badge isRead className="labels">{component.component.label}</Badge>
- <Badge isRead className="version">{component.component.version}</Badge>
+ <Badge isRead className="version labels">{component.component.version}</Badge>
</CardFooter>
</Card>
);
diff --git a/karavan-space/src/designer/karavan.css b/karavan-space/src/designer/karavan.css
index 3598b1ab..4e714245 100644
--- a/karavan-space/src/designer/karavan.css
+++ b/karavan-space/src/designer/karavan.css
@@ -43,9 +43,10 @@
justify-content: space-between;
}
-.karavan .page-header .top-toolbar .pf-c-page__header-tools{
+.karavan .page-header .top-toolbar .pf-c-page__header-tools {
margin-right: 0;
}
+
.karavan .page-header .top-toolbar {
width: 100%;
}
@@ -124,10 +125,6 @@
height: 160px;
}
-.kamelets-page .kamelet-card .pf-c-card__header {
- /*padding-right: 6px;*/
-}
-
.kamelets-page .kamelet-card .pf-c-card__header .custom {
margin-left: auto;
}
@@ -140,12 +137,14 @@
.kamelets-page .kamelet-card .pf-c-card__body {
overflow: hidden;
position: relative;
+ line-height: 1.6em;
}
.kamelets-page .kamelet-card .icon {
height: 24px;
margin-top: auto;
margin-bottom: auto;
+ margin-right: 3px;
border: none;
-webkit-user-select: none;
-khtml-user-select: none;
@@ -154,12 +153,33 @@
user-select: none;
}
-.karavan .kamelets-page .kamelet-card .pf-c-card__footer {
+.kamelets-page .kamelet-card .header-labels {
+ padding: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+.kamelets-page .kamelet-card .footer-labels {
+ padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
+.kamelets-page .kamelet-card .version,
+.kamelets-page .kamelet-card .support-type,
+.kamelets-page .kamelet-card .support-level {
+ white-space: nowrap;
+}
+
+.kamelets-page .kamelet-card .labels {
+ opacity: 0.5;
+}
+
+.kamelets-page .kamelet-card:hover .labels {
+ opacity: 1;
+}
/*kamelet modal*/
.kamelet-modal-card .pf-c-card__header {
@@ -277,7 +297,7 @@
flex-direction: row;
}
-.karavan .properties .headers .top h1{
+.karavan .properties .headers .top h1 {
width: 100%;
margin-top: auto;
margin-bottom: auto;
@@ -321,16 +341,17 @@
.karavan .properties .input-group .pf-c-chip-group .pf-c-chip-group__list,
.karavan .properties .input-group .pf-c-chip-group .pf-c-chip-group__list .pf-c-chip-group__list-item,
.karavan .properties .input-group .pf-c-chip-group .pf-c-chip-group__main {
- display:block;
+ display: block;
}
.karavan .properties .input-group .pf-c-chip-group {
margin-left: 0;
}
-.karavan .properties .input-group .pf-c-chip-group .pf-c-chip .pf-c-chip__text{
+.karavan .properties .input-group .pf-c-chip-group .pf-c-chip .pf-c-chip__text {
max-width: inherit;
}
+
.karavan .properties .input-group .pf-c-chip-group .pf-c-chip {
width: 100%;
}
@@ -340,8 +361,8 @@
margin-top: auto;
}
-.karavan .properties .chip .pf-c-button{
- position:absolute;
+.karavan .properties .chip .pf-c-button {
+ position: absolute;
right: 0;
}
@@ -464,7 +485,7 @@
.karavan .properties .expression .pf-c-select__menu-wrapper,
.karavan .properties .object .pf-c-select__menu-wrapper,
.karavan .properties .dataformat .pf-c-select__menu-wrapper,
-.karavan .properties .parameters .pf-c-select__menu-wrapper{
+.karavan .properties .parameters .pf-c-select__menu-wrapper {
width: 350px;
}
@@ -487,7 +508,7 @@
}
.karavan .properties .delete-button {
- color: #909090;
+ color: #909090;
}
.karavan .properties .pf-c-expandable-section__toggle {
@@ -592,7 +613,11 @@
fill: transparent;
}
-@keyframes dashdraw{0%{stroke-dashoffset:10}}
+@keyframes dashdraw {
+ 0% {
+ stroke-dashoffset: 10
+ }
+}
.karavan .dsl-page .flows .step-element {
align-items: center;
@@ -617,14 +642,14 @@
.karavan .dsl-page .flows .children {
display: flex;
flex-wrap: wrap;
- flex-wrap:nowrap;
+ flex-wrap: nowrap;
gap: 6px;
}
.karavan .dsl-page .flows .has-child {
display: flex;
flex-direction: column;
- flex-wrap:nowrap;
+ flex-wrap: nowrap;
gap: 6px;
}
@@ -700,16 +725,19 @@
display: flex;
flex-direction: row;
}
+
.karavan .step-element .header .spacer {
width: 50%
}
+
.karavan .step-element .header .text-bottom {
background-color: rgba(255, 255, 255, 0.5);
}
+
.karavan .step-element .header .text-right {
padding-left: 17px;
width: 50%;
- text-align:start;
+ text-align: start;
}
.karavan .step-element .header .header-text-required {
@@ -867,7 +895,7 @@
}
-.dsl-modal .search .pf-c-form__group-label{
+.dsl-modal .search .pf-c-form__group-label {
padding: 0;
margin: auto;
}
@@ -896,16 +924,23 @@
flex-wrap: wrap;
}
-.dsl-modal .version {
- opacity: 0.5;
- white-space: nowrap;
- margin-left: auto;
+.dsl-modal .pf-c-card.pf-m-compact .header-labels {
+ padding: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+.dsl-modal .pf-c-card.pf-m-compact .footer-labels {
+ padding: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
+.dsl-modal .version,
+.dsl-modal .support-type,
.dsl-modal .support-level {
- position: absolute;
- right: 6px;
- top: 6px;
white-space: nowrap;
}
@@ -913,6 +948,10 @@
opacity: 0.5;
}
+.dsl-modal .dsl-card:hover .labels {
+ opacity: 1;
+}
+
.move-modal {
width: 270px !important;
}
@@ -920,6 +959,7 @@
.move-modal .pf-c-modal-box__body {
margin-right: 0 !important;
}
+
.move-modal .pf-m-plain {
display: none;
}
@@ -1128,13 +1168,14 @@
.karavan .yaml-page {
height: 100px;
}
+
/*Exception*/
/*Template*/
/*Error*/
.karavan .templates-page,
.karavan .exception-page,
-.karavan .error-page{
+.karavan .error-page {
flex: 1;
overflow: auto;
}
@@ -1163,6 +1204,7 @@
display: flex;
flex-direction: row;
}
+
.karavan .tools-section .tools .header .labels {
height: fit-content;
margin-left: 3px;
@@ -1185,8 +1227,7 @@
.karavan .project-builder .pf-c-tabs__link,
.karavan .project-builder .pf-c-card__title,
-.karavan .project-builder .profile-caption
-{
+.karavan .project-builder .profile-caption {
font-size: 14px;
}
@@ -1238,6 +1279,7 @@
gap: 10px;
padding: 10px;
}
+
.karavan .project-builder .center-column {
width: 100%;
display: flex;
@@ -1262,18 +1304,22 @@
flex-direction: column;
justify-content: space-around;
}
+
.karavan .project-builder .project-properties td {
padding: 0;
margin: 0;
}
+
.karavan .project-builder .project-properties td,
.karavan .project-builder .project-properties tr {
border: none;
}
+
.karavan .project-builder .project-properties .delete-button {
padding: 0 0 0 6px;
margin: 0;
}
+
.karavan .project-builder .add-button {
width: fit-content;
margin-top: 6px;
diff --git a/karavan-space/src/designer/route/DslSelector.tsx b/karavan-space/src/designer/route/DslSelector.tsx
index dd68403b..f394a92e 100644
--- a/karavan-space/src/designer/route/DslSelector.tsx
+++ b/karavan-space/src/designer/route/DslSelector.tsx
@@ -88,28 +88,31 @@ export class DslSelector extends React.Component<Props, State> {
return (
<Card key={dsl.dsl + index} isHoverable isCompact className="dsl-card"
onClick={event => this.selectDsl(event, dsl)}>
+ <CardHeader className="header-labels">
+ {dsl.supportType === 'Supported' && <Badge isRead className="support-type labels">{dsl.supportType}</Badge>}
+ <Badge isRead className="support-level labels">{dsl.supportLevel}</Badge>
+ </CardHeader>
<CardHeader>
{CamelUi.getIconForDsl(dsl)}
<Text>{dsl.title}</Text>
- {dsl.supportLevel && dsl.supportLevel === 'Preview' && <Badge isRead className="support-level">{dsl.supportLevel}</Badge>}
</CardHeader>
<CardBody>
<Text>{dsl.description}</Text>
</CardBody>
- <CardFooter>
{dsl.navigation.toLowerCase() === "kamelet"
- && <div className="footer" style={{justifyContent: "space-between"}}>
+ && <CardFooter className="footer-labels">
<Badge isRead className="labels">{dsl.labels}</Badge>
- <Badge isRead className="version">{dsl.version}</Badge>
- </div>}
+ <Badge isRead className="version labels">{dsl.version}</Badge>
+ </CardFooter>}
{dsl.navigation.toLowerCase() === "component"
- && <div className="footer" style={{justifyContent: "flex-start"}}>
- {dsl.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
+ && <CardFooter className="footer-labels">
+ <div>
+ {dsl.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
className="labels">{s}</Badge>)}
- <Badge isRead className="version">{dsl.version}</Badge>
- </div>
+ </div>
+ <Badge isRead className="version labels">{dsl.version}</Badge>
+ </CardFooter>
}
- </CardFooter>
</Card>
)
}
diff --git a/karavan-space/src/designer/utils/CamelUi.tsx b/karavan-space/src/designer/utils/CamelUi.tsx
index 334607ef..a8985521 100644
--- a/karavan-space/src/designer/utils/CamelUi.tsx
+++ b/karavan-space/src/designer/utils/CamelUi.tsx
@@ -177,6 +177,8 @@ export class CamelUi {
title: c.component.title,
description: c.component.description,
version: c.component.version,
+ supportLevel: c.component.supportLevel,
+ supportType: c.component.supportType,
}));
}
diff --git a/karavan-space/src/designer/utils/DslMetaModel.ts b/karavan-space/src/designer/utils/DslMetaModel.ts
index 53318bd0..d267a56d 100644
--- a/karavan-space/src/designer/utils/DslMetaModel.ts
+++ b/karavan-space/src/designer/utils/DslMetaModel.ts
@@ -25,6 +25,7 @@ export class DslMetaModel {
navigation: string = ''
version: string = ''
supportLevel: string = ''
+ supportType: string = ''
properties: any;
public constructor(init?: Partial<DslMetaModel>) {
diff --git a/karavan-space/src/eip/EipCard.tsx b/karavan-space/src/eip/EipCard.tsx
index bfb2f8de..d288ac6f 100644
--- a/karavan-space/src/eip/EipCard.tsx
+++ b/karavan-space/src/eip/EipCard.tsx
@@ -53,8 +53,11 @@ export class EipCard extends React.Component<Props, State> {
</CardHeader>
<CardTitle>{component.title}</CardTitle>
<CardBody>{component.description}</CardBody>
- <CardFooter>
- <Badge isRead className="labels">{component.labels}</Badge>
+ <CardFooter className="footer-labels">
+ <div>
+ {component.labels.split(',').map((s: string, i: number) => <Badge key={s + i} isRead
+ className="labels">{s}</Badge>)}
+ </div>
</CardFooter>
</Card>
)
diff --git a/karavan-space/src/kamelets/KameletCard.tsx b/karavan-space/src/kamelets/KameletCard.tsx
index 5d4faafa..cfe3d48d 100644
--- a/karavan-space/src/kamelets/KameletCard.tsx
+++ b/karavan-space/src/kamelets/KameletCard.tsx
@@ -50,16 +50,18 @@ export class KameletCard extends React.Component<Props, State> {
<Card isHoverable isCompact key={kamelet.metadata.name} className="kamelet-card"
onClick={event => this.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>
+ </CardHeader>
<CardHeader>
{CamelUi.getIconFromSource(kamelet.icon())}
- {isCustom && <Badge className="custom">custom</Badge>}
+ <CardTitle>{kamelet.spec.definition.title}</CardTitle>
</CardHeader>
- <CardTitle>{kamelet.spec.definition.title}</CardTitle>
<CardBody>{kamelet.spec.definition.description}</CardBody>
- <CardFooter>
- {/*<div style={{justifyContent: "space-between"}}>*/}
+ <CardFooter className="footer-labels">
<Badge isRead className="labels">{kamelet.metadata.labels["camel.apache.org/kamelet.type"].toLowerCase()}</Badge>
- <Badge isRead className="version">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
+ <Badge isRead className="version labels">{kamelet.metadata.annotations["camel.apache.org/catalog.version"].toLowerCase()}</Badge>
{/*</div>*/}
</CardFooter>
</Card>
diff --git a/karavan-space/src/space/GithubModal.tsx b/karavan-space/src/space/GithubModal.tsx
index 23c80da1..70b5a158 100644
--- a/karavan-space/src/space/GithubModal.tsx
+++ b/karavan-space/src/space/GithubModal.tsx
@@ -11,8 +11,6 @@ import '../designer/karavan.css';
import {GithubApi, GithubParams} from "../api/GithubApi";
import GithubImageIcon from "@patternfly/react-icons/dist/esm/icons/github-icon";
import {StorageApi} from "../api/StorageApi";
-import {KameletApi} from "../../../karavan-core/lib/api/KameletApi";
-import {ComponentApi} from "../../../karavan-core/lib/api/ComponentApi";
import {SpaceBus} from "./SpaceBus";
interface Props {
@@ -70,7 +68,7 @@ export class GithubModal extends React.Component<Props, State> {
githubAuth = () => {
GithubApi.auth(
(result: any) => {
- const onlyToken = StorageApi.getGithubParameters() != undefined;
+ const onlyToken = StorageApi.getGithubParameters() !== undefined;
if (onlyToken){
this.setState({token: result.token})
} else {
diff --git a/karavan-space/src/space/SpacePage.tsx b/karavan-space/src/space/SpacePage.tsx
index 4c0346f0..f4489121 100644
--- a/karavan-space/src/space/SpacePage.tsx
+++ b/karavan-space/src/space/SpacePage.tsx
@@ -19,9 +19,10 @@ import {
Toolbar,
ToolbarContent,
ToolbarItem,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Button, Tooltip, ToggleGroup, ToggleGroupItem
+ PageSection, TextContent, Text, Flex, FlexItem, Button, Tooltip, ToggleGroup, ToggleGroupItem
} from '@patternfly/react-core';
import '../designer/karavan.css';
+import CopyIcon from "@patternfly/react-icons/dist/esm/icons/copy-icon";
import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon";
import GithubImageIcon from "@patternfly/react-icons/dist/esm/icons/github-icon";
@@ -58,6 +59,10 @@ export class SpacePage extends React.Component<Props, State> {
this.props.onSave?.call(this, filename, yaml, propertyOnly);
}
+ copyToClipboard = () => {
+ navigator.clipboard.writeText(this.props.yaml);
+ }
+
download = () => {
const {name, yaml} = this.props;
if (name && yaml) {
@@ -153,9 +158,16 @@ export class SpacePage extends React.Component<Props, State> {
<FlexItem>
<Toolbar id="toolbar-group-types">
<ToolbarContent>
+ <ToolbarItem>
+ <Tooltip content="Copy to Clipboard" position={"bottom"}>
+ <Button variant="primary" icon={<CopyIcon/>} onClick={e => this.copyToClipboard()}>
+ Copy
+ </Button>
+ </Tooltip>
+ </ToolbarItem>
<ToolbarItem>
<Tooltip content="Download YAML" position={"bottom"}>
- <Button variant="primary" icon={<DownloadIcon/>} onClick={e => this.download()}>
+ <Button variant="secondary" icon={<DownloadIcon/>} onClick={e => this.download()}>
YAML
</Button>
</Tooltip>
diff --git a/karavan-space/src/space/UploadModal.tsx b/karavan-space/src/space/UploadModal.tsx
index 1177d06d..1ea8f463 100644
--- a/karavan-space/src/space/UploadModal.tsx
+++ b/karavan-space/src/space/UploadModal.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import {
- TextInput,
- Button, Modal, FormGroup, ModalVariant, Switch, Form, FileUpload, Radio
+ Button, Modal, FormGroup, ModalVariant, Form, FileUpload
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {GeneratorApi} from "../api/GeneratorApi";