Events added to Experiment Modal

src/ui/src/components/EventTable.vue

@@ -36,10 +36,14 @@ const props = defineProps({
   maxEntries: {
     type: Number,
     default: Infinity 
+  },
+  items: {
+    type: Array,
+    default: () => []
   }
 });
 
-const eventsData = computed(() => events.value || []);
+const eventsData = computed(() => props.items.length ? props.items : events.value || []);
 const sortBy: VDataTable['sortBy'] = [{ key: 'event_timestamp', order: 'desc'}];
 const minEventsData = computed(() => eventsData.value.slice(0, props.maxEntries));
 

src/ui/src/components/Experiments.vue

@@ -48,6 +48,34 @@
                   </v-expansion-panel>
               </v-expansion-panels>
             </div>
+            <div>
+              <h3 class="title">Events:</h3>
+              <v-expansion-panels>
+                  <v-expansion-panel>
+                    <v-expansion-panel-title>
+                      <h4>event table</h4>
+                    </v-expansion-panel-title>
+                    <v-expansion-panel-text>
+                      <EventTable :items="experimentEvents"/>
+                    </v-expansion-panel-text>
+                  </v-expansion-panel>
+                  <v-expansion-panel>
+                    <v-expansion-panel-title>
+                      <h4>event list</h4>
+                    </v-expansion-panel-title>
+                    <v-expansion-panel-text>
+                        <v-list dense>
+                          <v-list-item v-for="event in experimentEvents" :key="event.event_id">
+                            <v-list-item-content>
+                              <v-list-item-title>{{ event.event_name.toLowerCase() }}</v-list-item-title>
+                              <v-list-item-subtitle>Type: {{ event.event_type.toLowerCase() }}</v-list-item-subtitle>
+                            </v-list-item-content>
+                          </v-list-item>
+                        </v-list>
+                      </v-expansion-panel-text>
+                  </v-expansion-panel>
+              </v-expansion-panels>
+            </div>
             <div>
               <h3>Details:</h3>
               <vue-json-pretty v-if="selectedExperiment" :data="selectedExperiment" :deep="1"></vue-json-pretty>
@@ -107,10 +135,12 @@ import { VDataTable } from 'vuetify/lib/components/index.mjs';
 /// <reference path="../store.d.ts" />
 import {
   campaigns,
+  events,
   experiment_objects,
   workcell_state,
 } from '@/store';
 
+import EventTable from './EventTable.vue';
 import WorkflowTable from './WorkflowTable.vue';
 
 const sortBy: VDataTable['sortBy'] = [{ key: 'experiment_id', order: 'desc' }];
@@ -136,6 +166,15 @@ const experimentWorkflows = computed<any[]>(() => {
   });
 });
 
+const experimentEvents = computed(() => {
+  return events.value.filter((event: any) => {
+    const matchExperiment = selectedExperiment.value?.experiment_id
+      ? event.experiment_id === selectedExperiment.value?.experiment_id
+      : true;
+    return matchExperiment;
+  });
+});
+
 watch(experiment_objects, (newVal: any, oldVal: any) => {
   console.log('Experiment Data Test:', newVal);
 });