From 5d4e3588f27b700778d9c9f361baa7e8368e5658 Mon Sep 17 00:00:00 2001 From: "m.broersen" Date: Fri, 21 Jul 2023 23:44:18 +0200 Subject: [PATCH 1/6] feat: add tabs component --- .../app/modules/default/components/tabs.vue | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 resources/app/modules/default/components/tabs.vue diff --git a/resources/app/modules/default/components/tabs.vue b/resources/app/modules/default/components/tabs.vue new file mode 100644 index 0000000..8de23eb --- /dev/null +++ b/resources/app/modules/default/components/tabs.vue @@ -0,0 +1,69 @@ + + + + + + From 45ad4fbd1e7fb6e760d0508d288e4618d59da4f0 Mon Sep 17 00:00:00 2001 From: "m.broersen" Date: Fri, 21 Jul 2023 23:44:41 +0200 Subject: [PATCH 2/6] feat: add live-query component --- .../components/sessions/live-query.vue | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 resources/app/modules/session/components/sessions/live-query.vue diff --git a/resources/app/modules/session/components/sessions/live-query.vue b/resources/app/modules/session/components/sessions/live-query.vue new file mode 100644 index 0000000..b8aa690 --- /dev/null +++ b/resources/app/modules/session/components/sessions/live-query.vue @@ -0,0 +1,48 @@ + + + + + From 30c9274f5ea14d1f446e051c6ef7392901d7b7cd Mon Sep 17 00:00:00 2001 From: "m.broersen" Date: Fri, 21 Jul 2023 23:45:24 +0200 Subject: [PATCH 3/6] feat: use tab component feat: add live sessions view --- .../app/modules/session/views/session.vue | 70 ++++++++----------- .../app/modules/session/views/sessions.vue | 56 ++++++++++++++- 2 files changed, 83 insertions(+), 43 deletions(-) diff --git a/resources/app/modules/session/views/session.vue b/resources/app/modules/session/views/session.vue index 7a9feb1..548b5ed 100644 --- a/resources/app/modules/session/views/session.vue +++ b/resources/app/modules/session/views/session.vue @@ -9,16 +9,7 @@ - -
-
Time
-
Routes
-
Referer
-
Queries
-
Queries with bindings
-
Query time
-
- + { router.push({name: 'sessions'}); @@ -244,35 +263,6 @@ } - .tabs { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - border-bottom: 1px solid rgba(233,233,233,.9); - - .tab { - padding: 0.5rem 1rem; - border-bottom: none; - cursor: pointer; - background: #fff; - margin-right: 0.5rem; - color: #000; - font-weight: 900; - text-decoration: none; - transition: all 0.2s ease-in-out; - border-bottom: 2px solid transparent; - - &:hover { - background: #eee; - border-bottom: 2px solid rgba(33,180,180, .5); - } - - &.active { - border-bottom: 2px solid rgba(33,180,180,.9); - } - } - } diff --git a/resources/app/modules/session/views/sessions.vue b/resources/app/modules/session/views/sessions.vue index 7ce6fd6..1809436 100644 --- a/resources/app/modules/session/views/sessions.vue +++ b/resources/app/modules/session/views/sessions.vue @@ -7,17 +7,26 @@ + + +
- +
-
+ +

No sessions found.

+
+
+ +
+
@@ -26,25 +35,66 @@ import {reactive, onMounted} from "vue"; import SessionRow from "../components/sessions/session-row.vue"; import Steps from "../components/sessions/steps.vue"; - import {sessions} from "../api/session-api"; + import {sessions, show} from "../api/session-api"; import {useRouter, onBeforeRouteUpdate} from "vue-router"; import PageHeader from "../../default/components/page-header.vue"; import ButtonIcon from "../../default/components/button-icon.vue"; import Loader from "../../default/components/loader.vue"; + import lqaTabs from "../../default/components/tabs.vue"; + import LiveQuery from "../components/sessions/live-query.vue"; const $router = useRouter(); const data = reactive({ sessions: [{firstQueryLogged: new Date(), lastQueryLogged: new Date()}, {firstQueryLogged: new Date(), lastQueryLogged: new Date()}], active: true, + activeTab: 'sessions', // 'sessionlist' | 'import' | 'clear + activeSessionId: null, loading: false, + liveQueries: [], }); + const tabs = [ + { + name: 'sessions', + label: 'Sessions', + }, + { + name: 'liveSession', + label: 'Live Session', + } + ] + function onStatusChange(status) { data.active = status; getList(); + pollLiveSession(); } + let timeOut = null; + + function pollLiveSession() { + if (data.active) { + + const tempSessionList = []; + show(data.activeSessionId).then((response) => { + Object.values(response.data).reverse().forEach((time) => { + time.reverse().forEach(query => { + tempSessionList.push({route: query.url, sql: query.sql, time: query.queryTime}); + }); + }); + + data.liveQueries = tempSessionList; + }); + + clearTimeout(timeOut); + timeOut = setTimeout(() => { + pollLiveSession(); + }, 2500); + } + } + + function getList() { data.loading = true; From 33484b716c178738e207326e2a9890319b4da611 Mon Sep 17 00:00:00 2001 From: "m.broersen" Date: Fri, 21 Jul 2023 23:46:49 +0200 Subject: [PATCH 4/6] feat: add sharing of active query session id --- .../session/components/sessions/steps.vue | 95 ++++++++++++++++--- 1 file changed, 80 insertions(+), 15 deletions(-) diff --git a/resources/app/modules/session/components/sessions/steps.vue b/resources/app/modules/session/components/sessions/steps.vue index 0574f01..52ab0fa 100644 --- a/resources/app/modules/session/components/sessions/steps.vue +++ b/resources/app/modules/session/components/sessions/steps.vue @@ -1,9 +1,9 @@