feat: rollout drawer

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(raw)/[environmentId]/_components/RolloutCurve.tsx

@@ -154,9 +154,12 @@ export const RolloutCurveChart: React.FC = () => {
   const rolloutPolicy = rolloutInfo?.rolloutPolicy;
   const numReleaseTargets = rolloutInfo?.releaseTargetRolloutInfo.length ?? 0;
 
-  const rolloutType = rolloutPolicy?.rolloutType ?? "linear";
-  const timeScaleInterval = rolloutPolicy?.timeScaleInterval ?? 0;
-  const positionGrowthFactor = rolloutPolicy?.positionGrowthFactor ?? 1;
+  const rolloutType =
+    rolloutPolicy?.environmentVersionRollout?.rolloutType ?? "linear";
+  const timeScaleInterval =
+    rolloutPolicy?.environmentVersionRollout?.timeScaleInterval ?? 0;
+  const positionGrowthFactor =
+    rolloutPolicy?.environmentVersionRollout?.positionGrowthFactor ?? 1;
 
   const offsetFunction = RolloutTypeToOffsetFunction[rolloutType](
     positionGrowthFactor,

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(raw)/[environmentId]/_utils/rollout.ts

@@ -1,7 +1,9 @@
 import type { RouterOutputs } from "@ctrlplane/api";
 import { isAfter } from "date-fns";
 
-export type RolloutInfo = RouterOutputs["policy"]["rollout"]["list"];
+export type RolloutInfo = NonNullable<
+  RouterOutputs["policy"]["rollout"]["list"]
+>;
 
 export const getCurrentRolloutPosition = (
   rolloutInfoList: RolloutInfo["releaseTargetRolloutInfo"],

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(sidebar)/jobs/_components/EnvironmentTableRow.tsx

@@ -3,7 +3,11 @@
 import type * as SCHEMA from "@ctrlplane/db/schema";
 import React from "react";
 import { useParams } from "next/navigation";
-import { IconAlertTriangle, IconChevronRight } from "@tabler/icons-react";
+import {
+  IconAlertTriangle,
+  IconCalendarClock,
+  IconChevronRight,
+} from "@tabler/icons-react";
 import _ from "lodash";
 import { isPresent } from "ts-is-present";
 
@@ -19,6 +23,7 @@ import { CollapsibleRow } from "./CollapsibleRow";
 import { EnvironmentRowDropdown } from "./EnvironmentRowDropdown";
 import { getPoliciesBlockingByApproval } from "./policy-evaluations/utils";
 import { useEnvironmentVersionApprovalDrawer } from "./rule-drawers/environment-version-approval/useEnvironmentVersionApprovalDrawer";
+import { useRolloutDrawer } from "./rule-drawers/environment-version-rollout/useRolloutDrawer";
 
 const ApprovalDrawerTrigger: React.FC<{
   environmentId: string;
@@ -43,14 +48,42 @@ const ApprovalDrawerTrigger: React.FC<{
         e.stopPropagation();
         setEnvironmentVersionIds(environmentId, versionId);
       }}
-      className="flex h-6 items-center gap-2 text-sm"
+      className="flex h-6 items-center gap-2 rounded-full border text-sm"
     >
       <IconAlertTriangle className="h-4 w-4 text-yellow-500" />
       Approval required
     </Button>
   );
 };
 
+const RolloutDrawerTrigger: React.FC<{
+  environmentId: string;
+}> = ({ environmentId }) => {
+  const { releaseId: versionId } = useParams<{ releaseId: string }>();
+  const { data } = api.policy.rollout.list.useQuery({
+    environmentId,
+    versionId,
+  });
+  const { setEnvironmentVersionIds } = useRolloutDrawer();
+
+  if (data == null) return null;
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={(e) => {
+        e.stopPropagation();
+        setEnvironmentVersionIds(environmentId, versionId);
+      }}
+      className="flex h-6 items-center gap-2 rounded-full border text-sm"
+    >
+      <IconCalendarClock className="h-4 w-4 text-purple-500" />
+      View rollout
+    </Button>
+  );
+};
+
 const JobStatusBadge: React.FC<{
   status: SCHEMA.JobStatus;
   count?: number;
@@ -98,6 +131,7 @@ export const EnvironmentTableRow: React.FC<{
             ))}
           </div>
           <ApprovalDrawerTrigger environmentId={environment.id} />
