You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2023/08/18 18:34:04 UTC
[camel-karavan] 01/02: Simplify page navigation #864
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 cc275e776b238d718d5af93ef23d53befac08530
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Fri Aug 18 09:05:27 2023 -0400
Simplify page navigation #864
---
.../src/main/webui/src/api/ProjectStore.ts | 6 --
.../src/main/webui/src/main/DataPoller.tsx | 8 +-
.../karavan-app/src/main/webui/src/main/Main.tsx | 86 ++++------------------
.../src/main/webui/src/main/PageNavigation.tsx | 3 +-
.../src/main/{DataPoller.tsx => useMainHook.tsx} | 29 ++------
5 files changed, 25 insertions(+), 107 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts b/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
index eba4c0c4..651c1071 100644
--- a/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
+++ b/karavan-web/karavan-app/src/main/webui/src/api/ProjectStore.ts
@@ -23,19 +23,13 @@ import {unstable_batchedUpdates} from "react-dom";
interface AppConfigState {
config: AppConfig;
setConfig: (config: AppConfig) => void;
- pageId: string;
- setPageId: (pageId: string) => void;
}
export const useAppConfigStore = create<AppConfigState>((set) => ({
config: new AppConfig(),
- pageId: 'projects',
setConfig: (config: AppConfig) => {
set({config: config})
},
- setPageId: (pageId: string) => {
- set({pageId: pageId})
- },
}))
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx b/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
index e3c0998a..3b917172 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
@@ -1,10 +1,8 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
import {KaravanApi} from "../api/KaravanApi";
-import {SsoApi} from "../api/SsoApi";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import '../designer/karavan.css';
-import {v4 as uuidv4} from "uuid";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {AppConfig, ContainerStatus} from "../api/ProjectModels";
import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
@@ -13,9 +11,8 @@ import {shallow} from "zustand/shallow";
export const DataPoller = () => {
- const [config, pageId, setPageId, setConfig] = useAppConfigStore((state) => [state.config, state.pageId, state.setPageId, state.setConfig], shallow)
+ const [setConfig] = useAppConfigStore((state) => [state.setConfig], shallow)
const [setContainers] = useStatusesStore((state) => [state.setContainers], shallow);
- const [request, setRequest] = useState<string>(uuidv4());
useEffect(() => {
console.log("DataPoller Start");
@@ -39,7 +36,6 @@ export const DataPoller = () => {
function getData() {
if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
KaravanApi.getConfiguration((config: AppConfig) => {
- setRequest(uuidv4());
setConfig(config);
InfrastructureAPI.infrastructure = config.infrastructure;
});
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx b/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
index c98fcf68..3cf72154 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
@@ -1,6 +1,6 @@
import {Routes, Route, useNavigate, Navigate} from 'react-router-dom';
import {useLocation} from 'react-router-dom';
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
import {KaravanApi} from "../api/KaravanApi";
import {Bullseye, Flex, FlexItem, Page, Spinner} from "@patternfly/react-core";
import Icon from "../Logo";
@@ -13,32 +13,32 @@ import {ServicesPage} from "../services/ServicesPage";
import {ContainersPage} from "../containers/ContainersPage";
import {KnowledgebasePage} from "../knowledgebase/KnowledgebasePage";
import {ProjectEventBus} from "../api/ProjectEventBus";
-import {AppConfig, ContainerStatus, Project, ToastMessage} from "../api/ProjectModels";
+import {Project, ToastMessage} from "../api/ProjectModels";
import {SsoApi} from "../api/SsoApi";
-import {v4 as uuidv4} from "uuid";
-import {InfrastructureAPI} from "../designer/utils/InfrastructureAPI";
-import {KameletApi} from "karavan-core/lib/api/KameletApi";
-import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
import {shallow} from "zustand/shallow";
import {PageNavigation} from "./PageNavigation";
+import {useMainHook} from "./useMainHook";
export const Main = () => {
- const [config, pageId, setPageId, setConfig] = useAppConfigStore((state) => [state.config, state.pageId, state.setPageId, state.setConfig], shallow)
- const [setContainers] = useStatusesStore((state) => [state.setContainers], shallow);
- const [request, setRequest] = useState<string>(uuidv4());
- let location = useLocation();
- const navigate = useNavigate();
+ const [config] = useAppConfigStore((state) => [state.config], shallow)
+ const { getData, getStatuses } = useMainHook();
+
+ const initialized = useRef(false)
useEffect(() => {
+ if (!initialized.current) {
+ initialized.current = true
+ effect()
+ }
+ }, [])
+
+ function effect() {
console.log("Main Start");
const interval = setInterval(() => {
getStatuses();
}, 1000);
- const sub = ProjectEventBus.onSelectProject()?.subscribe((project: Project | undefined) => {
- if (project) setPageId("project");
- });
KaravanApi.getAuthType((authType: string) => {
console.log("authType", authType);
if (authType === 'oidc') {
@@ -53,9 +53,8 @@ export const Main = () => {
return () => {
console.log("Main End");
clearInterval(interval);
- sub?.unsubscribe();
};
- }, []);
+ }
function onLogin(username: string, password: string) {
KaravanApi.auth(username, password, (res: any) => {
@@ -67,59 +66,6 @@ export const Main = () => {
});
}
- function getStatuses() {
- if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
- KaravanApi.getAllContainerStatuses((statuses: ContainerStatus[]) => {
- setContainers(statuses);
- });
- }
- }
-
- function getData() {
- if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
- KaravanApi.getConfiguration((config: AppConfig) => {
- setRequest(uuidv4());
- setConfig(config);
- InfrastructureAPI.infrastructure = config.infrastructure;
- });
- updateKamelets();
- updateComponents();
- // updateSupportedComponents(); // not implemented yet
- }
- }
-
- async function updateKamelets(): Promise<void> {
- await new Promise(resolve => {
- KaravanApi.getKamelets(yamls => {
- const kamelets: string[] = [];
- yamls.split("\n---\n").map(c => c.trim()).forEach(z => kamelets.push(z));
- KameletApi.saveKamelets(kamelets, true);
- })
- KaravanApi.getCustomKameletNames(names => {
- KameletApi.saveCustomKameletNames(names);
- })
- });
- }
-
- async function updateComponents(): Promise<void> {
- await new Promise(resolve => {
- KaravanApi.getComponents(code => {
- const components: [] = JSON.parse(code);
- const jsons: string[] = [];
- components.forEach(c => jsons.push(JSON.stringify(c)));
- ComponentApi.saveComponents(jsons, true);
- })
- });
- }
-
- async function updateSupportedComponents(): Promise<void> {
- await new Promise(resolve => {
- KaravanApi.getSupportedComponents(jsons => {
- ComponentApi.saveSupportedComponents(jsons);
- })
- });
- }
-
function toast(title: string, text: string, variant: 'success' | 'danger' | 'warning' | 'info' | 'custom') {
ProjectEventBus.sendAlert(new ToastMessage(title, text, variant))
}
@@ -152,7 +98,7 @@ export const Main = () => {
}
{!KaravanApi.isAuthorized && KaravanApi.authType === 'basic' &&
<MainLogin config={config} onLogin={onLogin}/>}
- <Notification/>
+ {/*<Notification/>*/}
</Page>
);
};
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx b/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
index 155affcc..648add20 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
@@ -33,10 +33,11 @@ class MenuItem {
export const PageNavigation = () => {
- const [config, pageId, setPageId] = useAppConfigStore((state) => [state.config, state.pageId, state.setPageId], shallow)
+ const [config] = useAppConfigStore((state) => [state.config], shallow)
const [setFile] = useFileStore((state) => [state.setFile], shallow)
const [setStatus, setPodName] = useDevModeStore((state) => [state.setStatus, state.setPodName], shallow)
const [showUser, setShowUser] = useState<boolean>(false);
+ const [pageId, setPageId] = useState<string>();
const navigate = useNavigate();
function getMenu() : MenuItem[] {
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx b/karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx
similarity index 74%
copy from karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
copy to karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx
index e3c0998a..6df01d20 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/DataPoller.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/useMainHook.tsx
@@ -1,34 +1,18 @@
-import React, {useEffect, useState} from 'react';
-
import {KaravanApi} from "../api/KaravanApi";
-import {SsoApi} from "../api/SsoApi";
import {KameletApi} from "karavan-core/lib/api/KameletApi";
import '../designer/karavan.css';
-import {v4 as uuidv4} from "uuid";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
import {AppConfig, ContainerStatus} from "../api/ProjectModels";
import {useAppConfigStore, useStatusesStore} from "../api/ProjectStore";
import {InfrastructureAPI} from "../designer/utils/InfrastructureAPI";
import {shallow} from "zustand/shallow";
-export const DataPoller = () => {
+export const useMainHook = () => {
- const [config, pageId, setPageId, setConfig] = useAppConfigStore((state) => [state.config, state.pageId, state.setPageId, state.setConfig], shallow)
+ const [setConfig] = useAppConfigStore((state) => [state.setConfig], shallow)
const [setContainers] = useStatusesStore((state) => [state.setContainers], shallow);
- const [request, setRequest] = useState<string>(uuidv4());
-
- useEffect(() => {
- console.log("DataPoller Start");
- const interval = setInterval(() => {
- getStatuses();
- }, 1000);
- return () => {
- console.log("DataPoller End");
- clearInterval(interval);
- };
- }, []);
- function getStatuses() {
+ const getStatuses = () => {
if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
KaravanApi.getAllContainerStatuses((statuses: ContainerStatus[]) => {
setContainers(statuses);
@@ -36,10 +20,9 @@ export const DataPoller = () => {
}
}
- function getData() {
+ const getData = () => {
if (KaravanApi.isAuthorized || KaravanApi.authType === 'public') {
KaravanApi.getConfiguration((config: AppConfig) => {
- setRequest(uuidv4());
setConfig(config);
InfrastructureAPI.infrastructure = config.infrastructure;
});
@@ -81,7 +64,5 @@ export const DataPoller = () => {
});
}
- return (
- <React.Fragment></React.Fragment>
- )
+ return { getData, getStatuses }
}
\ No newline at end of file