feat: MetricPage wired up to /metrics/ (#2118)

* This is everything related to the routing via code.
* Everything else should be able to be wired up via Plasmic

apps/frontend/app/metrics/[...name]/error.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { redirect } from "next/navigation";
+import { useEffect } from "react";
+import { logger } from "../../../lib/logger";
+
+const REDIRECT_URL = "/retry";
+
+type ErrorPageProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+export default function Error(props: ErrorPageProps) {
+  const { error } = props;
+  useEffect(() => {
+    logger.error(error);
+  }, [error]);
+
+  redirect(REDIRECT_URL);
+}

apps/frontend/app/metrics/[...name]/page.tsx

@@ -0,0 +1,92 @@
+import { notFound } from "next/navigation";
+import { cache } from "react";
+import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "../../../plasmic-init";
+import { PlasmicClientRootProvider } from "../../../plasmic-init-client";
+import { cachedGetMetricByName } from "../../../lib/clickhouse/cached-queries";
+import { logger } from "../../../lib/logger";
+import { catchallPathToString } from "../../../lib/paths";
+
+const METRIC_SOURCE = "OSO";
+const METRIC_NAMESPACE = "oso";
+const PLASMIC_COMPONENT = "MetricPage";
+//export const dynamic = STATIC_EXPORT ? "force-static" : "force-dynamic";
+//export const dynamic = "force-static";
+export const dynamic = "force-dynamic";
+export const dynamicParams = true;
+export const revalidate = false; // 3600 = 1 hour
+// TODO: This cannot be empty due to this bug
+// https://github.com/vercel/next.js/issues/61213
+const STATIC_EXPORT_SLUGS: string[] = ["stars"];
+export async function generateStaticParams() {
+  return STATIC_EXPORT_SLUGS.map((s) => ({
+    name: [s],
+  }));
+}
+
+const cachedFetchComponent = cache(async (componentName: string) => {
+  try {
+    const plasmicData = await PLASMIC.fetchComponentData(componentName);
+    return plasmicData;
+  } catch (e) {
+    logger.warn(e);
+    return null;
+  }
+});
+
+/**
+ * This SSR route allows us to fetch the metric from the database
+ * on the first HTTP request, which should be faster than fetching it client-side
+ */
+
+type MetricPagePath = {
+  name: string[];
+};
+
+type MetricPageProps = {
+  params: MetricPagePath;
+};
+
+export default async function MetricPage(props: MetricPageProps) {
+  const { params } = props;
+  if (!params.name || !Array.isArray(params.name) || params.name.length < 1) {
+    logger.warn("Invalid metric page path", params);
+    notFound();
+  }
+
+  // Get metric metadata from the database
+  const name = catchallPathToString(params.name);
+  const metricArray = await cachedGetMetricByName({
+    metricSource: METRIC_SOURCE,
+    metricNamespace: METRIC_NAMESPACE,
+    metricName: name,
+  });
+  if (!Array.isArray(metricArray) || metricArray.length < 1) {
+    logger.warn(`Cannot find metric (name=${name})`);
+    notFound();
+  }
+  const metadata = metricArray[0];
+  //console.log("project", project);
+
+  // Get Plasmic component
+  const plasmicData = await cachedFetchComponent(PLASMIC_COMPONENT);
+  if (!plasmicData) {
+    logger.warn(`Unable to get componentName=${PLASMIC_COMPONENT}`);
+    notFound();
+  }
+  const compMeta = plasmicData.entryCompMetas[0];
+
+  return (
+    <PlasmicClientRootProvider
+      prefetchedData={plasmicData}
+      pageParams={compMeta.params}
+    >
+      <PlasmicComponent
+        component={compMeta.displayName}
+        componentProps={{
+          metadata,
+        }}
+      />
+    </PlasmicClientRootProvider>
+  );
+}

apps/frontend/app/metrics/page.tsx

@@ -0,0 +1,39 @@
+import { notFound } from "next/navigation";
+import { cache } from "react";
+import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "../../plasmic-init";
+import { PlasmicClientRootProvider } from "../../plasmic-init-client";
+import { logger } from "../../lib/logger";
+
+const PLASMIC_COMPONENT = "MetricPage";
+export const dynamic = "force-static";
+export const revalidate = false; // 3600 = 1 hour
+
+const cachedFetchComponent = cache(async (componentName: string) => {
+  try {
+    const plasmicData = await PLASMIC.fetchComponentData(componentName);
+    return plasmicData;
+  } catch (e) {
+    logger.warn(e);
+    return null;
+  }
+});
+
+export default async function MetricPage() {
+  // Get Plasmic component
+  const plasmicData = await cachedFetchComponent(PLASMIC_COMPONENT);
+  if (!plasmicData) {
+    logger.warn(`Unable to get componentName=${PLASMIC_COMPONENT}`);
+    notFound();
+  }
+  const compMeta = plasmicData.entryCompMetas[0];
+
+  return (
+    <PlasmicClientRootProvider
+      prefetchedData={plasmicData}
+      pageParams={compMeta.params}
+    >
+      <PlasmicComponent component={compMeta.displayName} />
+    </PlasmicClientRootProvider>
+  );
+}

apps/frontend/lib/clickhouse/cached-queries.ts

@@ -11,6 +11,7 @@ import {
   GET_COLLECTIONS_BY_IDS,
   GET_COLLECTION_BY_NAME,
   GET_COLLECTION_IDS_BY_PROJECT_IDS,
+  GET_METRIC_BY_NAME,
   GET_CODE_METRICS_BY_PROJECT,
   GET_ONCHAIN_METRICS_BY_PROJECT,
   GET_ALL_EVENT_TYPES,
@@ -124,6 +125,18 @@ const cachedGetCollectionIdsByProjectIds = cache(
     }),
 );
 
