From 076f62bac753cd998a46300ef4115f2e8217bbd0 Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Tue, 15 Aug 2023 14:16:32 -0700 Subject: [PATCH] feat: allows containers to be pinned (#2350) * feat: allows containers to be pinned * adds animation * clean up * updates int test * fixes tests --- assets/auto-imports.d.ts | 7 ++ assets/components.d.ts | 2 + .../components/LogViewer/ContainerTitle.vue | 25 +++++-- assets/components/SideMenu.vue | 67 +++++++++++++++--- assets/composables/storage.ts | 17 +++-- assets/models/Container.ts | 4 ++ assets/pages/index.vue | 4 ++ e2e/auth.spec.ts | 2 +- e2e/default.spec.ts | 2 +- .../dark-homepage-1-chromium-linux.png | Bin 11974 -> 11971 bytes .../default-homepage-1-chromium-linux.png | Bin 11331 -> 11350 bytes locales/en.yml | 1 + 12 files changed, 110 insertions(+), 21 deletions(-) diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index 630293b0..a2615e10 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -60,6 +60,7 @@ declare global { const isDefined: typeof import('@vueuse/core')['isDefined'] const isMobile: typeof import('./composables/media')['isMobile'] const isObject: typeof import('./utils/index')['isObject'] + const isPinnedContainer: typeof import('./composables/storage')['isPinnedContainer'] const isProxy: typeof import('vue')['isProxy'] const isReactive: typeof import('vue')['isReactive'] const isReadonly: typeof import('vue')['isReadonly'] @@ -95,6 +96,7 @@ declare global { const onUpdated: typeof import('vue')['onUpdated'] const pausableWatch: typeof import('@vueuse/core')['pausableWatch'] const persistentVisibleKeys: typeof import('./composables/storage')['persistentVisibleKeys'] + const pinnedContainers: typeof import('./composables/storage')['pinnedContainers'] const provide: typeof import('vue')['provide'] const reactify: typeof import('@vueuse/core')['reactify'] const reactifyObject: typeof import('@vueuse/core')['reactifyObject'] @@ -139,6 +141,7 @@ declare global { const toRef: typeof import('vue')['toRef'] const toRefs: typeof import('vue')['toRefs'] const toValue: typeof import('vue')['toValue'] + const togglePinnedContainer: typeof import('./composables/storage')['togglePinnedContainer'] const triggerRef: typeof import('vue')['triggerRef'] const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount'] const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount'] @@ -432,6 +435,7 @@ declare module 'vue' { readonly onUpdated: UnwrapRef readonly pausableWatch: UnwrapRef readonly persistentVisibleKeys: UnwrapRef + readonly pinnedContainers: UnwrapRef readonly provide: UnwrapRef readonly reactify: UnwrapRef readonly reactifyObject: UnwrapRef @@ -476,6 +480,7 @@ declare module 'vue' { readonly toRef: UnwrapRef readonly toRefs: UnwrapRef readonly toValue: UnwrapRef + readonly togglePinnedContainer: UnwrapRef readonly triggerRef: UnwrapRef readonly tryOnBeforeMount: UnwrapRef readonly tryOnBeforeUnmount: UnwrapRef @@ -763,6 +768,7 @@ declare module '@vue/runtime-core' { readonly onUpdated: UnwrapRef readonly pausableWatch: UnwrapRef readonly persistentVisibleKeys: UnwrapRef + readonly pinnedContainers: UnwrapRef readonly provide: UnwrapRef readonly reactify: UnwrapRef readonly reactifyObject: UnwrapRef @@ -807,6 +813,7 @@ declare module '@vue/runtime-core' { readonly toRef: UnwrapRef readonly toRefs: UnwrapRef readonly toValue: UnwrapRef + readonly togglePinnedContainer: UnwrapRef readonly triggerRef: UnwrapRef readonly tryOnBeforeMount: UnwrapRef readonly tryOnBeforeUnmount: UnwrapRef diff --git a/assets/components.d.ts b/assets/components.d.ts index 8a63428c..97a9133b 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -11,6 +11,8 @@ declare module 'vue' { 'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default'] 'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default'] 'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default'] + 'Carbon:star': typeof import('~icons/carbon/star')['default'] + 'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default'] 'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default'] 'Cil:circle': typeof import('~icons/cil/circle')['default'] 'Cil:columns': typeof import('~icons/cil/columns')['default'] diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue index b8965902..a07269ff 100644 --- a/assets/components/LogViewer/ContainerTitle.vue +++ b/assets/components/LogViewer/ContainerTitle.vue @@ -1,11 +1,15 @@ @@ -15,10 +19,23 @@ import { Container } from "@/models/Container"; import { type ComputedRef } from "vue"; const container = inject("container") as ComputedRef; +const pinned = computed(() => pinnedContainers.value.has(container.value.storageKey)); diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue index 284f0d88..ccc0aed4 100644 --- a/assets/components/SideMenu.vue +++ b/assets/components/SideMenu.vue @@ -5,9 +5,6 @@
  • {{ hosts[sessionHost].name }}
    • -
  • - {{ $t("label.containers") }} -
    • -
      -
    • - + +
    • +
      + {{ item.label }} +
      +
      • -
    +