From 62b1acb6429086f9f340d86487412c206ed71559 Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Sat, 25 Nov 2023 16:37:20 +0100
Subject: [PATCH] UI - fix operations new empty logger

Signed-off-by: thfries <thomas.fries0@gmail.com>
---
 ui/modules/operations/servicesLogging.html | 13 +++++++------
 ui/modules/operations/servicesLogging.ts   | 16 ++++++++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/modules/operations/servicesLogging.html b/ui/modules/operations/servicesLogging.html
index bd1f9e104e..055f2fdbaf 100644
--- a/ui/modules/operations/servicesLogging.html
+++ b/ui/modules/operations/servicesLogging.html
@@ -34,18 +34,19 @@ <h5 data-bs-toggle="collapse" data-bs-target="#servicesLogging">Ditto Services L
                     crossorigin="anonymous" referrerpolicy="no-referrer" />
                 <link href="./dist/main.css" rel="stylesheet" />
 
-                <div class="input-group input-group-sm mb-1">
-                    <input class="form-control" type="text" disabled id="inputLogger" spellcheck="false"></input>
+                <div class="input-group input-group-sm mb-1 has-validation">
+                    <input class="form-control me-1" type="text" disabled id="inputLogger" spellcheck="false"></input>
                     <div class="btn-group" role="group">
-                        <input type="radio" class="btn-check" id="debug" autocomplete="off">
+                        <input type="radio" class="btn-check" name="btnLevel" id="debug" autocomplete="off">
                         <label class="btn btn-sm btn-outline-secondary" for="debug">DEBUG</label>
-                        <input type="radio" class="btn-check" id="info" autocomplete="off">
+                        <input type="radio" class="btn-check" name="btnLevel" id="info" autocomplete="off">
                         <label class="btn btn-sm btn-outline-success" for="info">INFO</label>
-                        <input type="radio" class="btn-check" id="warn" autocomplete="off">
+                        <input type="radio" class="btn-check" name="btnLevel" id="warn" autocomplete="off">
                         <label class="btn btn-sm btn-outline-warning" for="warn">WARN</label>
-                        <input type="radio" class="btn-check" id="error" autocomplete="off">
+                        <input type="radio" class="btn-check" name="btnLevel" id="error" autocomplete="off">
                         <label class="btn btn-sm btn-outline-danger" for="error">ERROR</label>
                     </div>
+                    <div class="invalid-feedback"></div>
                 </div>
             </template>
         </div>
diff --git a/ui/modules/operations/servicesLogging.ts b/ui/modules/operations/servicesLogging.ts
index 6eb4f05902..75a9244f4e 100644
--- a/ui/modules/operations/servicesLogging.ts
+++ b/ui/modules/operations/servicesLogging.ts
@@ -97,11 +97,19 @@ function createLoggerView(allLogLevels) {
     let inputLoggerElement = newLoggerRow.shadowRoot.getElementById('inputLogger') as HTMLInputElement;
     inputLoggerElement.disabled = false;
     inputLoggerElement.placeholder = 'Add new logger name and choose log level';
+    inputLoggerElement.addEventListener('change', (event) => {
+      (event.target as HTMLElement).classList.remove('is-invalid');
+    });
     Array.from(newLoggerRow.shadowRoot.querySelectorAll('.btn-check')).forEach((btn) => {
-      btn.addEventListener('click', (event) => onUpdateLoggingClick(service, {
-        logger: inputLoggerElement.value,
-        level: (event.target as Element).id,
-      }));
+      btn.addEventListener('click', (event) => {
+        Utils.assert((inputLoggerElement.value && inputLoggerElement.value.trim() !== '') ,
+            'Logger name must not be empty',
+            inputLoggerElement);
+        onUpdateLoggingClick(service, {
+          logger: inputLoggerElement.value,
+          level: (event.target as Element).id,
+        });
+      });
     });
     dom.divLoggers.append(newLoggerRow);
   }