From 5f5b7cb3822f090569ebc6a5c5226eee9b03287e Mon Sep 17 00:00:00 2001 From: Geir Sagberg Date: Wed, 26 Jun 2024 13:04:08 +0200 Subject: [PATCH] Replace thymeleaf with config endpoint When targeting es2022 we can use top level awaits to load config from a separate endpoint. This removes the dependency on thymeleaf for tepmlating, and we can serve the SPA fully static. --- db-scheduler-ui-frontend/.env.development | 1 - db-scheduler-ui-frontend/.eslintrc.cjs | 2 +- db-scheduler-ui-frontend/index.html | 20 +++++------ db-scheduler-ui-frontend/main.tsx | 2 +- db-scheduler-ui-frontend/public/config.json | 1 - .../public/{Favicon.svg => favicon.svg} | 0 db-scheduler-ui-frontend/src/App.tsx | 4 +-- .../src/components/common/TopBar.tsx | 5 ++- .../src/components/history/LogList.tsx | 12 ++++--- .../src/pages/FrontPage.tsx | 4 +-- db-scheduler-ui-frontend/src/utils/config.ts | 13 +++---- db-scheduler-ui-frontend/vite.config.ts | 15 ++++++-- .../autoconfigure/UiApiAutoConfiguration.java | 19 ++++++++++- db-scheduler-ui/pom.xml | 10 ++---- .../ui/controller/ConfigController.java | 34 +++++++++++++++++++ .../ui/controller/UIController.java | 17 ++-------- .../ui/model/DbSchedulerUiConfig.java | 26 ++++++++++++++ pom.xml | 23 ------------- 18 files changed, 128 insertions(+), 80 deletions(-) delete mode 100644 db-scheduler-ui-frontend/public/config.json rename db-scheduler-ui-frontend/public/{Favicon.svg => favicon.svg} (100%) create mode 100644 db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/ConfigController.java create mode 100644 db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/model/DbSchedulerUiConfig.java diff --git a/db-scheduler-ui-frontend/.env.development b/db-scheduler-ui-frontend/.env.development index 136a7bae..626587c1 100644 --- a/db-scheduler-ui-frontend/.env.development +++ b/db-scheduler-ui-frontend/.env.development @@ -1,2 +1 @@ VITE_API_BASE_URL=http://localhost:8081/db-scheduler-api -VITE_CONFIG_URL=/config.json \ No newline at end of file diff --git a/db-scheduler-ui-frontend/.eslintrc.cjs b/db-scheduler-ui-frontend/.eslintrc.cjs index f8a79015..9ef9a78e 100644 --- a/db-scheduler-ui-frontend/.eslintrc.cjs +++ b/db-scheduler-ui-frontend/.eslintrc.cjs @@ -18,6 +18,6 @@ module.exports = { 'warn', { allowConstantExport: true }, ], + 'no-console': 'warn', }, }; - \ No newline at end of file diff --git a/db-scheduler-ui-frontend/index.html b/db-scheduler-ui-frontend/index.html index b3292b6a..5d4647a9 100644 --- a/db-scheduler-ui-frontend/index.html +++ b/db-scheduler-ui-frontend/index.html @@ -1,16 +1,16 @@ + - - - - DB Scheduler UI + + + + DB Scheduler UI + -
- - +
+ - + + \ No newline at end of file diff --git a/db-scheduler-ui-frontend/main.tsx b/db-scheduler-ui-frontend/main.tsx index 0a90f223..09186bc0 100644 --- a/db-scheduler-ui-frontend/main.tsx +++ b/db-scheduler-ui-frontend/main.tsx @@ -12,8 +12,8 @@ * limitations under the License. */ import ReactDOM from 'react-dom/client'; -import App from './src/App'; import { BrowserRouter } from 'react-router-dom'; +import App from './src/App'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/db-scheduler-ui-frontend/public/config.json b/db-scheduler-ui-frontend/public/config.json deleted file mode 100644 index 8c8b447f..00000000 --- a/db-scheduler-ui-frontend/public/config.json +++ /dev/null @@ -1 +0,0 @@ -{"showTaskData":true,"showHistory":true} \ No newline at end of file diff --git a/db-scheduler-ui-frontend/public/Favicon.svg b/db-scheduler-ui-frontend/public/favicon.svg similarity index 100% rename from db-scheduler-ui-frontend/public/Favicon.svg rename to db-scheduler-ui-frontend/public/favicon.svg diff --git a/db-scheduler-ui-frontend/src/App.tsx b/db-scheduler-ui-frontend/src/App.tsx index 7aeec5bb..e16a0ad6 100644 --- a/db-scheduler-ui-frontend/src/App.tsx +++ b/db-scheduler-ui-frontend/src/App.tsx @@ -12,10 +12,10 @@ * limitations under the License. */ import { ChakraProvider } from '@chakra-ui/react'; -import { theme } from 'src/styles/theme'; -import { FrontPage } from './pages/FrontPage'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { theme } from 'src/styles/theme'; +import { FrontPage } from './pages/FrontPage'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchInterval: 2000 } }, diff --git a/db-scheduler-ui-frontend/src/components/common/TopBar.tsx b/db-scheduler-ui-frontend/src/components/common/TopBar.tsx index 93629245..729ddaa2 100644 --- a/db-scheduler-ui-frontend/src/components/common/TopBar.tsx +++ b/db-scheduler-ui-frontend/src/components/common/TopBar.tsx @@ -13,19 +13,18 @@ */ import { Box, Button, Text } from '@chakra-ui/react'; import React from 'react'; +import { useNavigate } from 'react-router-dom'; import { LogoIcon } from 'src/assets/icons/Logo'; import colors from 'src/styles/colors'; -import { useNavigate } from 'react-router-dom'; import { getShowHistory } from 'src/utils/config'; interface TopBarProps { title: string; } - export const TopBar: React.FC = ({ title }) => { const navigate = useNavigate(); - const showHistory= getShowHistory() + const showHistory = getShowHistory(); return ( { const location = useLocation(); @@ -75,6 +75,8 @@ export const LogList: React.FC = () => { setSearchTermTaskName, taskInstance, taskName, + setTaskInstanceExactMatch, + setTaskNameExactMatch, ]); return ( diff --git a/db-scheduler-ui-frontend/src/pages/FrontPage.tsx b/db-scheduler-ui-frontend/src/pages/FrontPage.tsx index 40d2e3cc..b9f19191 100644 --- a/db-scheduler-ui-frontend/src/pages/FrontPage.tsx +++ b/db-scheduler-ui-frontend/src/pages/FrontPage.tsx @@ -11,11 +11,11 @@ * express or implied. See the License for the specific language governing permissions and * limitations under the License. */ -import { TopBar } from 'src/components/common/TopBar'; import { Box } from '@chakra-ui/react'; import { Route, Routes } from 'react-router-dom'; -import TaskList from 'src/components/scheduled/TaskList'; +import { TopBar } from 'src/components/common/TopBar'; import { LogList } from 'src/components/history/LogList'; +import TaskList from 'src/components/scheduled/TaskList'; import { getShowHistory } from 'src/utils/config'; export const FrontPage: React.FC = () => { diff --git a/db-scheduler-ui-frontend/src/utils/config.ts b/db-scheduler-ui-frontend/src/utils/config.ts index 7b52373f..37733876 100644 --- a/db-scheduler-ui-frontend/src/utils/config.ts +++ b/db-scheduler-ui-frontend/src/utils/config.ts @@ -11,10 +11,11 @@ * express or implied. See the License for the specific language governing permissions and * limitations under the License. */ -declare global { - interface Window { - showHistory?: boolean, - } -} -export const getShowHistory = (): boolean => window.showHistory ?? false; +const config = await fetch('/db-scheduler-api/config').then((res) => + res.json(), +); + +const showHistory = 'history' in config ? Boolean(config.history) : false; + +export const getShowHistory = (): boolean => showHistory; diff --git a/db-scheduler-ui-frontend/vite.config.ts b/db-scheduler-ui-frontend/vite.config.ts index d975f9f5..b1320661 100644 --- a/db-scheduler-ui-frontend/vite.config.ts +++ b/db-scheduler-ui-frontend/vite.config.ts @@ -11,17 +11,26 @@ * express or implied. See the License for the specific language governing permissions and * limitations under the License. */ -import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import { defineConfig } from 'vite'; import eslintPlugin from 'vite-plugin-eslint'; -const BASE_URL: string = process.env.NODE_ENV === 'production' ? 'db-scheduler-ui' : '/db-scheduler'; - +const BASE_URL: string = + process.env.NODE_ENV === 'production' ? '/db-scheduler-ui' : '/db-scheduler'; export default defineConfig({ base: BASE_URL, server: { port: 51373, + proxy: { + '/db-scheduler-api': { + target: 'http://localhost:8081', + changeOrigin: true, + }, + }, + }, + build: { + target: 'es2022', }, plugins: [react(), eslintPlugin()], resolve: { diff --git a/db-scheduler-ui-starter/src/main/java/no/bekk/dbscheduler/uistarter/autoconfigure/UiApiAutoConfiguration.java b/db-scheduler-ui-starter/src/main/java/no/bekk/dbscheduler/uistarter/autoconfigure/UiApiAutoConfiguration.java index 8da58bd3..653b27f0 100644 --- a/db-scheduler-ui-starter/src/main/java/no/bekk/dbscheduler/uistarter/autoconfigure/UiApiAutoConfiguration.java +++ b/db-scheduler-ui-starter/src/main/java/no/bekk/dbscheduler/uistarter/autoconfigure/UiApiAutoConfiguration.java @@ -17,9 +17,11 @@ import com.github.kagkarlsson.scheduler.boot.config.DbSchedulerCustomizer; import com.github.kagkarlsson.scheduler.serializer.Serializer; import javax.sql.DataSource; +import no.bekk.dbscheduler.ui.controller.ConfigController; import no.bekk.dbscheduler.ui.controller.LogController; import no.bekk.dbscheduler.ui.controller.TaskController; import no.bekk.dbscheduler.ui.controller.UIController; +import no.bekk.dbscheduler.ui.model.DbSchedulerUiConfig; import no.bekk.dbscheduler.ui.service.LogLogic; import no.bekk.dbscheduler.ui.service.TaskLogic; import no.bekk.dbscheduler.ui.util.Caching; @@ -37,9 +39,12 @@ public class UiApiAutoConfiguration { private static final Logger logger = LoggerFactory.getLogger(UiApiAutoConfiguration.class); - @Value("${db-scheduler-ui.taskdata:true}") + @Value("${db-scheduler-ui.task-data:true}") boolean showTaskData; + @Value("${db-scheduler-ui.history:false}") + boolean showHistory; + UiApiAutoConfiguration() { logger.info("UiApiAutoConfiguration created"); } @@ -88,9 +93,21 @@ LogController logController(LogLogic logLogic) { return new LogController(logLogic); } + @Bean + @ConditionalOnMissingBean + DbSchedulerUiConfig dbSchedulerUiConfig() { + return new DbSchedulerUiConfig(showHistory); + } + @Bean @ConditionalOnMissingBean UIController uiController() { return new UIController(); } + + @Bean + @ConditionalOnMissingBean + ConfigController configController() { + return new ConfigController(); + } } diff --git a/db-scheduler-ui/pom.xml b/db-scheduler-ui/pom.xml index a39f39f2..766e1f67 100644 --- a/db-scheduler-ui/pom.xml +++ b/db-scheduler-ui/pom.xml @@ -1,6 +1,6 @@ - 4.0.0 @@ -18,7 +18,7 @@ org.projectlombok lombok - true + provided com.github.kagkarlsson @@ -36,9 +36,5 @@ org.springframework.boot spring-boot-starter-jdbc - - org.springframework.boot - spring-boot-starter-thymeleaf - diff --git a/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/ConfigController.java b/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/ConfigController.java new file mode 100644 index 00000000..f1a687a7 --- /dev/null +++ b/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/ConfigController.java @@ -0,0 +1,34 @@ +/* + * Copyright (C) Bekk + * + *

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file + * except in compliance with the License. You may obtain a copy of the License at + * + *

http://www.apache.org/licenses/LICENSE-2.0 + * + *

Unless required by applicable law or agreed to in writing, software distributed under the + * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either + * express or implied. See the License for the specific language governing permissions and + * limitations under the License. + */ +package no.bekk.dbscheduler.ui.controller; + +import no.bekk.dbscheduler.ui.model.DbSchedulerUiConfig; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.web.bind.annotation.CrossOrigin; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; + +@RestController +@CrossOrigin +@RequestMapping("/db-scheduler-api/config") +public class ConfigController { + + @Autowired private DbSchedulerUiConfig dbSchedulerUiConfig; + + @GetMapping + public DbSchedulerUiConfig getConfig() { + return dbSchedulerUiConfig; + } +} diff --git a/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/UIController.java b/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/UIController.java index b1e53b23..39657ed7 100644 --- a/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/UIController.java +++ b/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/controller/UIController.java @@ -13,9 +13,7 @@ */ package no.bekk.dbscheduler.ui.controller; -import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; -import org.springframework.ui.Model; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @@ -25,19 +23,10 @@ @RequestMapping("/db-scheduler") public class UIController { - @Value("${db-scheduler-ui.history:false}") - private boolean showHistory; - public UIController() {} - @GetMapping - public String index(Model model) { - model.addAttribute("showHistory", showHistory); - return "db-scheduler-ui/index"; - } - - @RequestMapping("/**") - public String forwardToIndex(Model model) { - return index(model); + @GetMapping("/**") + public String index() { + return "forward:/db-scheduler-ui/index.html"; } } diff --git a/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/model/DbSchedulerUiConfig.java b/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/model/DbSchedulerUiConfig.java new file mode 100644 index 00000000..b508ad6c --- /dev/null +++ b/db-scheduler-ui/src/main/java/no/bekk/dbscheduler/ui/model/DbSchedulerUiConfig.java @@ -0,0 +1,26 @@ +/* + * Copyright (C) Bekk + * + *

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file + * except in compliance with the License. You may obtain a copy of the License at + * + *

http://www.apache.org/licenses/LICENSE-2.0 + * + *

Unless required by applicable law or agreed to in writing, software distributed under the + * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either + * express or implied. See the License for the specific language governing permissions and + * limitations under the License. + */ +package no.bekk.dbscheduler.ui.model; + +import lombok.AllArgsConstructor; +import lombok.Getter; +import lombok.Setter; + +@Getter +@Setter +@AllArgsConstructor +public class DbSchedulerUiConfig { + + private boolean history; +} diff --git a/pom.xml b/pom.xml index 3a65eb8d..2a957e3c 100644 --- a/pom.xml +++ b/pom.xml @@ -327,34 +327,11 @@ db-scheduler-ui-frontend/dist - - **/*.html - - - copy-template-files - process-classes - - copy-resources - - - UTF-8 - db-scheduler-ui/src/main/resources/templates/db-scheduler-ui - - - - db-scheduler-ui-frontend/dist - - **/*.html - - - - -