From d6f5bb78332fd00f40510062d9422bb7af44385d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 27 Feb 2025 00:07:25 +0100
Subject: [PATCH] fix(public): remove db dependencies and use traditional api
 call to get stats

---
 apps/api/src/controllers/misc.controller.ts | 22 +++++++++++++--
 apps/api/src/routes/misc.router.ts          |  6 ++++
 apps/public/app/page.tsx                    |  8 ++----
 apps/public/components/github-button.tsx    |  8 ++++--
 apps/public/components/sections/stats.tsx   | 31 ++++++++-------------
 apps/public/lib/github.ts                   | 12 +++++---
 apps/public/next.config.mjs                 | 13 +--------
 apps/public/package.json                    |  2 --
 pnpm-lock.yaml                              |  6 ----
 9 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/apps/api/src/controllers/misc.controller.ts b/apps/api/src/controllers/misc.controller.ts
index a79c8d7a..e623f34f 100644
--- a/apps/api/src/controllers/misc.controller.ts
+++ b/apps/api/src/controllers/misc.controller.ts
@@ -5,8 +5,8 @@ import icoToPng from 'ico-to-png';
 import sharp from 'sharp';
 
 import { createHash } from '@openpanel/common/server';
-import { TABLE_NAMES, ch, formatClickhouseDate } from '@openpanel/db';
-import { getRedisCache } from '@openpanel/redis';
+import { TABLE_NAMES, ch, chQuery, formatClickhouseDate } from '@openpanel/db';
+import { cacheable, getCache, getRedisCache } from '@openpanel/redis';
 
 interface GetFaviconParams {
   url: string;
@@ -152,3 +152,21 @@ export async function ping(
     });
   }
 }
+
+export async function stats(request: FastifyRequest, reply: FastifyReply) {
+  const res = await getCache('api:stats', 60 * 60, async () => {
+    const projects = await chQuery<{ project_id: string; count: number }>(
+      `SELECT project_id, count(*) as count from ${TABLE_NAMES.events} GROUP by project_id order by count()`,
+    );
+    const last24h = await chQuery<{ count: number }>(
+      `SELECT count(*) as count from ${TABLE_NAMES.events} WHERE created_at > now() - interval '24 hours'`,
+    );
+    return { projects, last24hCount: last24h[0]?.count || 0 };
+  });
+
+  reply.status(200).send({
+    projectsCount: res.projects.length,
+    eventsCount: res.projects.reduce((acc, { count }) => acc + count, 0),
+    eventsLast24hCount: res.last24hCount,
+  });
+}
diff --git a/apps/api/src/routes/misc.router.ts b/apps/api/src/routes/misc.router.ts
index e03c9cb1..882f0d5b 100644
--- a/apps/api/src/routes/misc.router.ts
+++ b/apps/api/src/routes/misc.router.ts
@@ -8,6 +8,12 @@ const miscRouter: FastifyPluginCallback = (fastify, opts, done) => {
     handler: controller.ping,
   });
 
