From de04637d4968895142f9cf4af085b32cb4e6b482 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 22 Nov 2022 20:04:48 +0800
Subject: [PATCH] feat: add auth report

---
 .../interfaces/Reports/Reports.constants.ts   | 47 ++++++++++++----
 .../interfaces/Reports/Reports.types.ts       |  3 +-
 .../Reports/renderers/AuthRenderers.tsx       | 47 ++++++++++++++++
 .../ReportsLayout/ReportsMenu.utils.ts        |  6 +++
 studio/pages/project/[ref]/reports/auth.tsx   | 54 +++++++++++++++++++
 5 files changed, 147 insertions(+), 10 deletions(-)
 create mode 100644 studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
 create mode 100644 studio/pages/project/[ref]/reports/auth.tsx

diff --git a/studio/components/interfaces/Reports/Reports.constants.ts b/studio/components/interfaces/Reports/Reports.constants.ts
index ea6005b890c..c2a81041b29 100644
--- a/studio/components/interfaces/Reports/Reports.constants.ts
+++ b/studio/components/interfaces/Reports/Reports.constants.ts
@@ -33,9 +33,7 @@ export const DEFAULT_QUERY_PARAMS = {
   iso_timestamp_end: REPORTS_DATEPICKER_HELPERS[0].calcTo(),
 }
 
-
-export const PRESET_CONFIG : Record<Presets, PresetConfig> ={
-  
+export const PRESET_CONFIG: Record<Presets, PresetConfig> = {
   [Presets.API_OVERVIEW]: {
     title: '',
     sql: {
@@ -97,7 +95,7 @@ ORDER BY
     },
   },
   [Presets.API_BOTS]: {
-    title: "API Bots",
+    title: 'API Bots',
     sql: {
       userAgents: `
 select
@@ -117,7 +115,7 @@ order by
   count desc
 limit 12
 `,
-      botScores:`
+      botScores: `
 select
   h.cf_connecting_ip as ip,
   h.cf_ipcountry as country,
@@ -143,10 +141,41 @@ group by
 order by
   bot_score desc
 limit 20
-
-      `
-    }
-  }
+      `,
+    },
+  },
+  [Presets.AUTH]: {
+    title: 'Auth',
+    sql: {
+      dailyActiveUsers: `
+select 
+  timestamp_trunc(timestamp, day) as timestamp,
+  count(distinct json_extract(f.event_message, "$.user_id")) as count
+from gotrue_logs f
+cross join unnest(f.metadata) as m
+where json_extract(f.event_message, "$.user_id") is not null
+group by 
+  timestamp
+order by
+  timestamp
+`,
+newUsers: `
+select 
+  TIMESTAMP_TRUNC(f.timestamp, DAY) as timestamp,
+  count(id) as count
+from 
+gotrue_logs f
+  cross join unnest(f.metadata) as m
+where  f.timestamp > "2022-11-20" 
+and m.project = "tzljvicuuxegpzwuwife"
+and JSON_VALUE(f.event_message, "$.path") = "/signup"
+and JSON_VALUE(f.event_message, "$.auth_event.actor_id") is not null
+and JSON_VALUE(f.event_message, "$.auth_event.action") != "user_repeated_signup"
+group by 
+  timestamp
+`
+    },
+  },
 }
 
 export const DATETIME_FORMAT = 'MMM D, ha'
diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts
index 359b9bd7569..5ace186ea57 100644
--- a/studio/components/interfaces/Reports/Reports.types.ts
+++ b/studio/components/interfaces/Reports/Reports.types.ts
@@ -1,6 +1,7 @@
 export enum Presets {
   API_OVERVIEW = 'overview',
-  API_BOTS="api_bots"
+  API_BOTS = 'api_bots',
+  AUTH = 'auth',
 }
 
 export interface PresetConfig {
diff --git a/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
new file mode 100644
index 00000000000..c6a05709fe9
--- /dev/null
+++ b/studio/components/interfaces/Reports/renderers/AuthRenderers.tsx
@@ -0,0 +1,47 @@
+import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
+import { DATETIME_FORMAT } from '../Reports.constants'
+import { ReportWidgetProps } from '../ReportWidget'
+
+export const renderDailyActiveUsers = (
+  props: ReportWidgetProps<{
+    count: number
+    timestamp: string
+  }>
+) => {
+  return (
+    <>
+      <div className="flex w-full flex-col">
+        <BarChart
+          data={props.data}
+          attribute="count"
+          label=""
+          minimalHeader
+          customDateFormat={DATETIME_FORMAT}
+          noDataMessage={'No authenticated users during this time period'}
+        />
+      </div>
+    </>
+  )
+}
+
+export const renderNewUsers = (
+  props: ReportWidgetProps<{
+    count: number
+    timestamp: string
+  }>
+) => {
+  return (
+    <>
+      <div className="flex w-full flex-col">
+        <BarChart
+          data={props.data}
+          attribute="count"
+          label=""
+          minimalHeader
+          customDateFormat={DATETIME_FORMAT}
+          noDataMessage={'No new user signups during this time period'}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
index 427476af448..c120e0fbb64 100644
--- a/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
+++ b/studio/components/layouts/ReportsLayout/ReportsMenu.utils.ts
@@ -34,6 +34,12 @@ export const generateReportsMenu = (project?: Project): ProductMenuGroup[] => {
                 url: `/project/${ref}/reports/api-bots`,
                 items: [],
               },
+              {
+                name: 'Auth',
+                key: 'auth',
+                url: `/project/${ref}/reports/auth`,
+                items: [],
+              },
             ]
           : []),
         {
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
new file mode 100644
index 00000000000..2a33a8d6837
--- /dev/null
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -0,0 +1,54 @@
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+
+import { NextPageWithLayout } from 'types'
+import { Presets } from 'components/interfaces/Reports/Reports.types'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
+import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
+import ReportWidget from 'components/interfaces/Reports/ReportWidget'
+import {
+  renderDailyActiveUsers,
+  renderNewUsers,
+} from 'components/interfaces/Reports/renderers/AuthRenderers'
+
+export const ApiBotsPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = router.query
+  const config = PRESET_CONFIG[Presets.AUTH]
+  const hooks = hooksFactory(ref as string, config)
+  const [dailyActiveUsers, dailyActiveUsersHandlers] = hooks.dailyActiveUsers()
+  const [newUsers, newUsersHandlers] = hooks.newUsers()
+  const { isLoading, Layout } = usePresetReport(
+    [dailyActiveUsers, newUsers],
+    [dailyActiveUsersHandlers, newUsersHandlers]
+  )
+  return (
+    <Layout title={config.title}>
+      <div className="grid  lg:grid-cols-4">
+        <ReportWidget
+          isLoading={isLoading}
+          params={dailyActiveUsers.params}
+          className="col-span-4 col-start-1"
+          title="Daily Active Users"
+          description="The daily count of active authenticated users"
+          data={dailyActiveUsers.logData}
+          renderer={renderDailyActiveUsers}
+        />
+        <ReportWidget
+          isLoading={isLoading}
+          params={newUsers.params}
+          className="col-span-4 col-start-1"
+          title="Daily New Users"
+          description="The daily count of new user signups"
+          data={newUsers.logData}
+          renderer={renderNewUsers}
+        />
+      </div>
+    </Layout>
+  )
+}
+
+ApiBotsPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+
+export default observer(ApiBotsPage)