🚀 monitor (#42)

apps/web/src/app/app/(dashboard)/[workspaceId]/incident/page.tsx

···
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
 import { wait } from "@/lib/utils";
+import { api } from "@/trpc/server";
 
-export default async function IncidentPage() {
-  await wait(1000);
+export default async function IncidentPage({
+  params,
+}: {
+  params: { workspaceId: string };
+}) {
+  const incidents = await api.incident.getIncidentByWorkspace.query({
+    workspaceId: Number(params.workspaceId),
+  });
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <Header title="Monitor" description="Overview of all the responses." />

apps/web/src/app/app/(dashboard)/[workspaceId]/monitor/page.tsx

···
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { wait } from "@/lib/utils";
+import { api } from "@/trpc/server";
 
-export default async function MonitorPage() {
-  await wait(1000);
+export default async function MonitorPage({
+  params,
+}: {
+  params: { workspaceId: string };
+}) {
+  const monitors = await api.monitor.getMonitorsByWorkspace.query({
+    workspaceId: Number(params.workspaceId),
+  });
+  console.log(monitors);
+  // iterate over monitors
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <Header title="Monitor" description="Overview of all the responses." />

apps/web/src/app/app/(dashboard)/[workspaceId]/page.tsx

···
 import { DialogForm } from "@/components/forms/dialog-form";
 import { Button } from "@/components/ui/button";
 import { wait } from "@/lib/utils";
+import { api } from "@/trpc/server";
+import Loading from "./loading";
 
 export default async function DashboardPage() {
-  await wait(1000);
+  const workspace = await api.workspace.getUserWithWorkspace.query();
+  if (!workspace) {
+    return <Loading />;
+  }
+
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <div className="col-span-full flex w-full justify-between">

apps/web/src/app/app/(dashboard)/[workspaceId]/page/loading.tsx

···
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+
+export default function Loading() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+      <Container.Skeleton />
+    </div>
+  );
+}

apps/web/src/app/app/(dashboard)/[workspaceId]/page/page.tsx

···
+import * as React from "react";
+
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { wait } from "@/lib/utils";
+import { api } from "@/trpc/server";
+
+export default async function Page({
+  params,
+}: {
+  params: { workspaceId: string };
+}) {
+  const pages = await api.page.getPageByWorkspace.query({
+    workspaceId: Number(params.workspaceId),
+  });
+  // iterate over pages
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header
+        title="Status Page"
+        description="Overview of all your status page."
+      />
+      <Container title="Hello"></Container>
+      <Container title="World"></Container>
+    </div>
+  );
+}

apps/web/src/components/icons.tsx

···
-import { Activity, LayoutDashboard, Link, Siren } from "lucide-react";
+import { Activity, LayoutDashboard, Link, PanelTop, Siren } from "lucide-react";
 import type { Icon as LucideIcon, LucideProps } from "lucide-react";
 
 export type Icon = LucideIcon;
···
   "layout-dashboard": LayoutDashboard,
   link: Link,
   siren: Siren,
+  "panel-top": PanelTop,
 } as const;

apps/web/src/config/pages.ts

···
     icon: "layout-dashboard",
   },
   {
-    title: "Endpoint",
+    title: "Endpoints",
     description: "Keep track of all your endpoints.",
     href: "/endpoint",
     icon: "link",
   },
   {
-    title: "Monitor",
+    title: "Monitors",
     description: "Check all the responses in one place.",
     href: "/monitor",
     icon: "activity",
   },
   {
-    title: "Incident",
+    title: "Pages",
+    description: "Wher you can see all the pages.",
+    href: "/page",
+    icon: "panel-top",
+  },
+  {
+    title: "Incidents",
     description: "War room where you handle the incidents.",
     href: "/incident",
     icon: "siren",

apps/web/src/middleware.ts

···
     }
 
     // redirect them to organization selection page
-    if (auth.userId && req.nextUrl.pathname === "/app") {
+    if (
+      auth.userId &&
+      (req.nextUrl.pathname === "/app" || req.nextUrl.pathname === "/app/")
+    ) {
+      console.log(auth.userId);
+      // improve on sign-up if the webhook has not been triggered yet
       const userQuery = db
         .select()
         .from(user)
···
       const result = await db
         .select()
         .from(usersToWorkspaces)
-        .leftJoin(userQuery, eq(userQuery.id, usersToWorkspaces.userId))
+        .innerJoin(userQuery, eq(userQuery.id, usersToWorkspaces.userId))
         .execute();
+
       if (result.length) {
         const orgSelection = new URL(
           `/app/${result[0].users_to_workspaces.workspaceId}`,
           req.url,
         );
         return NextResponse.redirect(orgSelection);
+      } else {
+        // return NextResponse.redirect(new URL("/app/onboarding", req.url));
+        // probably redirect to onboarding
+        // or find a way to wait for the webhook
       }
     }
   },

packages/api/src/router/incident.ts

···
   incidentUpdate,
   insertIncidentSchema,
   insertIncidentUpdateSchema,
+  page,
 } from "@openstatus/db/src/schema";
 
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
···
         .update(incident)
         .set(opts.input.status)
         .where(eq(incident.id, opts.input.incidentId))
