From d776777b7e87ce803c2ed8b18955255fe19fc47e Mon Sep 17 00:00:00 2001 From: Akash Ramaswamy <87078332+akash-ramaswamy@users.noreply.github.com> Date: Mon, 11 Dec 2023 02:43:29 +0530 Subject: [PATCH] feat: Moves Jump-To-Context right (#2584) --- assets/auto-imports.d.ts | 4 ++ assets/components.d.ts | 2 + .../components/LogViewer/ComplexLogItem.vue | 3 +- .../components/LogViewer/CopyLogMessage.vue | 39 ------------ .../LogViewer/LogMessageActions.vue | 60 +++++++++++++++++++ assets/components/LogViewer/LogViewer.vue | 19 +----- assets/components/LogViewer/SimpleLogItem.vue | 3 +- .../__snapshots__/LogEventSource.spec.ts.snap | 41 ++++++++----- assets/composable/logSearchContext.ts | 16 +++++ locales/de.yml | 4 +- locales/en.yml | 6 +- locales/es.yml | 4 +- locales/zh.yml | 4 +- 13 files changed, 124 insertions(+), 81 deletions(-) delete mode 100644 assets/components/LogViewer/CopyLogMessage.vue create mode 100644 assets/components/LogViewer/LogMessageActions.vue create mode 100644 assets/composable/logSearchContext.ts diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index ae44add2..3172f6e8 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -68,6 +68,7 @@ declare global { const isReadonly: typeof import('vue')['isReadonly'] const isRef: typeof import('vue')['isRef'] const lightTheme: typeof import('./stores/settings')['lightTheme'] + const logSearchContext: typeof import('./composable/logSearchContext')['logSearchContext'] const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable'] const mapActions: typeof import('pinia')['mapActions'] const mapGetters: typeof import('pinia')['mapGetters'] @@ -237,6 +238,7 @@ declare global { const useLastChanged: typeof import('@vueuse/core')['useLastChanged'] const useLink: typeof import('vue-router')['useLink'] const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage'] + const useLogSearchContext: typeof import('./composable/logSearchContext')['useLogSearchContext'] const useLogStream: typeof import('./composable/eventsource')['useLogStream'] const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys'] const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory'] @@ -588,6 +590,7 @@ declare module 'vue' { readonly useLastChanged: UnwrapRef readonly useLink: UnwrapRef readonly useLocalStorage: UnwrapRef + readonly useLogSearchContext: UnwrapRef readonly useLogStream: UnwrapRef readonly useMagicKeys: UnwrapRef readonly useManualRefHistory: UnwrapRef @@ -932,6 +935,7 @@ declare module '@vue/runtime-core' { readonly useLastChanged: UnwrapRef readonly useLink: UnwrapRef readonly useLocalStorage: UnwrapRef + readonly useLogSearchContext: UnwrapRef readonly useLogStream: UnwrapRef readonly useMagicKeys: UnwrapRef readonly useManualRefHistory: UnwrapRef diff --git a/assets/components.d.ts b/assets/components.d.ts index 970c6fcf..5a1a926c 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -17,6 +17,7 @@ declare module 'vue' { 'Carbon:restart': typeof import('~icons/carbon/restart')['default'] 'Carbon:rowCollapse': typeof import('~icons/carbon/row-collapse')['default'] 'Carbon:rowExpand': typeof import('~icons/carbon/row-expand')['default'] + 'Carbon:searchLocate': typeof import('~icons/carbon/search-locate')['default'] 'Carbon:star': typeof import('~icons/carbon/star')['default'] 'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default'] 'Carbon:stopFilledAlt': typeof import('~icons/carbon/stop-filled-alt')['default'] @@ -49,6 +50,7 @@ declare module 'vue' { LogDate: typeof import('./components/LogViewer/LogDate.vue')['default'] LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default'] LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default'] + LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default'] LogStd: typeof import('./components/LogViewer/LogStd.vue')['default'] LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default'] LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default'] diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue index 4c5b40ca..10061773 100644 --- a/assets/components/LogViewer/ComplexLogItem.vue +++ b/assets/components/LogViewer/ComplexLogItem.vue @@ -22,9 +22,10 @@ - diff --git a/assets/components/LogViewer/CopyLogMessage.vue b/assets/components/LogViewer/CopyLogMessage.vue deleted file mode 100644 index 24b6e41e..00000000 --- a/assets/components/LogViewer/CopyLogMessage.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/assets/components/LogViewer/LogMessageActions.vue b/assets/components/LogViewer/LogMessageActions.vue new file mode 100644 index 00000000..156dcecb --- /dev/null +++ b/assets/components/LogViewer/LogMessageActions.vue @@ -0,0 +1,60 @@ + + + diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue index e1aff591..0b428856 100644 --- a/assets/components/LogViewer/LogViewer.vue +++ b/assets/components/LogViewer/LogViewer.vue @@ -7,15 +7,6 @@ :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }" class="group/entry" > - - - @@ -36,19 +27,13 @@ const { container } = useContainerContext(); const visibleKeys = persistentVisibleKeys(container); const { filteredPayload } = useVisibleFilter(visibleKeys); -const { filteredMessages, resetSearch, isSearching } = useSearchFilter(); +const { filteredMessages } = useSearchFilter(); const { messages } = toRefs(props); const visible = filteredPayload(messages); const filtered = filteredMessages(visible); -let lastSelectedItem: LogEntry | undefined = $ref(undefined); - -function handleJumpLineSelected(e: Event, item: LogEntry) { - lastSelectedItem = item; - resetSearch(); -} - +const { lastSelectedItem } = useLogSearchContext(); const routeHash = useRouteHash(); watch( routeHash, diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue index 8156e2c8..6d90f856 100644 --- a/assets/components/LogViewer/SimpleLogItem.vue +++ b/assets/components/LogViewer/SimpleLogItem.vue @@ -7,9 +7,10 @@ class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap" v-html="colorize(logEntry.message)" > - diff --git a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap index 9dbe8ef0..8817c4be 100644 --- a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap +++ b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap @@ -3,7 +3,6 @@ exports[` > render html correctly > should render dates with 12 hour style 1`] = ` "
  • -
    @@ -11,7 +10,10 @@ exports[` > render html correctly > should render dates with 1
    <test>foo bar</test>
    - +
    + + +
" @@ -20,7 +22,6 @@ exports[` > render html correctly > should render dates with 1 exports[` > render html correctly > should render dates with 24 hour style 1`] = ` "
  • -
    @@ -28,7 +29,10 @@ exports[` > render html correctly > should render dates with 2
    <test>foo bar</test>
    - +
    + + +
" @@ -37,7 +41,6 @@ exports[` > render html correctly > should render dates with 2 exports[` > render html correctly > should render messages 1`] = ` "
  • -
    @@ -45,7 +48,10 @@ exports[` > render html correctly > should render messages 1`]
    This is a message.
    - +
    + + +
" @@ -54,7 +60,6 @@ exports[` > render html correctly > should render messages 1`] exports[` > render html correctly > should render messages with color 1`] = ` "
  • -
    @@ -62,7 +67,10 @@ exports[` > render html correctly > should render messages wit
    blackwhite
    - +
    + + +
" @@ -70,9 +78,7 @@ exports[` > render html correctly > should render messages wit exports[` > render html correctly > should render messages with filter 1`] = ` "
    -
  • - - +
  • @@ -80,7 +86,12 @@ exports[` > render html correctly > should render messages wit
    test bar
    - +
    + +
    + +
    +
" @@ -89,7 +100,6 @@ exports[` > render html correctly > should render messages wit exports[` > render html correctly > should render messages with html entities 1`] = ` "
  • -
    @@ -97,7 +107,10 @@ exports[` > render html correctly > should render messages wit
    <test>foo bar</test>
    - +
    + + +
" diff --git a/assets/composable/logSearchContext.ts b/assets/composable/logSearchContext.ts new file mode 100644 index 00000000..a923efee --- /dev/null +++ b/assets/composable/logSearchContext.ts @@ -0,0 +1,16 @@ +import { JSONObject, LogEntry } from "@/models/LogEntry"; + +const lastSelectedItem = ref | undefined>(undefined); +export const useLogSearchContext = () => { + const { resetSearch } = useSearchFilter(); + + function handleJumpLineSelected(e: Event, item: LogEntry) { + lastSelectedItem.value = item; + resetSearch(); + } + + return { + lastSelectedItem, + handleJumpLineSelected, + }; +}; diff --git a/locales/de.yml b/locales/de.yml index a6a4912a..0905fcc0 100644 --- a/locales/de.yml +++ b/locales/de.yml @@ -87,8 +87,8 @@ releases: two_parts: "{first} und {second}" latest: Latest no_releases: Du hast die aktuellste Version -copy_log: - title: Log kopieren +log_actions: + copy_log: Log kopieren toasts: copied: title: Kopiert diff --git a/locales/en.yml b/locales/en.yml index eaa36d2b..889a1988 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -91,10 +91,10 @@ releases: two_parts: "{first} with {second}" latest: Latest no_releases: You have the latest version -copy_log: - title: Copy log +log_actions: + copy_log: Copy log + jump_to_context: Jump to context toasts: copied: title: Copied message: Log copied to clipboard - diff --git a/locales/es.yml b/locales/es.yml index 4773d5ad..e50bb5ed 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -84,8 +84,8 @@ releases: two_parts: "{features} y {bugFixes}" latest: Último no_releases: No hay lanzamientos -copy_log: - title: Copiar registro +log_actions: + copy_log: Copiar registro toasts: copied: title: Copiado diff --git a/locales/zh.yml b/locales/zh.yml index 8c0e18bc..1e3b8de1 100644 --- a/locales/zh.yml +++ b/locales/zh.yml @@ -74,5 +74,5 @@ settings: 新版本可用！更新到 {nextVersion}。 show-std: 显示stdout和stderr标签 automatic-redirect: 自动重定向到同名的新容器 -copy_log: - title: 复制日志 +log_actions: + copy_log: 复制日志