+          <RolloutDrawerTrigger environmentId={environment.id} />
         </div>
       </div>
     </TableCell>

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(sidebar)/jobs/_components/ReleaseTargetRow.tsx

@@ -247,6 +247,7 @@ export const ReleaseTargetRow: React.FC<{
                   releaseTargetId={id}
                   version={version}
                   resource={resource}
+                  environmentId={environment.id}
                 />
               </TableCell>
               <TableCell />

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(sidebar)/jobs/_components/policy-evaluations/PolicyEvaluationsCell.tsx

@@ -2,11 +2,7 @@ import type { RouterOutputs } from "@ctrlplane/api";
 import React from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import {
-  IconArrowsSplit,
-  IconCalendarTime,
-  IconLoader2,
-} from "@tabler/icons-react";
+import { IconArrowsSplit, IconLoader2 } from "@tabler/icons-react";
 import { formatDistanceToNowStrict } from "date-fns";
 
 import { Button } from "@ctrlplane/ui/button";
@@ -19,6 +15,7 @@ import {
 
 import { urls } from "~/app/urls";
 import { api } from "~/trpc/react";
+import { useRolloutDrawer } from "../rule-drawers/environment-version-rollout/useRolloutDrawer";
 import { useVersionSelectorDrawer } from "../rule-drawers/version-selector/useVersionSelectorDrawer";
 import { BlockingReleaseTargetJobTooltip } from "./BlockingReleaseTargetJobTooltip";
 import {
@@ -79,6 +76,27 @@ const VersionSelectorDrawerTrigger: React.FC<{
   );
 };
 
+const RolloutDrawerTrigger: React.FC<{
+  environmentId: string;
+  versionId: string;
+  releaseTargetId: string;
+  rolloutTime: Date;
+}> = ({ environmentId, versionId, releaseTargetId, rolloutTime }) => {
+  const { setEnvironmentVersionIds } = useRolloutDrawer();
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() =>
+        setEnvironmentVersionIds(environmentId, versionId, releaseTargetId)
+      }
+      className="flex h-6 text-sm text-muted-foreground"
+    >
+      Rolls out in {formatDistanceToNowStrict(rolloutTime, { addSuffix: true })}
+    </Button>
+  );
+};
+
 const getBlockingVersionDependencies = (
   policyEvaluations?: PolicyEvaluation,
 ) => {
@@ -91,7 +109,8 @@ export const PolicyEvaluationsCell: React.FC<{
   resource: { id: string; name: string };
   releaseTargetId: string;
   version: { id: string; tag: string };
-}> = ({ resource, releaseTargetId, version }) => {
+  environmentId: string;
+}> = ({ resource, releaseTargetId, version, environmentId }) => {
   const versionId = version.id;
   const { data: policyEvaluations, isLoading } =
     api.policy.evaluate.releaseTarget.useQuery({
@@ -154,16 +173,16 @@ export const PolicyEvaluationsCell: React.FC<{
       </div>
     );
 
-  if (policyBlockingByRollout != null)
+  if (policyBlockingByRollout?.rolloutTime != null)
     return (
-      <PolicyListTooltip policies={[policyBlockingByRollout.policy]}>
-        <div className="flex items-center gap-2 rounded-md border border-blue-500 px-2 py-1 text-xs text-blue-500">
-          <IconCalendarTime className="h-4 w-4" />
-          {policyBlockingByRollout.rolloutTime
-            ? `Rolls out in ${formatDistanceToNowStrict(policyBlockingByRollout.rolloutTime)}`
-            : "Rollout not started"}
-        </div>
-      </PolicyListTooltip>
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <RolloutDrawerTrigger
+          environmentId={environmentId}
+          versionId={versionId}
+          releaseTargetId={releaseTargetId}
+          rolloutTime={policyBlockingByRollout.rolloutTime}
+        />
+      </div>
     );
 
   if (blockingReleaseTargetJob != null)

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(sidebar)/jobs/_components/rule-drawers/environment-version-rollout/ChartsSection.tsx

@@ -0,0 +1,21 @@
+import { RolloutCurveChart } from "./rollout-charts/RolloutCurve";
+import { RolloutDistributionCard } from "./rollout-charts/RolloutDistributionCard";
+import { RolloutPercentCard } from "./rollout-charts/RolloutPercentCard";
+
+export const ChartsSection: React.FC<{
+  deploymentId: string;
+  environmentId: string;
+  versionId: string;
+}> = (props) => (
+  <div className="space-y-4 p-4">
+    <div className="grid grid-cols-2 gap-4">
+      <div className="col-span-1">
+        <RolloutPercentCard {...props} />
+      </div>
+      <div className="col-span-1">
+        <RolloutDistributionCard {...props} />
+      </div>
+    </div>
+    <RolloutCurveChart {...props} />
+  </div>
+);

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(raw)/releases/[releaseId]/(sidebar)/jobs/_components/rule-drawers/environment-version-rollout/RolloutDrawer.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { IconCalendarClock, IconLoader2 } from "@tabler/icons-react";
+
+import { cn } from "@ctrlplane/ui";
+import { buttonVariants } from "@ctrlplane/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@ctrlplane/ui/drawer";
+
+import { urls } from "~/app/urls";
+import { api } from "~/trpc/react";
+import { ChartsSection } from "./ChartsSection";
+import { useRolloutDrawer } from "./useRolloutDrawer";
+
+const PolicyLink: React.FC<{ policy: { id: string; name: string } }> = ({
+  policy,
+}) => {
+  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+  const policyUrl = urls
+    .workspace(workspaceSlug)
+    .policies()
+    .edit(policy.id)
+    .rollouts();
+
+  return (
+    <Link
+      href={policyUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "text-xs text-foreground",
+      )}
+    >
+      {policy.name}
+    </Link>
+  );
+};
+
+const RolloutDrawerHeader: React.FC<{
+  policy: { id: string; name: string };
+  environment: { name: string };
+}> = ({ policy, environment }) => {
+  return (
+    <DrawerHeader className="space-y-2 border-b p-4">
+      <DrawerTitle className="flex items-center gap-2 text-lg font-medium">
+        <div className="flex items-center justify-center rounded-lg bg-purple-600/70 p-1">
+          <IconCalendarClock className="h-6 w-6 text-purple-400" />
+        </div>
+        Rollout status for {environment.name}
+      </DrawerTitle>
+      <DrawerDescription className="flex items-center gap-2">
+        <PolicyLink policy={policy} />
+      </DrawerDescription>
+    </DrawerHeader>
+  );
+};
+
+export const RolloutDrawer: React.FC = () => {
+  const { environmentId, versionId, removeEnvironmentVersionIds } =
+    useRolloutDrawer();
+  const setIsOpen = removeEnvironmentVersionIds;
+
+  const isOpen = environmentId != null && versionId != null;
+
+  const { data, isLoading } = api.policy.rollout.list.useQuery(
+    { environmentId: environmentId ?? "", versionId: versionId ?? "" },
+    { enabled: isOpen },
+  );
+
+  return (
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
+      <DrawerContent
+        showBar={false}
+        className="left-auto right-0 top-0 mt-0 h-screen w-1/2 overflow-auto rounded-none rounded-l-lg focus-visible:outline-none"
+      >
+        {isLoading && (
+          <div className="flex h-full w-full items-center justify-center">
+            <IconLoader2 className="h-8 w-8 animate-spin" />
+          </div>
+        )}
+        {data != null && (
+          <div>
+            <RolloutDrawerHeader
+              policy={data.rolloutPolicy}
+              environment={data.environment}
+            />
+            <ChartsSection
+              deploymentId={data.version.deploymentId}
+              environmentId={environmentId ?? ""}
+              versionId={versionId ?? ""}
+            />
+          </div>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+};