Skip to content

Commit 5497a3c

Browse files
eldadfuxeldadfux
authored
Merge pull request #1639 from appwrite/fix-project-break-down
Hide project breakdown if the metric doesn't exist for projects
2 parents a160fe0 + 9db3a1f commit 5497a3c

File tree

3 files changed

+101
-95
lines changed

3 files changed

+101
-95
lines changed

‎src/lib/sdk/billing.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,8 @@ export type OrganizationUsage = {
198198
storage: number;
199199
executions: number;
200200
bandwidth: number;
201+
databasesReads: number;
202+
databasesWrites: number;
201203
users: number;
202204
authPhoneTotal: number;
203205
authPhoneEstimate: number;

‎src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
: (data?.currentInvoice?.plan ?? $organization?.billingPlan);
2929
const plan = data?.plan ?? undefined;
3030
31-
$: project = (data.organizationUsage as OrganizationUsage).projects;
31+
$: projects = (data.organizationUsage as OrganizationUsage).projects;
3232
3333
$: legendData = [
3434
{ name: 'Reads', value: data.organizationUsage.databasesReadsTotal },
@@ -129,8 +129,8 @@
129129
}
130130
]} />
131131
</div>
132-
{#if project?.length > 0}
133-
<ProjectBreakdown projects={project} metric="bandwidth" {data} />
132+
{#if projects?.length > 0}
133+
<ProjectBreakdown {projects} metric="bandwidth" {data} />
134134
{/if}
135135
{:else}
136136
<Card isDashed>
@@ -181,8 +181,8 @@
181181
}
182182
]} />
183183
</div>
184-
{#if project?.length > 0}
185-
<ProjectBreakdown projects={project} metric="users" {data} />
184+
{#if projects?.length > 0}
185+
<ProjectBreakdown {projects} metric="users" {data} />
186186
{/if}
187187
{:else}
188188
<Card isDashed>
@@ -239,10 +239,10 @@
239239

240240
<Legend {legendData} />
241241

242-
{#if project?.length > 0}
242+
{#if projects?.length > 0}
243243
<ProjectBreakdown
244244
{data}
245-
projects={project}
245+
{projects}
246246
databaseOperationMetric={['databasesReads', 'databasesWrites']} />
247247
{/if}
248248
{:else}
@@ -298,9 +298,10 @@
298298
}
299299
]} />
300300
</div>
301-
{#if project?.length > 0}
302-
<ProjectBreakdown projects={project} metric="executions" {data} />
303-
{/if}
301+
{#if projects?.length > 0}<ProjectBreakdown
302+
{projects}
303+
metric="executions"
304+
{data} />{/if}
304305
{:else}
305306
<Card isDashed>
306307
<div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
@@ -368,9 +369,10 @@
368369
progressValue={bytesToSize(current, 'GB')}
369370
progressMax={max}
370371
progressBarData={progressBarStorageDate} />
371-
{#if project?.length > 0}
372-
<ProjectBreakdown projects={project} metric="storage" {data} />
373-
{/if}
372+
{#if projects?.length > 0}<ProjectBreakdown
373+
{projects}
374+
metric="storage"
375+
{data} />{/if}
374376
{:else}
375377
<Card isDashed>
376378
<div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
@@ -478,9 +480,9 @@
478480
</p>
479481
</div>
480482

481-
{#if project?.length > 0}
483+
{#if projects?.length > 0}
482484
<ProjectBreakdown
483-
projects={project}
485+
{projects}
484486
metric="authPhoneTotal"
485487
estimate="authPhoneEstimate"
486488
{data} />

‎src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -111,90 +111,92 @@
111111
});
112112
</script>
113113

114-
<Collapsible>
115-
<CollapsibleItem>
116-
<svelte:fragment slot="title">Project breakdown</svelte:fragment>
117-
<TableScroll dense noStyles noMargin style="table-layout: auto">
118-
<TableHeader>
119-
<TableCellHead>Project</TableCellHead>
120-
{#if databaseOperationMetric}
121-
<TableCellHead>Reads</TableCellHead>
122-
<TableCellHead>Writes</TableCellHead>
123-
{:else}
124-
<TableCellHead>{getMetricTitle(metric)}</TableCellHead>
125-
{/if}
126-
127-
{#if estimate}
128-
<TableCellHead>Estimated cost</TableCellHead>
129-
{/if}
130-
{#if $canSeeProjects}
131-
<TableCellHead />
132-
{/if}
133-
</TableHeader>
134-
<TableBody>
135-
{#each groupByProject(metric, estimate, databaseOperationMetric).sort((a, b) => {
136-
const aValue = a.usage ?? a.databasesReads ?? 0;
137-
const bValue = b.usage ?? b.databasesReads ?? 0;
138-
return bValue - aValue;
139-
}) as project}
140-
{#if !$canSeeProjects}
141-
<TableRow>
142-
<TableCell title="Project">
143-
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
144-
</TableCell>
145-
{#if databaseOperationMetric}
146-
<TableCell title="Reads">
147-
{format(project.databasesReads ?? 0)}
148-
</TableCell>
149-
<TableCell title="Writes">
150-
{format(project.databasesWrites ?? 0)}
151-
</TableCell>
152-
{:else}
153-
<TableCell>
154-
{format(project.usage)}
155-
</TableCell>
156-
{/if}
157-
158-
{#if project.estimate}
159-
<TableCell title="Estimated cost">
160-
{formatCurrency(project.estimate)}
161-
</TableCell>
162-
{/if}
163-
</TableRow>
114+
{#if projects.some((project) => project[metric]) || projects.some( (project) => databaseOperationMetric?.some((metric) => project[metric]) )}
115+
<Collapsible>
116+
<CollapsibleItem>
117+
<svelte:fragment slot="title">Project breakdown</svelte:fragment>
118+
<TableScroll dense noStyles noMargin style="table-layout: auto">
119+
<TableHeader>
120+
<TableCellHead>Project</TableCellHead>
121+
{#if databaseOperationMetric}
122+
<TableCellHead>Reads</TableCellHead>
123+
<TableCellHead>Writes</TableCellHead>
164124
{:else}
165-
<TableRowLink href={getProjectUsageLink(project.projectId)}>
166-
<TableCell title="Project">
167-
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
168-
</TableCell>
169-
{#if databaseOperationMetric}
170-
<TableCell title="Reads">
171-
{format(project.databasesReads ?? 0)}
172-
</TableCell>
173-
<TableCell title="Writes">
174-
{format(project.databasesWrites ?? 0)}
125+
<TableCellHead>{getMetricTitle(metric)}</TableCellHead>
126+
{/if}
127+
128+
{#if estimate}
129+
<TableCellHead>Estimated cost</TableCellHead>
130+
{/if}
131+
{#if $canSeeProjects}
132+
<TableCellHead />
133+
{/if}
134+
</TableHeader>
135+
<TableBody>
136+
{#each groupByProject(metric, estimate, databaseOperationMetric).sort( (a, b) => {
137+
const aValue = a.usage ?? a.databasesReads ?? 0;
138+
const bValue = b.usage ?? b.databasesReads ?? 0;
139+
return bValue - aValue;
140+
} ) as project}
141+
{#if !$canSeeProjects}
142+
<TableRow>
143+
<TableCell title="Project">
144+
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
175145
</TableCell>
176-
{:else}
177-
<TableCell>
178-
{format(project.usage)}
146+
{#if databaseOperationMetric}
147+
<TableCell title="Reads">
148+
{format(project.databasesReads ?? 0)}
149+
</TableCell>
150+
<TableCell title="Writes">
151+
{format(project.databasesWrites ?? 0)}
152+
</TableCell>
153+
{:else}
154+
<TableCell>
155+
{format(project.usage)}
156+
</TableCell>
157+
{/if}
158+
159+
{#if project.estimate}
160+
<TableCell title="Estimated cost">
161+
{formatCurrency(project.estimate)}
162+
</TableCell>
163+
{/if}
164+
</TableRow>
165+
{:else}
166+
<TableRowLink href={getProjectUsageLink(project.projectId)}>
167+
<TableCell title="Project">
168+
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
179169
</TableCell>
180-
{/if}
181-
182-
{#if project.estimate}
183-
<TableCell title="Estimated cost">
184-
{formatCurrency(project.estimate)}
170+
{#if databaseOperationMetric}
171+
<TableCell title="Reads">
172+
{format(project.databasesReads ?? 0)}
173+
</TableCell>
174+
<TableCell title="Writes">
175+
{format(project.databasesWrites ?? 0)}
176+
</TableCell>
177+
{:else}
178+
<TableCell>
179+
{format(project.usage)}
180+
</TableCell>
181+
{/if}
182+
183+
{#if project.estimate}
184+
<TableCell title="Estimated cost">
185+
{formatCurrency(project.estimate)}
186+
</TableCell>
187+
{/if}
188+
<TableCell right={true}>
189+
<span
190+
class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
185191
</TableCell>
186-
{/if}
187-
<TableCell right={true}>
188-
<span
189-
class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
190-
</TableCell>
191-
</TableRowLink>
192-
{/if}
193-
{/each}
194-
</TableBody>
195-
</TableScroll>
196-
</CollapsibleItem>
197-
</Collapsible>
192+
</TableRowLink>
193+
{/if}
194+
{/each}
195+
</TableBody>
196+
</TableScroll>
197+
</CollapsibleItem>
198+
</Collapsible>
199+
{/if}
198200

199201
<style>
200202
.ignore-icon-rotate {

0 commit comments

Comments
 (0)