UI - fix operations new empty logger

Signed-off-by: thfries <thomas.fries0@gmail.com>
eclipse-ditto · Nov 25, 2023 · 62b1acb · 62b1acb
1 parent 2d6d55b
commit 62b1acb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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);
   }