From 96bed76995a405b5a42e01cc81f4eaaa360b9919 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Mon, 16 Sep 2024 16:46:09 +0200 Subject: [PATCH] Show fileStorageTotal, deploymentsStorageTotal and buildsStorageTotal on organisation progress bar --- package-lock.json | 9 +- package.json | 2 +- src/lib/components/progressBarBig.svelte | 14 +- .../components/progressbar/ProgressBar.svelte | 29 ++- .../components/progressbar/_progressbar.scss | 206 +++++++++--------- src/lib/components/progressbar/index.ts | 4 +- src/lib/sdk/billing.ts | 3 + .../usage/[[invoice]]/+page.svelte | 30 ++- 8 files changed, 166 insertions(+), 131 deletions(-) diff --git a/package-lock.json b/package-lock.json index 49a318689..e4c198cce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "": { "name": "@appwrite/console", "dependencies": { - "@appwrite.io/console": "1.0.0", + "@appwrite.io/console": "^1.2.0", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@popperjs/core": "^2.11.8", @@ -147,9 +147,10 @@ "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==" }, "node_modules/@appwrite.io/console": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-1.0.0.tgz", - "integrity": "sha512-gELdhiddTTwaz2wYBdTnkG8/r48dTwJfpFD+hjbfyxIMDUGtP/wDfkdcb4+2Cu9726YxkihyvGKxyQxtlJAMDA==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-1.2.0.tgz", + "integrity": "sha512-VglATKgjuhr9jYihz500VbqghOY/695aDwhXtx3beLMzvjjFK+eN+5BOgcNMTj01COl3kBu4wrvbXpDmVemStA==", + "license": "BSD-3-Clause" }, "node_modules/@appwrite.io/pink": { "version": "0.25.0", diff --git a/package.json b/package.json index 76e3f287e..d32370db7 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "1.0.1", + "@appwrite.io/console": "^1.2.0", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@popperjs/core": "^2.11.8", diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte index f3d19c36d..9c9612e33 100644 --- a/src/lib/components/progressBarBig.svelte +++ b/src/lib/components/progressBarBig.svelte @@ -1,5 +1,5 @@ @@ -28,12 +27,7 @@ {maxUnit}

- {#if showBar} - - - - - - + {#if showBar && progressBarData.length > 0} + {/if} diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte index e3810d0ac..2d6ea3ede 100644 --- a/src/lib/components/progressbar/ProgressBar.svelte +++ b/src/lib/components/progressbar/ProgressBar.svelte @@ -11,30 +11,39 @@ /** * The remaining value of the progressbar */ - let remainder = $$props.data.reduce((sum:number, item:ProgressbarData) => sum - item.size, maxSize); - + let remainder = $$props.data.reduce( + (sum: number, item: ProgressbarData) => sum - item.size, + maxSize + ); +
{#each $$props.data as item} -
+
{#if item.tooltip} -
+
- {item.tooltip.title} - {item.tooltip.label} + {item.tooltip.title} + {item.tooltip.label}
- {item.tooltip.linkTitle} + {#if item.tooltip.linkPath && item.tooltip.linkTitle} + {item.tooltip.linkTitle} + {/if}
{/if}
{/each} {#if remainder > 0} -
+
{/if}
- \ No newline at end of file + diff --git a/src/lib/components/progressbar/_progressbar.scss b/src/lib/components/progressbar/_progressbar.scss index 9bb4cb070..ab55b5ca4 100644 --- a/src/lib/components/progressbar/_progressbar.scss +++ b/src/lib/components/progressbar/_progressbar.scss @@ -1,107 +1,109 @@ @mixin base { - - :root { - --progressbar-border-radius: 0.25rem; - --progressbar-tooltip-background-color: #FFFFFF; - --progressbar-tooltip-border-color: #EDEDF0; - --progressbar-tooltip-label-color: #818186; - --progressbar-tooltip-link-color: #6C6C71; - } - - :global(.theme-dark) { - --progressbar-background-color: var(--neutral-800,#2D2D31); - } - :global(.theme-light) { - --progressbar-background-color: var(--neutral-40, #F4F4F7); - } - - .progressbar { - - &__container { - height: 0.5rem; - background-color: var(--progressbar-background-color); - border-radius: var(--progressbar-border-radius); - display: flex; - flex-direction: row; - gap: 2px; + :root { + --progressbar-border-radius: 0.25rem; + --progressbar-tooltip-background-color: #ffffff; + --progressbar-tooltip-border-color: #ededf0; + --progressbar-tooltip-label-color: #818186; + --progressbar-tooltip-link-color: #6c6c71; } - &__content { - height: 100%; - display: flex; - justify-content: center; - - &::before { - content: ""; - height: 2.5rem; - margin-top: -1.25rem; - width: 100%; - } - - &:first-child { - border-top-left-radius: var(--progressbar-border-radius); - border-bottom-left-radius: var(--progressbar-border-radius); - } - &:last-child { - border-top-right-radius: var(--progressbar-border-radius); - border-bottom-right-radius: var(--progressbar-border-radius); - } - - &-tooltip { - display: none; - position: absolute; - background-color: var(--progressbar-tooltip-background-color); - padding: 0.75rem; - margin-top: -5.25rem; - border: 1px solid var(--progressbar-tooltip-border-color); - border-radius: 0.5rem; - flex-direction: column; - gap: 0.25rem; - - &::before, &::after { - top: 100%; - left: 50%; - border: solid transparent; - content: ""; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - &::after { - border-top-color: var(--progressbar-tooltip-background-color); - border-width: 10px; - margin-left: -10px; - } - &::before { - border-top-color: var(--progressbar-tooltip-border-color);; - border-width: 11px; - margin-left: -11px; - } - &:hover { - display: flex; - } - - &-title { - font-weight: 600; - margin-right: 0.5rem; - } - &-label { - color: var(--progressbar-tooltip-label-color); - } - - a{ - color: var(--progressbar-tooltip-link-color); - text-decoration: underline; - } - } - - &:hover { - .progressbar__content-tooltip { - display: flex; - } - } + :global(.theme-dark) { + --progressbar-background-color: var(--neutral-800, #2d2d31); + } + :global(.theme-light) { + --progressbar-background-color: var(--neutral-40, #f4f4f7); } - } -} \ No newline at end of file + .progressbar { + &__container { + height: 0.5rem; + background-color: var(--progressbar-background-color); + border-radius: var(--progressbar-border-radius); + display: flex; + flex-direction: row; + gap: 2px; + } + + &__content { + height: 100%; + display: flex; + justify-content: center; + + &::before { + content: ''; + height: 2.5rem; + margin-top: -1.25rem; + width: 100%; + } + + &:first-child { + border-top-left-radius: var(--progressbar-border-radius); + border-bottom-left-radius: var(--progressbar-border-radius); + } + &:last-child { + border-top-right-radius: var(--progressbar-border-radius); + border-bottom-right-radius: var(--progressbar-border-radius); + } + + &-tooltip { + display: none; + position: absolute; + background-color: var(--progressbar-tooltip-background-color); + padding: 0.75rem; + margin-top: -3.75rem; + border: 1px solid var(--progressbar-tooltip-border-color); + border-radius: 0.5rem; + flex-direction: column; + gap: 0.25rem; + + &--has-link { + margin-top: -5.25rem; + } + + &::before, + &::after { + top: 100%; + left: 50%; + border: solid transparent; + content: ''; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + &::after { + border-top-color: var(--progressbar-tooltip-background-color); + border-width: 10px; + margin-left: -10px; + } + &::before { + border-top-color: var(--progressbar-tooltip-border-color); + border-width: 11px; + margin-left: -11px; + } + &:hover { + display: flex; + } + + &-title { + font-weight: 600; + margin-right: 0.5rem; + } + &-label { + color: var(--progressbar-tooltip-label-color); + } + + a { + color: var(--progressbar-tooltip-link-color); + text-decoration: underline; + } + } + + &:hover { + .progressbar__content-tooltip { + display: flex; + } + } + } + } +} diff --git a/src/lib/components/progressbar/index.ts b/src/lib/components/progressbar/index.ts index 676495a7a..a7ec1ba01 100644 --- a/src/lib/components/progressbar/index.ts +++ b/src/lib/components/progressbar/index.ts @@ -4,8 +4,8 @@ export type ProgressbarData = { tooltip?: { title: string; label: string; - linkTitle: string; - linkPath: string; + linkTitle?: string; + linkPath?: string; }; }; diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts index f0fd8ec08..ba68502fc 100644 --- a/src/lib/sdk/billing.ts +++ b/src/lib/sdk/billing.ts @@ -178,6 +178,9 @@ export type OrganizationUsage = { bandwidth: Array; executions: Array; executionsTotal: number; + filesStorageTotal: number; + buildsStorageTotal: number; + deploymentsStorageTotal: number; storageTotal: number; users: Array; usersTotal: number; diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte index 587fb6fae..769987f32 100644 --- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte +++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte @@ -1,6 +1,6 @@