updated the UI, fixed analytics, added docker file

irinascurtu · irinascurtu · commit be753f50bed8 · 2025-01-22T17:48:41.000+02:00
diff --git a/src/compose-rabbitmq.yml b/src/compose-rabbitmq.yml
@@ -19,6 +19,8 @@ services:
       - rabbitmq-logs:/var/log/rabbitmq
     ports:
       - 33721:5672
+      - 15672:15672
+      
     configs:
       - source: plugins
         target: /etc/rabbitmq/enabled_plugins
diff --git a/src/compose-sqs.yml b/src/compose-sqs.yml
diff --git a/src/docker-compose-base.yml b/src/docker-compose-base.yml
@@ -42,6 +42,16 @@ services:
         SERVICECONTROL_URL: http://localhost:33333/api/
         ENABLE_REVERSE_PROXY: false
         SHOW_PENDING_RETRY: false
-
+  vue-app:
+    build:
+      context: ./frontend # Point to the frontend folder
+      dockerfile: Dockerfile # Use the Dockerfile in the frontend folder
+    container_name: vue-app-container
+    ports:
+      - "61335:8080" # Map port 8080 in the container to 61335 on the host
+    volumes:
+      - ./frontend:/app # Mount the frontend folder into the container
+      - /app/node_modules # Prevent overwriting node_modules
+    command: "npm install && npm run dev" # Development mode command
 volumes:
   sc-data:
diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:lts-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# build app for production with minification
+RUN npm run build
+
+EXPOSE 8080
+CMD [ "http-server", "dist" ]
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -1,21 +1,25 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>MassTransit Message Retry Showcase</title>
     <!-- Google Tag Manager -->
     <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];
-        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        w[l].push({"gtm.start": new Date().getTime(), event: "gtm.js"});
         var f = d.getElementsByTagName(s)[0],
           j = d.createElement(s),
-          dl = l != "dataLayer" ? "&l=" + l : "";
+          dl = l != "dataLayer"
+            ? "&l=" + l
+            : "";
         j.async = true;
         j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
-        f.parentNode.insertBefore(j, f);
+        f
+          .parentNode
+          .insertBefore(j, f);
       })(window, document, "script", "dataLayer", "GTM-N895C5BN ");
     </script>
     <!-- End Google Tag Manager -->
