Events tab done, events panel added to workcell panel.

src/ui/src/components/Dashboard.vue

@@ -18,7 +18,7 @@
   <v-window v-model="tab"> 
     <v-window-item :key="1" :value="1">
       <v-container class="pa-1 ma-1 justify-center" fluid>
-        <WorkcellPanel @view-workflows="tab = 2" />
+        <WorkcellPanel @view-workflows="tab = 2" @view-events="tab = 4" />
       </v-container>
     </v-window-item>
     <v-window-item :key="2" :value="2">

src/ui/src/components/Event.vue

@@ -1,13 +1,32 @@
 <template>
-    <vue-json-pretty :data="events[props.event_id]" />
+    <div>
+        <div v-if="event.event_name === 'STEP'">
+            <h3 class="title">Step:</h3>
+            <v-expansion-panels title="Step">
+                <v-expansion-panel>
+                    <v-expansion-panel-title>
+                        <h4>{{ event.workflow_name }}</h4>
+                    </v-expansion-panel-title>
+                    <v-expansion-panel-text>
+                        <vue-json-pretty :data="event.step"/>
+                    </v-expansion-panel-text>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </div>
+        <h3>Details</h3>
+        <vue-json-pretty v-if="event" :data="event" :deep="1"></vue-json-pretty>
+    </div>
 </template>
 
 <script setup lang="ts">
-
 import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
-/// <reference path="../store.d.ts" />
-import { events } from "@/store";
-const props = defineProps(['event_id'])
+
+const props = defineProps(['event'])
 
 </script>
+
+<style scoped>
+.workcell-details {
+    margin-top: 20px;
+}
+</style>

src/ui/src/components/EventModal.vue

@@ -2,15 +2,23 @@
     <v-dialog :model-value="modalValue" @update:model-value="updateModalValue">
         <v-card>
             <v-card-title>
-                <h2 class="title">Event: {{ modal_event?.event_name || 'N/A' }}</h2>
-                <!-- {{modal_event.event_id}} -->
+                <div v-if="modal_event?.event_type === 'WORKCELL'">
+                    <h2 class="title">Workcell: {{ (modal_event?.workcell.name).toLowerCase() }}</h2>
+                </div>
+                <div v-if="modal_event?.event_type === 'WORKFLOW'">
+                        <h2 class="title">Workflow: {{ (modal_event?.workflow_name).toLowerCase() }}</h2>
+                </div> 
+                <div v-if="modal_event?.event_type === 'EXPERIMENT'">
+                    <h2 class="title">Experiment</h2>
+                </div>                                   
+                    {{modal_event.event_id}}
+                    <v-sheet class="pa-2 rounded-lg text-md-center text-white"
+                        :class="'event_name_' + (modal_event?.event_name).toLowerCase()">
+                        {{ (modal_event?.event_name).toLowerCase() }}
+                    </v-sheet>
             </v-card-title>
             <v-card-text>
-                <v-sheet class="pa-2 rounded-lg text-md-center text-white"
-                :class="'event_name_' + (modal_event?.event_name || '').toLowerCase()">
-                {{ modal_event?.event_id || 'N/A' }}
-            </v-sheet>
-            <test :event="modal_event" />
+                <Event :event="modal_event" />
             </v-card-text>
             <v-card-actions>
                 <v-spacer></v-spacer>
