chore: split app to commons and web (squash commit)
This commit is contained in:
Andrew Bastin
402
packages/hoppscotch-common/src/components/realtime/LogEntry.vue
Normal file
402
packages/hoppscotch-common/src/components/realtime/LogEntry.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<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">
|
||||
<component
|
||||
:is="icon"
|
||||
:style="{ color: iconColor }"
|
||||
@click="copyQuery(entry.payload)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="entry.ts !== undefined"
|
||||
class="items-center hidden px-1 w-34 sm:inline-flex"
|
||||
>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="relativeTime"
|
||||
class="mx-auto truncate ts-font text-secondaryLight hover:text-secondary hover:text-center"
|
||||
>
|
||||
{{ shortDateTime(entry.ts) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="inline-grid items-center flex-1 min-w-0 p-2"
|
||||
@click="toggleExpandPayload()"
|
||||
>
|
||||
<div class="truncate">
|
||||
<span v-if="entry.prefix !== undefined" class="!inline">{{
|
||||
entry.prefix
|
||||
}}</span>
|
||||
{{ entry.payload }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.copy')"
|
||||
:icon="copyQueryIcon"
|
||||
class="hidden group-hover:inline-flex"
|
||||
@click="copyQuery(entry.payload)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
:icon="IconChevronDown"
|
||||
class="transform"
|
||||
:class="{ 'rotate-180': !minimized }"
|
||||
@click="toggleExpandPayload()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!minimized" class="overflow-hidden bg-primaryContrast">
|
||||
<SmartTabs
|
||||
v-model="selectedTab"
|
||||
styles="bg-primaryLight"
|
||||
render-inactive-tabs
|
||||
>
|
||||
<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 truncate text-secondaryLight">
|
||||
{{ t("response.body") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
:icon="IconWrapText"
|
||||
@click.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.download_file')"
|
||||
:icon="downloadIcon"
|
||||
@click="downloadResponse"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('action.copy')"
|
||||
:icon="copyIcon"
|
||||
@click="copyResponse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="editor"></div>
|
||||
<div
|
||||
v-if="outlinePath && selectedTab === 'json'"
|
||||
class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in outlinePath"
|
||||
:key="`item-${index}`"
|
||||
class="flex items-center"
|
||||
>
|
||||
<tippy
|
||||
interactive
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
:on-shown="() => tippyActions.focus()"
|
||||
>
|
||||
<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 #content="{ hide }">
|
||||
<div
|
||||
v-if="
|
||||
item.kind === 'ArrayMember' || item.kind === 'ObjectMember'
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember'"
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(arrayMember, astIndex) in item.astParent.values"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="`${astIndex}`"
|
||||
@click="
|
||||
() => {
|
||||
jumpCursor(arrayMember)
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.kind === 'ObjectMember'"
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(objectMember, astIndex) in item.astParent.members"
|
||||
:key="`ast-${astIndex}`"
|
||||
:label="objectMember.key.value"
|
||||
@click="
|
||||
() => {
|
||||
jumpCursor(objectMember)
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.kind === 'RootObject'"
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
>
|
||||
<SmartItem
|
||||
label="{}"
|
||||
@click="
|
||||
() => {
|
||||
jumpCursor(item.astValue)
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.kind === 'RootArray'"
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
>
|
||||
<SmartItem
|
||||
label="[]"
|
||||
@click="
|
||||
() => {
|
||||
jumpCursor(item.astValue)
|
||||
hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
<icon-lucide-chevron-right
|
||||
v-if="index + 1 !== outlinePath.length"
|
||||
class="opacity-50 text-secondaryLight svg-icons"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>{{ t("response.waiting_for_connection") }}</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import IconInfo from "~icons/lucide/info"
|
||||
import IconUpRight from "~icons/lucide/arrow-up-right"
|
||||
import IconDownLeft from "~icons/lucide/arrow-down-left"
|
||||
import IconCopy from "~icons/lucide/copy"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import IconChevronDown from "~icons/lucide/chevron-down"
|
||||
import IconWrapText from "~icons/lucide/wrap-text"
|
||||
import * as LJSON from "lossless-json"
|
||||
import * as O from "fp-ts/Option"
|
||||
import { pipe } from "fp-ts/function"
|
||||
import { ref, computed, reactive, watch, markRaw } from "vue"
|
||||
import { refAutoReset, useTimeAgo } from "@vueuse/core"
|
||||
import { LogEntryData } from "./Log.vue"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { copyToClipboard } from "~/helpers/utils/clipboard"
|
||||
import { isJSON } from "~/helpers/functional/json"
|
||||
import { useCopyResponse, useDownloadResponse } from "@composables/lens-actions"
|
||||
import { useCodemirror } from "@composables/codemirror"
|
||||
import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
|
||||
import { getJSONOutlineAtPos } from "~/helpers/newOutline"
|
||||
import {
|
||||
convertIndexToLineCh,
|
||||
convertLineChToIndex,
|
||||
} from "~/helpers/editor/utils"
|
||||
import { shortDateTime } from "~/helpers/utils/date"
|
||||
|
||||
const t = useI18n()
|
||||
|
||||
const props = defineProps<{ entry: LogEntryData }>()
|
||||
|
||||
// Template refs
|
||||
const tippyActions = 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 = refAutoReset<typeof IconCopy | typeof IconCheck>(
|
||||
IconCopy,
|
||||
1000
|
||||
)
|
||||
|
||||
const copyQuery = (entry: string) => {
|
||||
copyToClipboard(entry)
|
||||
copyQueryIcon.value = IconCheck
|
||||
}
|
||||
|
||||
// Relative Time
|
||||
// TS could be undefined here. We're just assigning a default value to 0 because we're not showing it in the UI
|
||||
const relativeTime = useTimeAgo(computed(() => props.entry.ts ?? 0))
|
||||
|
||||
const ENTRY_COLORS = {
|
||||
connected: "#10b981",
|
||||
connecting: "#10b981",
|
||||
error: "#ff5555",
|
||||
disconnected: "#ff5555",
|
||||
} as const
|
||||
|
||||
// Assigns color based on entry event
|
||||
const entryColor = computed(() => ENTRY_COLORS[props.entry.event])
|
||||
|
||||
const ICONS = {
|
||||
info: {
|
||||
icon: IconInfo,
|
||||
iconColor: "#10b981",
|
||||
},
|
||||
client: {
|
||||
icon: IconUpRight,
|
||||
iconColor: "#eaaa45",
|
||||
},
|
||||
server: {
|
||||
icon: IconDownLeft,
|
||||
iconColor: "#38d4ea",
|
||||
},
|
||||
disconnected: {
|
||||
icon: IconInfo,
|
||||
iconColor: "#ff5555",
|
||||
},
|
||||
} as const
|
||||
|
||||
const iconColor = computed(() => ICONS[props.entry.source].iconColor)
|
||||
const icon = computed(() => markRaw(ICONS[props.entry.source].icon))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.realtime-log {
|
||||
@apply text-secondary;
|
||||
@apply overflow-hidden;
|
||||
@apply hover:cursor-nsResize;
|
||||
|
||||
&,
|
||||
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>
|
||||
Reference in New Issue
Block a user