@@ -34,4 +38,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-</html>
+</html>
diff --git a/src/frontend/public/azure.md b/src/frontend/public/azure.md
@@ -1 +1,13 @@
-# This is Azure
+# Azure Service Bus
+
+1. Open this azure.env file and provide your namespace
+2. Paste the code below to make sure you have your container ready.
+   `//your docker stuff here`
+3. provide the list of queues you want to monitor by editing the `queues.txt` file. e.g. `myqueue_error`
+4. Open a CLI of preference and run these commands:
+
+```cmd
+// Your code goes here
+ docker compose down
+ docker compose up
+```
diff --git a/src/frontend/public/rabbit.md b/src/frontend/public/rabbit.md
@@ -1,28 +1,17 @@
-# this is rabbit
-
-something something
-
-## sub heading 1
-
-1. list item
-1. another list item
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae condimentum metus, a pretium lacus. Nam pulvinar tempus fermentum. Nam dapibus elit nec finibus scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus egestas, tellus luctus lobortis sollicitudin, tellus odio sodales ex, et facilisis tortor magna ut ipsum. Vivamus risus quam, scelerisque aliquam quam quis, volutpat fringilla velit. Praesent a metus eget nibh suscipit ultricies. Vivamus non est ligula. Aliquam eget condimentum mauris. Vestibulum vitae venenatis massa, quis dictum mauris. Pellentesque blandit lacus sapien, sed sodales massa interdum non. Aenean porta, tortor a laoreet vehicula, leo orci gravida magna, in tincidunt lectus mauris malesuada leo. Cras tempor est quis neque tristique, eu tincidunt sapien faucibus. Phasellus eget maximus diam. Nam suscipit purus ac laoreet ullamcorper. Ut dapibus sit amet dui sit amet fermentum.
-
-Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed mi eros, imperdiet ut massa eu, fermentum sollicitudin sem. Nulla a aliquam dolor, eu eleifend elit. Nulla viverra ullamcorper lacinia. Morbi efficitur, ex sit amet volutpat gravida, tortor sapien tempus magna, vel accumsan justo libero sed mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean ac dapibus odio.
-
-Sed at pharetra risus. Vivamus sed nunc rhoncus, tincidunt orci ut, sagittis tellus. Suspendisse auctor congue dui eget dictum. Fusce vitae ipsum in sem sollicitudin sodales et at massa. Maecenas quis gravida lacus. Nulla eu suscipit dolor. Donec molestie eget dolor at rutrum. Vivamus urna tortor, venenatis eu urna vel, sagittis fringilla tellus. Phasellus a libero in turpis vulputate pretium.
-
-Phasellus arcu est, bibendum quis facilisis quis, feugiat vitae dolor. Quisque dapibus, nibh at pharetra consectetur, dolor eros mattis eros, ac tincidunt urna neque sit amet tellus. Phasellus tortor mi, varius cursus est posuere, convallis iaculis ante. Cras rhoncus elementum ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sit amet dignissim nibh. In hac habitasse platea dictumst. Integer imperdiet erat nec mi ullamcorper, in posuere tortor tincidunt. Ut non sollicitudin sem. Suspendisse vel fermentum mi, eu condimentum felis.
-
-Aliquam pellentesque nulla ac neque gravida tristique. Suspendisse risus justo, suscipit ac lectus in, consectetur convallis diam. Aliquam ornare lectus odio, id auctor mi suscipit eu. Aliquam erat volutpat. Duis sed leo vitae lorem sagittis molestie. Nullam sed scelerisque urna, ac vestibulum lorem. Cras sodales sed mauris ac auctor.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae condimentum metus, a pretium lacus. Nam pulvinar tempus fermentum. Nam dapibus elit nec finibus scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus egestas, tellus luctus lobortis sollicitudin, tellus odio sodales ex, et facilisis tortor magna ut ipsum. Vivamus risus quam, scelerisque aliquam quam quis, volutpat fringilla velit. Praesent a metus eget nibh suscipit ultricies. Vivamus non est ligula. Aliquam eget condimentum mauris. Vestibulum vitae venenatis massa, quis dictum mauris. Pellentesque blandit lacus sapien, sed sodales massa interdum non. Aenean porta, tortor a laoreet vehicula, leo orci gravida magna, in tincidunt lectus mauris malesuada leo. Cras tempor est quis neque tristique, eu tincidunt sapien faucibus. Phasellus eget maximus diam. Nam suscipit purus ac laoreet ullamcorper. Ut dapibus sit amet dui sit amet fermentum.
-
-Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed mi eros, imperdiet ut massa eu, fermentum sollicitudin sem. Nulla a aliquam dolor, eu eleifend elit. Nulla viverra ullamcorper lacinia. Morbi efficitur, ex sit amet volutpat gravida, tortor sapien tempus magna, vel accumsan justo libero sed mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean ac dapibus odio.
-
-Sed at pharetra risus. Vivamus sed nunc rhoncus, tincidunt orci ut, sagittis tellus. Suspendisse auctor congue dui eget dictum. Fusce vitae ipsum in sem sollicitudin sodales et at massa. Maecenas quis gravida lacus. Nulla eu suscipit dolor. Donec molestie eget dolor at rutrum. Vivamus urna tortor, venenatis eu urna vel, sagittis fringilla tellus. Phasellus a libero in turpis vulputate pretium.
-
-Phasellus arcu est, bibendum quis facilisis quis, feugiat vitae dolor. Quisque dapibus, nibh at pharetra consectetur, dolor eros mattis eros, ac tincidunt urna neque sit amet tellus. Phasellus tortor mi, varius cursus est posuere, convallis iaculis ante. Cras rhoncus elementum ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sit amet dignissim nibh. In hac habitasse platea dictumst. Integer imperdiet erat nec mi ullamcorper, in posuere tortor tincidunt. Ut non sollicitudin sem. Suspendisse vel fermentum mi, eu condimentum felis.
-
-Aliquam pellentesque nulla ac neque gravida tristique. Suspendisse risus justo, suscipit ac lectus in, consectetur convallis diam. Aliquam ornare lectus odio, id auctor mi suscipit eu. Aliquam erat volutpat. Duis sed leo vitae lorem sagittis molestie. Nullam sed scelerisque urna, ac vestibulum lorem. Cras sodales sed mauris ac auctor.
+# RabbitMQ
+
+##
+
+1. Open this rabbit.env file and provide the right ports for your RabbitMQ instance
+   - If you have your own instance running in docker:
+   - If you have your own standalone RabbitMq instance
+2. Paste the code below to make sure you have your container ready.
+   `//your docker stuff here`
+3. provide the list of queues you want to monitor by editing the `queues.txt` file. RabbitMq is case-sensitive so make sure the names are exact. e.g. `myqueue_error`
+4. Open a CLI of preference and run these commands:
+
+```cmd
+// Your code goes here
+ docker compose down
+ docker compose up
+```
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
@@ -11,7 +11,7 @@ const tab = ref("showcase");
 </script>
 
 <template>
