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 <[email protected]> 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
