feat: add graphic to show connection state

src/main/resources/static/style.css

@@ -434,4 +434,28 @@ input.inline:focus-visible {
 
 .chart-50pc {
     width: calc(50% - 2.4rem - 4px);
+}
+
+.connection-display {
+    display: grid;
+    grid-template-columns: 10em 16em 10em;
+    place-items: center;
+    width: fit-content;
+    margin: 1em 0;
+}
+
+.connection-display > * {
+    text-align: center;
+    margin: auto 0;
+}
+
+.connection-display .connection {
+    display: block;
+    width: 100%;
+    height: 4px;
+    background: repeating-linear-gradient(to left, white, white 2px, transparent 2px, transparent 8px, white 8px) var(--bg-red);
+}
+
+.connection-display .connection.available {
+    background: var(--bg-green);
 }

src/main/resources/templates/configs.html

@@ -28,17 +28,31 @@
                         <td>MTBFile-Sender</td>
                         <td>[[ ${mtbFileSender} ]]</td>
                     </tr>
+                    <tr>
+                        <td>Endpunkt</td>
+                        <td>[[ ${mtbFileSender} ]]</td>
+                    </tr>
                 </tbody>
             </table>
         </section>
 
         <section>
             <h2><span th:if="${connectionAvailable}">✅</span><span th:if="${not(connectionAvailable)}">⚡</span> Verbindung zum bwHC-Backend</h2>
-            <p>
+            <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>
-            </p>
+                <strong th:if="${not(connectionAvailable)}" style="color: red">nicht verfügbar.</strong>
+            </div>
+            <div class="connection-display">
+                <img th:src="@{/server.png}" alt="ETL-Processor" />
+                <span class="connection" th:styleappend="${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>