[PR #2240] [MERGED] refactor: realtime log entry revamp #3689

New issue

Closed

opened 2026-03-17 01:16:51 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:16:51 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2240
Author: @joeljstephen
Created: 4/6/2022
Status: ✅ Merged
Merged: 5/9/2022
Merged by: @liyasthomas

Base: main ← Head: refactor/realtime-logs

📝 Commits (10+)

bd3dc02 refactor: realtime log entry revamp
f2046a8 refactor: added codemirror instance for json responses
783b67b feat: added tabs for json and raw codemirror instances
70acf35 fix: minor corrections
30e03ef refactor: initial autoscroll implementation
c835a18 refactor: implemented color changes for autoscroll button
e790728 fix: proper scrolling setup for logs
ea5f860 chore: cleanup log code
7cd35f4 refactor: change autoscroll mechanism to throttled update based
8253dd5 feat: implemented clearing of log entries

📊 Changes

18 files changed (+653 additions, -144 deletions)

View changed files

➕ packages/hoppscotch-app/assets/icons/arrow-down-left.svg (+4 -0)
➕ packages/hoppscotch-app/assets/icons/arrow-down.svg (+4 -0)
➕ packages/hoppscotch-app/assets/icons/arrow-up-right.svg (+4 -0)
➕ packages/hoppscotch-app/assets/icons/arrow-up.svg (+4 -0)
➕ packages/hoppscotch-app/assets/icons/chevrons-down.svg (+4 -0)
➕ packages/hoppscotch-app/assets/icons/chevrons-up.svg (+4 -0)
➕ packages/hoppscotch-app/assets/icons/info-disconnect.svg (+5 -0)
➕ packages/hoppscotch-app/assets/icons/info-realtime.svg (+5 -0)
📝 packages/hoppscotch-app/components/realtime/Log.vue (+97 -46)
➕ packages/hoppscotch-app/components/realtime/LogEntry.vue (+388 -0)
📝 packages/hoppscotch-app/components/realtime/Mqtt.vue (+29 -22)
📝 packages/hoppscotch-app/components/realtime/Socketio.vue (+22 -14)
📝 packages/hoppscotch-app/components/realtime/Sse.vue (+25 -17)
📝 packages/hoppscotch-app/components/realtime/Websocket.vue (+23 -18)
📝 packages/hoppscotch-app/helpers/functional/json.ts (+8 -0)
➖ packages/hoppscotch-app/helpers/utils/string.ts (+0 -12)
📝 packages/hoppscotch-app/locales/en.json (+3 -0)
📝 pnpm-lock.yaml (+24 -15)

📄 Description

Description

Revamped the log component and included a new component that handles the UI for each log entry. Changed type definition for log entry data (removed color attribute, added event attribute and refactored the timestamp attribute).

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2240 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 4/6/2022 **Status:** ✅ Merged **Merged:** 5/9/2022 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `main` ← **Head:** `refactor/realtime-logs` --- ### 📝 Commits (10+) - [`bd3dc02`](https://github.com/hoppscotch/hoppscotch/commit/bd3dc02751446338f50cf8e7d4157254830b9c9e) refactor: realtime log entry revamp - [`f2046a8`](https://github.com/hoppscotch/hoppscotch/commit/f2046a8f6ef225cd9fbe05b0e3fac3d291922260) refactor: added codemirror instance for json responses - [`783b67b`](https://github.com/hoppscotch/hoppscotch/commit/783b67b7b3cd4bcc8c7be707c88ff10da5044e96) feat: added tabs for json and raw codemirror instances - [`70acf35`](https://github.com/hoppscotch/hoppscotch/commit/70acf358c55b17c85a9a6caa36c56c00994cceea) fix: minor corrections - [`30e03ef`](https://github.com/hoppscotch/hoppscotch/commit/30e03ef692ca9bc004f7cd4f5e2621c77bbcddbb) refactor: initial autoscroll implementation - [`c835a18`](https://github.com/hoppscotch/hoppscotch/commit/c835a185047a53523ef7da98073c55139a0ae710) refactor: implemented color changes for autoscroll button - [`e790728`](https://github.com/hoppscotch/hoppscotch/commit/e790728e9dca882e43efb63074aae2e0b53a8a2e) fix: proper scrolling setup for logs - [`ea5f860`](https://github.com/hoppscotch/hoppscotch/commit/ea5f860135dc1f0a3989d0d7c3db29813235a99f) chore: cleanup log code - [`7cd35f4`](https://github.com/hoppscotch/hoppscotch/commit/7cd35f4f76e95ae8d96545fd6e0b2f5dd74b3fd6) refactor: change autoscroll mechanism to throttled update based - [`8253dd5`](https://github.com/hoppscotch/hoppscotch/commit/8253dd5270d961494679ac6114bf7060e7d4dbbb) feat: implemented clearing of log entries ### 📊 Changes **18 files changed** (+653 additions, -144 deletions) <details> <summary>View changed files</summary> ➕ `packages/hoppscotch-app/assets/icons/arrow-down-left.svg` (+4 -0) ➕ `packages/hoppscotch-app/assets/icons/arrow-down.svg` (+4 -0) ➕ `packages/hoppscotch-app/assets/icons/arrow-up-right.svg` (+4 -0) ➕ `packages/hoppscotch-app/assets/icons/arrow-up.svg` (+4 -0) ➕ `packages/hoppscotch-app/assets/icons/chevrons-down.svg` (+4 -0) ➕ `packages/hoppscotch-app/assets/icons/chevrons-up.svg` (+4 -0) ➕ `packages/hoppscotch-app/assets/icons/info-disconnect.svg` (+5 -0) ➕ `packages/hoppscotch-app/assets/icons/info-realtime.svg` (+5 -0) 📝 `packages/hoppscotch-app/components/realtime/Log.vue` (+97 -46) ➕ `packages/hoppscotch-app/components/realtime/LogEntry.vue` (+388 -0) 📝 `packages/hoppscotch-app/components/realtime/Mqtt.vue` (+29 -22) 📝 `packages/hoppscotch-app/components/realtime/Socketio.vue` (+22 -14) 📝 `packages/hoppscotch-app/components/realtime/Sse.vue` (+25 -17) 📝 `packages/hoppscotch-app/components/realtime/Websocket.vue` (+23 -18) 📝 `packages/hoppscotch-app/helpers/functional/json.ts` (+8 -0) ➖ `packages/hoppscotch-app/helpers/utils/string.ts` (+0 -12) 📝 `packages/hoppscotch-app/locales/en.json` (+3 -0) 📝 `pnpm-lock.yaml` (+24 -15) </details> ### 📄 Description   ### Description  Revamped the log component and included a new component that handles the UI for each log entry. Changed type definition for log entry data (removed color attribute, added event attribute and refactored the timestamp attribute).  ### Checks  - [x] My pull request adheres to the code style of this project - [x] My code requires changes to the documentation - [x] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>