feat: localize demo ui content

apps/ui/js/usage.js

@@ -71,6 +71,18 @@ document.addEventListener('DOMContentLoaded', function () {
     return 'REST';
   }
 
+  function localizedUsageOperation(operation) {
+    if (!window.localizeDemoOperation) {
+      return operation;
+    }
+
+    return window.localizeDemoOperation({
+      name: operation.operation_name,
+      operation_display_name: operation.operation_display_name,
+      description: operation.operation_description || null,
+    });
+  }
+
   function chartBucketLabel(timestamp, period, index) {
     var date = new Date(timestamp);
     if (period === '7d') {
@@ -276,6 +288,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }, 0);
 
     operations.forEach(function (operation) {
+      var localizedOperation = localizedUsageOperation(operation);
       var node = rowTemplate.content.cloneNode(true);
       var errorRate = operation.calls_total === 0
         ? 0
@@ -284,7 +297,7 @@ document.addEventListener('DOMContentLoaded', function () {
         ? 0
         : ((operation.calls_total / totalCalls) * 100);
 
-      node.querySelector('.col-name').textContent = operation.operation_display_name;
+      node.querySelector('.col-name').textContent = localizedOperation.operation_display_name || operation.operation_display_name;
       node.querySelector('.col-op-slug').textContent = operation.operation_name;
 
       var proto = node.querySelector('.col-proto');
@@ -371,11 +384,12 @@ document.addEventListener('DOMContentLoaded', function () {
 
     var rows = [tKey('usage.csv.header')];
     state.usage.operations.forEach(function (operation) {
+      var localizedOperation = localizedUsageOperation(operation);
       var errorRate = operation.calls_total === 0
         ? 0
         : ((operation.calls_error / operation.calls_total) * 100);
       rows.push([
-        '"' + operation.operation_display_name + '"',
+        '"' + (localizedOperation.operation_display_name || operation.operation_display_name) + '"',
         '"' + protocolLabel(operation.protocol) + '"',
         operation.calls_total,
         operation.calls_error,