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 a785788b UI improvements
a785788b is described below
commit a785788b030f9ad7e0680d362e0cc5b7fd2c6617
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Mon Jun 3 17:33:35 2024 -0400
UI improvements
---
karavan-app/src/main/webui/src/index.css | 47 +--------------
karavan-app/src/main/webui/src/log/ProjectLog.css | 70 ++++++++++++++++++++++
.../src/main/webui/src/project/DevModeToolbar.tsx | 44 +++++++++-----
.../src/main/webui/src/project/ProjectPage.tsx | 6 +-
.../main/webui/src/project/builder/BuildPanel.tsx | 11 ++--
5 files changed, 112 insertions(+), 66 deletions(-)
diff --git a/karavan-app/src/main/webui/src/index.css
b/karavan-app/src/main/webui/src/index.css
index 2695e881..244433a6 100644
--- a/karavan-app/src/main/webui/src/index.css
+++ b/karavan-app/src/main/webui/src/index.css
@@ -182,51 +182,6 @@
padding-bottom: 0;
}
-.karavan .project-log {
- position: absolute;
- bottom: 0;
- right: 0;
- width: 100%;
- z-index: 200;
- display: flex;
- flex-direction: column;
- align-items: stretch;
-}
-
-.karavan .project-log .buttons {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- border-top: 1px solid var(--pf-v5-global--BorderColor--100);
- padding-right: 6px;
-}
-
-.karavan .project-log .buttons button,
-.karavan .project-log .buttons .pf-v5-c-check {
- padding: 8px;
-}
-
-.karavan .project-log .buttons .pf-v5-c-check .pf-v5-c-check__label{
- font-size: 12px;
- line-height: 20px;
- padding: 0;
-}
-
-.karavan .project-log .pf-v5-c-log-viewer__scroll-container {
- /*height: 100% !important;*/
-}
-
-.karavan .project-log .pf-v5-c-log-viewer__text {
- font-size: 12px;
-}
-
-.karavan .project-log .log-name {
- --pf-v5-c-label__content--before--BorderWidth: 0;
- --pf-v5-c-label--BackgroundColor: transparent;
- margin-right: auto;
- font-size: 12px;
-}
-
.karavan .project-page .project-button {
width: 100px;
}
@@ -281,7 +236,7 @@
}
.create-file-form .pf-v5-c-form__group {
- grid-template-columns: 80px 1fr !important;
+ grid-template-columns: 80px 1fr !important;
}
.logo-tooltip {
diff --git a/karavan-app/src/main/webui/src/log/ProjectLog.css
b/karavan-app/src/main/webui/src/log/ProjectLog.css
new file mode 100644
index 00000000..3e1a9cfd
--- /dev/null
+++ b/karavan-app/src/main/webui/src/log/ProjectLog.css
@@ -0,0 +1,70 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.karavan .project-log {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ z-index: 200;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.karavan .project-log .buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ border-top: 1px solid var(--pf-v5-global--BorderColor--100);
+ padding-right: 6px;
+}
+
+.karavan .project-log .buttons button,
+.karavan .project-log .buttons .pf-v5-c-check {
+ padding: 8px;
+}
+
+.karavan .project-log .buttons .pf-v5-c-check .pf-v5-c-check__label{
+ font-size: 12px;
+ line-height: 20px;
+ padding: 0;
+}
+
+.karavan .project-log .pf-v5-c-log-viewer__scroll-container {
+ /*height: 100% !important;*/
+}
+
+.karavan .project-log .pf-v5-c-log-viewer__text {
+ font-size: 12px;
+}
+
+.karavan .project-log .log-name {
+ --pf-v5-c-label__content--before--BorderWidth: 0;
+ --pf-v5-c-label--BackgroundColor: transparent;
+ /*margin-right: auto;*/
+ font-size: 12px;
+}
+
+.karavan .project-log .pf-v5-c-toggle-group .pf-v5-c-toggle-group__item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+.karavan .project-log .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button {
+ height: 20px;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
b/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
index d6ff1237..6cd7ac9a 100644
--- a/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
+++ b/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
@@ -22,7 +22,6 @@ import {
Flex,
FlexItem,
Label,
- Skeleton,
Spinner,
Switch,
Tooltip,
@@ -54,13 +53,18 @@ export function DevModeToolbar(props: Props) {
const [setShowLog] = useLogStore((s) => [s.setShowLog], shallow);
const [currentContainerStatus, setCurrentContainerStatus] =
useState<ContainerStatus>();
- const containerStatus = containers.filter(c => c.containerName ===
project.projectId).at(0);
- const commands = containerStatus?.commands || ['run'];
- const isRunning = containerStatus?.state === 'running';
- const inTransit = containerStatus?.inTransit;
- const color = containerStatus?.state === 'running' ? "green" : "grey";
- const icon = isRunning ? <UpIcon/> : <DownIcon/>;
- const inDevMode = containerStatus?.type === 'devmode';
+ const containerStatuses = containers.filter(c => c.projectId ===
project.projectId) || [];
+
+ const containersProject = containerStatuses.filter(c => c.type ===
'project') || [];
+ const allRunning = containersProject.filter(c => c.state ===
'running').length === containersProject.length;
+
+ const containerDevMode = containerStatuses.filter(c => c.type ===
'devmode').at(0);
+ const commands = containerDevMode?.commands || ['run'];
+ const isRunning = containerDevMode?.state === 'running';
+ const inTransit = containerDevMode?.inTransit;
+ const color = (isRunning || allRunning) ? "green" : "grey";
+ const icon = (isRunning || allRunning) ? <UpIcon/> : <DownIcon/>;
+ const inDevMode = containerDevMode?.type === 'devmode';
useEffect(() => {
const interval = setInterval(() => {
@@ -70,7 +74,7 @@ export function DevModeToolbar(props: Props) {
}, [currentContainerStatus, containers]);
useEffect(() => {
- if (showSpinner && currentContainerStatus === undefined &&
containerStatus === undefined) {
+ if (showSpinner && currentContainerStatus === undefined &&
containerDevMode === undefined) {
setShowSpinner(false);
}
}, [currentContainerStatus]);
@@ -82,23 +86,35 @@ export function DevModeToolbar(props: Props) {
if (refreshTrace) {
ProjectService.refreshCamelTraces(project.projectId,
config.environment);
}
- setCurrentContainerStatus(containerStatus);
+ setCurrentContainerStatus(containerDevMode);
}
return (<Flex className="toolbar" direction={{default: "row"}}
alignItems={{default: "alignItemsCenter"}}>
{showSpinner && inDevMode && <FlexItem
className="dev-action-button-place refresher">
<Spinner className="spinner" aria-label="Refresh"/>
</FlexItem>}
- {containerStatus?.containerId && <FlexItem>
+ {containersProject.length > 0 && <FlexItem>
+ <Label icon={icon} color={color}>
+ <Tooltip content={"Show log"}
position={TooltipPosition.bottom}>
+ <Button className='labeled-button' variant="link"
isDisabled={!allRunning}
+ onClick={e => {}}>
+ {project.projectId}
+ </Button>
+ </Tooltip>
+ {containersProject.length > 1 && <Badge
isRead={!allRunning}>{containersProject.length}</Badge>}
+ <Badge isRead>{'project'}</Badge>
+ </Label>
+ </FlexItem>}
+ {containerDevMode?.containerId && <FlexItem>
<Label icon={icon} color={color}>
<Tooltip content={"Show log"}
position={TooltipPosition.bottom}>
<Button className='labeled-button' variant="link"
isDisabled={!isRunning}
onClick={e =>
- setShowLog(true, 'container',
containerStatus.containerName)}>
- {containerStatus.containerName}
+ setShowLog(true, 'container',
containerDevMode.containerName)}>
+ {containerDevMode.containerName}
</Button>
</Tooltip>
- <Badge isRead>{containerStatus.type}</Badge>
+ <Badge isRead>{containerDevMode.type}</Badge>
</Label>
</FlexItem>}
{!isRunning && <FlexItem className="dev-action-button-place">
diff --git a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
index 83262642..cb7c6f44 100644
--- a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
@@ -25,7 +25,7 @@ import '../designer/karavan.css';
import {ProjectToolbar} from "./ProjectToolbar";
import {ProjectLogPanel} from "../log/ProjectLogPanel";
import {Project, ProjectType} from "../api/ProjectModels";
-import {useFilesStore, useFileStore, useProjectsStore, useProjectStore} from
"../api/ProjectStore";
+import {useAppConfigStore, useFilesStore, useFileStore, useProjectsStore,
useProjectStore} from "../api/ProjectStore";
import {MainToolbar} from "../designer/MainToolbar";
import {ProjectTitle} from "./ProjectTitle";
import {ProjectPanel} from "./ProjectPanel";
@@ -38,6 +38,7 @@ import {ProjectService} from "../api/ProjectService";
export function ProjectPage() {
+ const [config] = useAppConfigStore((state) => [state.config], shallow);
const {file, operation} = useFileStore();
const [files] = useFilesStore((s) => [s.files], shallow);
const [projects] = useProjectsStore((state) => [state.projects], shallow)
@@ -82,6 +83,7 @@ export function ProjectPage() {
const ephemeral = project.type === ProjectType.ephemeral
const showFilePanel = file !== undefined && operation === 'select';
+ const containerTabName = config.infrastructure === 'kubernetes' ? "Pods" :
"Containers"
return (
<PageSection className="project-page" padding={{default: 'noPadding'}}>
<PageSection className="tools-section" padding={{default:
'noPadding'}}>
@@ -99,7 +101,7 @@ export function ProjectPage() {
{!ephemeral && <Tab eventKey="dashboard"
title="Dashboard"/>}
{!ephemeral && <Tab eventKey="trace"
title="Trace"/>}
{!ephemeral && <Tab eventKey="build"
title="Build"/>}
- <Tab eventKey="container" title="Container"/>
+ <Tab eventKey="container"
title={containerTabName}/>
{hasReadme() && <Tab eventKey="readme"
title="Readme"/>}
</Tabs>
}
diff --git a/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
b/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
index 0acc40ea..aee7a37c 100644
--- a/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
+++ b/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
@@ -21,7 +21,7 @@ import {
DescriptionList,
DescriptionListTerm,
DescriptionListGroup,
- DescriptionListDescription, Spinner, Tooltip, Flex, FlexItem, LabelGroup,
Label, Modal, Badge, CardBody, Card
+ DescriptionListDescription, Spinner, Tooltip, Flex, FlexItem, LabelGroup,
Label, Modal, CardBody, Card
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {KaravanApi} from "../../api/KaravanApi";
@@ -31,13 +31,14 @@ import DownIcon from
"@patternfly/react-icons/dist/esm/icons/error-circle-o-icon
import ClockIcon from "@patternfly/react-icons/dist/esm/icons/clock-icon";
import TagIcon from "@patternfly/react-icons/dist/esm/icons/tag-icon";
import DeleteIcon from
"@patternfly/react-icons/dist/esm/icons/times-circle-icon";
-import { useLogStore, useProjectStore, useStatusesStore} from
"../../api/ProjectStore";
+import {useAppConfigStore, useLogStore, useProjectStore, useStatusesStore}
from "../../api/ProjectStore";
import {shallow} from "zustand/shallow";
import {EventBus} from "../../designer/utils/EventBus";
import {getShortCommit} from "../../util/StringUtils";
export function BuildPanel () {
+ const [config] = useAppConfigStore((state) => [state.config], shallow);
const [project] = useProjectStore((s) => [s.project], shallow);
const [setShowLog] = useLogStore((s) => [s.setShowLog], shallow);
const [containers, deployments, camels] =
@@ -74,7 +75,9 @@ export function BuildPanel () {
function buildButton() {
const status = containers.filter(c => c.projectId ===
project.projectId && c.type === 'build').at(0);
const isRunning = status?.state === 'running';
- return (<Tooltip content="Start build" position={"left"}>
+ const tooltip = config.infrastructure === 'kubernetes' ? "Build and
Deploy project" : "Build project"
+ const buttonTitle = config.infrastructure === 'kubernetes' ? "Deploy"
: "Build"
+ return (<Tooltip content={tooltip} position={"left"}>
<Button isLoading={isBuilding ? true : undefined}
isDisabled={isBuilding || isRunning || isPushing}
size="sm"
@@ -82,7 +85,7 @@ export function BuildPanel () {
className="project-button dev-action-button"
icon={!isBuilding ? <BuildIcon/> : <div></div>}
onClick={e => build()}>
- {isBuilding ? "..." : "Build"}
+ {isBuilding ? "..." : buttonTitle}
</Button>
</Tooltip>)
}
