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 e03347ed Improved container management ui
e03347ed is described below
commit e03347ed5bce88a9a5fc2f582a4f1d959cb40be4
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue May 14 15:24:49 2024 -0400
Improved container management ui
---
.../src/main/webui/src/project/DevModeToolbar.tsx | 29 +++++++++++++++++++---
1 file changed, 26 insertions(+), 3 deletions(-)
diff --git a/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
b/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
index 4cb70dea..fbfb682c 100644
--- a/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
+++ b/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx
@@ -16,7 +16,18 @@
*/
import React, {useEffect, useState} from 'react';
-import {Badge, Button, Flex, FlexItem, Label, Switch, Tooltip,
TooltipPosition} from '@patternfly/react-core';
+import {
+ Badge,
+ Button,
+ Flex,
+ FlexItem,
+ Label,
+ Skeleton,
+ Spinner,
+ Switch,
+ Tooltip,
+ TooltipPosition
+} from '@patternfly/react-core';
import '../designer/karavan.css';
import RocketIcon from "@patternfly/react-icons/dist/esm/icons/rocket-icon";
import ReloadIcon from "@patternfly/react-icons/dist/esm/icons/bolt-icon";
@@ -39,6 +50,7 @@ export function DevModeToolbar(props: Props) {
const [project, refreshTrace] = useProjectStore((state) => [state.project,
state.refreshTrace], shallow)
const [containers] = useStatusesStore((state) => [state.containers],
shallow);
const [verbose, setVerbose] = useState(false);
+ const [showSpinner, setShowSpinner] = useState(false);
const [setShowLog] = useLogStore((s) => [s.setShowLog], shallow);
const [currentContainerStatus, setCurrentContainerStatus] =
useState<ContainerStatus>();
@@ -57,6 +69,14 @@ export function DevModeToolbar(props: Props) {
return () => clearInterval(interval);
}, [currentContainerStatus, containers]);
+ useEffect(() => {
+ if (showSpinner && currentContainerStatus === undefined &&
containerStatus === undefined) {
+ setShowSpinner(false);
+ // } else if (showSpinner && currentContainerStatus == undefined) {
+ // setShowSpinner(false);
+ }
+ }, [currentContainerStatus]);
+
function refreshContainer(){
ProjectService.refreshContainerStatus(project.projectId,
config.environment);
ProjectService.refreshCamelStatus(project.projectId,
config.environment);
@@ -68,6 +88,9 @@ export function DevModeToolbar(props: Props) {
}
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>
<Label icon={icon} color={color}>
<Tooltip content={"Show log"}
position={TooltipPosition.bottom}>
@@ -96,8 +119,8 @@ export function DevModeToolbar(props: Props) {
variant={"primary"}
icon={<RocketIcon/>}
onClick={() => {
+ setShowSpinner(true);
ProjectService.startDevModeContainer(project,
verbose);
- // setPoll(true);
}}>
{"Run"}
</Button>
@@ -120,7 +143,7 @@ export function DevModeToolbar(props: Props) {
variant={"control"}
icon={<DeleteIcon/>}
onClick={() => {
- // setPoll(true);
+ setShowSpinner(true);
ProjectService.deleteDevModeContainer(project);
}}>
</Button>
