From 3be8bc53ff325ac1841b86122dc069d68954cb7b Mon Sep 17 00:00:00 2001
From: Paul-Christian Volkmer <volkmer_p@ukw.de>
Date: Wed, 10 Jan 2024 11:16:34 +0100
Subject: [PATCH] feat: add graphic to show connection state

---
 src/main/resources/static/kafka.png       | Bin 0 -> 1669 bytes
 src/main/resources/static/server.png      | Bin 0 -> 1454 bytes
 src/main/resources/static/style.css       |  24 ++++++++++++++++++++++
 src/main/resources/templates/configs.html |  20 +++++++++++++++---
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/main/resources/static/kafka.png
 create mode 100644 src/main/resources/static/server.png

diff --git a/src/main/resources/static/kafka.png b/src/main/resources/static/kafka.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ba95c77a0ece276a9f3171a4b4b1e69407be845
GIT binary patch
literal 1669
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
P00000NkvXXu0mjfp0*9S

literal 0
HcmV?d00001

diff --git a/src/main/resources/static/server.png b/src/main/resources/static/server.png
new file mode 100644
index 0000000000000000000000000000000000000000..213e696e413d0604ded0acd7c9da640d82bb08ee
GIT binary patch
literal 1454
zcmV;f1yTBmP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000MJ
z000MJ0hPnJwg3PC8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11v^PZ
zK~#90?V3w$6Gs@w|Fi4(wax>_0fju9NDvy-szOAK2vQIs6vzXiz_|#~L)AkMRK4cj
zURnvER%($d5pkdqv=B~_T0tYnCCQ-?V2fu$2?{u1C&rug>`V_3P?LCV?}IF2f5+W#
zzHjEg-^|W_vw(wxgM)*EgTp%tS?dn0#{T^u)%kp7KZv5>GwO>mb@AM}KRUDBcNq;}
zHXR+?YCWF7)!yFTs`B!Xp$ByK>=~L)r!rbLwi2Mbds`FW|7-W|jxtFK5LuRW`?`4X
zH!90%G&F3yqh)6+0o?AAF9<>D$jB8HfU4IIrJOu}o)Wiits?-KmaVM>P*v4?=uod1
z3T+Spp4IO0<9`tfg|gm{$Kx0r{GB3?@!3iM0Fb0IR8&-Bem;@aCKmfsQ-DISodBEz
z$>dXnLgf$yVa5GaDv5=Kq-pVNC%_VJw;!S?uDG5`nKyXAh5}HU!NS5kCMW-XBk^n}
z!2SDCs4CU8si~<oEuQTJ2n32zU;lc5oO7hpY54tqOXBGkptpBtpCGutbGb<N_f_GP
zjf_MPiHrewu^=WA2~<^8;=qBuCWd*9E&&c6+;J=rDE{{7(ND|#e#z`U0RR+b5hqWc
z1Y-<!b>^k~ataopyL;z1jN!}X=4RLU_=FXG0;LqAqhSPt#RvpEAjG<Fwt@u^1bo)e
zP{(FxXB4wL!#PAjAYw8(50A%%_3KM9JDYt&WCl6}Ahe^S-EBo@mWah}Arg7<8dOyk
zr%nyv(WAKnJaBB<R4p_$)#S9)y$D8QcX0hiOmFk7yx-IaLddJM7exVmeV?GFraEsQ
zi9`b7aD)L^xs_aoZUM$8{(&r2LU5Uv44H*FJerN8azhBOr#(SMMG%dR`7ea=cpPJ6
zD|eBrVQ3#9dL#%%9wRRPhr0OOG++6WGexY#%ngKI)<l4%f!m=Vxh4YGVc<)w=@hU7
zh6Et16fE90jE#VpEWjEFYOhDgGz++vU`PPYbXTrzgRu<Yc6gH;!(LNh4R8do()rsk
zL5vkeIS0?N4(Jtuzx16<rZ6!v37^jkuh*Mb+hj6{rTr#jO!Fb@79bcb#lwe_dYi8b
z0Z>xg4B&+T(daa8-kgTd=fUR9TToP_dD8s~&Vl;+2I1MWIr`wi6V1w%ZUOf0Y1i8{
zC$ZQq%*`!eYHAjxr4lMDL)gB(Iq&xIcpRgnS2^eGUOLV8XxSG0UDDOH<DROjb({kh
z)+&)orIE=fXlwfbH*QREm&^4e-?p4Xpftl|nQa*!j>NTW3(f$yTP%M1G|d$yzjV}t
zsxkxu9^Tseq42Ua_U!!mE9<R@Rj>e@11C;=Zs`~8wQCcIMxz-*i2LPYXxRyt?T*Hl
zbNB8{65u~t<-Z^Sy1H7c7~?`BVeS$2a%6cClu~m2`h8hd=}(s~MZU5sR^F++Z{NrJ
zB*{Mz3<gWRUazH7fKrO->1n7cRa#m`ef|B~|M?gpuMFtyY<W+Te7_t&e!Q%tq{OPe
zykdNO98**GI3dEcm4gTJ*b29|HwSz^@9^QnN6O#C;AduLaQX5jCW<bFbN;K<@p5GV
z2?i?$ckSA>v9`9>@>-@W%Q$`dX9f_S$<TqJq43vM$J7*{r)TH)<>jHab?btj+qX6U
zH#CI{7tT{f$+(J&#4|%f;bWEuM2<zUr>8CD@wm-9`q6+fP83BER8<{pX$c>;dhRcg
zV+!z5#+czBmh*uSE&%+AB-I@0?+?HE;-G_rgM)*EgTuSVf0qNvT}FW|g8%>k07*qo
IM6N<$f)>27qyPW_

literal 0
HcmV?d00001

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index e215eb0..c438c28 100644
--- a/src/main/resources/static/style.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/configs.html b/src/main/resources/templates/configs.html
index 5de2a79..a5b56d7 100644
--- a/src/main/resources/templates/configs.html
+++ b/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>