-  <h1>Mass Transit message retry showcase</h1>
+  <h1>MassTransit recoverability Showcase</h1>
   <div class="tabs">
     <h5
       class="tab"
@@ -20,7 +20,12 @@ const tab = ref("showcase");
     >
       Showcase
     </h5>
-    <h5 class="tab" :class="{ active: tab === 'tryit' }" @click="tab = 'tryit'">
+    <h5
+      class="tab"
+      id="try-it"
+      :class="{ active: tab === 'tryit' }"
+      @click="tab = 'tryit'"
+    >
       Try retries with <i>your</i> system
     </h5>
   </div>
@@ -38,7 +43,7 @@ const tab = ref("showcase");
     <div v-show="tab === 'tryit'"><TryItOut /></div>
     <floating-button
       text="Any issues? Ping us"
-      location="https://discuss.particular.net"
+      location="https://discuss.particular.net/tag/masstransit"
     />
   </div>
 </template>
diff --git a/src/frontend/src/components/FloatingButton.vue b/src/frontend/src/components/FloatingButton.vue
@@ -4,30 +4,19 @@ defineProps<{
   text: string;
   location?: string;
 }>();
-
-async function pingUs() {
-  try {
-    GA4.pingUsButton();
-  } catch (e) {
-    console.error(e);
-  }
-}
 </script>
 
 <template>
-  <a v-if="location" target="_blank" :href="location">
-    <button class="floating-button" @click="$emit('click')">
-      <span>{{ text }}</span>
-    </button>
+  <a class="floating-button" v-if="location" target="_blank" :href="location">
+    <span @click="$emit('click')">
+      {{ text }}
+    </span>
   </a>
-  <button v-else class="floating-button" @click="$emit('click')">
-    <span>{{ text }}</span>
-  </button>
 </template>
 
 <style scoped>
 /* Floating Button Styling */
