refactor: realtime log entry revamp (#2240)
Co-authored-by: liyasthomas <liyascthomas@gmail.com> Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Joel Jacob Stephen
committed by
GitHub
GitHub
parent
127bd7318f
commit
fb1da491d8
4
packages/hoppscotch-app/assets/icons/arrow-down-left.svg
Normal file
4
packages/hoppscotch-app/assets/icons/arrow-down-left.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="17" y1="7" x2="7" y2="17"></line>
|
||||
<polyline points="17 17 7 17 7 7"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 283 B |
4
packages/hoppscotch-app/assets/icons/arrow-down.svg
Normal file
4
packages/hoppscotch-app/assets/icons/arrow-down.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<polyline points="19 12 12 19 5 12"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 285 B |
4
packages/hoppscotch-app/assets/icons/arrow-up-right.svg
Normal file
4
packages/hoppscotch-app/assets/icons/arrow-up-right.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="7" y1="17" x2="17" y2="7"></line>
|
||||
<polyline points="7 7 17 7 17 17"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 283 B |
4
packages/hoppscotch-app/assets/icons/arrow-up.svg
Normal file
4
packages/hoppscotch-app/assets/icons/arrow-up.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||||
<polyline points="5 12 12 5 19 12"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 284 B |
4
packages/hoppscotch-app/assets/icons/chevrons-down.svg
Normal file
4
packages/hoppscotch-app/assets/icons/chevrons-down.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="7 13 12 18 17 13"></polyline>
|
||||
<polyline points="7 6 12 11 17 6"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 286 B |
4
packages/hoppscotch-app/assets/icons/chevrons-up.svg
Normal file
4
packages/hoppscotch-app/assets/icons/chevrons-up.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="17 11 12 6 7 11"></polyline>
|
||||
<polyline points="17 18 12 13 7 18"></polyline>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 287 B |
5
packages/hoppscotch-app/assets/icons/info-disconnect.svg
Normal file
5
packages/hoppscotch-app/assets/icons/info-disconnect.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 329 B |
5
packages/hoppscotch-app/assets/icons/info-realtime.svg
Normal file
5
packages/hoppscotch-app/assets/icons/info-realtime.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 329 B |
@@ -1,77 +1,128 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1">
|
||||
<div ref="container" class="flex flex-col flex-1 overflow-y-auto">
|
||||
<div
|
||||
class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
|
||||
class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
|
||||
>
|
||||
<label for="log" class="py-2 font-semibold text-secondaryLight">
|
||||
{{ title }}
|
||||
</label>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.delete')"
|
||||
svg="trash"
|
||||
@click.native="emit('delete')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
id="bottompage"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.scroll_to_top')"
|
||||
svg="arrow-up"
|
||||
@click.native="scrollTo('top')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
id="bottompage"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.scroll_to_bottom')"
|
||||
svg="arrow-down"
|
||||
@click.native="scrollTo('bottom')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
id="bottompage"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.autoscroll')"
|
||||
svg="chevrons-down"
|
||||
:class="toggleAutoscrollColor"
|
||||
@click.native="toggleAutoscroll()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="logsRef" name="log" class="realtime-log">
|
||||
<span v-if="log" class="space-y-2">
|
||||
<span
|
||||
<div
|
||||
v-if="log.length !== 0"
|
||||
ref="logs"
|
||||
class="overflow-y-auto border-b border-dividerLight"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
|
||||
>
|
||||
<RealtimeLogEntry
|
||||
v-for="(entry, index) in log"
|
||||
:key="`entry-${index}`"
|
||||
:style="{ color: entry.color }"
|
||||
class="font-mono"
|
||||
>{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>{{ t("response.waiting_for_connection") }}</span>
|
||||
:entry="entry"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, ref, watch } from "@nuxtjs/composition-api"
|
||||
import { getSourcePrefix as source } from "~/helpers/utils/string"
|
||||
import { ref, PropType, computed, watch } from "@nuxtjs/composition-api"
|
||||
import { useThrottleFn, useScroll } from "@vueuse/core"
|
||||
import { useI18n } from "~/helpers/utils/composables"
|
||||
|
||||
const t = useI18n()
|
||||
export type LogEntryData = {
|
||||
ts: number
|
||||
source: "info" | "client" | "server" | "disconnected"
|
||||
payload: string
|
||||
event: "connecting" | "connected" | "disconnected" | "error"
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
log: { type: Array, default: () => [] },
|
||||
log: { type: Array as PropType<LogEntryData[]>, default: () => [] },
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
})
|
||||
|
||||
const logsRef = ref<any | null>(null)
|
||||
const BOTTOM_SCROLL_DIST_INACCURACY = 5
|
||||
const emit = defineEmits<{
|
||||
(e: "delete"): void
|
||||
}>()
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
const logs = ref<HTMLElement | null>(null)
|
||||
|
||||
const autoScrollEnabled = ref(true)
|
||||
|
||||
const logListScroll = useScroll(logs)
|
||||
|
||||
// Disable autoscroll when scrolling to top
|
||||
watch(logListScroll.isScrolling, (isScrolling) => {
|
||||
if (isScrolling && logListScroll.directions.top)
|
||||
autoScrollEnabled.value = false
|
||||
})
|
||||
|
||||
const scrollTo = (position: "top" | "bottom") => {
|
||||
if (position === "top") {
|
||||
logs.value?.scroll({
|
||||
behavior: "smooth",
|
||||
top: 0,
|
||||
})
|
||||
} else if (position === "bottom") {
|
||||
logs.value?.scroll({
|
||||
behavior: "smooth",
|
||||
top: logs.value?.scrollHeight,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.log,
|
||||
() => {
|
||||
if (!logsRef.value) return
|
||||
const distToBottom =
|
||||
logsRef.value.scrollHeight -
|
||||
logsRef.value.scrollTop -
|
||||
logsRef.value.clientHeight
|
||||
if (distToBottom < BOTTOM_SCROLL_DIST_INACCURACY) {
|
||||
nextTick(() => (logsRef.value.scrollTop = logsRef.value.scrollHeight))
|
||||
}
|
||||
}
|
||||
useThrottleFn(() => {
|
||||
if (autoScrollEnabled.value) scrollTo("bottom")
|
||||
}, 200),
|
||||
{ flush: "post" }
|
||||
)
|
||||
|
||||
const toggleAutoscroll = () => {
|
||||
autoScrollEnabled.value = !autoScrollEnabled.value
|
||||
}
|
||||
|
||||
const toggleAutoscrollColor = computed(() =>
|
||||
autoScrollEnabled.value ? "text-green-500" : "text-red-500"
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.realtime-log {
|
||||
@apply p-4;
|
||||
@apply bg-transparent;
|
||||
@apply text-secondary;
|
||||
@apply overflow-auto;
|
||||
|
||||
height: 256px;
|
||||
|
||||
&,
|
||||
span {
|
||||
@apply select-text;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply block;
|
||||
@apply break-words break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
388
packages/hoppscotch-app/components/realtime/LogEntry.vue
Normal file
388
packages/hoppscotch-app/components/realtime/LogEntry.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div v-if="entry" class="divide-y divide-dividerLight">
|
||||
<div :style="{ color: entryColor }" class="realtime-log">
|
||||
<div class="flex group">
|
||||
<div class="flex flex-1 divide-x divide-dividerLight">
|
||||
<div class="inline-flex items-center p-2">
|
||||
<SmartIcon
|
||||
class="svg-icons"
|
||||
:name="iconName"
|
||||
:style="{ color: iconColor }"
|
||||
@click.native="copyQuery(entry.payload)"
|
||||
/>
|
||||
</div>
|
||||
<div class="items-center hidden px-1 w-18 sm:inline-flex">
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="relativeTime"
|
||||
class="mx-auto truncate ts-font text-secondaryLight hover:text-secondary hover:text-center"
|
||||
>
|
||||
{{ new Date(entry.ts).toLocaleTimeString() }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center flex-1 min-w-0 p-2"
|
||||
@click="toggleExpandPayload()"
|
||||
>
|
||||
<div class="truncate">
|
||||
{{ entry.payload }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.copy')"
|
||||
:svg="`${copyQueryIcon}`"
|
||||
class="hidden group-hover:inline-flex"
|
||||
@click.native="copyQuery(entry.payload)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
svg="chevron-down"
|
||||
class="transform"
|
||||
:class="{ 'rotate-180': !minimized }"
|
||||
@click.native="toggleExpandPayload()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!minimized" class="overflow-hidden bg-primaryLight">
|
||||
<SmartTabs v-model="selectedTab" styles="bg-primaryLight">
|
||||
<SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
|
||||
<SmartTab id="raw" label="Raw" />
|
||||
</SmartTabs>
|
||||
<div
|
||||
class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
|
||||
>
|
||||
<label class="font-semibold text-secondaryLight">
|
||||
{{ t("response.body") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.download_file')"
|
||||
:svg="downloadIcon"
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.copy')"
|
||||
:svg="copyIcon"
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="editor"></div>
|
||||
<div
|
||||
v-if="outlinePath && selectedTab === 'json'"
|
||||
class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in outlinePath"
|
||||
:key="`item-${index}`"
|
||||
class="flex items-center"
|
||||
>
|
||||
<tippy
|
||||
ref="outlineOptions"
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<div v-if="item.kind === 'RootObject'" class="outline-item">
|
||||
{}
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="outline-item">
|
||||
[]
|
||||
</div>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="outline-item">
|
||||
{{ item.index }}
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="outline-item">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
|
||||
>
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(arrayMember, astIndex) in item.astParent.values"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="`${astIndex}`"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(arrayMember)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.kind === 'ObjectMember'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(objectMember, astIndex) in item.astParent.members"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="objectMember.key.value"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(objectMember)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.kind === 'RootObject'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
label="{}"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(item.astValue)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.kind === 'RootArray'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
label="[]"
|
||||
@click.native="
|
||||
() => {
|
||||
jumpCursor(item.astValue)
|
||||
outlineOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
<i
|
||||
v-if="index + 1 !== outlinePath.length"
|
||||
class="opacity-50 text-secondaryLight material-icons"
|
||||
>
|
||||
chevron_right
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>{{ t("response.waiting_for_connection") }}</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as LJSON from "lossless-json"
|
||||
import * as O from "fp-ts/Option"
|
||||
import { pipe } from "fp-ts/function"
|
||||
import { ref, computed, reactive, watch } from "@nuxtjs/composition-api"
|
||||
import { useTimeAgo } from "@vueuse/core"
|
||||
import { LogEntryData } from "./Log.vue"
|
||||
import { useI18n } from "~/helpers/utils/composables"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import { isJSON } from "~/helpers/functional/json"
|
||||
import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
|
||||
import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
|
||||
import { useCodemirror } from "~/helpers/editor/codemirror"
|
||||
import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
|
||||
import { getJSONOutlineAtPos } from "~/helpers/newOutline"
|
||||
import {
|
||||
convertIndexToLineCh,
|
||||
convertLineChToIndex,
|
||||
} from "~/helpers/editor/utils"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const props = defineProps<{ entry: LogEntryData }>()
|
||||
const outlineOptions = ref<any | null>(null)
|
||||
const editor = ref<any | null>(null)
|
||||
const linewrapEnabled = ref(true)
|
||||
const logPayload = computed(() => props.entry.payload)
|
||||
|
||||
const selectedTab = ref<"json" | "raw">(
|
||||
isJSON(props.entry.payload) ? "json" : "raw"
|
||||
)
|
||||
|
||||
// CodeMirror Implementation
|
||||
const jsonBodyText = computed(() =>
|
||||
pipe(
|
||||
logPayload.value,
|
||||
O.tryCatchK(LJSON.parse),
|
||||
O.map((val) => LJSON.stringify(val, undefined, 2)),
|
||||
O.getOrElse(() => logPayload.value)
|
||||
)
|
||||
)
|
||||
|
||||
const ast = computed(() =>
|
||||
pipe(
|
||||
jsonBodyText.value,
|
||||
O.tryCatchK(jsonParse),
|
||||
O.getOrElseW(() => null)
|
||||
)
|
||||
)
|
||||
|
||||
const editorText = computed(() => {
|
||||
if (selectedTab.value === "json") return jsonBodyText.value
|
||||
else return logPayload.value
|
||||
})
|
||||
|
||||
const editorMode = computed(() => {
|
||||
if (selectedTab.value === "json") return "application/ld+json"
|
||||
else return "text/plain"
|
||||
})
|
||||
|
||||
const { cursor } = useCodemirror(
|
||||
editor,
|
||||
editorText,
|
||||
reactive({
|
||||
extendedEditorConfig: {
|
||||
mode: editorMode,
|
||||
readOnly: true,
|
||||
lineWrapping: linewrapEnabled,
|
||||
},
|
||||
linter: null,
|
||||
completer: null,
|
||||
environmentHighlights: false,
|
||||
})
|
||||
)
|
||||
|
||||
const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
|
||||
const pos = convertIndexToLineCh(jsonBodyText.value, ast.start)
|
||||
pos.line--
|
||||
cursor.value = pos
|
||||
}
|
||||
|
||||
const outlinePath = computed(() =>
|
||||
pipe(
|
||||
ast.value,
|
||||
O.fromNullable,
|
||||
O.map((ast) =>
|
||||
getJSONOutlineAtPos(
|
||||
ast,
|
||||
convertLineChToIndex(jsonBodyText.value, cursor.value)
|
||||
)
|
||||
),
|
||||
O.getOrElseW(() => null)
|
||||
)
|
||||
)
|
||||
|
||||
// Code for UI Changes
|
||||
const minimized = ref(true)
|
||||
watch(minimized, () => {
|
||||
selectedTab.value = isJSON(props.entry.payload) ? "json" : "raw"
|
||||
})
|
||||
|
||||
const toggleExpandPayload = () => {
|
||||
minimized.value = !minimized.value
|
||||
}
|
||||
|
||||
const { copyIcon, copyResponse } = useCopyResponse(logPayload)
|
||||
|
||||
const { downloadIcon, downloadResponse } = useDownloadResponse(
|
||||
"application/json",
|
||||
logPayload
|
||||
)
|
||||
|
||||
const copyQueryIcon = ref("copy")
|
||||
const copyQuery = (entry: string) => {
|
||||
copyToClipboard(entry)
|
||||
copyQueryIcon.value = "check"
|
||||
setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
|
||||
}
|
||||
|
||||
// Relative Time
|
||||
const relativeTime = useTimeAgo(computed(() => props.entry.ts))
|
||||
|
||||
// Assigns color based on entry event
|
||||
const entryColor = computed(() => {
|
||||
switch (props.entry.event) {
|
||||
case "connected":
|
||||
return "#10b981"
|
||||
case "connecting":
|
||||
return "#10b981"
|
||||
case "error":
|
||||
return "#ff5555"
|
||||
case "disconnected":
|
||||
return "#ff5555"
|
||||
}
|
||||
})
|
||||
|
||||
const ICONS: Record<
|
||||
LogEntryData["source"],
|
||||
{ iconName: string; iconColor: string }
|
||||
> = {
|
||||
info: {
|
||||
iconName: "info-realtime",
|
||||
iconColor: "#10b981",
|
||||
},
|
||||
client: {
|
||||
iconName: "arrow-up-right",
|
||||
iconColor: "#eaaa45",
|
||||
},
|
||||
server: {
|
||||
iconName: "arrow-down-left",
|
||||
iconColor: "#38d4ea",
|
||||
},
|
||||
disconnected: {
|
||||
iconName: "info-disconnect",
|
||||
iconColor: "#ff5555",
|
||||
},
|
||||
}
|
||||
|
||||
const iconColor = computed(() => ICONS[props.entry.source].iconColor)
|
||||
const iconName = computed(() => ICONS[props.entry.source].iconName)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.realtime-log {
|
||||
@apply text-secondary;
|
||||
@apply overflow-hidden;
|
||||
|
||||
&,
|
||||
span {
|
||||
@apply select-text;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply block;
|
||||
@apply break-words break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.outline-item {
|
||||
@apply cursor-pointer;
|
||||
@apply flex-grow-0 flex-shrink-0;
|
||||
@apply text-secondaryLight;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply px-2;
|
||||
@apply py-1;
|
||||
@apply transition;
|
||||
@apply hover: text-secondary;
|
||||
}
|
||||
|
||||
.ts-font {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
</style>
|
||||
@@ -48,7 +48,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #secondary>
|
||||
<RealtimeLog :title="$t('mqtt.log')" :log="log" />
|
||||
<RealtimeLog
|
||||
:title="$t('mqtt.log')"
|
||||
:log="log"
|
||||
@delete="clearLogEntries()"
|
||||
/>
|
||||
</template>
|
||||
<template #sidebar>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
@@ -216,8 +220,8 @@ export default defineComponent({
|
||||
{
|
||||
payload: this.$t("state.connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "connecting",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
const parseUrl = new URL(this.url)
|
||||
@@ -253,8 +257,8 @@ export default defineComponent({
|
||||
addMQTTLogLine({
|
||||
payload: this.$t("error.something_went_wrong"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
onConnectionSuccess() {
|
||||
@@ -263,8 +267,8 @@ export default defineComponent({
|
||||
addMQTTLogLine({
|
||||
payload: this.$t("state.connected_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "connected",
|
||||
ts: Date.now(),
|
||||
})
|
||||
this.$toast.success(this.$t("state.connected"))
|
||||
},
|
||||
@@ -272,8 +276,8 @@ export default defineComponent({
|
||||
addMQTTLogLine({
|
||||
payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "info",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
toggleConnection() {
|
||||
@@ -288,9 +292,9 @@ export default defineComponent({
|
||||
this.client.disconnect()
|
||||
addMQTTLogLine({
|
||||
payload: this.$t("state.disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "disconnected",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
onConnectionLost() {
|
||||
@@ -309,9 +313,9 @@ export default defineComponent({
|
||||
this.client.publish(this.pub_topic, this.msg, 0, false)
|
||||
addMQTTLogLine({
|
||||
payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
event: "info",
|
||||
})
|
||||
} catch (e) {
|
||||
addMQTTLogLine({
|
||||
@@ -319,8 +323,8 @@ export default defineComponent({
|
||||
this.$t("error.something_went_wrong") +
|
||||
`while publishing msg: ${this.msg} to topic: ${this.pub_topic}`,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -343,8 +347,8 @@ export default defineComponent({
|
||||
this.$t("error.something_went_wrong") +
|
||||
`while subscribing to topic: ${this.sub_topic}`,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -356,8 +360,8 @@ export default defineComponent({
|
||||
(this.subscriptionState ? "subscribed" : "unsubscribed") +
|
||||
` to topic: ${this.sub_topic}`,
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "info",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
usubFailure() {
|
||||
@@ -367,8 +371,8 @@ export default defineComponent({
|
||||
(this.subscriptionState ? "unsubscribe" : "subscribe") +
|
||||
` to topic: ${this.sub_topic}`,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
color: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
unsubscribe() {
|
||||
@@ -377,6 +381,9 @@ export default defineComponent({
|
||||
onFailure: this.usubFailure,
|
||||
})
|
||||
},
|
||||
clearLogEntries() {
|
||||
this.log = []
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -200,7 +200,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #secondary>
|
||||
<RealtimeLog :title="$t('socketio.log')" :log="log" />
|
||||
<RealtimeLog
|
||||
:title="$t('socketio.log')"
|
||||
:log="log"
|
||||
@delete="clearLogEntries()"
|
||||
/>
|
||||
</template>
|
||||
<template #sidebar>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
@@ -389,7 +393,8 @@ export default defineComponent({
|
||||
{
|
||||
payload: this.$t("state.connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
event: "connecting",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
|
||||
@@ -418,8 +423,8 @@ export default defineComponent({
|
||||
{
|
||||
payload: this.$t("state.connected_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "connected",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t("state.connected"))
|
||||
@@ -429,7 +434,7 @@ export default defineComponent({
|
||||
addSIOLogLine({
|
||||
payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
})
|
||||
})
|
||||
this.io.on("connect_error", (error) => {
|
||||
@@ -446,9 +451,9 @@ export default defineComponent({
|
||||
this.connectionState = false
|
||||
addSIOLogLine({
|
||||
payload: this.$t("state.disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "disconnected",
|
||||
ts: Date.now(),
|
||||
})
|
||||
this.$toast.error(this.$t("state.disconnected"))
|
||||
})
|
||||
@@ -471,15 +476,15 @@ export default defineComponent({
|
||||
addSIOLogLine({
|
||||
payload: this.$t("error.something_went_wrong"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
if (error !== null)
|
||||
addSIOLogLine({
|
||||
payload: error,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
sendMessage() {
|
||||
@@ -500,14 +505,14 @@ export default defineComponent({
|
||||
addSIOLogLine({
|
||||
payload: `[${eventName}] ${JSON.stringify(data)}`,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
})
|
||||
})
|
||||
|
||||
addSIOLogLine({
|
||||
payload: `[${eventName}] ${JSON.stringify(messages)}`,
|
||||
source: "client",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
})
|
||||
this.communication.inputs = [""]
|
||||
}
|
||||
@@ -516,6 +521,9 @@ export default defineComponent({
|
||||
this.clientVersion = version
|
||||
this.$refs.versionOptions.tippy().hide()
|
||||
},
|
||||
clearLogEntries() {
|
||||
this.log = []
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -47,7 +47,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #secondary>
|
||||
<RealtimeLog :title="$t('sse.log')" :log="log" />
|
||||
<RealtimeLog
|
||||
:title="$t('sse.log')"
|
||||
:log="log"
|
||||
@delete="clearLogEntries()"
|
||||
/>
|
||||
</template>
|
||||
</AppPaneLayout>
|
||||
</template>
|
||||
@@ -136,7 +140,8 @@ export default defineComponent({
|
||||
{
|
||||
payload: this.$t("state.connecting_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
event: "connecting",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
if (typeof EventSource !== "undefined") {
|
||||
@@ -149,8 +154,8 @@ export default defineComponent({
|
||||
{
|
||||
payload: this.$t("state.connected_to", { name: this.server }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "connected",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t("state.connected"))
|
||||
@@ -164,9 +169,9 @@ export default defineComponent({
|
||||
payload: this.$t("state.disconnected_from", {
|
||||
name: this.server,
|
||||
}),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "disconnected",
|
||||
ts: Date.now(),
|
||||
})
|
||||
this.$toast.error(this.$t("state.disconnected"))
|
||||
}
|
||||
@@ -174,7 +179,7 @@ export default defineComponent({
|
||||
addSSELogLine({
|
||||
payload: data,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
})
|
||||
})
|
||||
} catch (e) {
|
||||
@@ -185,9 +190,9 @@ export default defineComponent({
|
||||
this.log = [
|
||||
{
|
||||
payload: this.$t("error.browser_support_sse"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -201,22 +206,25 @@ export default defineComponent({
|
||||
this.connectionSSEState = false
|
||||
addSSELogLine({
|
||||
payload: this.$t("error.something_went_wrong"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
if (error !== null)
|
||||
addSSELogLine({
|
||||
payload: error,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
stop() {
|
||||
this.sse.close()
|
||||
this.sse.onclose()
|
||||
},
|
||||
clearLogEntries() {
|
||||
this.log = []
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -137,22 +137,23 @@
|
||||
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||
:alt="$t('empty.protocols')"
|
||||
/>
|
||||
<span class="mb-4 text-center">
|
||||
{{ $t("empty.protocols") }}
|
||||
</span>
|
||||
<span class="mb-4 text-center">{{ $t("empty.protocols") }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #secondary>
|
||||
<RealtimeLog :title="$t('websocket.log')" :log="log" />
|
||||
<RealtimeLog
|
||||
:title="$t('websocket.log')"
|
||||
:log="log"
|
||||
@delete="clearLogEntries()"
|
||||
/>
|
||||
</template>
|
||||
<template #sidebar>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<label
|
||||
for="websocket-message"
|
||||
class="font-semibold text-secondaryLight"
|
||||
>{{ $t("websocket.communication") }}</label
|
||||
>
|
||||
{{ $t("websocket.communication") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex px-4 space-x-2">
|
||||
<input
|
||||
@@ -285,12 +286,16 @@ export default defineComponent({
|
||||
// Otherwise, it's disconnecting.
|
||||
else return this.disconnect()
|
||||
},
|
||||
clearLogEntries() {
|
||||
this.log = []
|
||||
},
|
||||
connect() {
|
||||
this.log = [
|
||||
{
|
||||
payload: this.$t("state.connecting_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
event: "connecting",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
try {
|
||||
@@ -303,8 +308,8 @@ export default defineComponent({
|
||||
{
|
||||
payload: this.$t("state.connected_to", { name: this.url }),
|
||||
source: "info",
|
||||
color: "var(--accent-color)",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "connected",
|
||||
ts: Date.now(),
|
||||
},
|
||||
]
|
||||
this.$toast.success(this.$t("state.connected"))
|
||||
@@ -316,9 +321,9 @@ export default defineComponent({
|
||||
this.connectionState = false
|
||||
addWSLogLine({
|
||||
payload: this.$t("state.disconnected_from", { name: this.url }),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
source: "disconnected",
|
||||
event: "disconnected",
|
||||
ts: Date.now(),
|
||||
})
|
||||
this.$toast.error(this.$t("state.disconnected"))
|
||||
}
|
||||
@@ -326,7 +331,7 @@ export default defineComponent({
|
||||
addWSLogLine({
|
||||
payload: data,
|
||||
source: "server",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -351,15 +356,15 @@ export default defineComponent({
|
||||
addWSLogLine({
|
||||
payload: this.$t("error.something_went_wrong"),
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
if (error !== null)
|
||||
addWSLogLine({
|
||||
payload: error,
|
||||
source: "info",
|
||||
color: "#ff5555",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
event: "error",
|
||||
ts: Date.now(),
|
||||
})
|
||||
},
|
||||
sendMessage() {
|
||||
@@ -368,7 +373,7 @@ export default defineComponent({
|
||||
addWSLogLine({
|
||||
payload: message,
|
||||
source: "client",
|
||||
ts: new Date().toLocaleTimeString(),
|
||||
ts: Date.now(),
|
||||
})
|
||||
this.communication.input = ""
|
||||
},
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as O from "fp-ts/Option"
|
||||
import { flow } from "fp-ts/function"
|
||||
|
||||
/**
|
||||
* Checks and Parses JSON string
|
||||
@@ -7,3 +8,10 @@ import * as O from "fp-ts/Option"
|
||||
*/
|
||||
export const safeParseJSON = (str: string): O.Option<object> =>
|
||||
O.tryCatch(() => JSON.parse(str))
|
||||
|
||||
/**
|
||||
* Checks if given string is a JSON string
|
||||
* @param str Raw string to be checked
|
||||
* @returns If string is a JSON string
|
||||
*/
|
||||
export const isJSON = flow(safeParseJSON, O.isSome)
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
const sourceEmojis = {
|
||||
// Source used for info messages.
|
||||
info: "\tℹ️ [INFO]:\t",
|
||||
// Source used for client to server messages.
|
||||
client: "\t⬅️ [SENT]:\t",
|
||||
// Source used for server to client messages.
|
||||
server: "\t➡️ [RECEIVED]:\t",
|
||||
}
|
||||
|
||||
export function getSourcePrefix(source: keyof typeof sourceEmojis) {
|
||||
return sourceEmojis[source]
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"action": {
|
||||
"autoscroll": "Autoscroll",
|
||||
"cancel": "Cancel",
|
||||
"choose_file": "Choose a file",
|
||||
"clear": "Clear",
|
||||
@@ -25,6 +26,8 @@
|
||||
"remove": "Remove",
|
||||
"restore": "Restore",
|
||||
"save": "Save",
|
||||
"scroll_to_bottom": "Scroll to bottom",
|
||||
"scroll_to_top": "Scroll to top",
|
||||
"search": "Search",
|
||||
"send": "Send",
|
||||
"start": "Start",
|
||||
|
||||
Reference in New Issue
Block a user