feat: improved disk size insights (supabase#30827)

Author: kevcodez

apps/docs/content/guides/platform/compute-and-disk.mdx

@@ -108,13 +108,14 @@ Be aware that increasing IOPS or throughput incurs additional charges.
 
 When selecting your disk, it's essential to focus on the performance needs of your workload. Here's a comparison of our available disk types:
 
-|                   | General Purpose SSD (gp3)                                              | High Performance SSD (io2)                                                   |
-| ----------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| **Use Case**      | General workloads, development environments, small to medium databases | High-performance needs, large-scale databases, mission-critical applications |
-| **Max Disk Size** | 16 TB                                                                  | 60 TB                                                                        |
-| **Max IOPS**      | 16,000 IOPS (at 32 GB disk size)                                       | 80,000 IOPS (at 80 GB disk size)                                             |
-| **Throughput**    | 125 MiB/s (default) to 1,000 MiB/s (maximum)                           | Automatically scales with IOPS                                               |
-| **Best For**      | Great value for most use cases                                         | Low latency and very high IOPS requirements                                  |
+|                   | General Purpose SSD (gp3)                                                                                                                     | High Performance SSD (io2)                                                                           |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| **Use Case**      | General workloads, development environments, small to medium databases                                                                        | High-performance needs, large-scale databases, mission-critical applications                         |
+| **Max Disk Size** | 16 TB                                                                                                                                         | 60 TB                                                                                                |
+| **Max IOPS**      | 16,000 IOPS (at 32 GB disk size)                                                                                                              | 80,000 IOPS (at 80 GB disk size)                                                                     |
+| **Throughput**    | 125 MiB/s (default) to 1,000 MiB/s (maximum)                                                                                                  | Automatically scales with IOPS                                                                       |
+| **Best For**      | Great value for most use cases                                                                                                                | Low latency and very high IOPS requirements                                                          |
+| **Pricing**       | Disk: 8 GB included, then $0.125 per GB<br/>IOPS: 3,000 included, then $0.024 per IOPS<br/>Throughput: 125 Mbps included, then $0.95 per Mbps | Disk: $0.195 per GB<br/>IOPS: $0.119 per IOPS<br/>Throughput: Scales with IOPS at no additional cost |
 
 For general, day-to-day operations, gp3 should be more than enough. If you need high throughput and IOPS for critical systems, io2 will provide the performance required.
 

apps/docs/content/guides/platform/database-size.mdx

@@ -139,8 +139,22 @@ Once you have reclaimed space, you can run the following to disable [read-only](
 set default_transaction_read_only = 'off';
 ```
 
+### Disk Size Distribution
+
+You can check the distribution of your disk size on your [project's compute and disk page](/dashboard/_/settings/compute-and-disk).
+
+![Disk Size Distribution](/docs/img/guides/platform/database-size/disk-size-distribution.png)
+
+Your disk size usage falls in three categories:
+
+- **Database** - Disk usage by the database. This includes the actual data, indexes, materialized views, ...
+- **WAL** - Disk usage by the write-ahead log. The usage depends on your WAL settings and the amount of data being written to the database.
+- **System** - Disk usage reserved by the system to ensure the database can operate smoothly. Users cannot modify this and it should only take very little space.
+
 ### Reducing disk size
 
 Disks don't automatically downsize during normal operation. Once you have [reduced your database size](/docs/guides/platform/database-size#database-size), they _will_ automatically "right-size" during a [project upgrade](/docs/guides/platform/upgrading). The final disk size after the upgrade is 1.2x the size of the database with a minimum of 8 GB. For example, if your database size is 100GB, and you have a 200GB disk, the size after a project upgrade will be 120 GB.
 
+In case you have a large WAL directory, you may [modify WAL settings](/docs/guides/database/custom-postgres-config) such as `max_wal_size`. Use at your own risk as changing these settings can have side effects. To query your current WAL size, use `SELECT SUM(size) FROM pg_ls_waldir()`.
+
 In the event that your project is already on the latest version of Postgres and cannot be upgraded, a new version of Postgres will be released approximately every week which you can then upgrade to once it becomes available.

apps/docs/public/img/guides/platform/database-size/disk-size-distribution.png

@@ -23,6 +23,7 @@ import { BillingChangeBadge } from '../ui/BillingChangeBadge'
 import FormMessage from '../ui/FormMessage'
 import { NoticeBar } from '../ui/NoticeBar'
 import { InstanceSpecs } from 'lib/constants'
+import { DocsButton } from 'components/ui/DocsButton'
 
 /**
  * to do: this could be a type from api-types
@@ -137,6 +138,14 @@ export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) {
                 <p className="text-foreground-lighter">
                   Hardware resources allocated to your Postgres database
                 </p>
+
+                <div className="mt-3">
+                  <DocsButton
+                    abbrev={false}
+                    href="https://supabase.com/docs/guides/platform/compute-and-disk"
+                  />
+                </div>
+
                 <NoticeBar
                   showIcon={false}
                   type="default"

apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx

@@ -19,6 +19,9 @@ import { DiskTypeRecommendationSection } from '../ui/DiskTypeRecommendationSecti
 import FormMessage from '../ui/FormMessage'
 import { InputPostTab } from '../ui/InputPostTab'
 import { InputResetButton } from '../ui/InputResetButton'
+import { Admonition } from 'ui-patterns'
+import Markdown from 'markdown-to-jsx'
+import { DocsButton } from 'components/ui/DocsButton'
 
 type DiskSizeFieldProps = {
   form: UseFormReturn<DiskStorageSchemaType>
@@ -148,6 +151,13 @@ export function DiskSizeField({
             {includedDiskGB > 0 &&
               subscription?.plan.id &&
               `Your plan includes ${includedDiskGB} GB of disk size for ${watchedStorageType}.`}
+
+            <div className="mt-3">
+              <DocsButton
+                abbrev={false}
+                href="https://supabase.com/docs/guides/platform/database-size"
+              />
+            </div>
           </span>
           <DiskTypeRecommendationSection
             form={form}