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/04/12 21:06:08 UTC

[camel-karavan] branch main updated: Catalog counter (#314)

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 50d3805  Catalog counter (#314)
50d3805 is described below

commit 50d38057ddf5d798fbf2d2ece44adb30e1a227c4
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Tue Apr 12 17:06:04 2022 -0400

    Catalog counter (#314)
---
 karavan-designer/src/components/ComponentsPage.tsx   |  7 ++++---
 karavan-designer/src/designer/karavan.css            | 11 ++++++++++-
 karavan-designer/src/eip/EipPage.tsx                 |  7 ++++---
 karavan-designer/src/kamelets/KameletsPage.tsx       |  7 ++++---
 karavan-vscode/webview/components/ComponentsPage.tsx |  7 ++++---
 karavan-vscode/webview/eip/EipPage.tsx               |  7 ++++---
 karavan-vscode/webview/kamelets/KameletsPage.tsx     |  7 ++++---
 7 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/karavan-designer/src/components/ComponentsPage.tsx b/karavan-designer/src/components/ComponentsPage.tsx
index 203a789..f1b5dc8 100644
--- a/karavan-designer/src/components/ComponentsPage.tsx
+++ b/karavan-designer/src/components/ComponentsPage.tsx
@@ -5,7 +5,7 @@ import {
     Gallery,
     ToolbarItem,
     TextInput,
-    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {ComponentCard} from "./ComponentCard";
@@ -62,8 +62,9 @@ export class ComponentsPage extends React.Component<Props, State> {
                 <PageSection  className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
                     <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
                         <FlexItem>
-                            <TextContent>
-                                <Text component="h1">Component Catalog</Text>
+                            <TextContent className="header">
+                                <Text component="h2">Component Catalog</Text>
+                                <Badge isRead className="labels">{components.length}</Badge>
                             </TextContent>
                         </FlexItem>
                         <FlexItem>
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index 88c7730..4249a17 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -1083,9 +1083,18 @@ reactour-portal .reactour__popover button:focus-visible {
     outline: none;
 }
 
-/*Kamelets*/
+/*Catalogues*/
 .karavan .kamelets-page .kamelet-card .pf-c-card__footer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
+
+.karavan .tools-section .tools .header {
+    display: flex;
+    flex-direction: row;
+}
+.karavan .tools-section .tools .header .labels {
+    height: fit-content;
+    margin-left: 3px;
+}
\ No newline at end of file
diff --git a/karavan-designer/src/eip/EipPage.tsx b/karavan-designer/src/eip/EipPage.tsx
index fe5fa2f..dd6e301 100644
--- a/karavan-designer/src/eip/EipPage.tsx
+++ b/karavan-designer/src/eip/EipPage.tsx
@@ -5,7 +5,7 @@ import {
     Gallery,
     ToolbarItem,
     TextInput,
-    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {EipCard} from "./EipCard";
@@ -57,8 +57,9 @@ export class EipPage extends React.Component<Props, State> {
                 <PageSection  className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
                     <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
                         <FlexItem>
-                            <TextContent>
-                                <Text component="h1">Enterprise Integration Patterns</Text>
+                            <TextContent className="header">
+                                <Text component="h2">Enterprise Integration Patterns</Text>
+                                <Badge isRead className="labels">{elements.length}</Badge>
                             </TextContent>
                         </FlexItem>
                         <FlexItem>
diff --git a/karavan-designer/src/kamelets/KameletsPage.tsx b/karavan-designer/src/kamelets/KameletsPage.tsx
index a3e0cd4..f4c26ce 100644
--- a/karavan-designer/src/kamelets/KameletsPage.tsx
+++ b/karavan-designer/src/kamelets/KameletsPage.tsx
@@ -5,7 +5,7 @@ import {
     Gallery,
     ToolbarItem,
     TextInput,
-    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {KameletCard} from "./KameletCard";
@@ -60,8 +60,9 @@ export class KameletsPage extends React.Component<Props, State> {
                 <PageSection  className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
                     <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
                         <FlexItem>
-                            <TextContent>
-                                <Text component="h1">Kamelet Catalog</Text>
+                            <TextContent className="header">
+                                <Text component="h2">Kamelet Catalog</Text>
+                                <Badge isRead className="labels">{this.state.kamelets.length}</Badge>
                             </TextContent>
                         </FlexItem>
                         <FlexItem>
diff --git a/karavan-vscode/webview/components/ComponentsPage.tsx b/karavan-vscode/webview/components/ComponentsPage.tsx
index 203a789..f1b5dc8 100644
--- a/karavan-vscode/webview/components/ComponentsPage.tsx
+++ b/karavan-vscode/webview/components/ComponentsPage.tsx
@@ -5,7 +5,7 @@ import {
     Gallery,
     ToolbarItem,
     TextInput,
-    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {ComponentCard} from "./ComponentCard";
@@ -62,8 +62,9 @@ export class ComponentsPage extends React.Component<Props, State> {
                 <PageSection  className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
                     <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
                         <FlexItem>
-                            <TextContent>
-                                <Text component="h1">Component Catalog</Text>
+                            <TextContent className="header">
+                                <Text component="h2">Component Catalog</Text>
+                                <Badge isRead className="labels">{components.length}</Badge>
                             </TextContent>
                         </FlexItem>
                         <FlexItem>
diff --git a/karavan-vscode/webview/eip/EipPage.tsx b/karavan-vscode/webview/eip/EipPage.tsx
index fe5fa2f..dd6e301 100644
--- a/karavan-vscode/webview/eip/EipPage.tsx
+++ b/karavan-vscode/webview/eip/EipPage.tsx
@@ -5,7 +5,7 @@ import {
     Gallery,
     ToolbarItem,
     TextInput,
-    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {EipCard} from "./EipCard";
@@ -57,8 +57,9 @@ export class EipPage extends React.Component<Props, State> {
                 <PageSection  className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
                     <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
                         <FlexItem>
-                            <TextContent>
-                                <Text component="h1">Enterprise Integration Patterns</Text>
+                            <TextContent className="header">
+                                <Text component="h2">Enterprise Integration Patterns</Text>
+                                <Badge isRead className="labels">{elements.length}</Badge>
                             </TextContent>
                         </FlexItem>
                         <FlexItem>
diff --git a/karavan-vscode/webview/kamelets/KameletsPage.tsx b/karavan-vscode/webview/kamelets/KameletsPage.tsx
index a3e0cd4..f4c26ce 100644
--- a/karavan-vscode/webview/kamelets/KameletsPage.tsx
+++ b/karavan-vscode/webview/kamelets/KameletsPage.tsx
@@ -5,7 +5,7 @@ import {
     Gallery,
     ToolbarItem,
     TextInput,
-    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem
+    PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge
 } from '@patternfly/react-core';
 import '../designer/karavan.css';
 import {KameletCard} from "./KameletCard";
@@ -60,8 +60,9 @@ export class KameletsPage extends React.Component<Props, State> {
                 <PageSection  className="tools-section" variant={this.props.dark ? PageSectionVariants.darker : PageSectionVariants.light}>
                     <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
                         <FlexItem>
-                            <TextContent>
-                                <Text component="h1">Kamelet Catalog</Text>
+                            <TextContent className="header">
+                                <Text component="h2">Kamelet Catalog</Text>
+                                <Badge isRead className="labels">{this.state.kamelets.length}</Badge>
                             </TextContent>
                         </FlexItem>
                         <FlexItem>