From 90b9d9768583b651a74357985e23183f7311342e Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Wed, 18 Sep 2024 17:27:46 -0700 Subject: [PATCH] feat: duckdb wasm capibility (#3272) --- assets/auto-imports.d.ts | 13 +- assets/components.d.ts | 2 + .../ContainerActionsToolbar.vue | 28 +- .../components/LogViewer/ComplexLogItem.vue | 5 +- .../components/LogViewer/EventSource.spec.ts | 1 + assets/components/LogViewer/EventSource.vue | 2 +- assets/components/LogViewer/LogAnalytics.vue | 99 +++ assets/components/LogViewer/LogViewer.vue | 11 +- .../components/LogViewer/ViewerWithSource.vue | 9 +- .../__snapshots__/EventSource.spec.ts.snap | 10 - assets/components/Search.vue | 2 +- assets/components/common/SideDrawer.vue | 25 +- assets/composable/drawer.ts | 29 + assets/composable/duckdb.ts | 30 + assets/composable/eventStreams.ts | 15 +- assets/composable/logContext.ts | 3 + assets/composable/showLogDetails.ts | 22 - assets/layouts/default.vue | 9 + data.parquet | Bin 0 -> 2823 bytes docs/.vitepress/config.ts | 1 + docs/guide/sql-engine.md | 57 ++ internal/web/__snapshots__/web.snapshot | 26 +- internal/web/csp.go | 5 +- internal/web/logs.go | 26 +- package.json | 1 + pnpm-lock.yaml | 680 +++++++++++++----- 26 files changed, 851 insertions(+), 260 deletions(-) create mode 100644 assets/components/LogViewer/LogAnalytics.vue create mode 100644 assets/composable/drawer.ts create mode 100644 assets/composable/duckdb.ts delete mode 100644 assets/composable/showLogDetails.ts create mode 100644 data.parquet create mode 100644 docs/guide/sql-engine.md diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index 7253cb61..d5a19bef 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -31,6 +31,7 @@ declare global { const controlledComputed: typeof import('@vueuse/core')['controlledComputed'] const controlledRef: typeof import('@vueuse/core')['controlledRef'] const createApp: typeof import('vue')['createApp'] + const createDrawer: typeof import('./composable/drawer')['createDrawer'] const createEventHook: typeof import('@vueuse/core')['createEventHook'] const createGlobalState: typeof import('@vueuse/core')['createGlobalState'] const createInjectionState: typeof import('@vueuse/core')['createInjectionState'] @@ -47,6 +48,8 @@ declare global { const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] const defineComponent: typeof import('vue')['defineComponent'] const defineStore: typeof import('pinia')['defineStore'] + const drawerContext: typeof import('./composable/drawer')['drawerContext'] + const drwaer: typeof import('./composable/showLogDetails')['drwaer'] const eagerComputed: typeof import('@vueuse/core')['eagerComputed'] const effectScope: typeof import('vue')['effectScope'] const extendRef: typeof import('@vueuse/core')['extendRef'] @@ -62,6 +65,7 @@ declare global { const hashCode: typeof import('./utils/index')['hashCode'] const hourStyle: typeof import('./stores/settings')['hourStyle'] const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch'] + const initDuckDB: typeof import('./composable/duckdb')['initDuckDB'] const inject: typeof import('vue')['inject'] const injectLocal: typeof import('@vueuse/core')['injectLocal'] const isDefined: typeof import('@vueuse/core')['isDefined'] @@ -217,7 +221,9 @@ declare global { const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia'] const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility'] const useDraggable: typeof import('@vueuse/core')['useDraggable'] + const useDrawer: typeof import('./composable/drawer')['useDrawer'] const useDropZone: typeof import('@vueuse/core')['useDropZone'] + const useDuckDB: typeof import('./composable/duckdb')['useDuckDB'] const useElementBounding: typeof import('@vueuse/core')['useElementBounding'] const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint'] const useElementHover: typeof import('@vueuse/core')['useElementHover'] @@ -401,6 +407,7 @@ declare module 'vue' { readonly controlledComputed: UnwrapRef readonly controlledRef: UnwrapRef readonly createApp: UnwrapRef + readonly createDrawer: UnwrapRef readonly createEventHook: UnwrapRef readonly createGlobalState: UnwrapRef readonly createInjectionState: UnwrapRef @@ -417,6 +424,7 @@ declare module 'vue' { readonly defineAsyncComponent: UnwrapRef readonly defineComponent: UnwrapRef readonly defineStore: UnwrapRef + readonly drawerContext: UnwrapRef readonly eagerComputed: UnwrapRef readonly effectScope: UnwrapRef readonly extendRef: UnwrapRef @@ -478,7 +486,6 @@ declare module 'vue' { readonly pinnedContainers: UnwrapRef readonly provide: UnwrapRef readonly provideLocal: UnwrapRef - readonly provideLogDetails: UnwrapRef readonly provideLoggingContext: UnwrapRef readonly provideScrollContext: UnwrapRef readonly reactify: UnwrapRef @@ -508,7 +515,6 @@ declare module 'vue' { readonly shallowReadonly: UnwrapRef readonly shallowRef: UnwrapRef readonly showAllContainers: UnwrapRef - readonly showLogDetails: UnwrapRef readonly showStd: UnwrapRef readonly showTimestamp: UnwrapRef readonly size: UnwrapRef @@ -585,7 +591,9 @@ declare module 'vue' { readonly useDisplayMedia: UnwrapRef readonly useDocumentVisibility: UnwrapRef readonly useDraggable: UnwrapRef + readonly useDrawer: UnwrapRef readonly useDropZone: UnwrapRef + readonly useDuckDB: UnwrapRef readonly useElementBounding: UnwrapRef readonly useElementByPoint: UnwrapRef readonly useElementHover: UnwrapRef @@ -620,7 +628,6 @@ declare module 'vue' { readonly useKeyModifier: UnwrapRef readonly useLastChanged: UnwrapRef readonly useLocalStorage: UnwrapRef - readonly useLogDetails: UnwrapRef readonly useLoggingContext: UnwrapRef readonly useMagicKeys: UnwrapRef readonly useManualRefHistory: UnwrapRef diff --git a/assets/components.d.ts b/assets/components.d.ts index 44f0617b..3b40ba7a 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -46,6 +46,7 @@ declare module 'vue' { KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default'] LabeledInput: typeof import('./components/common/LabeledInput.vue')['default'] Links: typeof import('./components/Links.vue')['default'] + LogAnalytics: typeof import('./components/LogViewer/LogAnalytics.vue')['default'] LogDate: typeof import('./components/LogViewer/LogDate.vue')['default'] LogDetails: typeof import('./components/LogViewer/LogDetails.vue')['default'] LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default'] @@ -85,6 +86,7 @@ declare module 'vue' { 'Ph:computerTower': typeof import('~icons/ph/computer-tower')['default'] 'Ph:controlBold': typeof import('~icons/ph/control-bold')['default'] 'Ph:cpu': typeof import('~icons/ph/cpu')['default'] + 'Ph:fileSql': typeof import('~icons/ph/file-sql')['default'] 'Ph:globeSimple': typeof import('~icons/ph/globe-simple')['default'] 'Ph:memory': typeof import('~icons/ph/memory')['default'] 'Ph:stack': typeof import('~icons/ph/stack')['default'] diff --git a/assets/components/ContainerViewer/ContainerActionsToolbar.vue b/assets/components/ContainerViewer/ContainerActionsToolbar.vue index 608b202f..1714546f 100644 --- a/assets/components/ContainerViewer/ContainerActionsToolbar.vue +++ b/assets/components/ContainerViewer/ContainerActionsToolbar.vue @@ -20,6 +20,12 @@ +
  • + + SQL Analytics + + +
  • import { Container } from "@/models/Container"; +import LogAnalytics from "../LogViewer/LogAnalytics.vue"; const { showSearch } = useSearchFilter(); const { enableActions } = config; - -const clear = defineEmit(); - -const { streamConfig } = useLoggingContext(); +const { streamConfig, hasComplexLogs } = useLoggingContext(); +const showDrawer = useDrawer(); const { container } = defineProps<{ container: Container }>(); - +const clear = defineEmit(); const { actionStates, start, stop, restart } = useContainerActions(toRef(() => container)); +onKeyStroke("f", (e) => { + if (hasComplexLogs.value) { + if ((e.ctrlKey || e.metaKey) && e.shiftKey) { + showDrawer(LogAnalytics, { container }, "lg"); + e.preventDefault(); + } + } +}); + const downloadParams = computed(() => Object.entries(toValue(streamConfig)) .filter(([, value]) => value) @@ -126,9 +140,7 @@ const downloadUrl = computed(() => ), ); -const disableRestart = computed(() => { - return actionStates.stop || actionStates.start || actionStates.restart; -}); +const disableRestart = computed(() => actionStates.stop || actionStates.start || actionStates.restart); diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue index 517f8e69..b03f0c00 100644 --- a/assets/components/LogViewer/LogViewer.vue +++ b/assets/components/LogViewer/LogViewer.vue @@ -1,13 +1,9 @@