From d1a17b9c6171f8c9178c02c2bbe84a0456379031 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Tue, 25 Feb 2025 12:42:05 -0330
Subject: [PATCH 1/2] Chore/ef secret reset (#33842)

* Reset secrets form after submission

* Try a different fix.

* Align the delete button.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
---
 .../Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx       | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
index ba7cc877392..4a9179318e4 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx
@@ -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))}
                 />

From e19b0a155e5bb11fdb7a5642f6ed42b2d86af5fe Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Tue, 25 Feb 2025 18:15:22 +0100
Subject: [PATCH 2/2] promote grafana in reports (#33657)

* promote grafana in reports

* add docs link

* lighter svg

* fix telemetry event

* next/image

* unused import

* BASE_PATH

* img

* Apply suggestions from code review to remove STUDIO bit

* add bg to button

* fix telemetry action

---------

Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Co-authored-by: Pamela Chia <pamelachiamayyee@gmail.com>
---
 .../pages/project/[ref]/reports/database.tsx  | 86 ++++++++++++++++++-
 .../public/img/reports/bg-grafana-dark.svg    | 37 ++++++++
 .../public/img/reports/bg-grafana-light.svg   | 37 ++++++++
 packages/common/telemetry-constants.ts        | 16 ++++
 4 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 apps/studio/public/img/reports/bg-grafana-dark.svg
 create mode 100644 apps/studio/public/img/reports/bg-grafana-light.svg

diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
index 4ab6a1eed60..e73c95ce2ee 100644
--- a/apps/studio/pages/project/[ref]/reports/database.tsx
+++ b/apps/studio/pages/project/[ref]/reports/database.tsx
@@ -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>
+  )
+}
diff --git a/apps/studio/public/img/reports/bg-grafana-dark.svg b/apps/studio/public/img/reports/bg-grafana-dark.svg
new file mode 100644
index 00000000000..3bff20d8cc4
--- /dev/null
+++ b/apps/studio/public/img/reports/bg-grafana-dark.svg
@@ -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>
diff --git a/apps/studio/public/img/reports/bg-grafana-light.svg b/apps/studio/public/img/reports/bg-grafana-light.svg
new file mode 100644
index 00000000000..f4747c9cb06
--- /dev/null
+++ b/apps/studio/public/img/reports/bg-grafana-light.svg
@@ -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>
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index 65752ed0a4e..44fcc96628a 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -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