From 1966fce572566fb5ab4c9d84674ae8575382d96b Mon Sep 17 00:00:00 2001
From: Derock <derock@derock.dev>
Date: Thu, 4 Jan 2024 22:31:19 -0500
Subject: [PATCH] wip: service

---
 src/app/(dashboard)/_projects/ProjectList.tsx |  2 +-
 .../[id]/_components/ProjectLayout.tsx        | 48 +++++++-----------
 .../project/[id]/_components/ServiceCard.tsx  | 49 +++++++++++++++++++
 .../project/[id]/_context/ProjectContext.tsx  |  7 ++-
 4 files changed, 73 insertions(+), 33 deletions(-)
 create mode 100644 src/app/(dashboard)/project/[id]/_components/ServiceCard.tsx

diff --git a/src/app/(dashboard)/_projects/ProjectList.tsx b/src/app/(dashboard)/_projects/ProjectList.tsx
index b1c0f60..780de29 100644
--- a/src/app/(dashboard)/_projects/ProjectList.tsx
+++ b/src/app/(dashboard)/_projects/ProjectList.tsx
@@ -88,7 +88,7 @@ export function ProjectList({ defaultValue }: { defaultValue: Projects }) {
         </div>
       </div>
 
-      <div className="mt-4 grid grid-cols-2 gap-8">
+      <div className="mt-4 grid gap-8 md:grid-cols-2">
         {sortedProjects.map((project, key) => (
           <Project key={key} project={project} />
         ))}
diff --git a/src/app/(dashboard)/project/[id]/_components/ProjectLayout.tsx b/src/app/(dashboard)/project/[id]/_components/ProjectLayout.tsx
index 65f1025..bb734c1 100644
--- a/src/app/(dashboard)/project/[id]/_components/ProjectLayout.tsx
+++ b/src/app/(dashboard)/project/[id]/_components/ProjectLayout.tsx
@@ -8,13 +8,7 @@ import { api } from "~/trpc/react";
 import { type RouterOutputs } from "~/trpc/shared";
 import { ProjectContextProvider } from "../_context/ProjectContext";
 import { CreateService } from "./CreateService";
-
-const STATUS_ICON_COLORS = {
-  Healthy: "bg-green-500 border-green-400",
-  Partial: "bg-yellow-500 border-yellow-400",
-  Unhealthy: "bg-red-500 border-red-400",
-  Unknown: "bg-gray-500 border-gray-400",
-} as const;
+import { ServiceCard } from "./ServiceCard";
 
 export function ProjectLayout(props: {
   project: RouterOutputs["projects"]["get"];
@@ -38,10 +32,21 @@ export function ProjectLayout(props: {
     ).length ?? 0;
 
   return (
-    <ProjectContextProvider data={project.data}>
+    <ProjectContextProvider
+      data={{
+        ...project.data,
+        path: projectPath,
+        selectedService:
+          typeof params.serviceId === "string"
+            ? project.data.services.find((service) =>
+                [service.id, service.name].includes(params.serviceId as string),
+              )
+            : undefined,
+      }}
+    >
       <h1 className="text-3xl font-bold">
         {project.data.friendlyName}{" "}
-        <span className="text-sm font-normal text-muted-foreground">
+        <span className="text-nowrap text-sm font-normal text-muted-foreground">
           ({project.data.internalName})
         </span>
       </h1>
@@ -81,30 +86,11 @@ export function ProjectLayout(props: {
         </Button>
       </div>
 
-      <div className="flex flex-row gap-4 border-b-2 border-b-border py-8">
+      <div className="flex flex-row gap-4 border-b-2 border-b-border py-4">
         {/* services */}
-        <div className="flex flex-grow flex-row gap-2 overflow-x-auto">
+        <div className="flex flex-grow flex-row flex-wrap gap-2">
           {project.data.services.map((service) => (
-            <Link
-              key={service.id}
-              href={`${projectPath}/service/${service.id}`}
-            >
-              <div className="flex flex-row items-center gap-1">
-                <div
-                  className={`mr-1 inline-block h-3 w-3 rounded-full border-2 ${
-                    service.stats?.ServiceStatus?.RunningTasks == undefined
-                      ? STATUS_ICON_COLORS.Unknown
-                      : service.stats?.ServiceStatus?.RunningTasks ==
-                          service.stats?.ServiceStatus?.DesiredTasks
-                        ? STATUS_ICON_COLORS.Healthy
-                        : service.stats?.ServiceStatus?.RunningTasks ?? 0 > 0
-                          ? STATUS_ICON_COLORS.Partial
-                          : STATUS_ICON_COLORS.Unhealthy
-                  }`}
-                />
-                <span>{service.name}</span>
-              </div>
-            </Link>
+            <ServiceCard service={service} key={service.id} />
           ))}
 
           {project.data.services.length == 0 && (
diff --git a/src/app/(dashboard)/project/[id]/_components/ServiceCard.tsx b/src/app/(dashboard)/project/[id]/_components/ServiceCard.tsx
new file mode 100644
index 0000000..c6fac72
--- /dev/null
+++ b/src/app/(dashboard)/project/[id]/_components/ServiceCard.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { buttonVariants } from "~/components/ui/button";
+import { cn } from "~/utils/utils";
+import {
+  useProject,
+  type BasicServiceDetails,
+} from "../_context/ProjectContext";
+
+const STATUS_ICON_COLORS = {
+  Healthy: "bg-green-500 border-green-400",
+  Partial: "bg-yellow-500 border-yellow-400",
+  Unhealthy: "bg-red-500 border-red-400",
+  Unknown: "bg-gray-500 border-gray-400",
+} as const;
+
+export function ServiceCard({ service }: { service: BasicServiceDetails }) {
+  const project = useProject();
+
+  return (
+    <Link href={`${project.path}/service/${service.name}`}>
+      <div
+        className={cn(
+          buttonVariants({ variant: "outline", size: "lg" }),
+          "px-6 py-4",
+          project.selectedService?.id === service.id &&
+            "cursor-default bg-card hover:bg-card",
+        )}
+      >
+        <div className="flex flex-row items-center gap-1">
+          <div
+            className={`mr-1 inline-block h-3 w-3 rounded-full border-2 ${
+              service.stats?.ServiceStatus?.RunningTasks == undefined
+                ? STATUS_ICON_COLORS.Unknown
+                : service.stats?.ServiceStatus?.RunningTasks ==
+                    service.stats?.ServiceStatus?.DesiredTasks
+                  ? STATUS_ICON_COLORS.Healthy
+                  : service.stats?.ServiceStatus?.RunningTasks ?? 0 > 0
+                    ? STATUS_ICON_COLORS.Partial
+                    : STATUS_ICON_COLORS.Unhealthy
+            }`}
+          />
+          <span>{service.name}</span>
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/app/(dashboard)/project/[id]/_context/ProjectContext.tsx b/src/app/(dashboard)/project/[id]/_context/ProjectContext.tsx
index 66652fa..fe35b83 100644
--- a/src/app/(dashboard)/project/[id]/_context/ProjectContext.tsx
+++ b/src/app/(dashboard)/project/[id]/_context/ProjectContext.tsx
@@ -3,7 +3,12 @@
 import { createContext, useContext } from "react";
 import { type RouterOutputs } from "~/trpc/shared";
 
-type ProjectContextType = RouterOutputs["projects"]["get"];
+export type BasicServiceDetails =
+  RouterOutputs["projects"]["get"]["services"][number];
+export type ProjectContextType = RouterOutputs["projects"]["get"] & {
+  path: string;
+  selectedService?: BasicServiceDetails;
+};
 
 const ProjectContext = createContext<ProjectContextType>(
   {} as unknown as ProjectContextType,