+const cachedGetMetricByName = cache(
+  async (variables: {
+    metricSource: string;
+    metricNamespace: string;
+    metricName: string;
+  }) =>
+    queryWrapper({
+      query: GET_METRIC_BY_NAME,
+      variables,
+    }),
+);
+
 const cachedGetCodeMetricsByProjectIds = cache(
   async (variables: { projectIds: string[] }) =>
     queryWrapper({
@@ -157,6 +170,7 @@ export {
   cachedGetCollectionByName,
   cachedGetCollectionsByIds,
   cachedGetCollectionIdsByProjectIds,
+  cachedGetMetricByName,
   cachedGetCodeMetricsByProjectIds,
   cachedGetOnchainMetricsByProjectIds,
   cachedGetAllEventTypes,

apps/frontend/lib/clickhouse/queries.ts

@@ -237,6 +237,37 @@ const GET_COLLECTION_IDS_BY_PROJECT_IDS = define(
  * METRICS
  **********************/
 
+const metricResponse = {
+  metric_id: "",
+  metric_source: "",
+  metric_namespace: "",
+  metric_name: "",
+  display_name: "",
+};
+
+const metricResponseWithDescription = _.merge(metricResponse, {
+  description: "",
+});
+
+const GET_METRIC_BY_NAME = define(
+  `
+  SELECT 
+    metric_id, 
+    metric_source, 
+    metric_namespace, 
+    metric_name, 
+    display_name, 
+    description
+  FROM 
+    metrics.metrics_v0
+  WHERE 
+    metric_source = {metricSource: String}
+    AND metric_namespace = {metricNamespace: String}
+    AND metric_name = {metricName: String};
+`,
+  metricResponseWithDescription,
+);
+
 const GET_CODE_METRICS_BY_ARTIFACT = define(
   `
   SELECT 
@@ -613,6 +644,7 @@ export {
   GET_COLLECTIONS_BY_IDS,
   GET_COLLECTION_BY_NAME,
   GET_COLLECTION_IDS_BY_PROJECT_IDS,
+  GET_METRIC_BY_NAME,
   GET_CODE_METRICS_BY_ARTIFACT,
   GET_CODE_METRICS_BY_PROJECT,
   GET_ONCHAIN_METRICS_BY_PROJECT,