Ambar Event Bus working

ambarltd · Nov 14, 2024 · 6514150 · 6514150
1 parent 86e0ba6
commit 6514150
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/application/frontend-javascript/src/main.js b/application/frontend-javascript/src/main.js
@@ -472,6 +472,14 @@ app.get('/event-bus-yml', (req, res) => {
     res.status(500).json({ error: 'Error reading YAML file' });
   }
 });
+app.get('/event-bus.yml', (req, res) => {
+    try {
+        const fileContents = readFileSync('/ambar-yml/ambar-config.yaml', 'utf8');
+        res.type('text/plain').send(fileContents);
+    } catch (error) {
+        res.status(500).send('Error reading YAML file');
+    }
+});
 
 app.get('/event-bus-with-ambar', (req, res) => {
   res.render('event-bus-with-ambar', { layout: false });

diff --git a/application/frontend-javascript/src/views/event-bus-with-ambar.handlebars b/application/frontend-javascript/src/views/event-bus-with-ambar.handlebars
@@ -3,6 +3,7 @@
 <head>
     <title>Ambar Event Bus</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
 
     <style>
         :root {
@@ -180,18 +181,17 @@
 <body>
     <nav class="navbar navbar-dark">
         <div class="container">
-            <a class="navbar-brand" href="#">Ambar</a>
+            <a class="navbar-brand" href="#">Ambar - Event Bus</a>
         </div>
     </nav>
 
     <div class="container">
         <div class="description">
-            <h2 class="mb-3">Event Bus with Ambar</h2>
             <p class="lead mb-0">
-                Ambar is the best event bus for event sourcing! Ambar allows you to read messages from one or more
-                database tables, and forward each new row as a message to one or more HTTP endpoints. Messages
-                are sent in parallel (according to a partitioning column), with ordering guarantees (per partition key),
-                and with delivery guarantees (at least once).
+                Ambar reads and stores database rows, and forwards them as messages
+                to HTTP endpoints with delivery and ordering guarantees. </p>
+            <p class="lead mb-0">
+                Ambar is the most robust, performant, and easy to use event bus for event sourcing!
             </p>
         </div>
 
@@ -242,9 +242,31 @@
                 Last updated: <span id="last-update">Just now</span>
             </div>
         </div>
+        <div class="config-container">
+            <div class="config-header" onclick="toggleConfig()">
+                <h3 class="mb-0">View Ambar Configuration File</h3>
+                <svg class="chevron" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </div>
+            <div class="config-content">
+                <pre><code class="language-yaml" id="raw-config"></code></pre>
+            </div>
+        </div>
     </div>
 
-    <script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+
+<script>
+        function toggleConfig() {
+            const content = document.querySelector('.config-content');
+            const chevron = document.querySelector('.chevron');
+            content.classList.toggle('show');
+            chevron.classList.toggle('rotated');
+        }
+
         function formatDateTime(date) {
             return date.toLocaleTimeString('en-US', {
                 hour: '2-digit',
@@ -254,6 +276,7 @@
         }
 
         function refreshData() {
+            // First fetch for JSON data and update tables
             fetch('/event-bus-yml')
                 .then(response => response.json())
                 .then(data => {
@@ -304,7 +327,19 @@
                     document.getElementById('last-update').textContent = formatDateTime(new Date());
                 })
                 .catch(error => {
-                    console.error('Error fetching data:', error);
+                    console.error('Error fetching JSON data:', error);
+                });
+
+            // Separate fetch for YAML content
+            fetch('/event-bus.yml')
+                .then(response => response.text())
+                .then(yamlText => {
+                    const codeElement = document.getElementById('raw-config');
+                    codeElement.textContent = yamlText;
+                    hljs.highlightElement(codeElement);
+                })
+                .catch(error => {
+                    console.error('Error fetching YAML:', error);
                 });
         }
 

diff --git a/local-development/ambar-config.yaml b/local-development/ambar-config.yaml
@@ -126,7 +126,7 @@ data_destinations:
     sources:
       - postgres_source
 
-  - id: CreditCardProduct_Product_projector
+  - id: CreditCardProduct_Product_ProductListItem
     description: CreditCardProduct_Product_ProductListItem
     type: http-push
     endpoint: http://172.30.0.106:8080/api/v1/credit_card_product/product/projection/product_list_item