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 0276f037b14916f1f4693335423f63094f99a05e
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Fri May 12 17:02:17 2023 -0400
One status interval poll instead of three #757
---
.../main/webui/src/projects/ProjectDevelopment.tsx | 68 ++++++++++++++++++++--
.../main/webui/src/projects/RunnerInfoContext.tsx | 48 +++++----------
.../main/webui/src/projects/RunnerInfoMemory.tsx | 51 ++++------------
.../src/main/webui/src/projects/RunnerInfoPod.tsx | 48 ++++-----------
4 files changed, 99 insertions(+), 116 deletions(-)
diff --git a/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
b/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
index e065b315..a58b52bc 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
@@ -1,14 +1,20 @@
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
import {
Card,
CardBody, Flex, FlexItem, Divider
} from '@patternfly/react-core';
import '../designer/karavan.css';
-import {Project} from "./ProjectModels";
+import {PodStatus, Project} from "./ProjectModels";
import {RunnerToolbar} from "./RunnerToolbar";
import {RunnerInfoPod} from "./RunnerInfoPod";
import {RunnerInfoContext} from "./RunnerInfoContext";
import {RunnerInfoMemory} from "./RunnerInfoMemory";
+import {KaravanApi} from "../api/KaravanApi";
+import {ProjectEventBus} from "./ProjectEventBus";
+
+export function isRunning(status: PodStatus): boolean {
+ return status.phase === 'Running' && !status.terminating;
+}
interface Props {
@@ -18,6 +24,58 @@ interface Props {
export const ProjectDevelopment = (props: Props) => {
+ const [podStatus, setPodStatus] = useState(new PodStatus());
+ const previousValue = useRef(new PodStatus());
+ const [memory, setMemory] = useState({});
+ const [jvm, setJvm] = useState({});
+ const [context, setContext] = useState({});
+
+
+ useEffect(() => {
+ previousValue.current = podStatus;
+ const interval = setInterval(() => {
+ onRefreshStatus();
+ }, 1000);
+ return () => clearInterval(interval);
+ }, [podStatus]);
+
+ function onRefreshStatus() {
+ const projectId = props.project.projectId;
+ const name = projectId + "-runner";
+ KaravanApi.getRunnerPodStatus(projectId, name, res => {
+ if (res.status === 200) {
+ setPodStatus(res.data);
+ if (isRunning(res.data) && !isRunning(previousValue.current)) {
+ ProjectEventBus.showLog('container', res.data.name,
props.config.environment);
+ }
+ } else {
+ ProjectEventBus.showLog('container', name,
props.config.environment, false);
+ setPodStatus(new PodStatus({name: name}));
+ }
+ });
+ KaravanApi.getRunnerConsoleStatus(projectId, "memory", res => {
+ if (res.status === 200) {
+ setMemory(res.data);
+ } else {
+ setMemory({});
+ }
+ })
+ KaravanApi.getRunnerConsoleStatus(projectId, "jvm", res => {
+ if (res.status === 200) {
+ setJvm(res.data);
+ } else {
+ setJvm({});
+ }
+ })
+ KaravanApi.getRunnerConsoleStatus(projectId, "context", res => {
+ if (res.status === 200) {
+ setContext(res.data);
+ } else {
+ setContext({});
+ }
+ })
+ }
+
const {project, config} = props;
return (
<Card className="project-development">
@@ -25,15 +83,15 @@ export const ProjectDevelopment = (props: Props) => {
<Flex direction={{default: "row"}}
justifyContent={{default:
"justifyContentSpaceBetween"}}>
<FlexItem flex={{default: "flex_1"}}>
- <RunnerInfoPod project={project} config={config} />
+ <RunnerInfoPod podStatus={podStatus}
config={config} />
</FlexItem>
<Divider orientation={{default: "vertical"}}/>
<FlexItem flex={{default: "flex_1"}}>
- <RunnerInfoMemory project={project}
config={config} />
+ <RunnerInfoMemory jvm={jvm} memory={memory}
config={config} />
</FlexItem>
<Divider orientation={{default: "vertical"}}/>
<FlexItem flex={{default: "flex_1"}}>
- <RunnerInfoContext project={project}
config={config} />
+ <RunnerInfoContext context={context}
config={config} />
</FlexItem>
<Divider orientation={{default: "vertical"}}/>
<FlexItem>
diff --git a/karavan-app/src/main/webui/src/projects/RunnerInfoContext.tsx
b/karavan-app/src/main/webui/src/projects/RunnerInfoContext.tsx
index 9bd7e333..57ce057e 100644
--- a/karavan-app/src/main/webui/src/projects/RunnerInfoContext.tsx
+++ b/karavan-app/src/main/webui/src/projects/RunnerInfoContext.tsx
@@ -17,38 +17,18 @@ import UpIcon from
"@patternfly/react-icons/dist/esm/icons/check-circle-icon";
interface Props {
- project: Project,
+ context: any,
config: any,
}
export const RunnerInfoContext = (props: Props) => {
- const [context, setContext] = useState({});
-
- useEffect(() => {
- const interval = setInterval(() => {
- onRefreshStatus();
- }, 1000);
- return () => clearInterval(interval);
- }, []);
-
- function onRefreshStatus() {
- const projectId = props.project.projectId;
- KaravanApi.getRunnerConsoleStatus(projectId, "context", res => {
- if (res.status === 200) {
- setContext(res.data);
- } else {
- setContext({});
- }
- })
- }
-
function getContextInfo() {
return (
<LabelGroup numLabels={3}>
<Tooltip content="Name" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as any)?.context?.name}
+ {props.context?.context?.name}
</Label>
</Tooltip>
</LabelGroup>
@@ -60,7 +40,7 @@ export const RunnerInfoContext = (props: Props) => {
<LabelGroup numLabels={3}>
<Tooltip content="Version" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as any)?.context?.version}
+ {props.context?.context?.version}
</Label>
</Tooltip>
</LabelGroup>
@@ -72,17 +52,17 @@ export const RunnerInfoContext = (props: Props) => {
<LabelGroup numLabels={3}>
<Tooltip content="State" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as any)?.context?.state}
+ {props.context?.context?.state}
</Label>
</Tooltip>
<Tooltip content="Uptime" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as any)?.context?.uptime}
+ {props.context?.context?.uptime}
</Label>
</Tooltip>
<Tooltip content="Phase" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as any)?.context?.phase}
+ {props.context?.context?.phase}
</Label>
</Tooltip>
</LabelGroup>
@@ -94,17 +74,17 @@ export const RunnerInfoContext = (props: Props) => {
<LabelGroup numLabels={3}>
<Tooltip content="Total" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as any)?.context?.statistics?.exchangesTotal}
+ {props.context?.context?.statistics?.exchangesTotal}
</Label>
</Tooltip>
<Tooltip content="Failed" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as
any)?.context?.statistics?.exchangesFailed}
+ {props.context?.context?.statistics?.exchangesFailed}
</Label>
</Tooltip>
<Tooltip content="Inflight" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as
any)?.context?.statistics?.exchangesInflight}
+ {props.context?.context?.statistics?.exchangesInflight}
</Label>
</Tooltip>
</LabelGroup>
@@ -116,22 +96,22 @@ export const RunnerInfoContext = (props: Props) => {
<LabelGroup numLabels={4}>
<Tooltip content="Min" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as
any)?.context?.statistics?.minProcessingTime}
+ {props.context?.context?.statistics?.minProcessingTime}
</Label>
</Tooltip>
<Tooltip content="Mean" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as
any)?.context?.statistics?.meanProcessingTime}
+
{props.context?.context?.statistics?.meanProcessingTime}
</Label>
</Tooltip>
<Tooltip content="Max" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as
any)?.context?.statistics?.maxProcessingTime}
+ {props.context?.context?.statistics?.maxProcessingTime}
</Label>
</Tooltip>
<Tooltip content="Last" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(context as
any)?.context?.statistics?.lastProcessingTime}
+
{props.context?.context?.statistics?.lastProcessingTime}
</Label>
</Tooltip>
</LabelGroup>
@@ -147,7 +127,7 @@ export const RunnerInfoContext = (props: Props) => {
}
function getRunning(): boolean {
- return isRunning(context);
+ return isRunning(props.context);
}
diff --git a/karavan-app/src/main/webui/src/projects/RunnerInfoMemory.tsx
b/karavan-app/src/main/webui/src/projects/RunnerInfoMemory.tsx
index 9558dc35..1e44a4c9 100644
--- a/karavan-app/src/main/webui/src/projects/RunnerInfoMemory.tsx
+++ b/karavan-app/src/main/webui/src/projects/RunnerInfoMemory.tsx
@@ -17,45 +17,18 @@ import UpIcon from
"@patternfly/react-icons/dist/esm/icons/check-circle-icon";
interface Props {
- project: Project,
+ jvm: any,
+ memory: any,
config: any,
}
export const RunnerInfoMemory = (props: Props) => {
- const [memory, setMemory] = useState({});
- const [jvm, setJvm] = useState({});
-
- useEffect(() => {
- const interval = setInterval(() => {
- onRefreshStatus();
- }, 1000);
- return () => clearInterval(interval);
- }, []);
-
- function onRefreshStatus() {
- const projectId = props.project.projectId;
- KaravanApi.getRunnerConsoleStatus(projectId, "memory", res => {
- if (res.status === 200) {
- setMemory(res.data);
- } else {
- setMemory({});
- }
- })
- KaravanApi.getRunnerConsoleStatus(projectId, "jvm", res => {
- if (res.status === 200) {
- setJvm(res.data);
- } else {
- setJvm({});
- }
- })
- }
-
function getJvmInfo() {
return (
<LabelGroup numLabels={2}>
<Label icon={getIcon()} color={getColor()}>
- {(jvm as any)?.jvm?.vmVendor} {(jvm as
any)?.jvm?.vmVersion}
+ {props.jvm?.jvm?.vmVendor} {props.jvm?.jvm?.vmVersion}
</Label>
</LabelGroup>
)
@@ -66,17 +39,17 @@ export const RunnerInfoMemory = (props: Props) => {
<LabelGroup numLabels={3}>
<Tooltip content="Init" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(memory as any)?.memory?.heapMemoryInit}
+ {props.memory?.memory?.heapMemoryInit}
</Label>
</Tooltip>
<Tooltip content="Max" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(memory as any)?.memory?.heapMemoryMax}
+ {props.memory?.memory?.heapMemoryMax}
</Label>
</Tooltip>
<Tooltip content="Used" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(memory as any)?.memory?.heapMemoryUsed}
+ {props.memory?.memory?.heapMemoryUsed}
</Label>
</Tooltip>
</LabelGroup>
@@ -88,7 +61,7 @@ export const RunnerInfoMemory = (props: Props) => {
<LabelGroup numLabels={2}>
<Tooltip content="Uptime" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(jvm as any)?.jvm?.vmUptime}
+ {props.jvm?.jvm?.vmUptime}
</Label>
</Tooltip>
</LabelGroup>
@@ -100,7 +73,7 @@ export const RunnerInfoMemory = (props: Props) => {
<LabelGroup numLabels={2}>
<Tooltip content="PID" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(jvm as any)?.jvm?.pid}
+ {props.jvm?.jvm?.pid}
</Label>
</Tooltip>
</LabelGroup>
@@ -112,17 +85,17 @@ export const RunnerInfoMemory = (props: Props) => {
<LabelGroup numLabels={3}>
<Tooltip content="Init" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(memory as any)?.memory?.nonHeapMemoryInit}
+ {props.memory?.memory?.nonHeapMemoryInit}
</Label>
</Tooltip>
<Tooltip content="Max" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(memory as any)?.memory?.nonHeapMemoryMax}
+ {props.memory?.memory?.nonHeapMemoryMax}
</Label>
</Tooltip>
<Tooltip content="Used" position={"bottom"}>
<Label icon={getIcon()} color={getColor()}>
- {(memory as any)?.memory?.nonHeapMemoryUsed}
+ {props.memory?.memory?.nonHeapMemoryUsed}
</Label>
</Tooltip>
</LabelGroup>
@@ -138,7 +111,7 @@ export const RunnerInfoMemory = (props: Props) => {
}
function getRunning(): boolean {
- return isRunning(jvm);
+ return isRunning(props.jvm);
}
diff --git a/karavan-app/src/main/webui/src/projects/RunnerInfoPod.tsx
b/karavan-app/src/main/webui/src/projects/RunnerInfoPod.tsx
index fb40b1da..5590be7c 100644
--- a/karavan-app/src/main/webui/src/projects/RunnerInfoPod.tsx
+++ b/karavan-app/src/main/webui/src/projects/RunnerInfoPod.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React from 'react';
import {
Button,
DescriptionList,
@@ -9,49 +9,22 @@ import {
Tooltip
} from '@patternfly/react-core';
import '../designer/karavan.css';
-import {PodStatus, Project} from "./ProjectModels";
-import {KaravanApi} from "../api/KaravanApi";
+import {PodStatus} from "./ProjectModels";
import {ProjectEventBus} from "./ProjectEventBus";
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 {isRunning} from "./ProjectDevelopment";
interface Props {
- project: Project,
+ podStatus: PodStatus,
config: any,
}
export const RunnerInfoPod = (props: Props) => {
- const [podStatus, setPodStatus] = useState(new PodStatus());
- const previousValue = useRef(new PodStatus());
-
- useEffect(() => {
- previousValue.current = podStatus;
- const interval = setInterval(() => {
- onRefreshStatus();
- }, 1000);
- return () => clearInterval(interval);
- }, [podStatus]);
-
- function onRefreshStatus() {
- const projectId = props.project.projectId;
- const name = projectId + "-runner";
- KaravanApi.getRunnerPodStatus(projectId, name, res => {
- if (res.status === 200) {
- setPodStatus(res.data);
- if (isRunning(res.data) && !isRunning(previousValue.current)) {
- ProjectEventBus.showLog('container', res.data.name,
props.config.environment);
- }
- } else {
- ProjectEventBus.showLog('container', name,
props.config.environment, false);
- setPodStatus(new PodStatus({name: name}));
- }
- })
- }
-
function getPodInfo() {
const env = props.config.environment;
+ const podStatus = props.podStatus;
return (
<Label icon={getIcon()} color={getColor()}>
<Tooltip content={`Phase: ${JSON.stringify(podStatus)}`}>
@@ -65,6 +38,7 @@ export const RunnerInfoPod = (props: Props) => {
}
function getPodStatus() {
+ const podStatus = props.podStatus;
const status = !podStatus.terminating ? podStatus.phase : "Terminating"
return (
<Label icon={getIcon()} color={getColor()}>
@@ -74,6 +48,7 @@ export const RunnerInfoPod = (props: Props) => {
}
function getPodRequests() {
+ const podStatus = props.podStatus;
const text = podStatus.requestCpu !== '' ? podStatus.requestCpu + " :
" + podStatus.requestMemory : "N/A";
return (
<Label icon={getIcon()} color={getColor()}>
@@ -83,6 +58,7 @@ export const RunnerInfoPod = (props: Props) => {
}
function getPodCreation() {
+ const podStatus = props.podStatus;
const text = podStatus.creationTimestamp !== '' ?
podStatus.creationTimestamp : "N/A";
return (
<Label icon={getIcon()} color={getColor()}>
@@ -92,6 +68,7 @@ export const RunnerInfoPod = (props: Props) => {
}
function getPodLimits() {
+ const podStatus = props.podStatus;
const text = podStatus.limitCpu !== '' ? podStatus.limitCpu + " : " +
podStatus.limitMemory : "N/A";
return (
<Label icon={getIcon()} color={getColor()}>
@@ -109,12 +86,7 @@ export const RunnerInfoPod = (props: Props) => {
}
function getRunning(): boolean {
- return isRunning(podStatus);
- }
-
-
- function isRunning(status: PodStatus): boolean {
- return status.phase === 'Running' && !status.terminating;
+ return isRunning(props.podStatus);
}
return (
