feat(simulator): add bus logs

simulator/inertia/app/app.ts

@@ -1,7 +1,6 @@
 /// <reference path="../../adonisrc.ts" />
 /// <reference path="../../config/inertia.ts" />
 
-import '@unocss/reset/tailwind-compat.css'
 import 'virtual:uno.css'
 import 'primeicons/primeicons.css'
 

simulator/inertia/pages/home.vue

@@ -1,18 +1,32 @@
 <script setup lang="ts">
 import { Head, router, usePoll } from '@inertiajs/vue3'
+import Badge from 'primevue/badge'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
+import ScrollPanel from 'primevue/scrollpanel'
+import ToggleSwitch from 'primevue/toggleswitch'
 
 defineProps<{
   correctValue: number
-  caches: Array<{ name: string; result: any }>
+  caches: Array<{ name: string; result: any; busId: string }>
   state: { bus: boolean; l2: boolean }
+  sentMessages: Array<any>
+  receivedMessages: Array<any>
 }>()
 
 usePoll(1500, { async: true })
 
 function setCacheValue(name: string, value: any) {
-  router.post('/set', { name, value })
+  router.post('/set', { name, value }, { preserveScroll: true })
+}
+
+function deleteCacheValue(name: string) {
+  router.post('/delete', { name }, { preserveScroll: true })
+}
+
+const severities = ['secondary', 'success', 'info', 'warn', 'danger', 'contrast']
+function getCacheColor(name: string) {
+  return severities[(name.at(-1) as any) % severities.length]
 }
 </script>
 
@@ -25,27 +39,44 @@ function setCacheValue(name: string, value: any) {
       <template #subtitle>Cache Coherence Simulator</template>
 
       <template #content>
-        <p class="mt-4 text-sm">
-          Correct Value :
-          {{ correctValue }}
-        </p>
-
-        <div class="flex gap-4 mt-4">
-          <Button
-            size="small"
-            @click="router.post('/state', { bus: !state.bus })"
-            :severity="state.bus ? 'danger' : 'success'"
-          >
-            {{ state.bus ? 'Disable' : 'Enable' }} Bus
-          </Button>
-
-          <Button
-            size="small"
-            @click="router.post('/state', { l2: !state.l2 })"
-            :severity="state.l2 ? 'danger' : 'success'"
-          >
-            {{ state.l2 ? 'Disable' : 'Enable' }} L2
-          </Button>
+        <div class="grid grid-cols-[200px_200px] items-center gap-4 mt-4">
+          <span>Correct Value :</span>
+          <span class="font-semibold text-2xl">
+            {{ correctValue }}
+          </span>
+          <div class="flex items-center gap-2">
+            <span>
+              <i
+                class="pi"
+                :class="{
+                  'text-green-500 pi-check-circle': state.bus,
+                  'text-red-500 pi-times-circle': !state.bus,
+                }"
+              />
+            </span>
+            <span>Bus is {{ state.bus ? 'enabled' : 'disabled' }}</span>
+          </div>
+          <ToggleSwitch
+            v-model="state.bus"
+            @change="router.post('/state', { bus: state.bus }, { preserveScroll: true })"
+          />
+
+          <div class="flex items-center gap-2">
+            <span>
+              <i
+                class="pi"
+                :class="{
+                  'text-green-500 pi-check-circle': state.l2,
+                  'text-red-500 pi-times-circle': !state.l2,
+                }"
+              />
+            </span>
+            <span>L2 is {{ state.l2 ? 'enabled' : 'disabled' }}</span>
+          </div>
+          <ToggleSwitch
+            v-model="state.l2"
+            @change="router.post('/state', { l2: state.l2 }, { preserveScroll: true })"
+          />
         </div>
       </template>
     </Card>
