ui: harden logs and usage rendering

apps/ui/js/logs.js

@@ -54,6 +54,13 @@ document.addEventListener('DOMContentLoaded', function () {
     return date.toISOString().slice(11, 23);
   }
 
+  function element(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined && text !== null) node.textContent = text;
+    return node;
+  }
+
   function statusClass(statusCode) {
     if (!statusCode) {
       return '';
@@ -106,11 +113,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
   function renderEmpty(title, message) {
     logList.innerHTML = '';
-    var empty = document.createElement('div');
+    var empty = element('div', 'empty-state');
-    empty.className = 'empty-state';
+    empty.appendChild(element('div', 'empty-state-title', title));
-    empty.innerHTML =
+    empty.appendChild(element('div', 'empty-state-text', message));
-      '<div class="empty-state-title">' + title + '</div>' +
-      '<div class="empty-state-text">' + message + '</div>';
     logList.appendChild(empty);
   }
 

apps/ui/js/usage.js

@@ -33,6 +33,13 @@ document.addEventListener('DOMContentLoaded', function () {
     return workspace ? workspace.id : null;
   }
 
+  function element(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined && text !== null) node.textContent = text;
+    return node;
+  }
+
   function formatCount(value) {
     return Number(value || 0).toLocaleString(currentLocale());
   }
@@ -196,19 +203,30 @@ document.addEventListener('DOMContentLoaded', function () {
     return normalized;
   }
 
+  function buildEmptyState(title, message, compact) {
+    var empty = element('div', 'empty-state');
+    if (compact) {
+      empty.style.padding = '0';
+    }
+    empty.appendChild(element('div', 'empty-state-title', title));
+    empty.appendChild(element('div', 'empty-state-text', message));
+    return empty;
+  }
+
   function renderEmpty(title, message) {
-    chartWrap.innerHTML =
+    chartWrap.innerHTML = '';
-      '<div class="empty-state" style="width:100%;">' +
+    var chartEmpty = buildEmptyState(title, message, false);
-        '<div class="empty-state-title">' + title + '</div>' +
+    chartEmpty.style.width = '100%';
-        '<div class="empty-state-text">' + message + '</div>' +
+    chartWrap.appendChild(chartEmpty);
-      '</div>';
+
-    tableBody.innerHTML =
+    tableBody.innerHTML = '';
-      '<tr><td colspan="7" style="padding:24px;">' +
+    var row = document.createElement('tr');
-        '<div class="empty-state" style="padding:0;">' +
+    var cell = document.createElement('td');
-          '<div class="empty-state-title">' + title + '</div>' +
+    cell.colSpan = 7;
-          '<div class="empty-state-text">' + message + '</div>' +
+    cell.style.padding = '24px';
-        '</div>' +
+    cell.appendChild(buildEmptyState(title, message, true));
-      '</td></tr>';
+    row.appendChild(cell);
+    tableBody.appendChild(row);
   }
 
   function renderStats() {
@@ -249,11 +267,13 @@ document.addEventListener('DOMContentLoaded', function () {
     chartWrap.innerHTML = '';
 
     if (!timeline.length) {
-      chartWrap.innerHTML =
+      var chartEmpty = buildEmptyState(
-        '<div class="empty-state" style="width:100%;">' +
+        tKey('usage.chart.empty.title'),
-          '<div class="empty-state-title">' + tKey('usage.chart.empty.title') + '</div>' +
+        tKey('usage.chart.empty.sub'),
-          '<div class="empty-state-text">' + tKey('usage.chart.empty.sub') + '</div>' +
+        false
-        '</div>';
+      );
+      chartEmpty.style.width = '100%';
+      chartWrap.appendChild(chartEmpty);
       return;
     }
 
@@ -285,13 +305,19 @@ document.addEventListener('DOMContentLoaded', function () {
     tableBody.innerHTML = '';
 
     if (!operations.length) {
-      tableBody.innerHTML =
+      var row = document.createElement('tr');
-        '<tr><td colspan="7" style="padding:24px;">' +
+      var cell = document.createElement('td');
-          '<div class="empty-state" style="padding:0;">' +
+      cell.colSpan = 7;
-            '<div class="empty-state-title">' + tKey('usage.table.empty.title') + '</div>' +
+      cell.style.padding = '24px';
-            '<div class="empty-state-text">' + tKey('usage.table.empty.sub') + '</div>' +
+      cell.appendChild(
-          '</div>' +
+        buildEmptyState(
-        '</td></tr>';
+          tKey('usage.table.empty.title'),
+          tKey('usage.table.empty.sub'),
+          true
+        )
+      );
+      row.appendChild(cell);
+      tableBody.appendChild(row);
       return;
     }