Merge pull request #8684 from ProcessMaker/task/FOUR-28750

Task/FOUR-28750: Show events logs details for each log session

Author: agustinbusso

resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue

@@ -0,0 +1,5 @@
+import AgentSessionDetail from "./AgentSessionDetail.vue";
+
+export { AgentSessionDetail };
+export default AgentSessionDetail;
+

resources/js/admin/logs/components/Logs/AgentSessionDetail/index.js

@@ -20,7 +20,12 @@
         <tr
           v-for="(item, idx) in data"
           :key="idx"
-          class="tw-border-t tw-border-zinc-200"
+          class="tw-border-t tw-border-zinc-200 tw-transition-colors"
+          :class="[
+            clickable ? 'tw-cursor-pointer hover:tw-bg-blue-50' : '',
+            isSelected(item) ? 'tw-bg-blue-50' : ''
+          ]"
+          @click="handleRowClick(item, idx)"
         >
           <td
             v-for="column in columns"
@@ -47,6 +52,9 @@ export default {
   props: {
     columns: { type: Array, required: true },
     data: { type: Array, required: true },
+    clickable: { type: Boolean, default: false },
+    selectedItem: { type: Object, default: null },
+    itemKey: { type: String, default: 'id' },
   },
   methods: {
     getRawValue(item, column) {
@@ -65,6 +73,15 @@ export default {
 
       return value;
     },
+    handleRowClick(item, index) {
+      if (this.clickable) {
+        this.$emit('row-click', item, index);
+      }
+    },
+    isSelected(item) {
+      if (!this.selectedItem) return false;
+      return item[this.itemKey] === this.selectedItem[this.itemKey];
+    },
   },
 };
 </script>

resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue

@@ -38,14 +38,14 @@
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('design')"
       >
-        {{ $t('Design Mode Logs') }}
+        {{ $t('FlowGenie Studio Logs') }}
       </RouterLink>
       <RouterLink
         to="/agents/execution"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('execution')"
       >
-        {{ $t('Execution Logs') }}
+        {{ $t('Runtime Logs') }}
       </RouterLink>
     </div>
 
@@ -83,6 +83,11 @@ export default {
   props: {
     value: { type: String, default: '' },
   },
+  data() {
+    return {
+      debounceTimer: null,
+    };
+  },
   computed: {
     isEmailCategory() {
       return this.$route.path.startsWith('/email');
@@ -100,6 +105,12 @@ export default {
       immediate: true,
     },
   },
+  beforeDestroy() {
+    // Clear debounce timer when component is destroyed
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+  },
   methods: {
     tabClasses(tab) {
       const currentRoute = this.$route.params.logType;
@@ -110,9 +121,24 @@ export default {
     },
     onInput(event) {
       this.$emit('input', event.target.value);
+      this.debouncedSearch();
+    },
+    debouncedSearch() {
+      // Clear existing timer
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+      }
+      // Set new timer - wait 300ms after user stops typing
+      this.debounceTimer = setTimeout(() => {
+        this.$emit('search');
+      }, 300);
     },
     onKeypress(event) {
+      // Allow immediate search on Enter key
       if (event.charCode === 13) {
+        if (this.debounceTimer) {
+          clearTimeout(this.debounceTimer);
+        }
         this.$emit('search');
       }
     },

resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue

@@ -2,7 +2,10 @@
   <div class="tw-flex tw-gap-3 tw-px-4 tw-h-full tw-min-h-0 tw-overflow-hidden">
     <sidebar class="tw-shrink-0" />
 
-    <section class="tw-flex-1 tw-min-w-0 tw-min-h-0 tw-overflow-hidden">
+    <section
+      class="tw-min-w-0 tw-min-h-0 tw-overflow-hidden tw-transition-all tw-duration-300"
+      :class="selectedSession ? 'tw-w-1/2' : 'tw-flex-1'"
+    >
       <div class="tw-flex tw-flex-col tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-h-full">
         <header-bar
           v-model="search"
@@ -37,25 +40,47 @@
             </div>
           </div>
 
-          <RouterView ref="routerView" class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0" />
+          <RouterView
+            ref="routerView"
+            class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0"
+            @session-selected="onSessionSelected"
+          />
         </div>
       </div>
     </section>
+
+    <!-- Session Detail Panel -->
+    <transition name="slide-fade">
+      <section
+        v-if="selectedSession"
+        class="tw-w-1/2 tw-min-h-0 tw-overflow-hidden tw-min-w-[680px]"
+      >
+        <div class="tw-rounded-xl tw-border tw-border-zinc-200 tw-bg-white tw-h-full tw-overflow-hidden">
+          <agent-session-detail
+            :session="selectedSession"
+            @close="onCloseDetail"
+          />
+        </div>
+      </section>
+    </transition>
   </div>
 </template>
 
 <script>
 import { Sidebar } from '../Sidebar';
 import { HeaderBar } from '../HeaderBar';
+import { AgentSessionDetail } from '../AgentSessionDetail';
 
 export default {
   components: {
     Sidebar,
     HeaderBar,
+    AgentSessionDetail,
   },
   data() {
     return {
       search: '',
+      selectedSession: null,
     };
   },
   computed: {
@@ -71,8 +96,8 @@ export default {
     title() {
       if (this.isAgentsCategory) {
         const agentTitles = {
-          design: 'Design Mode Logs',
-          execution: 'Execution Logs',
+          design: 'FlowGenie Studio Logs',
+          execution: 'Runtime Logs',
         };
         return agentTitles[this.logType] ?? 'FlowGenie Agents Logs';
       }
@@ -92,13 +117,43 @@ export default {
       return `/admin/logs/export/csv?type=${this.logType}&search=${this.search}`;
     },
   },
+  watch: {
+    // Clear selection when navigating to different log type
+    '$route.path': {
+      handler() {
+        this.selectedSession = null;
+      },
+    },
+  },
   methods: {
     onHandleSearch() {
       if (this.$refs.routerView) {
         this.$refs.routerView.refresh({ search: this.search });
       }
     },
+    onSessionSelected(session) {
+      this.selectedSession = session;
+    },
+    onCloseDetail() {
+      this.selectedSession = null;
+      // Also clear selection in the table
+      if (this.$refs.routerView?.clearSelection) {
+        this.$refs.routerView.clearSelection();
+      }
+    },
   },
 };
 </script>
 
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+</style>

resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue

@@ -35,6 +35,10 @@
       v-else
       :columns="columns"
       :data="data"
+      :clickable="isAgentCategory"
+      :selected-item="selectedSession"
+      item-key="session_id"
+      @row-click="handleRowClick"
     >
       <!-- Custom case_number cell with link to case -->
       <template #cell-case_number="{ value }">
@@ -131,6 +135,8 @@ export default {
       totalPages: 1,
       perPage: 15,
       loading: false,
+      selectedSession: null,
+      currentSearch: '',
     };
   },
   computed: {
@@ -215,15 +221,20 @@ export default {
       }
       return `/api/1.1/email-start-event/logs/${this.logType}`;
     },
+    isAgentCategory() {
+      return this.category === 'agents';
+    },
   },
   watch: {
     category: {
       handler() {
+        this.clearSelection();
         this.resetAndFetch();
       },
     },
     logType: {
       handler() {
+        this.clearSelection();
         this.resetAndFetch();
       },
       immediate: true,
@@ -234,6 +245,7 @@ export default {
       this.page = 1;
       this.perPage = 15;
       this.totalPages = 1;
+      this.currentSearch = '';
       this.fetchData();
     },
     async fetchData(params = {}) {
@@ -263,10 +275,14 @@ export default {
     },
     handlePageChange(newPage) {
       this.page = newPage;
-      this.fetchData();
+      this.fetchData({ search: this.currentSearch });
     },
     refresh(params = {}) {
       this.page = 1;
+      // Store search for pagination
+      if (params.search !== undefined) {
+        this.currentSearch = params.search;
+      }
       this.fetchData(params);
     },
     getStatusClasses(status) {
@@ -285,6 +301,16 @@ export default {
       };
       return statusLabels[status] || status;
     },
+    handleRowClick(item) {
+      if (this.isAgentCategory) {
+        this.selectedSession = item;
+        this.$emit('session-selected', item);
+      }
+    },
+    clearSelection() {
+      this.selectedSession = null;
+      this.$emit('session-selected', null);
+    },
   },
 };
 </script>

resources/js/admin/logs/components/Logs/LogTable/LogTable.vue

@@ -908,7 +908,8 @@
   "Event": "Event",
   "Exclusive Gateway": "Exclusive Gateway",
   "Execution Error": "Execution Error",
-  "Execution Logs": "Execution Logs",
+  "Runtime Logs": "Runtime Logs",
+  "FlowGenie Studio Logs": "FlowGenie Studio Logs",
   "Execution Log": "Execution Log",
   "Executor Successfully Built. You can now close this window. ": "Executor Successfully Built. You can now close this window. ",
   "Existing Array": "Existing Array",