+        .execute();
+    }),
+  getIncidentByWorkspace: protectedProcedure
+    .input(z.object({ workspaceId: z.number() }))
+    .query(async (opts) => {
+      const pageQuery = opts.ctx.db
+        .select()
+        .from(page)
+        .where(eq(page.workspaceId, opts.input.workspaceId))
+        .as("pageQuery");
+      return opts.ctx.db
+        .select()
+        .from(incident)
+        .innerJoin(pageQuery, eq(incident.pageId, pageQuery.id))
         .execute();
     }),
 });

packages/api/src/router/monitor.ts

···
         .delete(monitor)
         .where(eq(monitor.id, opts.input.monitorId));
     }),
+  getMonitorsByWorkspace: protectedProcedure
+    .input(z.object({ workspaceId: z.number() }))
+    .query(async (opts) => {
+      return await opts.ctx.db
+        .select()
+        .from(monitor)
+        .where(eq(monitor.workspaceId, opts.input.workspaceId))
+        .execute();
+    }),
 });

packages/api/src/router/page.ts

···
         })
         .execute();
     }),
+  getPageByWorkspace: protectedProcedure
+    .input(z.object({ workspaceId: z.number() }))
+    .query(async (opts) => {
+      return await opts.ctx.db
+        .select()
+        .from(page)
+        .where(eq(page.workspaceId, opts.input.workspaceId));
+    }),
   // public if we use trpc hooks to get the page from the url
   getPageBySlug: publicProcedure
     .input(z.object({ slug: z.string() }))

packages/api/src/router/workspace.ts

···
 import { z } from "zod";
 
 import { eq } from "@openstatus/db";
-import { page, user, workspace } from "@openstatus/db/src/schema";
+import {
+  page,
+  user,
+  usersToWorkspaces,
+  workspace,
+} from "@openstatus/db/src/schema";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const workspaceRouter = createTRPCRouter({
-  getUserWorkspace: protectedProcedure.query(async (opts) => {
-    return await opts.ctx.db.query.workspace.findMany({
+  getUserWithWorkspace: protectedProcedure.query(async (opts) => {
+    return await opts.ctx.db.query.user.findMany({
       with: {
         usersToWorkspaces: {
-          where: eq(user.tenantId, opts.ctx.auth.userId),
-          with: { user: true },
+          with: {
+            workspace: true,
+          },
         },
       },
+      where: eq(user.tenantId, opts.ctx.auth.userId),
     });
   }),
   getWorkspace: protectedProcedure

packages/db/src/schema/monitor.ts

···
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
 
 import { page } from "./page";
+import { workspace } from "./workspace";
 
 export const monitor = mysqlTable("monitor", {
   id: int("id").autoincrement().primaryKey(),
···
   name: varchar("name", { length: 256 }),
   description: text("description"),
 
-  pageId: int("page_id").notNull(),
+  pageId: int("page_id"),
+  workspaceId: int("workspace_id"),
 
   createdAt: timestamp("created_at").notNull().defaultNow(),
   updateddAt: timestamp("updated_at").notNull().defaultNow().onUpdateNow(),
···
   page: one(page, {
     fields: [monitor.pageId],
     references: [page.id],
+  }),
+  workspace: one(workspace, {
+    fields: [monitor.workspaceId],
+    references: [workspace.id],
   }),
 }));
 

packages/db/src/schema/user.ts

···
     pk: primaryKey(t.userId, t.workspaceId),
   }),
 );
+
+export const usersToWorkspaceRelations = relations(
+  usersToWorkspaces,
+  ({ one }) => ({
+    workspace: one(workspace, {
+      fields: [usersToWorkspaces.workspaceId],
+      references: [workspace.id],
+    }),
+    user: one(user, {
+      fields: [usersToWorkspaces.userId],
+      references: [user.id],
+    }),
+  }),
+);