feat: add support for displaying hourly occurrence rate in Overview c…

…omponent

feat: add getHourlyOccurrenceRateForLast14Days function to calculate hourly occurrence rate for last 14 days
style: fix indentation and spacing in Overview component
style: adjust grid layout in Overview component to better fit content
style: adjust font color of button in ConfirmationDialog component
fix: adjust unit of occurrence count in Overview component to be more accurate
fix: adjust wording of occurrence rate in Overview component to be more accurate
fix: adjust wording of NoData component in Overview component to be more accurate
fix: adjust wording of Repository Information section in Overview component to be more accurate
fix: adjust wording of Test Zone section in Overview component to be more accurate
fix: adjust wording of Danger Zone section in Overview component to be more accurate
fix: adjust wording of ConfirmationDialog component in Overview component to be more accurate
fix: adjust font color of title in Danger Zone section in Overview component
fix: adjust font color of title in Hourly Occurrences section in Overview component

components/ConfirmationDialog.tsx

@@ -46,7 +46,7 @@ export default function ConfirmationDialog({
 
   return (
     <>
-      <button type="button" onClick={() => setOpen(true)} className="text-indigo-500 hover:text-indigo-700">
+      <button type="button" onClick={() => setOpen(true)} className="text-rose-500 hover:text-rose-700">
         {btnId === 'deleteProject' ? 'Delete Project' : 'Delete All Errors'}
       </button>
 

components/NoData.tsx

@@ -27,15 +27,15 @@ export default function NoData({ project, showHeader = true }: { project: Projec
   };
 
   return (
-    <div className="mt-10 text-center text-gray-400">
+    <div className="text-center text-gray-400">
       {showHeader && (
-        <>
+        <div className="mt-10">
           <SlCheck className="mx-auto h-12 w-12" aria-hidden="true" />
           <h3 className="my-5 text-sm font-semibold">No exceptions recorded</h3>
-        </>
+        </div>
       )}
 
-      <div className="grid grid-cols-2 justify-items-center gap-4">
+      <div className="grid grid-cols-1 justify-items-center gap-4">
         <div className="rounded-lg bg-gray-900 p-6 shadow-lg">
           <h2 className="mb-2 text-lg font-bold text-indigo-500">Airbrake JS</h2>
           <button

components/project/Overview.tsx

@@ -1,8 +1,8 @@
-import ConfirmationDialog from '@/components/ConfirmationDialog';
 import NoData from '@/components/NoData';
 import { getNoticeIdsByProjectId } from '@/lib/queries/notices';
-import { getOccurrenceIdsByNoticeIds } from '@/lib/queries/occurrences';
+import { getHourlyOccurrenceRateForLast14Days, getOccurrenceIdsByNoticeIds } from '@/lib/queries/occurrences';
 import { getProjectById } from '@/lib/queries/projects';
+import ConfirmationDialog from '../ConfirmationDialog';
 import OccurrencesChartWrapper from './OccurrencesChartWrapper';
 
 type OverviewProps = {
@@ -16,15 +16,17 @@ async function Overview({ projectId }: OverviewProps) {
   }
   const noticeIds = await getNoticeIdsByProjectId(project.id);
   const occurrenceIds = await getOccurrenceIdsByNoticeIds(noticeIds);
+  const hourlyOccurrenceRateForLast14Days = await getHourlyOccurrenceRateForLast14Days(project.id);
+
   const stats = [
     { name: 'Notices', value: noticeIds.length },
-    { name: 'Occurrences', value: occurrenceIds.length, unit: 'mins' },
-    { name: 'Number of servers', value: '3' },
+    { name: 'Occurrences', value: occurrenceIds.length },
+    { name: 'Incoming Rate', value: hourlyOccurrenceRateForLast14Days, unit: '/ hour' },
   ];
 
   return (
     <div className="px-4 py-6 text-white sm:px-6 lg:px-8">
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2 2xl:grid-cols-4">
         <div className="rounded-lg bg-gray-900 p-6">
           <h3 className="text-base font-semibold leading-6 text-white">Project Information</h3>
           <p className="mt-1 text-sm leading-6 text-gray-400">Overview</p>
@@ -37,23 +39,32 @@ async function Overview({ projectId }: OverviewProps) {
               <dt className="text-sm font-medium leading-6 text-white">Organization</dt>
               <dd className="mt-1 text-sm leading-6 text-gray-400">{project.organization}</dd>
             </div>
-            {/* Other project information */}
+            <div className="py-3">
+              <dt className="text-sm font-medium leading-6 text-white">API Key</dt>
+              <dd className="mt-1 text-sm leading-6 text-gray-400">{project.api_key}</dd>
+            </div>
           </dl>
         </div>
-
         <div className="rounded-lg bg-gray-900 p-6">
           <h3 className="text-base font-semibold leading-6 text-white">Repository Information</h3>
           <p className="mt-1 text-sm leading-6 text-gray-400">Overview</p>
           <dl className="mt-6 divide-y divide-white/10">
             <div className="py-3">
-              <dt className="text-sm font-medium leading-6 text-white">Repository</dt>
-              <dd className="mt-1 text-sm leading-6 text-gray-400">{project.repo_url}</dd>
+              <dt className="text-sm font-medium leading-6 text-white">URL</dt>
+              <dd className="mt-1 text-sm leading-6 text-gray-400">{project.repo_url || 'Not set'}</dd>
             </div>
             <div className="py-3">
               <dt className="text-sm font-medium leading-6 text-white">Provider</dt>
               <dd className="mt-1 text-sm leading-6 text-gray-400">{project.repo_provider}</dd>
             </div>
-            {/* Other repository information */}
+            <div className="py-3">
+              <dt className="text-sm font-medium leading-6 text-white">Main Branch</dt>
+              <dd className="mt-1 text-sm leading-6 text-gray-400">{project.repo_branch}</dd>
+            </div>
+            <div className="py-3">
+              <dt className="text-sm font-medium leading-6 text-white">Issue Tracker</dt>
+              <dd className="mt-1 text-sm leading-6 text-gray-400">{project.repo_issue_tracker || 'Not set'}</dd>
+            </div>
           </dl>
         </div>
 
@@ -62,7 +73,7 @@ async function Overview({ projectId }: OverviewProps) {
             <h3 className="text-base font-semibold leading-6 text-white">Stats</h3>
             <div className="text-sm text-gray-400">Last 24 hours</div>
           </div>
-          <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
+          <div className="mt-6 grid grid-cols-1 gap-6">
             {stats.map((stat) => (
               <div key={stat.name} className="rounded-lg bg-gray-800 p-4">
                 <p className="text-sm font-medium leading-6 text-gray-400">{stat.name}</p>
@@ -74,43 +85,42 @@ async function Overview({ projectId }: OverviewProps) {
             ))}
           </div>
         </div>
-
-        <div className="rounded-lg bg-gray-900 p-6">
-          <h3 className="text-base font-semibold leading-6 text-green-500">Test Zone</h3>
-          <p className="mt-1 text-sm leading-6 text-gray-400">Send test exceptions</p>
-          <div className="mt-6">
-            <NoData project={project} showHeader={false} />
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-1">
+          <div className="rounded-lg bg-gray-900 p-6">
+            <div className="flex h-full flex-col">
+              <div>
+                <h3 className="text-base font-semibold leading-6 text-green-500">Test Zone</h3>
+              </div>
+              <div className="mt-6 flex-1">
+                <NoData project={project} showHeader={false} />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+          <div className="rounded-lg bg-gray-900 p-6">
+            <h3 className="text-base font-semibold leading-6 text-rose-500">Danger Zone</h3>
+            <div className="mt-6 space-y-4">
+              <div className="grid grid-cols-1 justify-items-center gap-4">
+                <ConfirmationDialog
+                  project={project}
+                  title="Delete All Errors"
+                  body={`Are you sure you want to delete all exceptions for the project "${project.name}"? This action cannot be undone.`}
+                  btnId="deleteAllErrors"
+                />
 
-      <div className="mt-6 rounded-lg bg-gray-900 p-6">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-semibold leading-6 text-rose-500">Danger Zone</h3>
-          <div className="text-sm text-gray-400">Handle with care</div>
-        </div>
-        <div className="mt-6 space-y-4">
-          <ConfirmationDialog
-            project={project}
-            title="Delete All Errors"
-            body={`Are you sure you want to delete all exceptions for the project "${project.name}"? This action cannot be undone.`}
-            btnId="deleteAllErrors"
-          />
-          <ConfirmationDialog
-            project={project}
-            title="Delete Project"
-            body={`Are you sure you want to delete the project "${project.name}"? This action cannot be undone.`}
-            btnId="deleteProject"
-          />
+                <ConfirmationDialog
+                  project={project}
+                  title="Delete Project"
+                  body={`Are you sure you want to delete the project "${project.name}"? This action cannot be undone.`}
+                  btnId="deleteProject"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
       <div className="mt-6 rounded-lg bg-gray-900 p-6">
-        <h3 className="text-base font-semibold leading-6 text-white">Hourly Occurrences in the past 14 days</h3>
-        <p className="mt-1 text-sm leading-6 text-gray-400">Overview of occurrences</p>
-        <div className="mt-6">
-          <OccurrencesChartWrapper occurrenceIds={occurrenceIds} />
-        </div>
+        <OccurrencesChartWrapper occurrenceIds={occurrenceIds} />
       </div>
     </div>
   );

lib/queries/occurrences.ts

@@ -84,3 +84,45 @@ export const getOccurrenceIdsByNoticeIds = async (noticeIds: string[]): Promise<
   });
   return occurrences.map((occurrence) => occurrence.id);
 };
+
+export const getHourlyOccurrenceRateForLast14Days = async (projectId: string): Promise<number> => {
+  const endDate = new Date();
+  const startDate = new Date();
+  startDate.setDate(startDate.getDate() - 14);
+
+  const occurrences = await prisma.hourlyOccurrence.aggregate({
+    _sum: {
+      count: true,
+    },
+    where: {
+      AND: [
+        {
+          occurrence: {
+            notice: {
+              project_id: projectId,
+            },
+          },
+        },
+        {
+          interval_start: {
+            gte: startDate,
+          },
+        },
+        {
+          interval_end: {
+            lte: endDate,
+          },
+        },
+      ],
+    },
+  });
+
+  const totalOccurrences = occurrences._sum.count ?? 0;
+  const totalHours = 14 * 24; // 14 days times 24 hours/day
+
+  // Convert BigInt to Number before division operation
+  const rate = Number(totalOccurrences) / totalHours;
+
+  // Round to the nearest integer
+  return Math.round(rate);
+};