(camel-karavan) branch main updated: Improved container management ui

[marat]

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>