diff --git a/src/client/components/taskmanager.api-window.vue b/src/client/components/taskmanager.api-window.vue new file mode 100644 index 000000000..9cdc8227e --- /dev/null +++ b/src/client/components/taskmanager.api-window.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue index 704e2d3e8..b81f26736 100644 --- a/src/client/components/taskmanager.vue +++ b/src/client/components/taskmanager.vue @@ -54,7 +54,7 @@
Endpoint
State
-
+
#{{ req.id }}
{{ req.endpoint }}
{{ req.state }}
@@ -119,6 +119,13 @@ export default defineComponent({ os.popups.value = os.popups.value.filter(x => x !== p); }; + const showReq = async req => { + os.popup(await import('./taskmanager.api-window.vue'), { + req: req + }, { + }, 'closed'); + }; + return { tab: ref('stream'), popups: os.popups, @@ -126,6 +133,7 @@ export default defineComponent({ connections, pools, killPopup, + showReq, faTerminal, }; }, @@ -152,6 +160,10 @@ export default defineComponent({ > div { display: table-row; + &:nth-child(even) { + //background: rgba(0, 0, 0, 0.1); + } + &.header { opacity: 0.7; } diff --git a/src/client/os.ts b/src/client/os.ts index a9b56e60f..5f21cc39f 100644 --- a/src/client/os.ts +++ b/src/client/os.ts @@ -13,6 +13,7 @@ export const isMobile = /mobile|iphone|ipad|android/.test(ua); export const stream = markRaw(new Stream()); export const pendingApiRequestsCount = ref(0); +let apiRequestsCount = 0; // for debug export const apiRequests = ref([]); // for debug export const windows = new Map(); @@ -25,12 +26,15 @@ export function api(endpoint: string, data: Record = {}, token?: st }; const log = debug ? reactive({ - id: apiRequests.value.length, + id: ++apiRequestsCount, endpoint, - state: 'pending' + req: markRaw(data), + res: null, + state: 'pending', }) : null; if (debug) { apiRequests.value.push(log); + if (apiRequests.value.length > 128) apiRequests.value.shift(); } const promise = new Promise((resolve, reject) => { @@ -50,6 +54,7 @@ export function api(endpoint: string, data: Record = {}, token?: st if (res.status === 200) { resolve(body); if (debug) { + log.res = markRaw(body); log.state = 'success'; } } else if (res.status === 204) { @@ -60,6 +65,7 @@ export function api(endpoint: string, data: Record = {}, token?: st } else { reject(body.error); if (debug) { + log.res = markRaw(body.error); log.state = 'failed'; } }