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 c1265faf209f07d1543f3255d93b54808e193c6f
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Sep 12 21:40:33 2023 -0400
Camel statuses for #885
---
.../karavan-app/src/main/webui/src/index.css | 34 ++++++++++++----
.../webui/src/knowledgebase/KnowledgebasePage.tsx | 23 ++++++++---
.../src/main/webui/src/project/ProjectPage.tsx | 47 ++++++++++++++++------
.../src/main/webui/src/project/ProjectPanel.tsx | 39 +++++++++---------
.../webui/src/project/dashboard/DashboardTab.tsx | 14 +++++--
.../webui/src/project/file/PropertiesTable.tsx | 2 +-
6 files changed, 107 insertions(+), 52 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/index.css
b/karavan-web/karavan-app/src/main/webui/src/index.css
index 480fec25..b01376e6 100644
--- a/karavan-web/karavan-app/src/main/webui/src/index.css
+++ b/karavan-web/karavan-app/src/main/webui/src/index.css
@@ -136,6 +136,26 @@
font-size: 14px;
}
+.karavan .project-page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.karavan .project-page .scrollable-out {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.karavan .project-page .scrollable-in {
+ overflow: auto;
+ flex-shrink: unset;
+ flex-grow: 1;
+ background-color: var(--pf-v5-global--BackgroundColor--light-300);
+ margin-bottom: 50px;
+}
+
.karavan .project-page .project-title .pf-v5-l-flex.pf-m-column > * {
margin-bottom: 0;
}
@@ -161,26 +181,26 @@
font-size: 14px;
}
-.karavan .project-page .project-development {
+.karavan .project-page .dashboard-card {
margin-bottom: 16px;
}
-.karavan .project-page .project-development .runner-toolbar {
+.karavan .project-page .dashboard-card .runner-toolbar {
line-height: 24px;
row-gap: 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
-.karavan .project-page .project-development .runner-toolbar .row {
+.karavan .project-page .dashboard-card .runner-toolbar .row {
line-height: 24px;
height: 30px;
}
-.karavan .project-page .project-development .pf-v5-c-panel__header {
+.karavan .project-page .dashboard-card .pf-v5-c-panel__header {
padding: 0;
}
-.karavan .project-page .project-development .pf-v5-c-panel__main {
+.karavan .project-page .dashboard-card .pf-v5-c-panel__main {
max-height: 212px;
}
@@ -266,8 +286,8 @@
min-width: 0;
}
.karavan .project-page .project-properties .delete-button {
- padding: 0 0 0 6px;
- margin: 0;
+ padding: 0 0 0 0;
+ margin: 0 16px 0 0;
}
.karavan .project-page .pf-v5-c-label__icon {
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..3078d21a 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,20 @@
*/
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 {
+ 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";
@@ -75,11 +88,9 @@ export const KnowledgebasePage = (props: Props) => {
</FlexItem>
</Flex>
</PageSection>
- <>
- {tab === 'kamelets' && <KameletsTab dark={props.dark}
filter={filter} customOnly={customOnly}/>}
- {tab === 'eip' && <EipTab dark={props.dark} filter={filter}/>}
- {tab === 'components' && <ComponentsTab dark={props.dark}
filter={filter}/>}
- </>
+ {tab === 'kamelets' && <KameletsTab dark={props.dark}
filter={filter} customOnly={customOnly}/>}
+ {tab === 'eip' && <EipTab dark={props.dark} filter={filter}/>}
+ {tab === 'components' && <ComponentsTab dark={props.dark}
filter={filter}/>}
</PageSection>
)
diff --git a/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
index 9a39a090..c53cd2ef 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ProjectPage.tsx
@@ -1,13 +1,13 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
import {
Flex,
FlexItem,
- PageSection,
+ PageSection, Tab, Tabs,
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {ProjectToolbar} from "./ProjectToolbar";
import {ProjectLogPanel} from "./log/ProjectLogPanel";
-import {Project, ProjectFileTypes} from "../api/ProjectModels";
+import {Project} from "../api/ProjectModels";
import {useFileStore, useProjectsStore, useProjectStore} from
"../api/ProjectStore";
import {MainToolbar} from "../designer/MainToolbar";
import {ProjectTitle} from "./ProjectTitle";
@@ -18,21 +18,19 @@ import {useParams} from "react-router-dom";
import {KaravanApi} from "../api/KaravanApi";
import {ProjectDataPoller} from "./ProjectDataPoller";
-export function ProjectPage () {
+export function ProjectPage() {
const {file, operation} = useFileStore();
- const [mode, setMode] = useState<"design" | "code">("design");
- const [key, setKey] = useState<string>('');
const [projects] = useProjectsStore((state) => [state.projects], shallow)
- const [project, setProject] = useProjectStore((s) => [s.project,
s.setProject], shallow )
- let { projectId } = useParams();
- const [tab, setTab] = useState<string | number>('files');
+ const [project, setProject, tab, setTab] = useProjectStore((s) =>
[s.project, s.setProject, s.tabIndex, s.setTabIndex], shallow);
+
+ let {projectId} = useParams();
useEffect(() => {
const p = projects.filter(project => project.projectId ===
projectId).at(0);
if (p) {
setProject(p, "select");
- } else if (projectId){
+ } else if (projectId) {
KaravanApi.getProject(projectId, project1 => setProject(project1,
"select"));
}
return () => {
@@ -40,12 +38,35 @@ export function ProjectPage () {
}
}, []);
+ function isBuildIn(): boolean {
+ return ['kamelets', 'templates',
'services'].includes(project.projectId);
+ }
+
+ function showTabs(): boolean {
+ return !isBuildIn() && !showFilePanel;
+ }
+
+ const buildIn = isBuildIn();
+
const showFilePanel = file !== undefined && operation === 'select';
return (
- <PageSection className="designer-page project-page" padding={{default:
'noPadding'}}>
- <div className="tools-section">
+ <PageSection className="project-page" padding={{default: 'noPadding'}}>
+ <PageSection className="tools-section" padding={{default:
'noPadding'}}>
<MainToolbar title={<ProjectTitle/>}
tools={<ProjectToolbar/>}/>
- </div>
+ </PageSection>
+ <PageSection className="tools-section" padding={{default:
'noPadding'}}>
+ <Flex direction={{default: "column"}} spaceItems={{default:
"spaceItemsNone"}}>
+ <FlexItem className="project-tabs">
+ {showTabs() && <Tabs activeKey={tab} onSelect={(event,
tabIndex) => setTab(tabIndex)}>
+ <Tab eventKey="files" title="Files"/>
+ <Tab eventKey="dashboard" title="Dashboard"/>
+ <Tab eventKey="trace" title="Trace"/>
+ <Tab eventKey="build" title="Build"/>
+ <Tab eventKey="container" title="Container"/>
+ </Tabs>}
+ </FlexItem>
+ </Flex>
+ </PageSection>
{showFilePanel && <FileEditor projectId={project.projectId}/>}
{!showFilePanel && <ProjectPanel/>}
<ProjectLogPanel/>
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/ProjectPanel.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/ProjectPanel.tsx
index 9b07d27a..5769a286 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/ProjectPanel.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/ProjectPanel.tsx
@@ -1,7 +1,7 @@
import React, {useEffect} from 'react';
import {
Flex,
- FlexItem, Tabs, Tab
+ FlexItem, Tabs, Tab, PageSection, PageSectionVariants, Gallery
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {FilesTab} from "./files/FilesTab";
@@ -14,6 +14,8 @@ import {shallow} from "zustand/shallow";
import {ImagesPanel} from "./build/ImagesPanel";
import {ContainerButtons} from "./container/ContainerButtons";
import {ProjectContainerTab} from "./container/ProjectContainerTab";
+import {KameletModal} from "../knowledgebase/kamelets/KameletModal";
+import {KameletCard} from "../knowledgebase/kamelets/KameletCard";
export function ProjectPanel() {
@@ -27,6 +29,7 @@ export function ProjectPanel() {
function onRefresh() {
if (project.projectId) {
ProjectService.refreshProjectData(project.projectId);
+ setTab('files')
}
}
@@ -36,25 +39,19 @@ export function ProjectPanel() {
const buildIn = isBuildIn();
return (
- <Flex direction={{default: "column"}} spaceItems={{default:
"spaceItemsNone"}}>
- <FlexItem className="project-tabs">
- {!buildIn && <Tabs activeKey={tab} onSelect={(event, tabIndex)
=> setTab(tabIndex)}>
- <Tab eventKey="files" title="Files"/>
- <Tab eventKey="dashboard" title="Dashboard"/>
- <Tab eventKey="trace" title="Trace"/>
- <Tab eventKey="build" title="Build"/>
- <Tab eventKey="container" title="Container"/>
- </Tabs>}
- </FlexItem>
- {buildIn && tab === 'files' && <FlexItem><FilesTab/></FlexItem>}
- <FlexItem>
- {!buildIn && tab === 'files' &&
<FlexItem><FilesTab/></FlexItem>}
- {!buildIn && tab === 'dashboard' && project &&
<FlexItem><DashboardTab/></FlexItem>}
- {!buildIn && tab === 'trace' && project &&
<FlexItem><TraceTab/></FlexItem>}
- {!buildIn && tab === 'build' &&
<FlexItem><ProjectBuildTab/></FlexItem>}
- {!buildIn && tab === 'build' && config.infrastructure !==
'kubernetes' && <FlexItem><ImagesPanel/></FlexItem>}
- {!buildIn && tab === 'container' &&
<FlexItem><ProjectContainerTab/></FlexItem>}
- </FlexItem>
- </Flex>
+ <PageSection padding={{default: 'noPadding'}}
className="scrollable-out">
+ <PageSection isFilled padding={{default: 'noPadding'}}
className="scrollable-in">
+ <Flex direction={{default: "column"}} spaceItems={{default:
"spaceItemsNone"}}>
+ {tab === 'files' && <FlexItem><FilesTab/></FlexItem>}
+ {!buildIn && tab === 'dashboard' && project &&
<FlexItem><DashboardTab/></FlexItem>}
+ {!buildIn && tab === 'trace' && project &&
<FlexItem><TraceTab/></FlexItem>}
+ {!buildIn && tab === 'build' &&
<FlexItem><ProjectBuildTab/></FlexItem>}
+ {!buildIn && tab === 'build' && config.infrastructure !==
'kubernetes' && <FlexItem><ImagesPanel/></FlexItem>}
+ {!buildIn && tab === 'container' &&
<FlexItem><ProjectContainerTab/></FlexItem>}
+ </Flex>
+ </PageSection>
+ </PageSection>
+
+
)
}
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx
index 795385f3..c58aca91 100644
---
a/karavan-web/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx
@@ -45,10 +45,16 @@ export function DashboardTab() {
const camelContainers = containers
.filter(c => c.projectId === project.projectId && ['devmode',
'project'].includes(c.type));
+ camelContainers.push(...camelContainers)
+ camelContainers.push(...camelContainers)
+ camelContainers.push(...camelContainers)
+ camelContainers.push(...camelContainers)
+ camelContainers.push(...camelContainers)
+
return (
<PageSection className="project-tab-panel" padding={{default:
"padding"}}>
- <Panel isScrollable>
- {camelContainers.map((containerStatus, index) => <Card
className="project-development">
+ {camelContainers.map((containerStatus, index) =>
+ <Card className="dashboard-card">
<CardBody>
<Flex direction={{default: "row"}}
justifyContent={{default:
"justifyContentSpaceBetween"}}>
@@ -65,8 +71,8 @@ export function DashboardTab() {
</FlexItem>
</Flex>
</CardBody>
- </Card>)}
- </Panel>
+ </Card>
+ )}
{camelContainers.length === 0 &&
<Card className="project-development">
<CardBody>
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/file/PropertiesTable.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/file/PropertiesTable.tsx
index 24e6d428..1e0fe7fb 100644
---
a/karavan-web/karavan-app/src/main/webui/src/project/file/PropertiesTable.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/project/file/PropertiesTable.tsx
@@ -100,7 +100,7 @@ export function PropertiesTable () {
}
return (
- <PageSection isFilled className="kamelets-page" padding={{default:
file !== undefined ? 'noPadding' : 'padding'}}>
+ <PageSection isFilled className="scrollable-in" padding={{default:
file !== undefined ? 'noPadding' : 'padding'}}>
<PageSection padding={{default: "noPadding"}}>
{properties.length > 0 &&
<Table aria-label="Property table" variant='compact'
borders={false}
