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 25d45b70 Refactoring for #809
25d45b70 is described below
commit 25d45b70d54583d3b9d27d19d460bb39d069c030
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Sun Jul 2 13:01:00 2023 -0400
Refactoring for #809
---
karavan-app/src/main/webui/src/Main.tsx | 37 ++---------------
karavan-app/src/main/webui/src/Notification.tsx | 47 ++++++++++++++++++++++
karavan-app/src/main/webui/src/api/KaravanApi.tsx | 1 -
.../src/main/webui/src/api/ProjectEventBus.ts | 6 ++-
.../src/main/webui/src/api/ProjectModels.ts | 16 ++++++++
.../src/main/webui/src/api/ProjectService.ts | 13 +++---
karavan-app/src/main/webui/src/api/ProjectStore.ts | 2 +-
.../src/main/webui/src/project/ProjectPage.tsx | 2 +-
.../src/main/webui/src/project/ProjectToolbar.tsx | 2 +-
.../src/main/webui/src/project/RunnerToolbar.tsx | 24 +++++------
10 files changed, 94 insertions(+), 56 deletions(-)
diff --git a/karavan-app/src/main/webui/src/Main.tsx
b/karavan-app/src/main/webui/src/Main.tsx
index c16599bd..fe4cdeb7 100644
--- a/karavan-app/src/main/webui/src/Main.tsx
+++ b/karavan-app/src/main/webui/src/Main.tsx
@@ -2,8 +2,6 @@ import React from 'react';
import {
Page,
Button,
- Alert,
- AlertActionCloseButton,
Flex,
FlexItem,
Tooltip,
@@ -30,23 +28,10 @@ import {MainLogin} from "./MainLogin";
import {DashboardPage} from "./dashboard/DashboardPage";
import {Subscription} from "rxjs";
import {ProjectEventBus} from "./api/ProjectEventBus";
-import {Project, ProjectFile} from "./api/ProjectModels";
+import {Project, ToastMessage} from "./api/ProjectModels";
import {ProjectPage} from "./project/ProjectPage";
import {useAppConfigStore, useFileStore} from "./api/ProjectStore";
-
-class ToastMessage {
- id: string = ''
- text: string = ''
- title: string = ''
- variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
-
- constructor(title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'default') {
- this.id = uuidv4();
- this.title = title;
- this.text = text;
- this.variant = variant;
- }
-}
+import {Notification} from "./Notification";
class MenuItem {
pageId: string = '';
@@ -68,7 +53,6 @@ interface State {
pageId: string,
isModalOpen: boolean,
openapi: string,
- alerts: ToastMessage[],
request: string,
filename: string,
key: string,
@@ -81,7 +65,6 @@ export class Main extends React.Component<Props, State> {
config: {},
pageId: "projects",
isModalOpen: false,
- alerts: [],
request: uuidv4(),
openapi: '',
filename: '',
@@ -169,10 +152,6 @@ export class Main extends React.Component<Props, State> {
});
}
- deleteErrorMessage = (id: string) => {
- this.setState({alerts: this.state.alerts.filter(a => a.id !== id)})
- }
-
pageNav = () => {
const pages: MenuItem[] = [
new MenuItem("dashboard", "Dashboard", <DashboardIcon/>),
@@ -231,9 +210,7 @@ export class Main extends React.Component<Props, State> {
}
toast = (title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'default') => {
- const mess = [];
- mess.push(...this.state.alerts, new ToastMessage(title, text,
variant));
- this.setState({alerts: mess})
+ ProjectEventBus.sendAlert(new ToastMessage(title, text, variant))
}
getMain() {
@@ -275,13 +252,7 @@ export class Main extends React.Component<Props, State> {
{(KaravanApi.isAuthorized || KaravanApi.authType === 'public')
&& this.getMain()}
{!KaravanApi.isAuthorized && KaravanApi.authType === 'basic' &&
<MainLogin config={this.state.config}
onLogin={this.onLogin}/>}
- {this.state.alerts.map((e: ToastMessage) => (
- <Alert key={e.id} className="main-alert"
variant={e.variant} title={e.title}
- timeout={e.variant === "success" ? 1000 : 2000}
- actionClose={<AlertActionCloseButton onClose={() =>
this.deleteErrorMessage(e.id)}/>}>
- {e.text}
- </Alert>
- ))}
+ <Notification/>
</Page>
)
}
diff --git a/karavan-app/src/main/webui/src/Notification.tsx
b/karavan-app/src/main/webui/src/Notification.tsx
new file mode 100644
index 00000000..5216ddd4
--- /dev/null
+++ b/karavan-app/src/main/webui/src/Notification.tsx
@@ -0,0 +1,47 @@
+import React, {useEffect, useState} from 'react';
+import {
+ Alert,
+ AlertActionCloseButton, AlertGroup,
+} from '@patternfly/react-core';
+import './designer/karavan.css';
+import {ToastMessage} from "./api/ProjectModels";
+import {ProjectEventBus} from "./api/ProjectEventBus";
+
+export const Notification = () => {
+
+ const [alerts, setAlerts] = useState<ToastMessage[]>([]);
+
+ useEffect(() => {
+ console.log("Notification Start");
+ const sub = ProjectEventBus.onAlert()?.subscribe((result:
ToastMessage) => {
+ console.log(result);
+ setAlerts(prevState => {
+ return [...prevState, result];
+ });
+ });
+ return () => {
+ console.log("end");
+ sub?.unsubscribe();
+ };
+ }, []);
+
+ useEffect(() => {
+ console.log("Notification alert");
+ }, [alerts]);
+
+ return (
+ <AlertGroup isToast isLiveRegion>
+ {alerts.map((e: ToastMessage) => (
+ <Alert key={e.id} className="main-alert" variant={e.variant}
title={e.title}
+ timeout={e.variant === "success" ? 1000 : 2000}
+ actionClose={<AlertActionCloseButton onClose={() => {
+ setAlerts(prevState => {
+ return [...prevState.filter(t => t.id !==
e.id)];
+ });
+ }}/>}>
+ {e.text}
+ </Alert>
+ ))}
+ </AlertGroup>
+ )
+}
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/api/KaravanApi.tsx
b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
index 61e57cdd..f29f453b 100644
--- a/karavan-app/src/main/webui/src/api/KaravanApi.tsx
+++ b/karavan-app/src/main/webui/src/api/KaravanApi.tsx
@@ -588,7 +588,6 @@ export class KaravanApi {
}
},
onmessage(event) {
- console.log(event);
ProjectEventBus.sendLog('add', event.data)
},
onclose() {
diff --git a/karavan-app/src/main/webui/src/api/ProjectEventBus.ts
b/karavan-app/src/main/webui/src/api/ProjectEventBus.ts
index 26190541..53658da9 100644
--- a/karavan-app/src/main/webui/src/api/ProjectEventBus.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectEventBus.ts
@@ -15,12 +15,13 @@
* limitations under the License.
*/
import {BehaviorSubject, Subject} from 'rxjs';
-import {Project} from "./ProjectModels";
+import {Project, ToastMessage} from "./ProjectModels";
const selectedProject = new BehaviorSubject<Project | undefined>(undefined);
const currentFile = new BehaviorSubject<string | undefined>(undefined);
const mode = new BehaviorSubject<"design" | "code">("design");
const log = new Subject<["add" | "set", string]>();
+const alerts = new Subject<ToastMessage>();
export class ShowLogCommand {
type: 'container' | 'pipeline'
@@ -55,4 +56,7 @@ export const ProjectEventBus = {
sendLog: (type: "add" | "set", m: string) => log.next([type, m]),
onLog: () => log.asObservable(),
+
+ sendAlert: (alert: ToastMessage) => alerts.next(alert),
+ onAlert: () => alerts.asObservable(),
}
diff --git a/karavan-app/src/main/webui/src/api/ProjectModels.ts
b/karavan-app/src/main/webui/src/api/ProjectModels.ts
index 63757dcc..852cab1a 100644
--- a/karavan-app/src/main/webui/src/api/ProjectModels.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectModels.ts
@@ -1,3 +1,5 @@
+import {v4 as uuidv4} from "uuid";
+
export class AppConfig {
version: string = '';
environment: string = '';
@@ -138,4 +140,18 @@ export function getProjectFileType (file: ProjectFile) {
if (file.name.endsWith(".yaml")) return ProjectFileTypes.filter(p =>
p.name === "OPENAPI_YAML").map(p => p.title)[0];
const extension = file.name.substring(file.name.lastIndexOf('.') + 1);
return ProjectFileTypes.filter(p => p.extension === extension).map(p =>
p.title)[0];
+}
+
+export class ToastMessage {
+ id: string = ''
+ text: string = ''
+ title: string = ''
+ variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+
+ constructor(title: string, text: string, variant: 'success' | 'danger' |
'warning' | 'info' | 'default') {
+ this.id = uuidv4();
+ this.title = title;
+ this.text = text;
+ this.variant = variant;
+ }
}
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/api/ProjectService.ts
b/karavan-app/src/main/webui/src/api/ProjectService.ts
index e286c59c..b8e56134 100644
--- a/karavan-app/src/main/webui/src/api/ProjectService.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectService.ts
@@ -1,17 +1,17 @@
import {KaravanApi} from "./KaravanApi";
-import {DeploymentStatus, PodStatus, Project, ProjectFile} from
"./ProjectModels";
+import {DeploymentStatus, PodStatus, Project, ProjectFile, ToastMessage} from
"./ProjectModels";
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
import {KubernetesAPI} from "../designer/utils/KubernetesAPI";
import {unstable_batchedUpdates} from 'react-dom'
-import {EventStreamContentType, fetchEventSource} from
'@microsoft/fetch-event-source';
import {
useAppConfigStore,
useDeploymentStatusesStore,
useFilesStore,
- useFileStore, useLogStore,
+ useFileStore,
useProjectsStore,
useProjectStore, useRunnerStore
} from "./ProjectStore";
+import {ProjectEventBus} from "./ProjectEventBus";
export class ProjectService {
@@ -19,6 +19,7 @@ export class ProjectService {
useRunnerStore.setState({status: "starting"})
KaravanApi.runProject(project, res => {
if (res.status === 200 || res.status === 201) {
+ ProjectEventBus.sendLog("set", '');
useRunnerStore.setState({showLog: true})
} else {
// Todo notification
@@ -40,12 +41,12 @@ export class ProjectService {
public static deleteRunner(project: Project) {
useRunnerStore.setState({status: "deleting"})
+ ProjectEventBus.sendLog("set", '');
KaravanApi.deleteRunner(project.projectId, false, res => {
if (res.status === 202) {
- useRunnerStore.setState({showLog: false})
+ useRunnerStore.setState({showLog: false, type: 'container'})
} else {
- // Todo notification
- // setIsDeletingPod(false);
+ 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 7644a359..9891426c 100644
--- a/karavan-app/src/main/webui/src/api/ProjectStore.ts
+++ b/karavan-app/src/main/webui/src/api/ProjectStore.ts
@@ -16,7 +16,7 @@
*/
import {create} from 'zustand'
-import {AppConfig, DeploymentStatus, PodStatus, Project, ProjectFile} from
"./ProjectModels";
+import {AppConfig, DeploymentStatus, PodStatus, Project, ProjectFile,
ToastMessage} from "./ProjectModels";
import {ProjectEventBus} from "./ProjectEventBus";
import {unstable_batchedUpdates} from "react-dom";
diff --git a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
index 1dd13b8e..a6b3c8bd 100644
--- a/karavan-app/src/main/webui/src/project/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/project/ProjectPage.tsx
@@ -8,7 +8,7 @@ import FileSaver from "file-saver";
import {ProjectToolbar} from "./ProjectToolbar";
import {ProjectLogPanel} from "./log/ProjectLogPanel";
import {ProjectFile, ProjectFileTypes} from "../api/ProjectModels";
-import {useFileStore, useProjectStore} from "../api/ProjectStore";
+import {useFileStore, useProjectStore, useRunnerStore} from
"../api/ProjectStore";
import {MainToolbar} from "../common/MainToolbar";
import {CreateFileModal} from "./CreateFileModal";
import {DeleteFileModal} from "./DeleteFileModal";
diff --git a/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
b/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
index de8a0f72..c1312692 100644
--- a/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
+++ b/karavan-app/src/main/webui/src/project/ProjectToolbar.tsx
@@ -66,7 +66,7 @@ export const ProjectToolbar = (props: Props) => {
setIsYaml(isYaml);
setIsIntegration(isIntegration);
setIsProperties(isProperties);
- });
+ }, [project]);
function needCommit(): boolean {
return project ? files.filter(f => f.lastUpdate >
project.lastCommitTimestamp).length > 0 : false;
diff --git a/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx
b/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx
index 92a99e95..41b272ca 100644
--- a/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx
+++ b/karavan-app/src/main/webui/src/project/RunnerToolbar.tsx
@@ -22,6 +22,18 @@ export const RunnerToolbar = () => {
const isReloadingPod = status === "reloading";
const isDeletingPod = status === "deleting";
return (<>
+ {(isRunning || isDeletingPod) && !isReloadingPod && <FlexItem>
+ <Tooltip content="Stop runner" position={TooltipPosition.bottom}>
+ <Button isLoading={isDeletingPod ? true : undefined}
+ isSmall
+ variant={"secondary"}
+ className="project-button"
+ icon={!isRunning ? <DeleteIcon/> : <div></div>}
+ onClick={() => ProjectService.deleteRunner(project)}>
+ {isDeletingPod ? "..." : "Stop"}
+ </Button>
+ </Tooltip>
+ </FlexItem>}
{!isRunning && !isReloadingPod && <FlexItem>
<Tooltip content="Run in development mode"
position={TooltipPosition.bottom}>
<Button isLoading={isStartingPod ? true : undefined}
@@ -46,17 +58,5 @@ export const RunnerToolbar = () => {
</Button>
</Tooltip>
</FlexItem>}
- {(isRunning || isDeletingPod) && !isReloadingPod && <FlexItem>
- <Tooltip content="Stop runner" position={TooltipPosition.bottom}>
- <Button isLoading={isDeletingPod ? true : undefined}
- isSmall
- variant={"secondary"}
- className="project-button"
- icon={!isRunning ? <DeleteIcon/> : <div></div>}
- onClick={() => ProjectService.deleteRunner(project)}>
- {isDeletingPod ? "..." : "Stop"}
- </Button>
- </Tooltip>
- </FlexItem>}
</>);
}
