Events added to Workflow Modal

AD-SDL · Dec 28, 2024 · 2611e5a · 2611e5a
1 parent 3c14ef0
commit 2611e5a
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 61 deletions.
diff --git a/src/ui/src/components/EventTable.vue b/src/ui/src/components/EventTable.vue
@@ -75,4 +75,4 @@ watch(eventsData, (newVal: any, oldVal: any) => {
   text-align: center; 
   min-width: 120px; 
 }
-</style>
+</style>
diff --git a/src/ui/src/components/Experiments.vue b/src/ui/src/components/Experiments.vue
@@ -20,62 +20,7 @@
             {{ selectedExperiment.experiment_id }}
           </v-card-title>
           <v-card-text>
-            <div>
-              <h3 class="title">Workflows:</h3>
-              <v-expansion-panels>
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      <h4>workflow table</h4>
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                      <WorkflowTable :workflows="experimentWorkflows" :workcell_state="workcell_state"/>
-                    </v-expansion-panel-text>
-                  </v-expansion-panel>
-                  <v-expansion-panel>
-                    <v-expansion-panel-title>
-                      <h4>workflow list</h4>
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
-                        <v-list dense>
-                          <v-list-item v-for="workflow in experimentWorkflows" :key="workflow.run_id">
-                            <v-list-item-content>
-                              <v-list-item-title>{{ workflow.name }}</v-list-item-title>
-                              <v-list-item-subtitle>Status: {{ workflow.status }}</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 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>
+            <ShowEvents :filteredEvents="experimentEvents"/>
             <div>
               <h3>Details:</h3>
               <vue-json-pretty v-if="selectedExperiment" :data="selectedExperiment" :deep="1"></vue-json-pretty>
@@ -141,6 +86,7 @@ import {
 } from '@/store';
 
 import EventTable from './EventTable.vue';
+import ShowEvents from './ShowEvents.vue';
 import WorkflowTable from './WorkflowTable.vue';
 
 const sortBy: VDataTable['sortBy'] = [{ key: 'experiment_id', order: 'desc' }];

diff --git a/src/ui/src/components/ModuleModal.vue b/src/ui/src/components/ModuleModal.vue
@@ -48,6 +48,7 @@
       </v-card-title>
 
       <v-card-text class="subheading grey--text">
+        <ShowEvents :filteredEvents="moduleEvents"/>
         <div>
           <h3>Actions</h3>
           <v-expansion-panels>
@@ -142,13 +143,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { get_status } from '../store';
+import 'vue-json-pretty/lib/styles.css';
+
+import {
+  computed,
+  ref,
+} from 'vue';
 
 import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
+
+import {
+  events,
+  get_status,
+} from '../store';
 import LockUnlockButton from './AdminButtons/LockUnlockButton.vue';
 import ShutdownButton from './AdminButtons/ShutdownButton.vue';
+import ShowEvents from './ShowEvents.vue';
+
 const props = defineProps(['modal_title', 'modal_text', 'main_url', 'wc_state'])
 const arg_headers = [
   { title: 'Name', key: 'name' },
@@ -291,6 +302,18 @@ function copyAction(test: any) {
   navigator.clipboard.writeText(test)
   alert("Copied!")
 }
+
+const moduleEvents = computed(() => {
+  return events.value.filter((event: any) => {
+    const eventName = event.event_name
+      ? event.event_name === "STEP"
+      : true;
+    const moduleName = props.modal_title
+      ? event.step.module === props.modal_title
+      : true;
+    return eventName && moduleName;
+  });
+});
 </script>
 
 <style>

diff --git a/src/ui/src/components/ShowEvents.vue b/src/ui/src/components/ShowEvents.vue
@@ -0,0 +1,50 @@
+<template>
+    <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="filteredEvents"/>
+                </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 filteredEvents" :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>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  PropType,
+  ref,
+} from 'vue';
+
+/// <reference path="../store.d.ts" />
+import { events } from '@/store';
+
+import EventTable from './EventTable.vue';
+
+const props = defineProps({
+  filteredEvents: {
+    type: Array as PropType<Array<any>>,
+    required: true,
+  },
+});
+</script>
diff --git a/src/ui/src/components/WorkflowModal.vue b/src/ui/src/components/WorkflowModal.vue
@@ -7,6 +7,7 @@
         <v-sheet class="pa-2 rounded-lg text-md-center text-white" :class="'wf_status_' + modal_text.status">{{ modal_text.status }}</v-sheet>
       </v-card-title>
       <v-card-text>
+        <ShowEvents :filteredEvents="workflowEvents"/>
         <Workflow :steps="modal_text.steps" :wf="modal_text" />
       </v-card-text>
       <v-card-actions>
@@ -18,8 +19,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import {
+  computed,
+  ref,
+} from 'vue';
+
+import { events } from '@/store';
+
+import ShowEvents from './ShowEvents.vue';
 
 const props = defineProps(['modal_title', 'modal_text'])
 const flowdef = ref(false)
+
+const workflowEvents = computed(() => {
+  return events.value.filter((event: any) => {
+    const eventType = event.event_type
+      ? event.event_type === "WORKFLOW"
+      : true;
+    const matchWorkflow = props.modal_text?.run_id
+      ? event.run_id === props.modal_text?.run_id
+      : true;
+    return eventType && matchWorkflow;
+  });
+});
 </script>