mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge pull request #1639 from appwrite/fix-project-break-down
Hide project breakdown if the metric doesn't exist for projects
This commit is contained in:
Eldad A. Fux
@@ -198,6 +198,8 @@ export type OrganizationUsage = {
|
||||
storage: number;
|
||||
executions: number;
|
||||
bandwidth: number;
|
||||
databasesReads: number;
|
||||
databasesWrites: number;
|
||||
users: number;
|
||||
authPhoneTotal: number;
|
||||
authPhoneEstimate: number;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
: (data?.currentInvoice?.plan ?? $organization?.billingPlan);
|
||||
const plan = data?.plan ?? undefined;
|
||||
|
||||
$: project = (data.organizationUsage as OrganizationUsage).projects;
|
||||
$: projects = (data.organizationUsage as OrganizationUsage).projects;
|
||||
|
||||
$: legendData = [
|
||||
{ name: 'Reads', value: data.organizationUsage.databasesReadsTotal },
|
||||
@@ -129,8 +129,8 @@
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{#if project?.length > 0}
|
||||
<ProjectBreakdown projects={project} metric="bandwidth" {data} />
|
||||
{#if projects?.length > 0}
|
||||
<ProjectBreakdown {projects} metric="bandwidth" {data} />
|
||||
{/if}
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
@@ -181,8 +181,8 @@
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{#if project?.length > 0}
|
||||
<ProjectBreakdown projects={project} metric="users" {data} />
|
||||
{#if projects?.length > 0}
|
||||
<ProjectBreakdown {projects} metric="users" {data} />
|
||||
{/if}
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
@@ -239,10 +239,10 @@
|
||||
|
||||
<Legend {legendData} />
|
||||
|
||||
{#if project?.length > 0}
|
||||
{#if projects?.length > 0}
|
||||
<ProjectBreakdown
|
||||
{data}
|
||||
projects={project}
|
||||
{projects}
|
||||
databaseOperationMetric={['databasesReads', 'databasesWrites']} />
|
||||
{/if}
|
||||
{:else}
|
||||
@@ -298,9 +298,10 @@
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
{#if project?.length > 0}
|
||||
<ProjectBreakdown projects={project} metric="executions" {data} />
|
||||
{/if}
|
||||
{#if projects?.length > 0}<ProjectBreakdown
|
||||
{projects}
|
||||
metric="executions"
|
||||
{data} />{/if}
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
|
||||
@@ -368,9 +369,10 @@
|
||||
progressValue={bytesToSize(current, 'GB')}
|
||||
progressMax={max}
|
||||
progressBarData={progressBarStorageDate} />
|
||||
{#if project?.length > 0}
|
||||
<ProjectBreakdown projects={project} metric="storage" {data} />
|
||||
{/if}
|
||||
{#if projects?.length > 0}<ProjectBreakdown
|
||||
{projects}
|
||||
metric="storage"
|
||||
{data} />{/if}
|
||||
{:else}
|
||||
<Card isDashed>
|
||||
<div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
|
||||
@@ -478,9 +480,9 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if project?.length > 0}
|
||||
{#if projects?.length > 0}
|
||||
<ProjectBreakdown
|
||||
projects={project}
|
||||
{projects}
|
||||
metric="authPhoneTotal"
|
||||
estimate="authPhoneEstimate"
|
||||
{data} />
|
||||
|
||||
+84
-82
@@ -111,90 +111,92 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Project breakdown</svelte:fragment>
|
||||
<TableScroll dense noStyles noMargin style="table-layout: auto">
|
||||
<TableHeader>
|
||||
<TableCellHead>Project</TableCellHead>
|
||||
{#if databaseOperationMetric}
|
||||
<TableCellHead>Reads</TableCellHead>
|
||||
<TableCellHead>Writes</TableCellHead>
|
||||
{:else}
|
||||
<TableCellHead>{getMetricTitle(metric)}</TableCellHead>
|
||||
{/if}
|
||||
|
||||
{#if estimate}
|
||||
<TableCellHead>Estimated cost</TableCellHead>
|
||||
{/if}
|
||||
{#if $canSeeProjects}
|
||||
<TableCellHead />
|
||||
{/if}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{#each groupByProject(metric, estimate, databaseOperationMetric).sort((a, b) => {
|
||||
const aValue = a.usage ?? a.databasesReads ?? 0;
|
||||
const bValue = b.usage ?? b.databasesReads ?? 0;
|
||||
return bValue - aValue;
|
||||
}) as project}
|
||||
{#if !$canSeeProjects}
|
||||
<TableRow>
|
||||
<TableCell title="Project">
|
||||
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
|
||||
</TableCell>
|
||||
{#if databaseOperationMetric}
|
||||
<TableCell title="Reads">
|
||||
{format(project.databasesReads ?? 0)}
|
||||
</TableCell>
|
||||
<TableCell title="Writes">
|
||||
{format(project.databasesWrites ?? 0)}
|
||||
</TableCell>
|
||||
{:else}
|
||||
<TableCell>
|
||||
{format(project.usage)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
|
||||
{#if project.estimate}
|
||||
<TableCell title="Estimated cost">
|
||||
{formatCurrency(project.estimate)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
</TableRow>
|
||||
{#if projects.some((project) => project[metric]) || projects.some( (project) => databaseOperationMetric?.some((metric) => project[metric]) )}
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Project breakdown</svelte:fragment>
|
||||
<TableScroll dense noStyles noMargin style="table-layout: auto">
|
||||
<TableHeader>
|
||||
<TableCellHead>Project</TableCellHead>
|
||||
{#if databaseOperationMetric}
|
||||
<TableCellHead>Reads</TableCellHead>
|
||||
<TableCellHead>Writes</TableCellHead>
|
||||
{:else}
|
||||
<TableRowLink href={getProjectUsageLink(project.projectId)}>
|
||||
<TableCell title="Project">
|
||||
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
|
||||
</TableCell>
|
||||
{#if databaseOperationMetric}
|
||||
<TableCell title="Reads">
|
||||
{format(project.databasesReads ?? 0)}
|
||||
</TableCell>
|
||||
<TableCell title="Writes">
|
||||
{format(project.databasesWrites ?? 0)}
|
||||
</TableCell>
|
||||
{:else}
|
||||
<TableCell>
|
||||
{format(project.usage)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
|
||||
{#if project.estimate}
|
||||
<TableCell title="Estimated cost">
|
||||
{formatCurrency(project.estimate)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
<TableCell right={true}>
|
||||
<span
|
||||
class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
|
||||
</TableCell>
|
||||
</TableRowLink>
|
||||
<TableCellHead>{getMetricTitle(metric)}</TableCellHead>
|
||||
{/if}
|
||||
{/each}
|
||||
</TableBody>
|
||||
</TableScroll>
|
||||
</CollapsibleItem>
|
||||
</Collapsible>
|
||||
|
||||
{#if estimate}
|
||||
<TableCellHead>Estimated cost</TableCellHead>
|
||||
{/if}
|
||||
{#if $canSeeProjects}
|
||||
<TableCellHead />
|
||||
{/if}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{#each groupByProject(metric, estimate, databaseOperationMetric).sort( (a, b) => {
|
||||
const aValue = a.usage ?? a.databasesReads ?? 0;
|
||||
const bValue = b.usage ?? b.databasesReads ?? 0;
|
||||
return bValue - aValue;
|
||||
} ) as project}
|
||||
{#if !$canSeeProjects}
|
||||
<TableRow>
|
||||
<TableCell title="Project">
|
||||
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
|
||||
</TableCell>
|
||||
{#if databaseOperationMetric}
|
||||
<TableCell title="Reads">
|
||||
{format(project.databasesReads ?? 0)}
|
||||
</TableCell>
|
||||
<TableCell title="Writes">
|
||||
{format(project.databasesWrites ?? 0)}
|
||||
</TableCell>
|
||||
{:else}
|
||||
<TableCell>
|
||||
{format(project.usage)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
|
||||
{#if project.estimate}
|
||||
<TableCell title="Estimated cost">
|
||||
{formatCurrency(project.estimate)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
</TableRow>
|
||||
{:else}
|
||||
<TableRowLink href={getProjectUsageLink(project.projectId)}>
|
||||
<TableCell title="Project">
|
||||
{data.projectNames[project.projectId]?.name ?? 'Unknown'}
|
||||
</TableCell>
|
||||
{#if databaseOperationMetric}
|
||||
<TableCell title="Reads">
|
||||
{format(project.databasesReads ?? 0)}
|
||||
</TableCell>
|
||||
<TableCell title="Writes">
|
||||
{format(project.databasesWrites ?? 0)}
|
||||
</TableCell>
|
||||
{:else}
|
||||
<TableCell>
|
||||
{format(project.usage)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
|
||||
{#if project.estimate}
|
||||
<TableCell title="Estimated cost">
|
||||
{formatCurrency(project.estimate)}
|
||||
</TableCell>
|
||||
{/if}
|
||||
<TableCell right={true}>
|
||||
<span
|
||||
class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
|
||||
</TableCell>
|
||||
</TableRowLink>
|
||||
{/if}
|
||||
{/each}
|
||||
</TableBody>
|
||||
</TableScroll>
|
||||
</CollapsibleItem>
|
||||
</Collapsible>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.ignore-icon-rotate {
|
||||
|
||||
Reference in New Issue
Block a user