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 396de51a5f17df294d2bb6e87b023885b7cac2c6 Author: Marat Gubaidullin <marat.gubaidul...@gmail.com> AuthorDate: Wed Jul 12 13:59:23 2023 -0400 UI redesign #817 --- ...DevModeService.java => CamelStatusService.java} | 0 .../src/main/webui/src/api/KaravanApi.tsx | 10 +- .../{RunnerToolbar.tsx => DevModeToolbar.tsx} | 6 +- .../src/main/webui/src/project/ProjectPage.tsx | 4 +- .../src/main/webui/src/project/ProjectToolbar.tsx | 107 +-------------------- .../webui/src/project/dashboard/DashboardTab.tsx | 29 +++--- .../{RunnerInfoContext.tsx => InfoContext.tsx} | 2 +- .../{RunnerInfoMemory.tsx => InfoMemory.tsx} | 2 +- .../dashboard/{RunnerInfoPod.tsx => InfoPod.tsx} | 59 +++--------- .../main/webui/src/project/files/FilesToolbar.tsx | 101 ++++++++++++++++++- .../webui/src/project/pipeline/ProjectStatus.tsx | 6 +- .../src/main/webui/src/project/trace/TraceTab.tsx | 2 +- 12 files changed, 144 insertions(+), 184 deletions(-) diff --git a/karavan-cloud/karavan-app/src/main/java/org/apache/camel/karavan/service/DevModeService.java b/karavan-cloud/karavan-app/src/main/java/org/apache/camel/karavan/service/CamelStatusService.java similarity index 100% rename from karavan-cloud/karavan-app/src/main/java/org/apache/camel/karavan/service/DevModeService.java rename to karavan-cloud/karavan-app/src/main/java/org/apache/camel/karavan/service/CamelStatusService.java diff --git a/karavan-cloud/karavan-app/src/main/webui/src/api/KaravanApi.tsx b/karavan-cloud/karavan-app/src/main/webui/src/api/KaravanApi.tsx index c2b53c14..efb86595 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/api/KaravanApi.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/api/KaravanApi.tsx @@ -303,16 +303,17 @@ export class KaravanApi { }); } - static async getRunnerPodStatus(projectId: string, after: (res: AxiosResponse<PodStatus>) => void) { + static async getDevModePodStatus(projectId: string, after: (res: AxiosResponse<PodStatus>) => void) { instance.get('/api/devmode/pod/' + projectId) .then(res => { + console.log(res); after(res); }).catch(err => { after(err); }); } - static async getRunnerReload(projectId: string, after: (res: AxiosResponse<any>) => void) { + static async reloadDevMode(projectId: string, after: (res: AxiosResponse<any>) => void) { instance.get('/api/devmode/reload/' + projectId) .then(res => { after(res); @@ -321,9 +322,10 @@ export class KaravanApi { }); } - static async getRunnerConsoleStatus(projectId: string, statusName: string, after: (res: AxiosResponse<string>) => void) { - instance.get('/api/devmode/console/' + projectId + "/" + statusName) + static async getDevModeStatus(projectId: string, statusName: string, after: (res: AxiosResponse<string>) => void) { + instance.get('/api/devmode/status/' + projectId + "/" + statusName) .then(res => { + console.log(res); after(res); }).catch(err => { after(err); diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx similarity index 93% rename from karavan-cloud/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx rename to karavan-cloud/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx index a065773c..fc099b50 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/DevModeToolbar.tsx @@ -17,7 +17,7 @@ interface Props { reloadOnly?: boolean } -export const RunnerToolbar = (props: Props) => { +export const DevModeToolbar = (props: Props) => { const [status] = useRunnerStore((state) => [state.status], shallow) const [project] = useProjectStore((state) => [state.project], shallow) @@ -29,7 +29,7 @@ export const RunnerToolbar = (props: Props) => { const isDeletingPod = status === "deleting"; return (<> {(isRunning || isDeletingPod) && !isReloadingPod && props.reloadOnly !== true && <FlexItem> - <Tooltip content="Stop runner" position={TooltipPosition.bottom}> + <Tooltip content="Stop devmode" position={TooltipPosition.bottom}> <Button isLoading={isDeletingPod ? true : undefined} isSmall variant={"secondary"} @@ -50,7 +50,7 @@ export const RunnerToolbar = (props: Props) => { </Tooltip> </FlexItem>} {!isRunning && !isReloadingPod && props.reloadOnly !== true && <FlexItem> - <Tooltip content="Run in development mode" position={TooltipPosition.bottom}> + <Tooltip content="Run in developer mode" position={TooltipPosition.bottom}> <Button isLoading={isStartingPod ? true : undefined} isSmall variant={"primary"} diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectPage.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectPage.tsx index 1221e0cb..6ad2bdd9 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectPage.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectPage.tsx @@ -27,8 +27,8 @@ export const ProjectPage = () => { useEffect(() => { // TODO: make status request only when started or just opened const interval = setInterval(() => { - ProjectService.getRunnerPodStatus(project); - }, 1000); + ProjectService.getDevModePodStatus(project); + }, 2000); return () => { clearInterval(interval) }; diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx index 95d177ae..c65d5ced 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx @@ -22,9 +22,8 @@ import '../designer/karavan.css'; import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon"; import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon"; import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml"; -import PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon"; -import {RunnerToolbar} from "./RunnerToolbar"; -import {useFilesStore, useFileStore, useProjectStore} from "../api/ProjectStore"; +import {DevModeToolbar} from "./DevModeToolbar"; +import {useFileStore, useProjectStore} from "../api/ProjectStore"; import {EventBus} from "../designer/utils/EventBus"; import {ProjectService} from "../api/ProjectService"; import {shallow} from "zustand/shallow"; @@ -38,10 +37,7 @@ interface Props { export const ProjectToolbar = (props: Props) => { - const [commitMessageIsOpen, setCommitMessageIsOpen] = useState(false); - const [commitMessage, setCommitMessage] = useState(''); const [project, isPushing] = useProjectStore((state) => [state.project, state.isPushing], shallow ) - const {files} = useFilesStore(); const [file, editAdvancedProperties, setEditAdvancedProperties, setAddProperty] = useFileStore((state) => [state.file, state.editAdvancedProperties, state.setEditAdvancedProperties, state.setAddProperty], shallow ) @@ -69,10 +65,6 @@ export const ProjectToolbar = (props: Props) => { return file !== undefined && file.name.endsWith("java"); } - function needCommit(): boolean { - return project ? files.filter(f => f.lastUpdate > project.lastCommitTimestamp).length > 0 : false; - } - function downloadImage () { EventBus.sendCommand("downloadImage"); } @@ -88,43 +80,6 @@ export const ProjectToolbar = (props: Props) => { } } - function push () { - setCommitMessageIsOpen(false); - ProjectService.pushProject(project, commitMessage); - } - - function getDate(lastUpdate: number): string { - if (lastUpdate) { - const date = new Date(lastUpdate); - return date.toISOString().slice(0, 19).replace('T',' '); - } else { - return "N/A" - } - } - - function getLastUpdatePanel() { - const color = needCommit() ? "grey" : "green"; - const commit = project?.lastCommit; - return ( - <Flex direction={{default: "row"}} justifyContent={{default: "justifyContentFlexStart"}}> - {project?.lastCommitTimestamp > 0 && - <FlexItem> - <Tooltip content="Last update" position={TooltipPosition.bottom}> - <Label color={color}>{getDate(project?.lastCommitTimestamp)}</Label> - </Tooltip> - </FlexItem>} - {project?.lastCommitTimestamp > 0 && - <FlexItem> - <Tooltip content={commit} position={TooltipPosition.bottom}> - <Label - color={color}>{commit ? commit?.substring(0, 18) : "-"}</Label> - </Tooltip> - </FlexItem>} - </Flex> - ) - } - - function getFileToolbar() { const { mode} = props; return <Toolbar id="toolbar-group-types"> @@ -135,22 +90,7 @@ export const ProjectToolbar = (props: Props) => { <Label>{file?.code?.length}</Label> </Tooltip> </FlexItem>} - {isRunnable() && <RunnerToolbar reloadOnly={true}/>} - {!isFile && <FlexItem> - <Tooltip content="Commit and push to git" position={"bottom-end"}> - <Button isLoading={isPushing ? true : undefined} - isSmall - variant={needCommit() ? "primary" : "secondary"} - className="project-button" - icon={!isPushing ? <PushIcon/> : <div></div>} - onClick={() => { - setCommitMessage(commitMessage === '' ? new Date().toLocaleString() : commitMessage); - setCommitMessageIsOpen(true); - }}> - {isPushing ? "..." : "Push"} - </Button> - </Tooltip> - </FlexItem>} + {isRunnable() && <DevModeToolbar reloadOnly={true}/>} {isYaml() && <FlexItem> <ToggleGroup> <ToggleGroupItem text="Design" buttonId="design" isSelected={mode === "design"} @@ -186,49 +126,13 @@ export const ProjectToolbar = (props: Props) => { return (<Toolbar id="toolbar-group-types"> <ToolbarContent> <Flex className="toolbar" direction={{default: "row"}} alignItems={{default: "alignItemsCenter"}}> - <FlexItem>{getLastUpdatePanel()}</FlexItem> - {isRunnable() && <RunnerToolbar/>} - <FlexItem> - <Tooltip content="Commit and push to git" position={"bottom-end"}> - <Button isLoading={isPushing ? true : undefined} - isSmall - variant={needCommit() ? "primary" : "secondary"} - className="project-button" - icon={!isPushing ? <PushIcon/> : <div></div>} - onClick={() => { - setCommitMessage(commitMessage === '' ? new Date().toLocaleString() : commitMessage); - setCommitMessageIsOpen(true); - }}> - {isPushing ? "..." : "Push"} - </Button> - </Tooltip> - </FlexItem> + {isRunnable() && <DevModeToolbar/>} </Flex> </ToolbarContent> </Toolbar>) } - function getCommitModal() { - return ( - <Modal - title="Commit" - variant={ModalVariant.small} - isOpen={commitMessageIsOpen} - onClose={() => setCommitMessageIsOpen(false)} - actions={[ - <Button key="confirm" variant="primary" onClick={() => push()}>Save</Button>, - <Button key="cancel" variant="secondary" onClick={() => setCommitMessageIsOpen(false)}>Cancel</Button> - ]} - > - <Form autoComplete="off" isHorizontal className="create-file-form"> - <FormGroup label="Message" fieldId="name" isRequired> - <TextInput value={commitMessage} onChange={value => setCommitMessage(value)}/> - <FormHelperText isHidden={false} component="div"/> - </FormGroup> - </Form> - </Modal> - ) - } + function isKameletsProject(): boolean { return project.projectId === 'kamelets'; @@ -249,7 +153,6 @@ export const ProjectToolbar = (props: Props) => { {/*{!isTemplates && getProjectToolbar()}*/} {!isFile() && getProjectToolbar()} {isFile() && getFileToolbar()} - {getCommitModal()} </> ) } diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx index ee0135bf..a2b90e28 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/DashboardTab.tsx @@ -14,23 +14,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, {useEffect, useRef, useState} from 'react'; +import React, {useEffect, useState} from 'react'; import { Card, CardBody, Flex, FlexItem, Divider, PageSection } from '@patternfly/react-core'; import '../../designer/karavan.css'; -import {RunnerInfoPod} from "./RunnerInfoPod"; -import {RunnerInfoContext} from "./RunnerInfoContext"; -import {RunnerInfoMemory} from "./RunnerInfoMemory"; +import {InfoPod} from "./InfoPod"; +import {InfoContext} from "./InfoContext"; +import {InfoMemory} from "./InfoMemory"; import {KaravanApi} from "../../api/KaravanApi"; -import {PodStatus} from "../../api/ProjectModels"; import {useProjectStore} from "../../api/ProjectStore"; -export function isRunning(status: PodStatus): boolean { - return status.phase === 'Running' && !status.terminating; -} - export const DashboardTab = () => { const {project, podStatus} = useProjectStore(); @@ -41,7 +36,7 @@ export const DashboardTab = () => { useEffect(() => { const interval = setInterval(() => { onRefreshStatus(); - }, 1000); + }, 2000); return () => { clearInterval(interval) }; @@ -50,21 +45,21 @@ export const DashboardTab = () => { function onRefreshStatus() { const projectId = project.projectId; - KaravanApi.getRunnerConsoleStatus(projectId, "memory", res => { + KaravanApi.getDevModeStatus(projectId, "memory", res => { if (res.status === 200) { setMemory(res.data); } else { setMemory({}); } }) - KaravanApi.getRunnerConsoleStatus(projectId, "jvm", res => { + KaravanApi.getDevModeStatus(projectId, "jvm", res => { if (res.status === 200) { setJvm(res.data); } else { setJvm({}); } }) - KaravanApi.getRunnerConsoleStatus(projectId, "context", res => { + KaravanApi.getDevModeStatus(projectId, "context", res => { if (res.status === 200) { setContext(res.data); } else { @@ -74,7 +69,7 @@ export const DashboardTab = () => { } function showConsole(): boolean { - return podStatus.phase !== ''; + return podStatus.ready; } return ( @@ -84,15 +79,15 @@ export const DashboardTab = () => { <Flex direction={{default: "row"}} justifyContent={{default: "justifyContentSpaceBetween"}}> <FlexItem flex={{default: "flex_1"}}> - <RunnerInfoPod podStatus={podStatus}/> + <InfoPod podStatus={podStatus}/> </FlexItem> <Divider orientation={{default: "vertical"}}/> <FlexItem flex={{default: "flex_1"}}> - <RunnerInfoMemory jvm={jvm} memory={memory} showConsole={showConsole()}/> + <InfoMemory jvm={jvm} memory={memory} showConsole={showConsole()}/> </FlexItem> <Divider orientation={{default: "vertical"}}/> <FlexItem flex={{default: "flex_1"}}> - <RunnerInfoContext context={context} showConsole={showConsole()}/> + <InfoContext context={context} showConsole={showConsole()}/> </FlexItem> </Flex> </CardBody> diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoContext.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoContext.tsx similarity index 99% rename from karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoContext.tsx rename to karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoContext.tsx index c07cf810..69134d23 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoContext.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoContext.tsx @@ -17,7 +17,7 @@ interface Props { showConsole: boolean } -export const RunnerInfoContext = (props: Props) => { +export const InfoContext = (props: Props) => { function getContextInfo() { return ( diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoMemory.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoMemory.tsx similarity index 98% rename from karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoMemory.tsx rename to karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoMemory.tsx index 67e576ad..28aee4ac 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoMemory.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoMemory.tsx @@ -18,7 +18,7 @@ interface Props { showConsole: boolean } -export const RunnerInfoMemory = (props: Props) => { +export const InfoMemory = (props: Props) => { function getJvmInfo() { return ( diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoPod.tsx similarity index 59% rename from karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx rename to karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoPod.tsx index 6dbda49c..af24bde5 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/dashboard/InfoPod.tsx @@ -12,18 +12,14 @@ import '../../designer/karavan.css'; import DownIcon from "@patternfly/react-icons/dist/esm/icons/error-circle-o-icon"; import UpIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon"; import {PodStatus} from "../../api/ProjectModels"; -import {useLogStore, useRunnerStore} from "../../api/ProjectStore"; +import {useLogStore} from "../../api/ProjectStore"; -export function isRunning(status: PodStatus): boolean { - return status.phase === 'Running' && !status.terminating; -} - interface Props { podStatus: PodStatus, } -export const RunnerInfoPod = (props: Props) => { +export const InfoPod = (props: Props) => { function getPodInfo() { const podStatus = props.podStatus; @@ -40,42 +36,10 @@ export const RunnerInfoPod = (props: Props) => { ) } - function getPodStatus() { - const podStatus = props.podStatus; - const status = !podStatus.terminating ? podStatus.phase : "Terminating" - return ( - <Label icon={getIcon()} color={getColor()}> - {status !== "" ? status : "N/A"} - </Label> - ) - } - - function getPodRequests() { - const podStatus = props.podStatus; - const text = podStatus.requestCpu !== '' ? podStatus.requestCpu + " : " + podStatus.requestMemory : "N/A"; - return ( - <Label icon={getIcon()} color={getColor()}> - {text} - </Label> - ) - } - - function getPodCreation() { - const podStatus = props.podStatus; - const text = podStatus.creationTimestamp !== '' ? podStatus.creationTimestamp : "N/A"; - return ( - <Label icon={getIcon()} color={getColor()}> - {text} - </Label> - ) - } - - function getPodLimits() { - const podStatus = props.podStatus; - const text = podStatus.limitCpu !== '' ? podStatus.limitCpu + " : " + podStatus.limitMemory : "N/A"; + function getPodInfoLabel(info: string) { return ( <Label icon={getIcon()} color={getColor()}> - {text} + {info} </Label> ) } @@ -89,9 +53,10 @@ export const RunnerInfoPod = (props: Props) => { } function getRunning(): boolean { - return isRunning(props.podStatus); + return props.podStatus.ready; } + const podStatus = props.podStatus; return ( <DescriptionList isHorizontal> <DescriptionListGroup> @@ -103,25 +68,25 @@ export const RunnerInfoPod = (props: Props) => { <DescriptionListGroup> <DescriptionListTerm>Status</DescriptionListTerm> <DescriptionListDescription> - {getPodStatus()} + {getPodInfoLabel(podStatus.ready ? "Ready" : "Not Ready")} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> - <DescriptionListTerm>Requests</DescriptionListTerm> + <DescriptionListTerm>CPU</DescriptionListTerm> <DescriptionListDescription> - {getPodRequests()} + {getPodInfoLabel(podStatus.cpuInfo)} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> - <DescriptionListTerm>Limits</DescriptionListTerm> + <DescriptionListTerm>Memory</DescriptionListTerm> <DescriptionListDescription> - {getPodLimits()} + {getPodInfoLabel(podStatus.memoryInfo)} </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> <DescriptionListTerm>Created</DescriptionListTerm> <DescriptionListDescription> - {getPodCreation()} + {getPodInfoLabel(podStatus.created)} </DescriptionListDescription> </DescriptionListGroup> </DescriptionList> diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx index 00835fe4..d35ed094 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/files/FilesToolbar.tsx @@ -14,20 +14,114 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import { Button, Flex, - FlexItem, + FlexItem, Form, FormGroup, FormHelperText, Label, Modal, ModalVariant, TextInput, Tooltip, TooltipPosition, } from '@patternfly/react-core'; import '../../designer/karavan.css'; import UploadIcon from "@patternfly/react-icons/dist/esm/icons/upload-icon"; import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon"; -import {useFileStore} from "../../api/ProjectStore"; +import {useFilesStore, useFileStore, useProjectStore} from "../../api/ProjectStore"; +import {shallow} from "zustand/shallow"; +import {ProjectService} from "../../api/ProjectService"; +import PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon"; export const FileToolbar = () => { + const [commitMessageIsOpen, setCommitMessageIsOpen] = useState(false); + const [commitMessage, setCommitMessage] = useState(''); + const [project, isPushing] = useProjectStore((state) => [state.project, state.isPushing], shallow ) + const {files} = useFilesStore(); + const [file, editAdvancedProperties, setEditAdvancedProperties, setAddProperty] = useFileStore((state) => + [state.file, state.editAdvancedProperties, state.setEditAdvancedProperties, state.setAddProperty], shallow ) + + + useEffect(() => { + console.log("ProjectToolbar useEffect", isPushing, project.lastCommitTimestamp); + }, [project, file]); + + function push () { + setCommitMessageIsOpen(false); + ProjectService.pushProject(project, commitMessage); + } + + function getCommitModal() { + return ( + <Modal + title="Commit" + variant={ModalVariant.small} + isOpen={commitMessageIsOpen} + onClose={() => setCommitMessageIsOpen(false)} + actions={[ + <Button key="confirm" variant="primary" onClick={() => push()}>Save</Button>, + <Button key="cancel" variant="secondary" onClick={() => setCommitMessageIsOpen(false)}>Cancel</Button> + ]} + > + <Form autoComplete="off" isHorizontal className="create-file-form"> + <FormGroup label="Message" fieldId="name" isRequired> + <TextInput value={commitMessage} onChange={value => setCommitMessage(value)}/> + <FormHelperText isHidden={false} component="div"/> + </FormGroup> + </Form> + </Modal> + ) + } + + function needCommit(): boolean { + return project ? files.filter(f => f.lastUpdate > project.lastCommitTimestamp).length > 0 : false; + } + + + function getDate(lastUpdate: number): string { + if (lastUpdate) { + const date = new Date(lastUpdate); + return date.toISOString().slice(0, 19).replace('T',' '); + } else { + return "N/A" + } + } + + function getLastUpdatePanel() { + const color = needCommit() ? "grey" : "green"; + const commit = project?.lastCommit; + return ( + <Flex direction={{default: "row"}} justifyContent={{default: "justifyContentFlexStart"}}> + {project?.lastCommitTimestamp > 0 && + <FlexItem> + <Tooltip content="Last update" position={TooltipPosition.bottom}> + <Label color={color}>{getDate(project?.lastCommitTimestamp)}</Label> + </Tooltip> + </FlexItem>} + {project?.lastCommitTimestamp > 0 && + <FlexItem> + <Tooltip content={commit} position={TooltipPosition.bottom}> + <Label + color={color}>{commit ? commit?.substring(0, 18) : "-"}</Label> + </Tooltip> + </FlexItem>} + </Flex> + ) + } + return <Flex className="toolbar" direction={{default: "row"}} justifyContent={{default: "justifyContentFlexEnd"}}> + <FlexItem>{getLastUpdatePanel()}</FlexItem> + <FlexItem> + <Tooltip content="Commit and push to git" position={"bottom-end"}> + <Button isLoading={isPushing ? true : undefined} + isSmall + variant={needCommit() ? "primary" : "secondary"} + className="project-button" + icon={!isPushing ? <PushIcon/> : <div></div>} + onClick={() => { + setCommitMessage(commitMessage === '' ? new Date().toLocaleString() : commitMessage); + setCommitMessageIsOpen(true); + }}> + {isPushing ? "..." : "Push"} + </Button> + </Tooltip> + </FlexItem> <FlexItem> <Button isSmall variant={"secondary"} icon={<PlusIcon/>} onClick={e => useFileStore.setState({operation:"create"})}>Create</Button> @@ -36,5 +130,6 @@ export const FileToolbar = () => { <Button isSmall variant="secondary" icon={<UploadIcon/>} onClick={e => useFileStore.setState({operation:"upload"})}>Upload</Button> </FlexItem> + {getCommitModal()} </Flex> } diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx index 67ec90ea..25ac03f9 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx @@ -201,10 +201,10 @@ export class ProjectStatus extends React.Component<Props, State> { {podStatuses.length === 0 && <Label icon={<DownIcon/>} color={"grey"}>No pods</Label>} <LabelGroup numLabels={2} isVertical> {podStatuses.map(pod => { - const running = pod.phase === 'Running' && !pod.terminating + const ready = pod.ready; return ( - <Tooltip key={pod.name} content={running ? "Running" : pod.phase}> - <Label icon={running ? <UpIcon/> : <DownIcon/>} color={running ? "green" : "red"}> + <Tooltip key={pod.name} content={ready ? "Ready" : "Not ready"}> + <Label icon={ready ? <UpIcon/> : <DownIcon/>} color={ready ? "green" : "red"}> <Button variant="link" onClick={e => { useLogStore.setState({ diff --git a/karavan-cloud/karavan-app/src/main/webui/src/project/trace/TraceTab.tsx b/karavan-cloud/karavan-app/src/main/webui/src/project/trace/TraceTab.tsx index a33eb340..aa076f81 100644 --- a/karavan-cloud/karavan-app/src/main/webui/src/project/trace/TraceTab.tsx +++ b/karavan-cloud/karavan-app/src/main/webui/src/project/trace/TraceTab.tsx @@ -55,7 +55,7 @@ export const TraceTab = () => { function onRefreshStatus() { const projectId = project.projectId; if (refreshTrace) { - KaravanApi.getRunnerConsoleStatus(projectId, "trace", res => { + KaravanApi.getDevModeStatus(projectId, "trace", res => { if (res.status === 200) { setTrace(res.data); } else {