-.floating-button {
+a.floating-button {
   position: fixed;
   bottom: 20px;
   right: 20px;
@@ -47,14 +36,14 @@ async function pingUs() {
 }
 
 /* Hover Effect */
-.floating-button:hover {
+a.floating-button:hover {
   background-color: #00729c; /* Slightly darker blue */
   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
   transform: scale(1.05);
 }
 
 /* Active (Pressed) Effect */
-.floating-button:active {
+a.floating-button:active {
   background-color: #01445c; /* Even darker blue */
   transform: scale(0.95);
 }
diff --git a/src/frontend/src/components/SalesEndpoint.vue b/src/frontend/src/components/SalesEndpoint.vue
@@ -79,21 +79,7 @@ function toggleFailOnRetries() {
   <div class="endpoint-header">
     <div>
       <EndpointHeader label="Sales" :state="state" />
-      <!-- <div class="counter-info">
-        <span>
-          {{ processedCount }} messages processed /
-          <span class="red"> {{ erroredCount }} errored</span>
-        </span>
-      </div> -->
     </div>
-    <!-- <div>
-      <OnOffSwitch
-        id="failOnRetriesSales"
-        label="Fail Retries"
-        @toggle="toggleFailOnRetries"
-        :value="shouldFailRetries"
-      />
-    </div> -->
   </div>
   <MessageContainer :messages="messages" v-slot="{ message }">
     <span>{{ message.timestamp.toLocaleTimeString() }}</span>
diff --git a/src/frontend/src/components/guideline/TryItOut.vue b/src/frontend/src/components/guideline/TryItOut.vue
@@ -19,7 +19,7 @@ onMounted(async () => {
     <h3 class="bolder">Want to try it in your system?</h3>
     <div>
       Select your transport:
-      <select v-model="selection">
+      <select v-model="selection" id="transport">
         <option value="rabbit">RabbitMq</option>
         <option value="azure">Azure Service Bus</option>
       </select>
diff --git a/src/frontend/src/utils/analytics.js b/src/frontend/src/utils/analytics.js
@@ -1,66 +1,51 @@
-// Environment variables for dynamic configuration
-const GA4_MEASUREMENT_ID =
-  import.meta.env.VITE_GA4_MEASUREMENT_ID || "GTM-N895C5BN";
-const SOLUTION_VERSION = import.meta.env.VITE_SOLUTION_VERSION || "VS2019";
+const GA4 = (() => {
+  // Function to send events via the dataLayer for GTM
+  const sendGA4Event = (eventName, parameters = {}) => {
+    if (!window.dataLayer) {
+      console.error("GTM is not initialized. Unable to send GA4 event.");
+      return;
+    }
 
-// Google Analytics 4 Initialization
-function initializeGA4() {
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    dataLayer.push(arguments);
-  }
+    window.dataLayer.push({
+      event: eventName,
+      ...parameters,
+    });
 
-  gtag("js", new Date());
-  gtag("config", GA4_MEASUREMENT_ID);
-}
-
-// GA4 Event Wrapper
-const GA4 = (() => {
-  const sendGA4Event = (eventName, parameters) => {
-    gtag("event", eventName, parameters);
+    console.log(`GA4 event sent: ${eventName}`, parameters);
   };
 
+  // Return an object with functions for specific events
   return {
     showcaseRunning: () => {
-      sendGA4Event("mt_showcase_running", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_running");
     },
     runScenario: () => {
       console.log("mt_showcase_run_scenario");
-      sendGA4Event("mt_showcase_run_scenario", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_run_scenario");
     },
     pingUsButton: () => {
       console.log("mt_showcase_pingus");
-      sendGA4Event("mt_showcase_pingus", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_pingus");
     },
     createOrderEvent: () => {
       console.log("mt_showcase_createOrder");
-      sendGA4Event("mt_showcase_createOrder", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_createOrder");
     },
     showcaseRetryAttempted: () => {
       console.log("mt_showcase_retry_attempted");
-      sendGA4Event("mt_showcase_retry_attempted", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_retry_attempted");
     },
     showcaseDisplayedLicenseButton: () => {
-      sendGA4Event("mt_showcase_display_get_free_license", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_display_get_free_license");
     },
     showcaseClickedLicenseButton: () => {
-      sendGA4Event("mt_showcase_license_btn_click", {
-        solution_version: SOLUTION_VERSION,
-      });
+      sendGA4Event("mt_showcase_license_btn_click");
     },
     disableAllAdvertisingFeatures: () => {
+      if (!window.gtag) {
+        console.error("GA4 has not been initialized.");
+        return;
+      }
       gtag("set", "allow_google_signals", false);
     },
   };
