fix: Init redeploy (#25)

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeployButton.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { cn } from "@ctrlplane/ui";
+import { Button } from "@ctrlplane/ui/button";
+
+import { api } from "~/trpc/react";
+
+export const DeployButton: React.FC<{
+  releaseId: string;
+  environmentId: string;
+}> = ({ releaseId, environmentId }) => {
+  const deploy = api.release.deploy.toEnvironment.useMutation();
+  const router = useRouter();
+
+  return (
+    <Button
+      className={cn(
+        "w-full border-dashed border-neutral-800/50 bg-transparent text-center text-neutral-800 hover:border-blue-400 hover:bg-transparent hover:text-blue-400",
+      )}
+      variant="outline"
+      size="sm"
+      onClick={() =>
+        deploy
+          .mutateAsync({
+            environmentId,
+            releaseId,
+          })
+          .then(() => router.refresh())
+      }
+      disabled={deploy.isPending}
+    >
+      Deploy
+    </Button>
+  );
+};

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentBarChart.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { capitalCase } from "change-case";
+import {
+  Bar,
+  BarChart,
+  Cell,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { getStatusColor } from "./status-color";
+
+export const DeploymentBarChart: React.FC<{
+  data: { name: string; count: number }[];
+}> = ({ data }) => (
+  <ResponsiveContainer width="100%" height={250}>
+    <BarChart data={data} margin={{ top: 10, left: -25, bottom: -10 }}>
+      <XAxis
+        dataKey="name"
+        type="category"
+        interval={0}
+        height={100}
+        style={{ fontSize: "0.75rem" }}
+        angle={-45}
+        textAnchor="end"
+        tickFormatter={(value) => capitalCase(value as string)}
+      />
+      <YAxis style={{ fontSize: "0.75rem" }} />
+      <Bar dataKey="count" fill="#8884d8">
+        {data.map(({ name }) => (
+          <Cell key={name} fill={getStatusColor(name)} />
+        ))}
+      </Bar>
+    </BarChart>
+  </ResponsiveContainer>
+);

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { TbAlertTriangle, TbDotsVertical, TbReload } from "react-icons/tb";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@ctrlplane/ui/alert-dialog";
+import { Badge } from "@ctrlplane/ui/badge";
+import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ctrlplane/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
+
+import { api } from "~/trpc/react";
+
+const RedeployReleaseDialog: React.FC<{
+  release: { id: string; name: string };
+  environment: { id: string; name: string };
+  children: React.ReactNode;
+}> = ({ release, environment, children }) => {
+  const router = useRouter();
+  const redeploy = api.release.deploy.toEnvironment.useMutation();
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            Redeploy{" "}
+            <Badge variant="secondary" className="h-7 text-lg">
+              {release.name}
+            </Badge>{" "}
+            to {environment.name}?
+          </DialogTitle>
+          <DialogDescription>
+            This will redeploy the release to all targets in the environment.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button
+            onClick={() =>
+              redeploy
+                .mutateAsync({
+                  environmentId: environment.id,
+                  releaseId: release.id,
+                })
+                .then(() => router.refresh())
+            }
+          >
+            Redeploy
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ForceReleaseDialog: React.FC<{
+  release: { id: string; name: string };
+  environment: { id: string; name: string };
+  children: React.ReactNode;
+}> = ({ release, environment, children }) => {
+  const forceDeploy = api.release.deploy.toEnvironment.useMutation();
+  const router = useRouter();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Force release {release.name} to {environment.name}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This will force the release to be deployed to all targets in the
+            environment regardless of any policies set on the environment.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="flex">
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <div className="flex-grow" />
+          <AlertDialogAction
+            className={buttonVariants({ variant: "destructive" })}
+            onClick={() =>
+              forceDeploy
+                .mutateAsync({
+                  environmentId: environment.id,
+                  releaseId: release.id,
+                  isForcedRelease: true,
+                })
+                .then(() => router.refresh())
+            }
+          >
+            Force deploy
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export const ReleaseDropdownMenu: React.FC<{
+  release: { id: string; name: string };
+  environment: { id: string; name: string };
+  isReleaseCompleted: boolean;
+}> = ({ release, environment, isReleaseCompleted }) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant="ghost" size="icon">
+        <TbDotsVertical />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <RedeployReleaseDialog release={release} environment={environment}>
+        <DropdownMenuItem
+          disabled={!isReleaseCompleted}
+          onSelect={(e) => e.preventDefault()}
+          className="space-x-2"
+        >
+          <TbReload />
+          <span>Redeploy</span>
+        </DropdownMenuItem>
+      </RedeployReleaseDialog>
+      <ForceReleaseDialog release={release} environment={environment}>
+        <DropdownMenuItem
+          onSelect={(e) => e.preventDefault()}
+          className="space-x-2"
+        >
+          <TbAlertTriangle />
+          <span>Force deploy</span>
+        </DropdownMenuItem>
+      </ForceReleaseDialog>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);