Merge branch 'master' of github.com:supabase/supabase

This commit is contained in:
Terry Sutton committed 2025-02-25 15:12:47 -03:30
commit 9767a077ab
5 files changed
+176 -5

No files matched your search

@@ -82,8 +82,7 @@ const AddNewSecretForm = () => {
}
if (pairs.length) {
// Replace all fields with new pairs
form.reset({ secrets: pairs })
form.setValue('secrets', pairs)
}
}
@@ -153,7 +152,7 @@ const AddNewSecretForm = () => {
<Button
type="default"
className="self-end h-9 flex"
className="h-[34px] mt-6"
icon={<MinusCircle />}
onClick={() => (fields.length > 1 ? remove(index) : form.reset(defaultValues))}
/>
@@ -1,11 +1,11 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useQueryClient } from '@tanstack/react-query'
import dayjs from 'dayjs'
import { ArrowRight, ExternalLink, RefreshCw } from 'lucide-react'
import { ArrowRight, BookOpen, ExternalLink, RefreshCw } from 'lucide-react'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { AlertDescription_Shadcn_, Alert_Shadcn_, Button } from 'ui'
import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button, cn } from 'ui'
import { useParams } from 'common'
import ReportHeader from 'components/interfaces/Reports/ReportHeader'
@@ -23,12 +23,15 @@ import { analyticsKeys } from 'data/analytics/keys'
import { useProjectDiskResizeMutation } from 'data/config/project-disk-resize-mutation'
import { useDatabaseSizeQuery } from 'data/database/database-size-query'
import { useDatabaseReport } from 'data/reports/database-report-query'
import { BASE_PATH } from 'lib/constants'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { TIME_PERIODS_INFRA } from 'lib/constants/metrics'
import { formatBytes } from 'lib/helpers'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
import type { NextPageWithLayout } from 'types'
import DefaultLayout from 'components/layouts/DefaultLayout'
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
const DatabaseReport: NextPageWithLayout = () => {
return (
@@ -144,6 +147,46 @@ const DatabaseUsage = () => {
return (
<>
<ReportHeader showDatabaseSelector title="Database" />
<Alert_Shadcn_ className="relative overflow-hidden">
<div className="absolute inset-0 z-0">
<img
src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
alt="Supabase Grafana"
className="w-full h-full object-cover object-right hidden dark:block"
/>
<img
src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
alt="Supabase Grafana"
className="w-full h-full object-cover object-right dark:hidden"
/>
<div className="absolute inset-0 bg-gradient-to-r from-background-alternative to-transparent" />
</div>
<svg
width="78"
height="86"
viewBox="0 0 78 86"
className="w-4 h-4"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M77.777 38.148c-.15-1.344-.299-2.987-.896-4.778-.448-1.792-1.194-3.733-2.24-5.823-1.045-2.09-2.388-4.18-4.03-6.27-.598-.747-1.344-1.643-2.24-2.39 1.194-4.777-1.493-8.808-1.493-8.808-4.48-.299-7.465 1.343-8.51 2.24-.15 0-.3-.15-.598-.3a41.262 41.262 0 0 0-2.388-.895c-.896-.299-1.643-.448-2.538-.747-.896-.15-1.792-.298-2.539-.448h-.448C47.917 3.66 42.243.971 42.243.971c-6.27 4.031-7.465 9.556-7.465 9.556v.298c-.299.15-.747.15-1.045.299-.448.15-.896.298-1.493.448-.448.149-.896.298-1.493.597-.896.448-1.941.896-2.837 1.344-.896.447-1.792 1.045-2.688 1.642-.149 0-.149-.15-.149-.15-8.809-3.284-16.572.747-16.572.747-.747 9.257 3.434 15.229 4.33 16.274-.15.597-.448 1.194-.598 1.792-.597 2.09-1.194 4.33-1.493 6.57 0 .298-.15.596-.15.895C2.529 45.314.14 53.526.14 53.526c6.718 7.763 14.631 8.211 14.631 8.211 1.045 1.792 2.09 3.434 3.434 5.077.597.597 1.195 1.343 1.643 1.94-2.39 7.018.298 12.84.298 12.84 7.465.3 12.392-3.284 13.437-4.18.747.299 1.493.448 2.24.747 2.24.597 4.628.895 7.017 1.045h2.837c3.583 5.076 9.705 5.822 9.705 5.822 4.479-4.628 4.628-9.256 4.628-10.302v-.299c.896-.596 1.791-1.343 2.688-2.09 1.791-1.642 3.284-3.433 4.628-5.374.15-.15.298-.299.298-.597 5.077.298 8.51-3.136 8.51-3.136-.895-5.225-3.882-7.763-4.479-8.211h-.149V48.748c-.15-.597-.15-1.194-.298-1.642-.597-2.24-1.344-4.33-2.538-6.271-1.195-1.941-2.539-3.583-4.181-5.076-1.642-1.493-3.434-2.538-5.375-3.434-1.94-.896-3.882-1.344-5.972-1.643-1.045-.149-1.94-.149-2.986-.149H48.663c-.448 0-1.045.15-1.493.15a14.617 14.617 0 0 0-5.524 2.09c-1.643 1.045-3.136 2.24-4.33 3.583-1.195 1.344-2.09 2.986-2.688 4.628-.597 1.643-.895 3.285-1.045 4.927V48.3c.15.746.299 1.643.448 2.389.448 1.493 1.195 2.837 1.941 4.03.896 1.196 1.941 2.091 2.986 2.838 1.045.746 2.24 1.343 3.434 1.642 1.195.299 2.24.448 3.434.448H47.767c.15 0 .299 0 .448-.15.298 0 .448-.148.747-.148.448-.15.895-.3 1.343-.598.448-.15.747-.448 1.195-.746.149 0 .15-.15.298-.299.448-.299.448-.896.15-1.194-.299-.299-.747-.448-1.045-.15-.15 0-.15.15-.299.15-.299.149-.597.298-1.045.447-.299.15-.747.15-1.045.299h-2.389c-.896-.15-1.643-.299-2.538-.746-.896-.299-1.643-.896-2.39-1.493-.746-.598-1.343-1.493-1.79-2.24-.448-.746-.897-1.792-1.046-2.836-.15-.448-.15-1.046-.15-1.494v-.746c0-.299 0-.598.15-.896a11.78 11.78 0 0 1 3.285-6.121c.448-.448.895-.747 1.343-1.195.448-.298 1.046-.597 1.493-.896.598-.298 1.195-.447 1.643-.597.597-.15 1.194-.298 1.791-.298h1.792c.597 0 1.344.149 1.94.298 1.345.299 2.539.747 3.734 1.493 2.388 1.344 4.33 3.434 5.673 5.823.597 1.194 1.045 2.538 1.344 3.882 0 .299.149.747.149 1.045V52.63c0 .448 0 .746-.15 1.194 0 .299-.149.747-.149 1.045 0 .299-.149.747-.298 1.046-.15.746-.448 1.492-.747 2.09a27.148 27.148 0 0 1-2.24 4.03c-1.79 2.39-4.18 4.48-7.016 5.674-1.344.598-2.837 1.045-4.33 1.344-.747.15-1.493.15-2.24.299H43.14c-1.642-.15-3.285-.448-4.778-.896-1.493-.448-3.135-1.045-4.479-1.792-2.837-1.493-5.375-3.583-7.465-6.121-1.045-1.194-1.941-2.538-2.538-4.031a28.024 28.024 0 0 1-1.792-4.48c-.448-1.492-.746-3.135-.746-4.628V44.567c0-.746.149-1.642.149-2.388.15-.747.299-1.643.448-2.389.15-.747.298-1.642.597-2.389.448-1.493 1.045-2.986 1.642-4.48 1.344-2.836 2.986-5.374 5.077-7.315.447-.448 1.045-1.045 1.642-1.493.597-.448 1.194-.896 1.792-1.194.597-.448 1.194-.747 1.791-1.046l.896-.447c.15 0 .299-.15.448-.15.15 0 .298-.149.448-.149.597-.299 1.344-.448 1.94-.746.15 0 .3-.15.449-.15.149 0 .299-.15.448-.15.298-.148.746-.148 1.045-.298.149 0 .298-.149.597-.149.15 0 .298 0 .597-.15.15 0 .299 0 .597-.149h.597c.15 0 .299 0 .598-.149.15 0 .448 0 .597-.15h5.225c1.344 0 2.688.15 4.032.449 2.538.448 4.927 1.343 7.166 2.389a23.309 23.309 0 0 1 5.823 3.881l.299.299.298.299c.15.149.448.298.597.597.15.298.448.298.598.597.149.299.448.448.597.597a15.109 15.109 0 0 1 1.94 2.39c1.195 1.492 2.24 3.134 2.987 4.627 0 .15.15.15.15.3 0 .148.148.148.148.298.15.149.15.298.299.597.15.15.15.298.299.597.149.15.149.299.298.597.3.747.598 1.344.747 1.941.298 1.045.597 1.941.746 2.688.15.298.448.597.747.448.298 0 .597-.299.597-.598.597-1.791.597-2.837.448-3.882Z"
fill="currentColor"
/>
</svg>
<div className="flex flex-col md:flex-row gap-2 mt-1">
<AlertTitle_Shadcn_ className="flex-grow">Advanced observability</AlertTitle_Shadcn_>
<GrafanaBannerActions className="hidden xl:flex" />
</div>
<AlertDescription_Shadcn_ className="relative flex flex-col xl:flex-row gap-2 md:max-w-lg">
<p className="flex-grow">
Set up the Supabase Grafana Dashboard to visualize over 200 database performance and
health metrics on your Supabase project.
</p>
<GrafanaBannerActions className="xl:hidden" />
</AlertDescription_Shadcn_>
</Alert_Shadcn_>
<section>
<Panel title={<h2>Database health</h2>}>
<Panel.Content>
@@ -338,3 +381,42 @@ const DatabaseUsage = () => {
</>
)
}
const GrafanaBannerActions = ({ className }: { className?: string }) => {
const { ref } = useParams()
const org = useSelectedOrganization()
const { mutate: sendEvent } = useSendEventMutation()
return (
<div className={cn('flex gap-2', className)}>
<Button type="outline" className="bg-alternative" size="tiny" icon={<BookOpen />} asChild>
<Link
href="https://supabase.com/docs/guides/telemetry/metrics"
target="_blank"
onClick={() =>
sendEvent({
action: 'reports_database_grafana_banner_clicked',
groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
})
}
>
Docs
</Link>
</Button>
<Button type="default" size="tiny" asChild>
<Link
href="https://github.com/supabase/supabase-grafana"
target="_blank"
onClick={() =>
sendEvent({
action: 'reports_database_grafana_banner_clicked',
groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
})
}
>
Configure Grafana
</Link>
</Button>
</div>
)
}
@@ -0,0 +1,37 @@
<svg width="1201" height="428" viewBox="0 0 1201 428" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_933_1128)">
<line x1="193.511" y1="1.35156" x2="193.511" y2="427.633" stroke="#343434"/>
<line x1="468.511" y1="1.35156" x2="468.511" y2="427.633" stroke="#343434"/>
<line x1="743.511" y1="1.35156" x2="743.511" y2="427.633" stroke="#343434"/>
<line x1="1018.51" y1="1.35156" x2="1018.51" y2="427.633" stroke="#343434"/>
<line x1="1200.61" y1="95.9663" x2="0.607422" y2="95.9663" stroke="#343434"/>
<line x1="1200.61" y1="214.633" x2="0.607422" y2="214.633" stroke="#343434"/>
<line x1="1200.61" y1="333.299" x2="0.607422" y2="333.299" stroke="#343434"/>
<g opacity="0.3">
<path opacity="0.1" d="M194.652 152.041C33.4075 152.041 29.6578 273.911 -92.2126 296.411L-60.3389 566.4L1268.99 624.523L1287.74 461.404C1246.49 456.405 1135.12 431.405 1019.62 371.408C875.252 296.41 886.501 110.792 740.257 110.792C594.012 110.792 640.885 264.537 470.266 264.537C299.648 264.537 355.896 152.041 194.652 152.041Z" fill="#343434" stroke="#3E3E3E"/>
<path d="M194.652 152.041C33.4075 152.041 29.6578 273.911 -92.2126 296.411L-60.3389 566.4L1268.99 624.523L1287.74 461.404C1246.49 456.405 1135.12 431.405 1019.62 371.408C875.252 296.41 886.501 110.792 740.257 110.792C594.012 110.792 640.885 264.537 470.266 264.537C299.648 264.537 355.896 152.041 194.652 152.041Z" stroke="#3E3E3E"/>
<circle cx="193.48" cy="153.212" r="5.03125" fill="#3E3E3E"/>
<circle cx="468.178" cy="264.893" r="5.03125" fill="#3E3E3E"/>
<circle cx="742.888" cy="110.49" r="5.03125" fill="#3E3E3E"/>
<circle cx="1018.6" cy="371.106" r="5.03125" fill="#3E3E3E"/>
</g>
<g opacity="0.5">
<path opacity="0.1" d="M479.9 156.64C352.248 159.272 203.539 392.205 119.315 443.529L1239.23 483.009C1246.69 402.733 1257.13 240.864 1239.23 235.6C1216.86 229.02 1127.37 189.54 1019.46 189.54C911.549 189.54 885.229 217.176 741.785 217.176C598.34 217.176 607.552 154.008 479.9 156.64Z" fill="#343434" stroke="#3E3E3E"/>
<path d="M479.9 156.64C352.248 159.272 203.539 392.205 119.315 443.529L1239.23 483.009C1246.69 402.733 1257.13 240.864 1239.23 235.6C1216.86 229.02 1127.37 189.54 1019.46 189.54C911.549 189.54 885.229 217.176 741.785 217.176C598.34 217.176 607.552 154.008 479.9 156.64Z" stroke="#3E3E3E"/>
<circle cx="193.48" cy="377.591" r="5.03125" fill="#3E3E3E"/>
<circle cx="742.888" cy="218.164" r="5.03125" fill="#3E3E3E"/>
<circle cx="1018.6" cy="189.983" r="5.03125" fill="#3E3E3E"/>
<circle cx="468.178" cy="158.244" r="5.03125" fill="#3E3E3E"/>
</g>
<path opacity="0.1" d="M470.267 343.284C369.02 343.284 339.021 442.655 220.901 495.153L1283.99 583.275C1338.98 470.779 1423.48 245.787 1321.48 245.787C1193.99 245.787 1184.62 54.5444 1021.5 54.5444C858.377 54.5444 824.628 343.284 744.006 388.282C663.384 433.28 571.513 343.284 470.267 343.284Z" fill="#343434" stroke="#3E3E3E"/>
<path d="M470.267 343.284C369.02 343.284 339.021 442.655 220.901 495.153L1283.99 583.275C1338.98 470.779 1423.48 245.787 1321.48 245.787C1193.99 245.787 1184.62 54.5444 1021.5 54.5444C858.377 54.5444 824.628 343.284 744.006 388.282C663.384 433.28 571.513 343.284 470.267 343.284Z" stroke="#3E3E3E"/>
<circle cx="468.178" cy="342.373" r="5.03125" fill="#3E3E3E"/>
<circle cx="742.888" cy="389.654" r="5.03125" fill="#3E3E3E"/>
<circle cx="1018.6" cy="55.1157" r="5.03125" fill="#3E3E3E"/>
</g>
<defs>
<clipPath id="clip0_933_1128">
<rect width="1200" height="427" fill="white" transform="translate(0.607422 0.632812)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,37 @@
<svg width="1201" height="427" viewBox="0 0 1201 427" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_933_1200)">
<line x1="193.511" y1="0.71875" x2="193.511" y2="427" stroke="#DFDFDF"/>
<line x1="468.511" y1="0.71875" x2="468.511" y2="427" stroke="#DFDFDF"/>
<line x1="743.511" y1="0.71875" x2="743.511" y2="427" stroke="#DFDFDF"/>
<line x1="1018.51" y1="0.71875" x2="1018.51" y2="427" stroke="#DFDFDF"/>
<line x1="1200.61" y1="95.3333" x2="0.607422" y2="95.3332" stroke="#DFDFDF"/>
<line x1="1200.61" y1="214" x2="0.607422" y2="214" stroke="#DFDFDF"/>
<line x1="1200.61" y1="332.667" x2="0.607422" y2="332.667" stroke="#DFDFDF"/>
<g opacity="0.3">
<path opacity="0.1" d="M194.652 151.408C33.4075 151.408 29.6578 273.279 -92.2126 295.778L-60.3389 565.768L1268.99 623.891L1287.74 460.772C1246.49 455.772 1135.12 430.773 1019.62 370.775C875.252 295.778 886.501 110.16 740.257 110.16C594.012 110.16 640.885 263.904 470.266 263.904C299.648 263.904 355.896 151.408 194.652 151.408Z" fill="#EDEDED" stroke="#D4D4D4"/>
<path d="M194.652 151.408C33.4075 151.408 29.6578 273.279 -92.2126 295.778L-60.3389 565.768L1268.99 623.891L1287.74 460.772C1246.49 455.772 1135.12 430.773 1019.62 370.775C875.252 295.778 886.501 110.16 740.257 110.16C594.012 110.16 640.885 263.904 470.266 263.904C299.648 263.904 355.896 151.408 194.652 151.408Z" stroke="#D4D4D4"/>
<circle cx="193.48" cy="152.58" r="5.03125" fill="#D4D4D4"/>
<circle cx="468.178" cy="264.26" r="5.03125" fill="#D4D4D4"/>
<circle cx="742.888" cy="109.857" r="5.03125" fill="#D4D4D4"/>
<circle cx="1018.6" cy="370.473" r="5.03125" fill="#D4D4D4"/>
</g>
<g opacity="0.5">
<path opacity="0.1" d="M479.9 156.007C352.248 158.639 203.539 391.572 119.315 442.896L1239.23 482.376C1246.69 402.1 1257.13 240.231 1239.23 234.967C1216.86 228.387 1127.37 188.907 1019.46 188.907C911.549 188.907 885.229 216.543 741.785 216.543C598.34 216.543 607.552 153.375 479.9 156.007Z" fill="#EDEDED" stroke="#D4D4D4"/>
<path d="M479.9 156.007C352.248 158.639 203.539 391.572 119.315 442.896L1239.23 482.376C1246.69 402.1 1257.13 240.231 1239.23 234.967C1216.86 228.387 1127.37 188.907 1019.46 188.907C911.549 188.907 885.229 216.543 741.785 216.543C598.34 216.543 607.552 153.375 479.9 156.007Z" stroke="#D4D4D4"/>
<circle cx="193.48" cy="376.958" r="5.03125" fill="#D4D4D4"/>
<circle cx="742.888" cy="217.531" r="5.03125" fill="#D4D4D4"/>
<circle cx="1018.6" cy="189.35" r="5.03125" fill="#D4D4D4"/>
<circle cx="468.178" cy="157.611" r="5.03125" fill="#D4D4D4"/>
</g>
<path opacity="0.1" d="M470.267 342.651C369.02 342.651 339.021 442.022 220.901 494.521L1283.99 582.642C1338.98 470.146 1423.48 245.154 1321.48 245.154C1193.99 245.154 1184.62 53.9116 1021.5 53.9116C858.377 53.9116 824.628 342.651 744.006 387.649C663.384 432.648 571.513 342.651 470.267 342.651Z" fill="#EDEDED" stroke="#D4D4D4"/>
<path d="M470.267 342.651C369.02 342.651 339.021 442.022 220.901 494.521L1283.99 582.642C1338.98 470.146 1423.48 245.154 1321.48 245.154C1193.99 245.154 1184.62 53.9116 1021.5 53.9116C858.377 53.9116 824.628 342.651 744.006 387.649C663.384 432.648 571.513 342.651 470.267 342.651Z" stroke="#D4D4D4"/>
<circle cx="468.178" cy="341.74" r="5.03125" fill="#D4D4D4"/>
<circle cx="742.888" cy="389.021" r="5.03125" fill="#D4D4D4"/>
<circle cx="1018.6" cy="54.4829" r="5.03125" fill="#D4D4D4"/>
</g>
<defs>
<clipPath id="clip0_933_1200">
<rect width="1200" height="427" fill="white" transform="translate(0.607422)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

+16
View File
@@ -1033,6 +1033,21 @@ export interface StudioPricingSidePanelOpenedEvent {
groups: { organization: string }
}
/**
* User clicks on grafana banner in studio Reports page.
*
* @group Events
* @source studio
* @page /reports/database
*/
export interface ReportsDatabaseGrafanaBannerClickedEvent {
action: 'reports_database_grafana_banner_clicked'
groups: {
project: string
organization: string
}
}
/**
* @hidden
*/
@@ -1097,3 +1112,4 @@ export type TelemetryEvent =
| SqlEditorQueryRunButtonClickedEvent
| StudioPricingPlanCtaClickedEvent
| StudioPricingSidePanelOpenedEvent
| ReportsDatabaseGrafanaBannerClickedEvent