Show fileStorageTotal, deploymentsStorageTotal and buildsStorageTotal on organisation progress bar

2026-04-07 19:17:46 +00:00 · 2024-09-16 16:46:09 +02:00
parent ed38bed089
commit 96bed76995
8 changed files with 166 additions and 131 deletions
@@ -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",
@@ -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",
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ProgressBar } from '$lib/components/progressbar';
+    import { ProgressBar, type ProgressbarData } from '$lib/components/progressbar';

    export let currentValue: string;
    export let currentUnit: string;
@@ -8,8 +8,7 @@
    export let progressValue: number;
    export let progressMax: number;
    export let showBar = true;
-    export let minimum = 0;
-    export let maximum = 100;
+    export let progressBarData: Array<ProgressbarData> = [];

    $: progress = Math.round((progressValue / progressMax) * 100);
 </script>
@@ -28,12 +27,7 @@
            {maxUnit}
        </p>
    </div>
-    {#if showBar}
-        <ProgressBar maxSize={100} data={[{size: 10, color: '#85DBD8', tooltip: {title: "First Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 20, color: '#68A3FE59', tooltip: {title: "Second Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 10, color: '#7C67FE59', tooltip: {title: "Third Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}}]}/>
-<!--        <div-->
-<!--            class="progress-bar-container u-margin-block-start-16"-->
-<!--            class:is-warning={progress >= 75 && progress < 100}-->
-<!--            class:is-danger={progress >= 100}-->
-<!--            style:&#45;&#45;graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />-->
+    {#if showBar && progressBarData.length > 0}
+        <ProgressBar maxSize={progressMax} data={progressBarData} />
    {/if}
 </section>
@@ -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
+    );
 </script>
+
 <section class="progressbar__container">
    {#each $$props.data as item}
-        <div class="progressbar__content" style="background-color:{item.color}; width: {(item.size/maxSize)*100}%;">
+        <div
+            class="progressbar__content"
+            style="background-color:{item.color}; width: {(item.size / maxSize) * 100}%;">
            {#if item.tooltip}
-                <div class="progressbar__content-tooltip">
+                <div
+                    class="progressbar__content-tooltip"
+                    class:progressbar__content-tooltip--has-link={item.tooltip.linkPath &&
+                        item.tooltip.linkTitle}>
                    <div>
-                    <span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
-                    <span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
+                        <span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
+                        <span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
                    </div>
-                        <a href="{item.tooltip.linkPath}">{item.tooltip.linkTitle}</a>
+                    {#if item.tooltip.linkPath && item.tooltip.linkTitle}
+                        <a href={item.tooltip.linkPath}>{item.tooltip.linkTitle}</a>
+                    {/if}
                </div>
            {/if}
        </div>
    {/each}
    {#if remainder > 0}
-        <div class="progressbar__content" style="width: {(remainder/maxSize)*100}%;"/>
+        <div class="progressbar__content" style="width: {(remainder / maxSize) * 100}%;" />
    {/if}
 </section>

-
 <style lang="scss">
    @use './progressbar';
    @include progressbar.base;
-</style>
+</style>
@@ -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);
    }

-  }
-}
+    .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;
+                }
+            }
+        }
+    }
+}
@@ -4,8 +4,8 @@ export type ProgressbarData = {
    tooltip?: {
        title: string;
        label: string;
-        linkTitle: string;
-        linkPath: string;
+        linkTitle?: string;
+        linkPath?: string;
    };
 };

@@ -178,6 +178,9 @@ export type OrganizationUsage = {
    bandwidth: Array<Models.Metric>;
    executions: Array<Models.Metric>;
    executionsTotal: number;
+    filesStorageTotal: number;
+    buildsStorageTotal: number;
+    deploymentsStorageTotal: number;
    storageTotal: number;
    users: Array<Models.Metric>;
    usersTotal: number;
@@ -1,6 +1,6 @@
 <script lang="ts">
    import { Container } from '$lib/layout';
-    import { Card, CardGrid, Heading, ProgressBarBig, ProgressBar } from '$lib/components';
+    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
    import {
        getServiceLimit,
        showUsageRatesModal,
@@ -282,6 +282,32 @@
                {@const current = data.organizationUsage.storageTotal}
                {@const currentHumanized = humanFileSize(current)}
                {@const max = getServiceLimit('storage', tier)}
+                {@const progressBarStorageDate = [
+                    {
+                        size: bytesToSize(data.organizationUsage.filesStorageTotal, 'GB'),
+                        color: '#85DBD8',
+                        tooltip: {
+                            title: 'File storage total',
+                            label: `${Math.round(bytesToSize(data.organizationUsage.filesStorageTotal, 'GB') * 100) / 100}GB`
+                        }
+                    },
+                    {
+                        size: bytesToSize(data.organizationUsage.deploymentsStorageTotal, 'GB'),
+                        color: '#7C67FE',
+                        tooltip: {
+                            title: 'Deployments storage',
+                            label: `${Math.round(bytesToSize(data.organizationUsage.deploymentsStorageTotal, 'GB') * 100) / 100}GB`
+                        }
+                    },
+                    {
+                        size: bytesToSize(data.organizationUsage.buildsStorageTotal, 'GB'),
+                        color: '#FE9567',
+                        tooltip: {
+                            title: 'Builds storage',
+                            label: `${Math.round(bytesToSize(data.organizationUsage.buildsStorageTotal, 'GB') * 100) / 100}GB`
+                        }
+                    }
+                ]}
                <ProgressBarBig
                    currentUnit={currentHumanized.unit}
                    currentValue={currentHumanized.value}
@@ -289,7 +315,7 @@
                    maxValue={max.toString()}
                    progressValue={bytesToSize(current, 'GB')}
                    progressMax={max}
-                    minimum={1} />
+                    progressBarData={progressBarStorageDate} />
                {#if project?.length > 0}
                    <ProjectBreakdown projects={project} metric="storage" {data} />
                {/if}