@@ -338,3 +381,42 @@ const DatabaseUsage = () => {
>
)
}
+
+const GrafanaBannerActions = ({ className }: { className?: string }) => {
+ const { ref } = useParams()
+ const org = useSelectedOrganization()
+ const { mutate: sendEvent } = useSendEventMutation()
+
+ return (
+
+ } asChild>
+
+ sendEvent({
+ action: 'reports_database_grafana_banner_clicked',
+ groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
+ })
+ }
+ >
+ Docs
+
+
+
+
+ )
+}
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 @@
+
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 @@
+
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