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 13902116852b1116bd57e27487a8c336feabc0eb
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Tue Feb 28 14:56:35 2023 -0500
Copy files from designer
---
.../main/webui/src/components/ComponentCard.tsx | 12 ++-
.../src/main/webui/src/designer/karavan.css | 102 +++++++++++++++------
.../main/webui/src/designer/route/DslSelector.tsx | 23 +++--
.../src/main/webui/src/designer/utils/CamelUi.tsx | 2 +
.../main/webui/src/designer/utils/DslMetaModel.ts | 1 +
karavan-app/src/main/webui/src/eip/EipCard.tsx | 7 +-
.../src/main/webui/src/kamelets/KameletCard.tsx | 12 ++-
7 files changed, 110 insertions(+), 49 deletions(-)
diff --git a/karavan-app/src/main/webui/src/components/ComponentCard.tsx
b/karavan-app/src/main/webui/src/components/ComponentCard.tsx
index ba18bd4f..83521a66 100644
--- a/karavan-app/src/main/webui/src/components/ComponentCard.tsx
+++ b/karavan-app/src/main/webui/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-app/src/main/webui/src/designer/karavan.css
b/karavan-app/src/main/webui/src/designer/karavan.css
index 3598b1ab..4e714245 100644
--- a/karavan-app/src/main/webui/src/designer/karavan.css
+++ b/karavan-app/src/main/webui/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-app/src/main/webui/src/designer/route/DslSelector.tsx
b/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
index dd68403b..f394a92e 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslSelector.tsx
+++ b/karavan-app/src/main/webui/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-app/src/main/webui/src/designer/utils/CamelUi.tsx
b/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
index 334607ef..a8985521 100644
--- a/karavan-app/src/main/webui/src/designer/utils/CamelUi.tsx
+++ b/karavan-app/src/main/webui/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-app/src/main/webui/src/designer/utils/DslMetaModel.ts
b/karavan-app/src/main/webui/src/designer/utils/DslMetaModel.ts
index 53318bd0..d267a56d 100644
--- a/karavan-app/src/main/webui/src/designer/utils/DslMetaModel.ts
+++ b/karavan-app/src/main/webui/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-app/src/main/webui/src/eip/EipCard.tsx
b/karavan-app/src/main/webui/src/eip/EipCard.tsx
index bfb2f8de..d288ac6f 100644
--- a/karavan-app/src/main/webui/src/eip/EipCard.tsx
+++ b/karavan-app/src/main/webui/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-app/src/main/webui/src/kamelets/KameletCard.tsx
b/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
index 5d4faafa..cfe3d48d 100644
--- a/karavan-app/src/main/webui/src/kamelets/KameletCard.tsx
+++ b/karavan-app/src/main/webui/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>