+  fastify.route({
+    method: 'GET',
+    url: '/stats',
+    handler: controller.stats,
+  });
+
   fastify.route({
     method: 'GET',
     url: '/favicon',
diff --git a/apps/public/app/page.tsx b/apps/public/app/page.tsx
index 34728845..5fad38aa 100644
--- a/apps/public/app/page.tsx
+++ b/apps/public/app/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
   title: 'OpenPanel | An open-source alternative to Mixpanel',
 };
 
-export const experimental_ppr = true;
+// export const experimental_ppr = true;
 
 export default function HomePage() {
   return (
@@ -26,11 +26,7 @@ export default function HomePage() {
         <Testimonials />
         <Suspense
           fallback={
-            <StatsPure
-              projectCount={882}
-              eventCount={634_000_000}
-              last24hCount={7_000_000}
-            />
+            <StatsPure projectCount={0} eventCount={0} last24hCount={0} />
           }
         >
           <Stats />
diff --git a/apps/public/components/github-button.tsx b/apps/public/components/github-button.tsx
index 82fff4c8..923fefad 100644
--- a/apps/public/components/github-button.tsx
+++ b/apps/public/components/github-button.tsx
@@ -14,9 +14,13 @@ function formatStars(stars: number) {
 }
 
 export function GithubButton() {
-  const [stars, setStars] = useState(3_263);
+  const [stars, setStars] = useState(3_700);
   useEffect(() => {
-    getGithubRepoInfo().then((res) => setStars(res.stargazers_count));
+    getGithubRepoInfo().then((res) => {
+      if (res?.stargazers_count) {
+        setStars(res.stargazers_count);
+      }
+    });
   }, []);
   return (
     <Button variant={'secondary'} asChild>
diff --git a/apps/public/components/sections/stats.tsx b/apps/public/components/sections/stats.tsx
index 7615bd42..8654c8cd 100644
--- a/apps/public/components/sections/stats.tsx
+++ b/apps/public/components/sections/stats.tsx
@@ -1,7 +1,4 @@
-import { TABLE_NAMES, chQuery } from '@openpanel/db';
-import { cacheable } from '@openpanel/redis';
 import Link from 'next/link';
-import { Suspense } from 'react';
 import { VerticalLine } from '../line';
 import { PlusLine } from '../line';
 import { HorizontalLine } from '../line';
@@ -17,26 +14,22 @@ function shortNumber(num: number) {
   if (num >= 1e12) return `${+(num / 1e12).toFixed(1)}T`;
 }
 
-const getProjectsWithCount = cacheable(async function getProjectsWithCount() {
-  const projects = await chQuery<{ project_id: string; count: number }>(
-    `SELECT project_id, count(*) as count from ${TABLE_NAMES.events} GROUP by project_id order by count()`,
-  );
-  const last24h = await chQuery<{ count: number }>(
-    `SELECT count(*) as count from ${TABLE_NAMES.events} WHERE created_at > now() - interval '24 hours'`,
-  );
-  return { projects, last24hCount: last24h[0]?.count || 0 };
-}, 60 * 60);
-
 export async function Stats() {
-  const { projects, last24hCount } = await getProjectsWithCount();
-  const projectCount = projects.length;
-  const eventCount = projects.reduce((acc, { count }) => acc + count, 0);
+  const { projectsCount, eventsCount, eventsLast24hCount } = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/misc/stats`,
+  )
+    .then((res) => res.json())
+    .catch(() => ({
+      projectsCount: 0,
+      eventsCount: 0,
+      eventsLast24hCount: 0,
+    }));
 
   return (
     <StatsPure
-      projectCount={projectCount}
-      eventCount={eventCount}
-      last24hCount={last24hCount}
+      projectCount={projectsCount}
+      eventCount={eventsCount}
+      last24hCount={eventsLast24hCount}
     />
   );
 }
diff --git a/apps/public/lib/github.ts b/apps/public/lib/github.ts
index 1a03820e..a3fac567 100644
--- a/apps/public/lib/github.ts
+++ b/apps/public/lib/github.ts
@@ -1,6 +1,10 @@
 export async function getGithubRepoInfo() {
-  const res = await fetch(
-    'https://api.github.com/repos/Openpanel-dev/openpanel',
-  );
-  return res.json();
+  try {
+    const res = await fetch(
+      'https://api.github.com/repos/Openpanel-dev/openpanel',
+    );
+    return res.json();
+  } catch (e) {
+    return null;
+  }
 }
diff --git a/apps/public/next.config.mjs b/apps/public/next.config.mjs
index dc53544d..b16590aa 100644
--- a/apps/public/next.config.mjs
+++ b/apps/public/next.config.mjs
@@ -8,18 +8,7 @@ const config = {
   images: {
     domains: ['localhost', 'openpanel.dev'],
   },
-  // experimental: {
-  //   ppr: 'incremental', // does not work with hyperdx?!
-  // },
-  transpilePackages: [
-    '@openpanel/queue',
-    '@openpanel/db',
-    '@openpanel/common',
-    '@openpanel/constants',
-    '@openpanel/redis',
-    '@openpanel/validation',
-  ],
-  serverExternalPackages: ['@hyperdx/node-opentelemetry', 'ioredis', 'bullmq'],
+  serverExternalPackages: ['@hyperdx/node-opentelemetry'],
 };
 
 export default withMDX(config);
diff --git a/apps/public/package.json b/apps/public/package.json
index 8bea0de2..fac30a3e 100644
--- a/apps/public/package.json
+++ b/apps/public/package.json
@@ -12,9 +12,7 @@
   "dependencies": {
     "@hyperdx/node-opentelemetry": "^0.8.1",
     "@number-flow/react": "0.3.5",
-    "@openpanel/db": "workspace:*",
     "@openpanel/nextjs": "^1.0.5",
-    "@openpanel/redis": "workspace:*",
     "@openpanel/sdk-info": "workspace:^",
     "@openstatus/react": "0.0.3",
     "@radix-ui/react-accordion": "1.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d93d8d9e..45a85a93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -548,15 +548,9 @@ importers:
       '@number-flow/react':
         specifier: 0.3.5
         version: 0.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@openpanel/db':
-        specifier: workspace:*
-        version: link:../../packages/db
       '@openpanel/nextjs':
         specifier: ^1.0.5
         version: 1.0.5(next@15.0.3(@opentelemetry/api@1.8.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@openpanel/redis':
-        specifier: workspace:*
-        version: link:../../packages/redis
       '@openpanel/sdk-info':
         specifier: workspace:^
         version: link:../../packages/sdks/_info