From 580c165e28bf61283a30e2fbd3fb27fbb1aac45c Mon Sep 17 00:00:00 2001
From: Flo <53355483+Flo4604@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:20:01 +0100
Subject: [PATCH] feat: metrics ui component (#2745)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: metrics ui component

* fix: fmt

* fix: permission metric component

* fix: manual fmt

* fix: manual fmt

* fix: manual fmt

* fix: border-border in some other places

---------

Co-authored-by: Oğuzhan Olguncu <21091016+ogzhanolguncu@users.noreply.github.com>
---
 .../[apiId]/keys/[keyAuthId]/[keyId]/page.tsx   | 17 +++--------------
 apps/dashboard/app/(app)/apis/[apiId]/page.tsx  | 10 +---------
 .../[apiId]/settings/update-ip-whitelist.tsx    |  2 +-
 .../app/(app)/apis/create-api-button.tsx        |  2 +-
 .../permissions/[permissionId]/page.tsx         |  2 +-
 .../permissions/create-new-permission.tsx       |  2 +-
 .../authorization/roles/create-new-role.tsx     |  2 +-
 .../app/(app)/ratelimits/[namespaceId]/page.tsx | 10 +---------
 .../ratelimits/create-namespace-button.tsx      |  2 +-
 .../(app)/settings/root-keys/[keyId]/layout.tsx | 13 +------------
 .../app/(app)/settings/user/update-theme.tsx    |  2 +-
 apps/dashboard/app/ratelimit/page.tsx           | 13 +------------
 apps/dashboard/components/ui/metric.tsx         | 17 +++++++++++++++++
 13 files changed, 31 insertions(+), 63 deletions(-)
 create mode 100644 apps/dashboard/components/ui/metric.tsx

diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
index c6c016fe3e..12f8f1468d 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
@@ -9,6 +9,7 @@ import { StackedColumnChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
@@ -143,10 +144,7 @@ export default async function APIKeyDetailPage(props: {
     ...ratelimitedOverTime.map((d) => ({ ...d, category: "Ratelimited" })),
     ...usageExceededOverTime.map((d) => ({ ...d, category: "Usage Exceeded" })),
     ...disabledOverTime.map((d) => ({ ...d, category: "Disabled" })),
-    ...insufficientPermissionsOverTime.map((d) => ({
-      ...d,
-      category: "Insufficient Permissions",
-    })),
+    ...insufficientPermissionsOverTime.map((d) => ({ ...d, category: "Insufficient Permissions" })),
     ...expiredOverTime.map((d) => ({ ...d, category: "Expired" })),
     ...forbiddenOverTime.map((d) => ({ ...d, category: "Forbidden" })),
   ];
@@ -337,7 +335,7 @@ export default async function APIKeyDetailPage(props: {
               {Intl.NumberFormat().format(transientPermissionIds.size)} Permissions
             </Badge>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 border-border">
             <CreateNewRole
               trigger={<Button>Create New Role</Button>}
               permissions={key.workspace.permissions}
@@ -405,12 +403,3 @@ function prepareInterval(interval: Interval) {
     }
   }
 }
-
-const Metric: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-between h-full px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
index 3d1780de75..2e5fb67bcc 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/page.tsx
@@ -1,6 +1,7 @@
 import { AreaChart, StackedColumnChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
@@ -321,12 +322,3 @@ function prepareInterval(interval: Interval) {
     }
   }
 }
-
-const Metric: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-between h-full px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx
index 4f429a4f16..a49f7fafb8 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx
@@ -98,7 +98,7 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
               />
             </div>
           ) : (
-            <Alert className="flex items-center justify-between opacity-100">
+            <Alert className="flex items-center justify-between opacity-100 border-border">
               <div>
                 <AlertTitle>Enterprise Feature</AlertTitle>
                 <AlertDescription>
diff --git a/apps/dashboard/app/(app)/apis/create-api-button.tsx b/apps/dashboard/app/(app)/apis/create-api-button.tsx
index 08de21c38d..f29a5952d7 100644
--- a/apps/dashboard/app/(app)/apis/create-api-button.tsx
+++ b/apps/dashboard/app/(app)/apis/create-api-button.tsx
@@ -56,7 +56,7 @@ export const CreateApiButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButt
             Create New API
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-11/12 max-sm: ">
+        <DialogContent className="border-border w-11/12 max-sm: ">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <FormField
diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
index 374ef47b51..44259688a7 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
@@ -142,7 +142,7 @@ const Metric: React.FC<{ label: string; value?: string; Icon: LucideIcon }> = ({
   Icon,
 }) => {
   return (
-    <div className="flex items-center gap-4 px-4 py-2 border rounded-lg">
+    <div className="flex items-center gap-4 px-4 py-2 border rounded-lg border-border">
       <Icon className="w-6 h-6 text-primary" />
       <div className="flex flex-col items-start justify-center">
         <p className="text-sm text-content-subtle">{label}</p>
diff --git a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
index bb1fe8febd..d1d562946b 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
@@ -76,7 +76,7 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
   return (
     <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
+      <DialogContent className="border-border">
         <DialogHeader>
           <DialogTitle>Create a new permission</DialogTitle>
           <DialogDescription>Permissions allow your key to do certain actions.</DialogDescription>
diff --git a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
index 7213af97e4..d496137278 100644
--- a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
@@ -93,7 +93,7 @@ export const CreateNewRole: React.FC<Props> = ({ trigger }) => {
   return (
     <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
+      <DialogContent className="border-border">
         <DialogHeader>
           <DialogTitle>Create a new role</DialogTitle>
           <DialogDescription>Roles group permissions together.</DialogDescription>
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx
index 274bef64a4..b3e181d4fe 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx
@@ -3,6 +3,7 @@ import { CopyButton } from "@/components/dashboard/copy-button";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
+import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
@@ -291,12 +292,3 @@ function prepareInterval(interval: Interval) {
     }
   }
 }
-
-const Metric: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx b/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx
index c9c0ca5364..d8f48a5e34 100644
--- a/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx
@@ -64,7 +64,7 @@ export const CreateNamespaceButton = ({
             Create new namespace
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-11/12 max-sm: ">
+        <DialogContent className="border-border w-11/12 max-sm: ">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <FormField
diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/layout.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/layout.tsx
index ccee1800b1..71e512064f 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/layout.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/layout.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Metric } from "@/components/ui/metric";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
@@ -65,18 +66,6 @@ export default async function Layout({ children, params: { keyId } }: Props) {
   );
 }
 
-const Metric: React.FC<{
-  label: React.ReactNode;
-  value: React.ReactNode;
-}> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-sm leading-none tracking-tight ">{value}</div>
-    </div>
-  );
-};
-
 const LastUsed: React.FC<{ workspaceId: string; keySpaceId: string; keyId: string }> = async ({
   workspaceId,
   keySpaceId,
diff --git a/apps/dashboard/app/(app)/settings/user/update-theme.tsx b/apps/dashboard/app/(app)/settings/user/update-theme.tsx
index 20d7e41ec3..43b7e099e0 100644
--- a/apps/dashboard/app/(app)/settings/user/update-theme.tsx
+++ b/apps/dashboard/app/(app)/settings/user/update-theme.tsx
@@ -30,7 +30,7 @@ const Option: React.FC<{ theme: string; icon: LucideIcon }> = (props) => {
       type="button"
       onClick={() => setTheme(props.theme)}
       className={cn(
-        "border text-sm rounded-md hover:border-primary flex items-center justify-center gap-2 h-8 p-2 ",
+        "border text-sm rounded-md hover:border-primary flex items-center justify-center gap-2 h-8 p-2 border-border ",
         {
           "bg-primary text-primary-foreground border-primary": props.theme === theme,
         },
diff --git a/apps/dashboard/app/ratelimit/page.tsx b/apps/dashboard/app/ratelimit/page.tsx
index 195015b5b0..bc88493752 100644
--- a/apps/dashboard/app/ratelimit/page.tsx
+++ b/apps/dashboard/app/ratelimit/page.tsx
@@ -8,6 +8,7 @@ import { PageHeader } from "@/components/dashboard/page-header";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Metric } from "@/components/ui/metric";
 import {
   Select,
   SelectContent,
@@ -272,15 +273,3 @@ export default function RatelimitPage() {
     </div>
   );
 }
-
-const Metric: React.FC<{
-  label: React.ReactNode;
-  value: React.ReactNode;
-}> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/components/ui/metric.tsx b/apps/dashboard/components/ui/metric.tsx
new file mode 100644
index 0000000000..f5a4fd596c
--- /dev/null
+++ b/apps/dashboard/components/ui/metric.tsx
@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+interface MetricProps {
+  label: string;
+  value: string | React.ReactNode;
+}
+
+const Metric: React.FC<MetricProps> = ({ label, value }) => {
+  return (
+    <div className="flex flex-col items-start justify-center px-4 py-2 border-border">
+      <p className="text-sm text-content-subtle">{label}</p>
+      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
+    </div>
+  );
+};
+
+export { Metric };