diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index 1846b0e9..7a06a0dd 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -205,6 +205,7 @@ declare global { const useClipboard: typeof import('@vueuse/core').useClipboard const useClipboardItems: typeof import('@vueuse/core').useClipboardItems const useCloned: typeof import('@vueuse/core').useCloned + const useCloudConfig: typeof import('./composable/cloudConfig').useCloudConfig const useColorMode: typeof import('@vueuse/core').useColorMode const useConfirmDialog: typeof import('@vueuse/core').useConfirmDialog const useContainerActions: typeof import('./composable/containerActions').useContainerActions @@ -634,6 +635,7 @@ declare module 'vue' { readonly useClipboard: UnwrapRef readonly useClipboardItems: UnwrapRef readonly useCloned: UnwrapRef + readonly useCloudConfig: UnwrapRef readonly useColorMode: UnwrapRef readonly useConfirmDialog: UnwrapRef readonly useContainerActions: UnwrapRef diff --git a/assets/components.d.ts b/assets/components.d.ts index ee23ed9d..d83c235c 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -36,6 +36,8 @@ declare module 'vue' { 'Cil:columns': typeof import('~icons/cil/columns')['default'] 'Cil:xCircle': typeof import('~icons/cil/x-circle')['default'] CloudDestinationForm: typeof import('./components/Notification/CloudDestinationForm.vue')['default'] + CloudPopover: typeof import('./components/CloudPopover.vue')['default'] + CloudSettingsCard: typeof import('./components/CloudSettingsCard.vue')['default'] ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default'] ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default'] ContainerDropdown: typeof import('./components/ContainerDropdown.vue')['default'] @@ -102,7 +104,6 @@ declare module 'vue' { 'Mdi:chartBar': typeof import('~icons/mdi/chart-bar')['default'] 'Mdi:chartLine': typeof import('~icons/mdi/chart-line')['default'] 'Mdi:check': typeof import('~icons/mdi/check')['default'] - 'Mdi:checkCircle': typeof import('~icons/mdi/check-circle')['default'] 'Mdi:chevronDoubleDown': typeof import('~icons/mdi/chevron-double-down')['default'] 'Mdi:chevronDown': typeof import('~icons/mdi/chevron-down')['default'] 'Mdi:chevronLeft': typeof import('~icons/mdi/chevron-left')['default'] @@ -121,6 +122,7 @@ declare module 'vue' { 'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default'] 'Mdi:lightningBolt': typeof import('~icons/mdi/lightning-bolt')['default'] 'Mdi:linkVariant': typeof import('~icons/mdi/link-variant')['default'] + 'Mdi:linkVariantOff': typeof import('~icons/mdi/link-variant-off')['default'] 'Mdi:magnify': typeof import('~icons/mdi/magnify')['default'] 'Mdi:pencilOutline': typeof import('~icons/mdi/pencil-outline')['default'] 'Mdi:plus': typeof import('~icons/mdi/plus')['default'] diff --git a/assets/components/CloudPopover.vue b/assets/components/CloudPopover.vue new file mode 100644 index 00000000..b0a90a54 --- /dev/null +++ b/assets/components/CloudPopover.vue @@ -0,0 +1,141 @@ + + + diff --git a/assets/components/CloudSettingsCard.vue b/assets/components/CloudSettingsCard.vue new file mode 100644 index 00000000..332088f4 --- /dev/null +++ b/assets/components/CloudSettingsCard.vue @@ -0,0 +1,151 @@ + + + diff --git a/assets/components/Links.vue b/assets/components/Links.vue index e9fc6e2b..6d97270e 100644 --- a/assets/components/Links.vue +++ b/assets/components/Links.vue @@ -12,6 +12,8 @@ + + (); const callbackUrl = `${window.location.origin}${withBase("/")}`; -const cloudLinkUrl = `${__CLOUD_URL__}/link?appUrl=${encodeURIComponent(callbackUrl)}`; +const cloudLinkUrl = `${__CLOUD_URL__}/link?appUrl=${encodeURIComponent(callbackUrl)}&from=notifications`; const cloudSettingsUrl = `${__CLOUD_URL__}/settings`; -// Cloud status -interface CloudStatus { - user: { email: string; name: string }; - plan: { name: string; events_per_month: number; retention_days: number }; - usage: { events_used: number; events_limit: number; period: string }; -} - -const cloudStatus = ref(null); -const cloudStatusError = ref(false); -const isLoadingCloudStatus = ref(false); +const { cloudStatus, cloudStatusError, isLoadingCloudStatus, fetchCloudStatus } = useCloudConfig(); const usagePercent = computed(() => { if (!cloudStatus.value) return 0; return (cloudStatus.value.usage.events_used / cloudStatus.value.usage.events_limit) * 100; }); -async function fetchCloudStatus() { - isLoadingCloudStatus.value = true; - cloudStatusError.value = false; - try { - const res = await fetch(withBase("/api/cloud/status")); - if (!res.ok) { - cloudStatusError.value = true; - return; - } - cloudStatus.value = await res.json(); - } catch { - cloudStatusError.value = true; - } finally { - isLoadingCloudStatus.value = false; - } -} - if (destination?.prefix) { fetchCloudStatus(); } diff --git a/assets/components/Notification/DestinationCard.vue b/assets/components/Notification/DestinationCard.vue index 5e863d62..0bd4aa03 100644 --- a/assets/components/Notification/DestinationCard.vue +++ b/assets/components/Notification/DestinationCard.vue @@ -27,7 +27,7 @@
  • {{ $t("notifications.destination.edit") }}
  • -
  • +
  • {{ $t("notifications.destination.delete") }}
  • diff --git a/assets/components/Notification/DestinationForm.vue b/assets/components/Notification/DestinationForm.vue index 7a13fb2b..5677898b 100644 --- a/assets/components/Notification/DestinationForm.vue +++ b/assets/components/Notification/DestinationForm.vue @@ -2,30 +2,33 @@

    - {{ - isEditing - ? $t("notifications.destination-form.edit-title") - : $t("notifications.destination-form.create-title") - }} + +

    -

    {{ $t("notifications.destination-form.description") }}

    +

    + + +

    - -
    - -
    -
    {{ $t("notifications.cloud-link-success.title") }}
    -
    {{ $t("notifications.cloud-link-success.message") }}
    -
    -
    - - -
    + +
    {{ $t("notifications.destination-form.type") }}