Merge pull request #109 from Particular/improve_tryit_doco

Improve tryit doco

docs/azure.md

@@ -0,0 +1,32 @@
+# Running against your own Azure Service Bus system
+
+If you encounter any issues running the steps below, try the [troubleshooting](#troubleshooting) section or post a question on [our forum](https://discuss.particular.net/tag/masstransit).
+
+1. Open a terminal and run the following command to shut down the showcase containers if they are running:
+
+   ```cmd
+   docker compose -p particular-platform-showcase -f docker-compose-base.yml -f compose-azure.yml --env-file asb.env down
+   ```
+
+   - All of the containers should be shown as `Stopped` and there should no longer be any containers running under `particular-platform-showcase` in docker
+
+1. Open the `src/asb.env` file, located in the folder that the showcase is cloned to, in an editor and update the `CONNECTION_STRING` to point to your own Azure Service Bus namespace.
+1. Update the list of queues you want to monitor by editing the `src/queues.txt` file, also located in the folder that the showcase is cloned to. Remember that Azure Service Bus queue names are all lowercase.
+1. Run the following command to start the required containers with the updated environment settings:
+
+   ```cmd
+   docker compose -p particular-platform -f docker-compose-base.yml --env-file asb.env --profile infrastructure up
+   ```
+
+   - The containers should all show a status of `Healthy`
+
+1. Verify that the setup was correct by navigating to http://localhost:9090/#/configuration/mass-transit-connector.
+   - All of the configured queues for your system should show here
+   - For each row in the list of queues: if the queues exist, the status should be green `OK`. If the queues don't exist, i.e. there have never been any errors on that consumer, or if there is an issue connecting to the broker then the status will be red `Not ingesting`.
+     - If the status is `Not ingesting`, the reason for this can be found in the log entries shown below the queue list.
+   - Any messages that existed in the error queues should now have been ingested, and will be shown in [Failed Messages](http://localhost:9090/#/failed-messages/all-failed-messages)
+
+## Troubleshooting
+
+-
+-

docs/rabbit.md

@@ -0,0 +1,36 @@
+# Running with your own RabbitMQ system
+
+If you encounter any issues running the steps below, try the [troubleshooting](#troubleshooting) section or ask on [our forum](https://discuss.particular.net/tag/masstransit).
+
+1. Open a terminal and run the following command to shut down the showcase containers:
+
+   ```cmd
+   docker compose -p particular-platform-showcase -f docker-compose-base.yml -f compose-rabbitmq.yml --env-file rabbit.env down
+   ```
+
+   - All of the containers should be shown as `Stopped` and there should no longer be any containers running under `particular-platform-showcase` in docker
+
+1. Open `src/rabbit.env` file, located in the folder that the showcase is cloned to, in an editor and update the RabbitMQ configuration to point to your own RabbitMQ instance.
+   - `CONNECTION_STRING` A special connection string to connect to RabbitMQ, see https://docs.particular.net/servicecontrol/transports#rabbitmq for syntax format.
+   - `RABBITMQ_MANAGEMENT_API_URL` The management API URL.
+   - `RABBITMQ_MANAGEMENT_API_USERNAME` The management API username.
+   - `RABBITMQ_MANAGEMENT_API_PASSWORD` The management API password.
+1. Update the list of queues you want to monitor by editing the `src/queues.txt` file, also located in the folder that the showcase is cloned to. RabbitMQ is case-sensitive so make sure the names are exact. e.g. `myqueue_error`.
+1. Run the following command to start the required containers with the updated environment settings:
+
+   ```cmd
+   docker compose -p particular-platform -f docker-compose-base.yml -f compose-rabbitmq-user.yml --env-file rabbit.env --profile infrastructure up
+   ```
+
+   - The containers should all show a status of `Healthy`
+
+1. Verify that the setup was correct by navigating to http://localhost:9090/#/configuration/mass-transit-connector.
+   - All of the configured queues for your system should show here
+   - For each row in the list of queues: if the queues exist, the status should be green `OK`. If the queues don't exist, i.e. there have never been any errors on that consumer, or if there is an issue connecting to the broker then the status will be red `Not ingesting`.
+     - If the status is `Not ingesting`, the reason for this can be found in the log entries shown below the queue list.
+   - Any messages that existed in the error queues should now have been ingested, and will be shown in [Failed Messages](http://localhost:9090/#/failed-messages/all-failed-messages)
+
+## Troubleshooting
+
+-
+-

src/frontend/package.json

@@ -13,12 +13,10 @@
   },
   "dependencies": {
     "@microsoft/signalr": "^8.0.7",
-    "vue": "^3.5.13",
-    "vue-markdown-render": "^2.2.1"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
-    "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-typescript": "^14.1.3",

src/frontend/src/components/SalesEndpoint.vue

@@ -112,8 +112,7 @@ function toggleFailOnRetries() {
       <a
         target="_blank"
         :href="`http://localhost:9090/#/failed-messages/message/${message.messageViewId}`"
-        >View failure details</a
-      >
+       >View failure details</a>
     </template>
     <template v-else-if="isOrderPlaced(message.message)">
       <span>Order</span>

src/frontend/src/components/ShippingEndpoint.vue

@@ -149,7 +149,7 @@ function toggleFailOnRetries() {
         target="_blank"
         :href="`http://localhost:9090/#/failed-messages/message/${message.messageViewId}`"
       >
-        View failure details
+      View failure details
       </a>
     </template>
     <template v-else>

src/frontend/src/components/guideline/TryItOut.vue

@@ -1,58 +1,26 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import VueMarkdown from "vue-markdown-render";
-
-const rabbitMarkdown = ref("");
-const azureMarkdown = ref("");
-const selection = ref("rabbit");
-
-onMounted(async () => {
-  const rabbitFile = await fetch("./rabbit.md");
-  const azureFile = await fetch("./azure.md");
-  rabbitMarkdown.value = await rabbitFile.text();
-  azureMarkdown.value = await azureFile.text();
-});
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="try-it-out">
     <h3 class="bolder">Want to try it in your system?</h3>
-    <div>
-      Select your transport:
-      <select v-model="selection" id="transport">
-        <option value="rabbit">RabbitMq</option>
-        <option value="azure">Azure Service Bus</option>
-      </select>
-    </div>
-    <div class="markdown-container">
-      <VueMarkdown
-        :source="selection === 'rabbit' ? rabbitMarkdown : azureMarkdown"
-      />
-    </div>
-    <!-- <div style="padding-top: 2rem">
     <ul>
-      <li>Open the .env file corresponding to your transport</li>
       <li>
-        Copy the file content and modify the right values with info from
-        <a hre="#" target="_blank"> here.</a>
-      </li>
-      <li>Configure the error queues</li>
-      <li>Run `docker compose down` and `docker compose up</li>
-    </ul>
-    <br />
-    <div>
-      <span class="bolder">Ran into issues?</span>
-      <div>
-        Check out this
         <a
-          href="https://github.com/Particular/MassTransitShowcaseDemo/blob/main/troubleshooting-guide.md"
           target="_blank"
+          href="https://github.com/Particular/MassTransitShowcaseDemo/blob/main/docs/rabbit.md"
         >
-          troubleshooting guide</a
+          View instructions for RabbitMQ
+        </a>
+      </li>
+      <li>
+        <a
+          target="_blank"
+          href="https://github.com/Particular/MassTransitShowcaseDemo/blob/main/docs/azure.md"
         >
-      </div>
-    </div>
-  </div> -->
+          View instructions for Azure Service Bus
+        </a>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -70,25 +38,4 @@ onMounted(async () => {
   flex: 1;
   min-height: 0;
 }
-
-.markdown-container {
-  margin: 0.5em 0;
-  padding: 0.5em;
-  width: 100%;
-  border-radius: 0.5em;
-  box-shadow: 0 2px 10px #2c3e50;
-  overflow: auto;
-  flex: 1;
-}
-
-:deep(p) {
-  margin: 0.5em 0;
-}
-
-:deep(pre) {
-  margin: 0.5em;
-  padding-left: 1em;
-  background-color: lightgray;
-  overflow: auto;
-}
 </style>