@@ -55,24 +86,84 @@ function setCacheValue(name: string, value: any) {
         <template #title>
           <div class="flex gap-4 items-center justify-between font-light">
             <span>Node {{ cache.name }}</span>
-            <Button
-              size="small"
-              variant="outlined"
-              severity="info"
-              icon="pi pi-plus"
-              @click="setCacheValue(cache.name, cache.result + 1)"
-            />
+            <div class="flex gap-2">
+              <Button
+                size="small"
+                variant="outlined"
+                severity="info"
+                icon="pi pi-plus"
+                @click="setCacheValue(cache.name, cache.result + 1)"
+              />
+              <Button
+                size="small"
+                variant="outlined"
+                severity="danger"
+                icon="pi pi-trash"
+                @click="deleteCacheValue(cache.name)"
+              />
+            </div>
           </div>
         </template>
         <template #content>
           <div>
             Current Value :
             <span class="text-lg font-semibold">{{ cache.result }}</span>
           </div>
-
           <div class="flex gap-2 mt-2"></div>
         </template>
       </Card>
     </div>
+
+    <Card class="mt-4">
+      <template #title>Bus logs</template>
+
+      <template #content>
+        <div class="grid grid-cols-2 gap-2">
+          <div>
+            <p>Sent messages</p>
+            <ScrollPanel style="width: 100%; height: 300px">
+              <div class="p-2 grid gap-2">
+                <div v-for="(log, idx) in sentMessages" :key="idx" class="flex items-center gap-2">
+                  <Badge size="small" :severity="getCacheColor(log.cacheName)">
+                    {{ log.cacheName }}
+                  </Badge>
+
+                  <Badge size="small" :severity="log.message.type === 'set' ? 'info' : 'danger'">
+                    {{ log.message.type }}
+                  </Badge>
+
+                  <span>{{ new Date(log.timestamp).toLocaleTimeString() }}</span>
+                  <span class="text-xs text-[var(--p-slate-300)]">{{ log.message }}</span>
+                </div>
+              </div>
+            </ScrollPanel>
+          </div>
+
+          <div>
+            <p>Received messages</p>
+            <ScrollPanel style="width: 100%; height: 300px">
+              <div class="p-2 grid gap-2">
+                <div
+                  v-for="(log, idx) in receivedMessages"
+                  :key="idx"
+                  class="flex items-center gap-2"
+                >
+                  <Badge size="small" :severity="getCacheColor(log.cacheName)">
+                    {{ log.cacheName }}
+                  </Badge>
+
+                  <Badge size="small" :severity="log.message.type === 'set' ? 'info' : 'danger'">
+                    {{ log.message.type }}
+                  </Badge>
+
+                  <span>{{ new Date(log.timestamp).toLocaleTimeString() }}</span>
+                  <span class="text-xs text-[var(--p-slate-300)]">{{ log.message }}</span>
+                </div>
+              </div>
+            </ScrollPanel>
+          </div>
+        </div>
+      </template>
+    </Card>
   </div>
 </template>

simulator/start/chaos/chaos_bus.ts

@@ -2,6 +2,13 @@ import type { Serializable, SubscribeHandler, Transport } from '@boringnode/bus/
 
 import { ChaosInjector } from './chaos_injector.js'
 
+interface BusMessage {
+  channel: string
+  message: Serializable
+  busId: string
+  timestamp: number
+}
+
 export class ChaosBus implements Transport {
   /**
    * The inner transport driver that is wrapped
@@ -14,6 +21,9 @@ export class ChaosBus implements Transport {
   #chaosInjector: ChaosInjector
   id!: string
 
+  sentMessages: Array<BusMessage> = []
+  receivedMessages: Array<BusMessage> = []
+
   constructor(innerTransport: Transport) {
     this.#innerTransport = innerTransport
     this.#chaosInjector = new ChaosInjector()
@@ -48,11 +58,25 @@ export class ChaosBus implements Transport {
 
   async publish(channel: string, message: Serializable) {
     await this.#chaosInjector.injectChaos()
+    this.sentMessages.push({
+      channel,
+      message,
+      busId: this.id,
+      timestamp: Date.now(),
+    })
     return this.#innerTransport.publish(channel, message)
   }
 
   async subscribe<T extends Serializable>(channel: string, handler: SubscribeHandler<T>) {
-    return this.#innerTransport.subscribe(channel, handler)
+    return this.#innerTransport.subscribe(channel, (message) => {
+      this.receivedMessages.push({
+        channel,
+        message,
+        busId: this.id,
+        timestamp: Date.now(),
+      })
+      return handler(message as any)
+    })
   }
 
   unsubscribe(channel: string) {

simulator/start/routes.ts

@@ -71,6 +71,20 @@ router.get('/', async ({ inertia }) => {
     correctValue: await trueCache.get({ key: 'value', defaultValue: 0 }),
     caches: await Promise.all(results),
     state,
+    sentMessages: [...nodes.entries()]
+      .map(([key, cache]) =>
+        cache.bus.sentMessages.map((message) => ({ ...message, cacheName: key })),
+      )
+      .flat()
+      .sort((a, b) => b.timestamp - a.timestamp)
+      .slice(0, 40),
+    receivedMessages: [...nodes.entries()]
+      .map(([key, cache]) =>
+        cache.bus.receivedMessages.map((message) => ({ ...message, cacheName: key })),
+      )
+      .flat()
+      .sort((a, b) => b.timestamp - a.timestamp)
+      .slice(0, 40),
   })
 })
 
@@ -88,6 +102,19 @@ router.post('/set', async ({ request, response }) => {
   return response.redirect().toPath('/')
 })
 
+router.post('/delete', async ({ request, response }) => {
+  const cacheName = request.input('name')
+
+  if (!nodes.has(cacheName)) {
+    return response.status(400).send('Invalid cache name')
+  }
+
+  const cache = nodes.get(cacheName)
+  await cache?.bento.delete({ key: 'value' })
+
+  return response.redirect().toPath('/')
+})
+
 const stateSchema = vine.compile(
   vine.object({
     bus: vine.boolean().optional(),