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.
bekk · Jun 26, 2024 · 5f5b7cb · 5f5b7cb
1 parent 9279028
commit 5f5b7cb
Show file tree

Hide file tree

Showing 18 changed files with 128 additions and 80 deletions.
diff --git 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
diff --git 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',
   },
 };
-
diff --git a/db-scheduler-ui-frontend/index.html b/db-scheduler-ui-frontend/index.html
@@ -1,16 +1,16 @@
 <!doctype html>
 <html lang='en'>
+
 <head>
-  <meta charset='UTF-8' />
-  <link rel="icon" type="image/svg+xml" href="./public/Favicon.svg" />
-  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-  <title>DB Scheduler UI</title>
+    <meta charset='UTF-8' />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <title>DB Scheduler UI</title>
 </head>
+
 <body>
-<div id='root'></div>
-<script th:inline="javascript">
-  var showHistory = [[${showHistory}]];
-</script>
-<script type='module' src='./main.tsx'></script>
+    <div id='root'></div>
+    <script type='module' src='./main.tsx'></script>
 </body>
-</html>
+
+</html>
diff --git 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(
   <BrowserRouter basename="db-scheduler">

diff --git a/db-scheduler-ui-frontend/public/config.json b/db-scheduler-ui-frontend/public/config.json
diff --git a/db-scheduler-ui-frontend/public/Favicon.svg → db-scheduler-ui-frontend/public/favicon.svg b/db-scheduler-ui-frontend/public/Favicon.svg → 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
@@ -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
@@ -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<TopBarProps> = ({ title }) => {
   const navigate = useNavigate();
-  const showHistory= getShowHistory()
+  const showHistory = getShowHistory();
 
   return (
     <Box

diff --git a/db-scheduler-ui-frontend/src/components/history/LogList.tsx b/db-scheduler-ui-frontend/src/components/history/LogList.tsx
@@ -13,16 +13,16 @@
  */
 import { Accordion, Box, Button, Flex, HStack, Text } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
-import { LogCard } from 'src/components/history/LogCard';
 import { useLocation } from 'react-router-dom';
-import colors from 'src/styles/colors';
-import { HeaderBar } from '../common/HeaderBar';
-import { ALL_LOG_QUERY_KEY, getLogs } from 'src/services/getLogs';
-import { useInfiniteScrolling } from 'src/hooks/useInfiniteTaskScrolling';
+import { LogCard } from 'src/components/history/LogCard';
 import { DateTimeInput } from 'src/components/input/DateTimeInput';
 import { SortButton } from 'src/components/input/SortButton';
+import { useInfiniteScrolling } from 'src/hooks/useInfiniteTaskScrolling';
 import { SortBy } from 'src/models/QueryParams';
 import { LogResponse } from 'src/models/TasksResponse';
+import { ALL_LOG_QUERY_KEY, getLogs } from 'src/services/getLogs';
+import colors from 'src/styles/colors';
+import { HeaderBar } from '../common/HeaderBar';
 
 export const LogList: React.FC = () => {
   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
@@ -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
@@ -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
@@ -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/...ter/src/main/java/no/bekk/dbscheduler/uistarter/autoconfigure/UiApiAutoConfiguration.java b/...ter/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
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xmlns="http://maven.apache.org/POM/4.0.0"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <parent>
@@ -18,7 +18,7 @@
         <dependency>
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>
-            <optional>true</optional>
+            <scope>provided</scope>
         </dependency>
         <dependency>
             <groupId>com.github.kagkarlsson</groupId>
@@ -36,9 +36,5 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-jdbc</artifactId>
         </dependency>
-        <dependency>
-            <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-thymeleaf</artifactId>
-        </dependency>
     </dependencies>
 </project>
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
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) Bekk
+ *
+ * <p>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
+ *
+ * <p>http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * <p>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
@@ -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
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) Bekk
+ *
+ * <p>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
+ *
+ * <p>http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * <p>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
@@ -327,34 +327,11 @@
                             <resources>
                                 <resource>
                                     <directory>db-scheduler-ui-frontend/dist</directory>
-                                    <excludes>
-                                        <exclude>**/*.html</exclude>
-                                    </excludes>
                                 </resource>
                             </resources>
                         </configuration>
                     </execution>
 
-                    <execution>
-                        <id>copy-template-files</id>
-                        <phase>process-classes</phase>
-                        <goals>
-                            <goal>copy-resources</goal>
-                        </goals>
-                        <configuration>
-                            <encoding>UTF-8</encoding>
-                            <outputDirectory>db-scheduler-ui/src/main/resources/templates/db-scheduler-ui
-                            </outputDirectory>
-                            <resources>
-                                <resource>
-                                    <directory>db-scheduler-ui-frontend/dist</directory>
-                                    <includes>
-                                        <include>**/*.html</include>
-                                    </includes>
-                                </resource>
-                            </resources>
-                        </configuration>
-                    </execution>
                 </executions>
             </plugin>
         </plugins>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		VITE_API_BASE_URL=http://localhost:8081/db-scheduler-api
		VITE_CONFIG_URL=/config.json
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,6 @@ module.exports = { @@
           'warn',
           { allowConstantExport: true },
         ],
+        'no-console': 'warn',
       },
     };