feat #24: use htmx to refresh connection status every 20s

build.gradle.kts

@@ -20,6 +20,7 @@ var versions = mapOf(
     "mockito-kotlin" to "5.2.1",
     // Webjars
     "echarts" to "5.4.3",
+    "htmx.org" to "1.9.10"
 )
 
 java {
@@ -70,6 +71,7 @@ dependencies {
     implementation("com.jayway.jsonpath:json-path")
     implementation("org.webjars:webjars-locator:0.50")
     implementation("org.webjars.npm:echarts:${versions["echarts"]}")
+    implementation("org.webjars.npm:htmx.org:${versions["htmx.org"]}")
     runtimeOnly("org.mariadb.jdbc:mariadb-java-client")
     runtimeOnly("org.postgresql:postgresql")
     developmentOnly("org.springframework.boot:spring-boot-devtools")

src/main/kotlin/dev/dnpm/etl/processor/web/ConfigController.kt

@@ -49,4 +49,13 @@ class ConfigController(
         return "configs"
     }
 
+    @GetMapping(params = ["connectionAvailable"])
+    fun connectionAvailable(model: Model): String {
+        model.addAttribute("mtbFileSender", mtbFileSender.javaClass.simpleName)
+        model.addAttribute("mtbFileEndpoint", mtbFileSender.endpoint())
+        model.addAttribute("connectionAvailable", connectionCheckService.connectionAvailable())
+
+        return "configs/connectionAvailable"
+    }
+
 }

src/main/resources/templates/configs.html

@@ -37,24 +37,7 @@
             </table>
         </section>
 
-        <section>
-            <h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
-            <div>
-                Verbindung über <code>[[ ${mtbFileSender} ]]</code>. Die Verbindung ist aktuell
-                <strong th:if="${connectionAvailable}" style="color: green">verfügbar.</strong>
-                <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong>
-            </div>
-            <div class="connection-display border">
-                <img th:src="@{/server.png}" alt="ETL-Processor" />
-                <span class="connection" th:classappend="${connectionAvailable ? 'available' : ''}"></span>
-                <img th:if="${mtbFileSender.startsWith('Rest')}" th:src="@{/server.png}" alt="bwHC-Backend" />
-                <img th:if="${mtbFileSender.startsWith('Kafka')}" th:src="@{/kafka.png}" alt="Kafka-Broker" />
-                <span>ETL-Processor</span>
-                <span></span>
-                <span th:if="${mtbFileSender.startsWith('Rest')}">bwHC-Backend</span>
-                <span th:if="${mtbFileSender.startsWith('Kafka')}">Kafka-Broker</span>
-            </div>
-        </section>
+        <section th:insert="~{configs/connectionAvailable.html}" th:hx-get="@{/configs?connectionAvailable}" hx-trigger="every 20s"></section>
 
         <section>
             <h2><span th:if="${not transformations.isEmpty()}">✅</span><span th:if="${transformations.isEmpty()}">⛔</span> Transformationen</h2>
@@ -100,5 +83,6 @@
             </th:block>
         </section>
     </main>
+    <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
 </body>
 </html>

src/main/resources/templates/configs/connectionAvailable.html

@@ -0,0 +1,16 @@
+<h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
+<div>
+    Verbindung über <code>[[ ${mtbFileSender} ]]</code>. Die Verbindung ist aktuell
+    <strong th:if="${connectionAvailable}" style="color: green">verfügbar.</strong>
+    <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong>
+</div>
+<div class="connection-display border">
+    <img th:src="@{/server.png}" alt="ETL-Processor" />
+    <span class="connection" th:classappend="${connectionAvailable ? 'available' : ''}"></span>
+    <img th:if="${mtbFileSender.startsWith('Rest')}" th:src="@{/server.png}" alt="bwHC-Backend" />
+    <img th:if="${mtbFileSender.startsWith('Kafka')}" th:src="@{/kafka.png}" alt="Kafka-Broker" />
+    <span>ETL-Processor</span>
+    <span></span>
+    <span th:if="${mtbFileSender.startsWith('Rest')}">bwHC-Backend</span>
+    <span th:if="${mtbFileSender.startsWith('Kafka')}">Kafka-Broker</span>
+</div>