@@ -21,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import test from './test.vue';
+import Event from './Event.vue';
 
 const props = defineProps({
     modal_event: {
@@ -44,4 +52,4 @@ const updateModalValue = (value: Boolean) => {
     emit('update:modalValue', value);
 };
 
-</script>
+</script>

src/ui/src/components/EventPanel.vue

@@ -0,0 +1,19 @@
+<template>
+    <v-card class="pa-1 ma-1" title="Recent Events">
+        <v-card-text v-if="evnts">
+            <EventTable :maxEntries="5;"/>
+        </v-card-text>
+        <v-card-text v-else>
+            <p>No Events Yet</p>
+        </v-card-text>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn class="ma-1" @click="$emit('viewEvents')" color="blue">View All Events</v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps(['evnts'])
+const emits = defineEmits(['viewEvents'])
+</script>

src/ui/src/components/EventTable.vue

@@ -1,15 +1,15 @@
 <template>
     <v-data-table :headers="eventHeaders" hover
-    :items="eventsData" item-value="event_timestamp" :sort-by="sortBy" density="compact">
+    :items="minEventsData" item-value="event_timestamp" :sort-by="sortBy" density="compact">
     <template v-slot:body="{ items }">
         <tr v-for="item in items" :key="item.event_id" @click="openModal(item)">
             <td>{{ item.event_id }}</td> 
             <td>
                 <v-sheet class="pa-2 rounded-lg text-md-center text-white event-name-badge" :class="'event_name_' + item.event_name.toLowerCase()">
-                    {{ item.event_name.toLowerCase() }}
+                    {{ (item.event_name).toLowerCase() }}
                 </v-sheet>
             </td>
-            <td>{{ item.event_type }}</td>
+            <td>{{ (item.event_type).toLowerCase() }}</td>
             <td>{{ item.event_timestamp }}</td>
             <td>{{ item.workcell_id }}</td>
         </tr>
@@ -23,6 +23,7 @@
 import {
   computed,
   ref,
+  watch,
 } from 'vue';
 
 import { VDataTable } from 'vuetify/lib/components/index.mjs';
@@ -31,8 +32,16 @@ import { events } from '@/store';
 
 import EventModal from './EventModal.vue';
 
+const props = defineProps({
+  maxEntries: {
+    type: Number,
+    default: Infinity 
+  }
+});
+
 const eventsData = computed(() => events.value || []);
 const sortBy: VDataTable['sortBy'] = [{ key: 'event_timestamp', order: 'desc'}];
+const minEventsData = computed(() => eventsData.value.slice(0, props.maxEntries));
 
 const modal = ref(false)
 const modal_event = ref({})
@@ -48,7 +57,11 @@ const eventHeaders = [
 const openModal = (event: Object) => {
     modal_event.value = event;
     modal.value = true;
-}
+};
+
+watch(eventsData, (newVal: any, oldVal: any) => {
+  console.log('Events data updated:', newVal);
+});
 </script>
 
 <style scoped>

src/ui/src/components/WorkcellPanel.vue

@@ -17,6 +17,7 @@
           <v-col cols="12" md="6" lg="6" xl="6">
             <ModulesPanel :modules="workcell_state.modules" :main_url="main_url" :wc_state="workcell_state" />
             <LocationsPanel :locations="workcell_state.locations" />
+            <EventPanel :evnts="events" @view-events="$emit('view-events')" />
           </v-col>
           <v-col cols="12" md="6" lg="6" xl="6">
             <WorkflowsPanel :wc_state="workcell_state" :wfs="workflows" @view-workflows="$emit('view-workflows')" />
@@ -59,18 +60,28 @@
 </template>
 
 <script setup lang="ts">
-import { main_url, workcell_info, workcell_state, workflows } from "@/store";
-import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
+
+import VueJsonPretty from 'vue-json-pretty';
+
+import {
+  events,
+  main_url,
+  workcell_info,
+  workcell_state,
+  workflows,
+} from '@/store';
+
 import CancelButton from './AdminButtons/CancelButton.vue';
 import LockUnlockButton from './AdminButtons/LockUnlockButton.vue';
 import PauseResumeButton from './AdminButtons/PauseResumeButton.vue';
 import ResetButton from './AdminButtons/ResetButton.vue';
 import SafetyStopButton from './AdminButtons/SafetyStopButton.vue';
 import ShutdownButton from './AdminButtons/ShutdownButton.vue';
+import EventPanel from './EventPanel.vue';
 import LocationsPanel from './LocationsPanel.vue';
 import ModulesPanel from './ModulesPanel.vue';
 import WorkflowsPanel from './WorkflowsPanel.vue';
 
-defineEmits(['view-workflows']);
+defineEmits(['view-workflows', 'view-events']);
 </script>

src/ui/src/components/WorkflowsPanel.vue

@@ -10,7 +10,6 @@
             <v-spacer></v-spacer>
             <v-btn class="ma-1" @click="$emit('viewWorkflows')" color="blue">View All Workflows</v-btn>
         </v-card-actions>
-
     </v-card>
 </template>