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 bacaeb42 Refactoring for #809
bacaeb42 is described below
commit bacaeb429990fff68715c0d0c0ee3cdb22785e8b
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Sun Jul 2 14:06:39 2023 -0400
Refactoring for #809
---
.../src/main/webui/src/api/ProjectService.ts | 6 ++---
karavan-app/src/main/webui/src/api/ProjectStore.ts | 30 ++++++++++++----------
.../src/main/webui/src/project/ProjectPage.tsx | 1 +
.../webui/src/project/dashboard/RunnerInfoPod.tsx | 4 +--
.../main/webui/src/project/log/ProjectLogPanel.tsx | 20 ++++++++++-----
.../webui/src/project/pipeline/ProjectStatus.tsx | 15 +++++++----
6 files changed, 46 insertions(+), 30 deletions(-)
diff --git a/karavan-app/src/main/webui/src/api/ProjectService.ts
b/karavan-app/src/main/webui/src/api/ProjectService.ts
index b8e56134..97c467c9 100644
--- a/karavan-app/src/main/webui/src/api/ProjectService.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectService.ts
@@ -7,7 +7,7 @@ import {
useAppConfigStore,
useDeploymentStatusesStore,
useFilesStore,
- useFileStore,
+ useFileStore, useLogStore,
useProjectsStore,
useProjectStore, useRunnerStore
} from "./ProjectStore";
@@ -20,7 +20,7 @@ export class ProjectService {
KaravanApi.runProject(project, res => {
if (res.status === 200 || res.status === 201) {
ProjectEventBus.sendLog("set", '');
- useRunnerStore.setState({showLog: true})
+ useLogStore.setState({showLog: true, type: 'container',
podName: res.data})
} else {
// Todo notification
}
@@ -44,7 +44,7 @@ export class ProjectService {
ProjectEventBus.sendLog("set", '');
KaravanApi.deleteRunner(project.projectId, false, res => {
if (res.status === 202) {
- useRunnerStore.setState({showLog: false, type: 'container'})
+ useLogStore.setState({showLog: false, type: 'container'})
} else {
ProjectEventBus.sendAlert(new ToastMessage("Error delete
runner", res.statusText, 'warning'))
}
diff --git a/karavan-app/src/main/webui/src/api/ProjectStore.ts
b/karavan-app/src/main/webui/src/api/ProjectStore.ts
index 9891426c..265c9717 100644
--- a/karavan-app/src/main/webui/src/api/ProjectStore.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectStore.ts
@@ -141,10 +141,6 @@ interface RunnerState {
podName?: string,
status: "none" | "starting" | "deleting"| "reloading" | "running",
setStatus: (status: "none" | "starting" | "deleting"| "reloading" |
"running") => void,
- type: 'container' | 'pipeline' | 'none',
- setType: (type: 'container' | 'pipeline' | 'none') => void,
- showLog: boolean,
- setShowLog: (showLog: boolean) => void;
}
export const useRunnerStore = create<RunnerState>((set) => ({
@@ -155,26 +151,24 @@ export const useRunnerStore = create<RunnerState>((set)
=> ({
status: status,
}), true);
},
- type: "none",
- setType: (type: 'container' | 'pipeline' | 'none') => {
- set((state: RunnerState) => ({type: type}), true);
- },
- showLog: false,
- setShowLog: (showLog: boolean) => {
- set(() => ({showLog: showLog}));
- }
}))
interface LogState {
+ podName?: string,
data: string;
setData: (data: string) => void;
addData: (data: string) => void;
addDataAsync: (data: string) => void;
currentLine: number;
setCurrentLine: (currentLine: number) => void;
+ showLog: boolean,
+ setShowLog: (showLog: boolean) => void;
+ type: 'container' | 'pipeline' | 'none',
+ setType: (type: 'container' | 'pipeline' | 'none') => void,
}
export const useLogStore = create<LogState>((set) => ({
+ podName: undefined,
data: '',
setData: (data: string) => {
set({data: data}, true)
@@ -188,7 +182,15 @@ export const useLogStore = create<LogState>((set) => ({
currentLine: 0,
setCurrentLine: (currentLine: number) => {
set((state: LogState) => ({currentLine: currentLine}), true)
- }
+ },
+ showLog: false,
+ setShowLog: (showLog: boolean) => {
+ set(() => ({showLog: showLog}), true);
+ },
+ type: "none",
+ setType: (type: 'container' | 'pipeline' | 'none') => {
+ set((state: LogState) => ({type: type}), true);
+ },
}))
console.log("Start log subscriber");
@@ -196,7 +198,7 @@ const sub = ProjectEventBus.onLog()?.subscribe((result:
["add" | "set", string])
if (result[0] === 'add') {
unstable_batchedUpdates(() => {
useLogStore.setState((state: LogState) =>
- ({data: state.data ? state.data.concat('\n').concat(result[1])
: result[1], currentLine: state.currentLine+1}), true)
+ ({data: state.data ? state.data.concat('\n').concat(result[1])
: result[1], currentLine: state.currentLine+1}))
})
}
else if (result[0] === 'set') {
diff --git a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
index a6b3c8bd..9e87c5a0 100644
--- a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
@@ -28,6 +28,7 @@ export const ProjectPage = () => {
const [project] = useProjectStore((state) => [state.project], shallow )
useEffect(() => {
+ console.log("Project page")
const interval = setInterval(() => {
ProjectService.getRunnerPodStatus(project);
}, 1000);
diff --git a/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx
b/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx
index 5b819bfa..6dbda49c 100644
--- a/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx
+++ b/karavan-app/src/main/webui/src/project/dashboard/RunnerInfoPod.tsx
@@ -12,7 +12,7 @@ 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 {useRunnerStore} from "../../api/ProjectStore";
+import {useLogStore, useRunnerStore} from "../../api/ProjectStore";
export function isRunning(status: PodStatus): boolean {
@@ -32,7 +32,7 @@ export const RunnerInfoPod = (props: Props) => {
<Tooltip content={"Show log"}>
<Button variant="link"
onClick={e =>
- useRunnerStore.setState({showLog: true, type:
'container', podName: podStatus.name})}>
+ useLogStore.setState({showLog: true, type:
'container', podName: podStatus.name})}>
{podStatus.name}
</Button>
</Tooltip>
diff --git a/karavan-app/src/main/webui/src/project/log/ProjectLogPanel.tsx
b/karavan-app/src/main/webui/src/project/log/ProjectLogPanel.tsx
index f17f64ce..a0c51a94 100644
--- a/karavan-app/src/main/webui/src/project/log/ProjectLogPanel.tsx
+++ b/karavan-app/src/main/webui/src/project/log/ProjectLogPanel.tsx
@@ -5,7 +5,7 @@ import CloseIcon from
'@patternfly/react-icons/dist/esm/icons/times-icon';
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
import CollapseIcon from
'@patternfly/react-icons/dist/esm/icons/compress-icon';
import CleanIcon from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon';
-import {useRunnerStore} from "../../api/ProjectStore";
+import {useLogStore} from "../../api/ProjectStore";
import {KaravanApi} from "../../api/KaravanApi";
import {shallow} from "zustand/shallow";
import {ProjectEventBus} from "../../api/ProjectEventBus";
@@ -14,16 +14,17 @@ import {ProjectLog} from "./ProjectLog";
const INITIAL_LOG_HEIGHT = "50%";
export const ProjectLogPanel = () => {
- const [showLog, type, setShowLog, podName, status] = useRunnerStore(
- (state) => [state.showLog, state.type, state.setShowLog,
state.podName, state.status], shallow)
+ const [showLog, type, setShowLog, podName] = useLogStore(
+ (state) => [state.showLog, state.type, state.setShowLog,
state.podName], shallow)
const [height, setHeight] = useState(INITIAL_LOG_HEIGHT);
const [isTextWrapped, setIsTextWrapped] = useState(true);
const [autoScroll, setAutoScroll] = useState(true);
const [fetch, setFetch] = useState<Promise<void> | undefined>(undefined);
+ const [currentPodName, setCurrentPodName] = useState<string |
undefined>(undefined);
useEffect(() => {
- console.log("ProjectLogPanel", showLog, type, podName, status);
+ console.log("ProjectLogPanel", showLog, type, podName);
const controller = new AbortController();
if (showLog && type !== 'none' && podName !== undefined) {
const f = KaravanApi.fetchData(type, podName,
controller).then(value => {
@@ -36,11 +37,18 @@ export const ProjectLogPanel = () => {
console.log("end");
controller.abort();
};
- }, [showLog, type, podName, status]);
+ }, [showLog, type, podName]);
+
+ useEffect(() => {
+ if (currentPodName !== podName) {
+ ProjectEventBus.sendLog("set", "");
+ setCurrentPodName(podName);
+ }
+ }, [podName]);
function getButtons() {
return (<div className="buttons">
- <Label className="log-name">{podName!== undefined ? (type + ": " +
podName + " " + status) : ''}</Label>
+ <Label className="log-name">{podName!== undefined ? (type + ": " +
podName) : ''}</Label>
<Tooltip content={"Clean log"} position={TooltipPosition.bottom}>
<Button variant="plain" onClick={() =>
ProjectEventBus.sendLog('set', '')} icon={<CleanIcon/>}/>
</Tooltip>
diff --git a/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx
b/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx
index 18d72f8e..21aabdb7 100644
--- a/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx
+++ b/karavan-app/src/main/webui/src/project/pipeline/ProjectStatus.tsx
@@ -15,7 +15,7 @@ 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 DeleteIcon from
"@patternfly/react-icons/dist/esm/icons/times-circle-icon";
import {CamelStatus, DeploymentStatus, PipelineStatus, PodStatus, Project}
from "../../api/ProjectModels";
-import {useRunnerStore} from "../../api/ProjectStore";
+import {useLogStore, useRunnerStore} from "../../api/ProjectStore";
interface Props {
project: Project,
@@ -107,7 +107,7 @@ export class ProjectStatus extends React.Component<Props,
State> {
KaravanApi.pipelineRun(this.props.project, this.props.env, res => {
if (res.status === 200 || res.status === 201) {
this.setState({isBuilding: false});
- useRunnerStore.setState({showLog: true, type: 'pipeline',
podName: res.data})
+ useLogStore.setState({showLog: true, type: 'pipeline',
podName: res.data})
} else {
// Todo notification
}
@@ -208,8 +208,13 @@ export class ProjectStatus extends React.Component<Props,
State> {
<Tooltip key={pod.name} content={running ?
"Running" : pod.phase}>
<Label icon={running ? <UpIcon/> :
<DownIcon/>} color={running ? "green" : "red"}>
<Button variant="link"
- onClick={e =>
-
useRunnerStore.setState({showLog: true, type: 'container', podName:
pod.name})}>
+ onClick={e => {
+ useLogStore.setState({
+ showLog: true,
+ type: 'container',
+ podName: pod.name
+ });
+ }}>
{pod.name}
</Button>
<Tooltip content={"Delete Pod"}>
@@ -244,7 +249,7 @@ export class ProjectStatus extends React.Component<Props,
State> {
showPipelineLog(pipeline: string, env: string) {
if (pipeline) {
- useRunnerStore.setState({showLog: true, type: 'pipeline', podName:
pipeline})
+ useLogStore.setState({showLog: true, type: 'pipeline', podName:
pipeline})
}
}
