look into deployment term signal

frontend/src/components/resources/deployment/actions.tsx

@@ -22,8 +22,10 @@ export const RedeployContainer = ({ id }: DeploymentId) => {
   const deploying = useRead("GetDeploymentActionState", { deployment: id }).data
     ?.deploying;
   const pending = isPending || deploying;
+  if (!deployment) return null;
   return (
-    <ConfirmButton
+    <ActionWithDialog
+      name={deployment.name}
       title={deployment?.info.status ? "Redeploy" : "Deploy"}
       icon={
         pending ? (
@@ -48,12 +50,10 @@ const StartContainer = ({ id }: DeploymentId) => {
   const pending = isPending || starting;
 
   if (!d) return null;
-  
+
   return (
-    <ActionWithDialog
-      name={d.name}
-      title="Start"
-      //   intent="success"
+    <ConfirmButton
+      title={d.name}
       icon={<Play className="h-4 w-4" />}
       onClick={() => mutate({ deployment: id })}
       disabled={pending}
@@ -76,7 +76,6 @@ const StopContainer = ({ id }: DeploymentId) => {
     <ActionWithDialog
       name={d?.name}
       title="Stop"
-      //   intent="warning"
       icon={<Pause className="h-4 w-4" />}
       onClick={() => mutate({ deployment: id })}
       disabled={pending}

frontend/src/components/resources/deployment/config/components/term-signal.tsx

@@ -1,5 +1,6 @@
 import { ConfigItem } from "@components/config/util";
 import { Types } from "@monitor/client";
+import { Button } from "@ui/button";
 import { Input } from "@ui/input";
 import {
   Select,
@@ -10,26 +11,9 @@ import {
   SelectValue,
 } from "@ui/select";
 import { useToast } from "@ui/use-toast";
+import { MinusCircle, PlusCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 
-// export const TerminationSignals = ({
-//   args,
-//   set,
-// }: {
-//   args: Types.TerminationSignalLabel[];
-//   set: (input: Partial<Types.DeploymentConfig>) => void;
-// }) => {
-//   return (
-//     <ConfigItem label="Termination Signals">
-//       <div>
-//         {args.map((arg, i) => {
-//           return <></>;
-//         })}
-//       </div>
-//     </ConfigItem>
-//   );
-// };
-
 export const DefaultTerminationSignal = ({
   arg,
   set,
@@ -45,7 +29,7 @@ export const DefaultTerminationSignal = ({
           set({ termination_signal: value as Types.TerminationSignal })
         }
       >
-        <SelectTrigger className="w-[150px]">
+        <SelectTrigger className="w-[200px]">
           <SelectValue placeholder="Select Type" />
         </SelectTrigger>
         <SelectContent>
@@ -53,7 +37,11 @@ export const DefaultTerminationSignal = ({
             {Object.values(Types.TerminationSignal)
               .reverse()
               .map((term_signal) => (
-                <SelectItem key={term_signal} value={term_signal} className="cursor-pointer">
+                <SelectItem
+                  key={term_signal}
+                  value={term_signal}
+                  className="cursor-pointer"
+                >
                   {term_signal}
                 </SelectItem>
               ))}
@@ -99,3 +87,96 @@ export const TerminationTimeout = ({
     </ConfigItem>
   );
 };
+
+export const TermSignalLabels = ({
+  args,
+  set,
+}: {
+  args: Types.TerminationSignalLabel[];
+  set: (input: Partial<Types.DeploymentConfig>) => void;
+}) => {
+  const signals = Object.values(Types.TerminationSignal)
+    .filter((signal) => args.every((arg) => arg.signal !== signal))
+    .reverse();
+  return (
+    <ConfigItem label="Signal Labels" className="items-start">
+      <div className="grid gap-2">
+        {args.map((label, i) => (
+          <div key={label.signal} className="flex gap-4 items-center w-full">
+            <Input
+              placeholder="Label this termination signal"
+              value={label.label}
+              onChange={(e) =>
+                set({
+                  term_signal_labels: args.map((item, index) =>
+                    index === i ? { ...item, label: e.target.value } : item
+                  ),
+                })
+              }
+            />
+
+            <Select
+              value={label.signal}
+              onValueChange={(value) =>
+                set({
+                  term_signal_labels: args.map((item, index) =>
+                    index === i
+                      ? { ...item, signal: value as Types.TerminationSignal }
+                      : item
+                  ),
+                })
+              }
+            >
+              <SelectTrigger className="w-[200px]">
+                {label.signal}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {signals.map((term_signal) => (
+                    <SelectItem
+                      key={term_signal}
+                      value={term_signal}
+                      className="cursor-pointer"
+                    >
+                      {term_signal}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() =>
+                set({
+                  term_signal_labels: args.filter((_, index) => i !== index),
+                })
+              }
+              className="p-2"
+            >
+              <MinusCircle className="w-4 h-4" />
+            </Button>
+          </div>
+        ))}
+        {signals.length > 0 && (
+          <Button
+            className="justify-self-end p-2"
+            variant="outline"
+            size="icon"
+            onClick={() =>
+              set({
+                term_signal_labels: [
+                  ...args,
+                  { label: "", signal: signals[0] },
+                ],
+              })
+            }
+          >
+            <PlusCircle className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+    </ConfigItem>
+  );
+};

frontend/src/components/resources/deployment/config/index.tsx

@@ -17,6 +17,7 @@ import { ExtraArgs } from "./components/extra-args";
 import { Config } from "@components/config";
 import {
   DefaultTerminationSignal,
+  TermSignalLabels,
   TerminationTimeout,
 } from "./components/term-signal";
 
@@ -96,12 +97,6 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
             extra_args: (value, set) => (
               <ExtraArgs args={value ?? []} set={set} />
             ),
-            termination_signal: (value, set) => (
-              <DefaultTerminationSignal arg={value} set={set} />
-            ),
-            termination_timeout: (value, set) => (
-              <TerminationTimeout arg={value} set={set} />
-            ),
           },
           settings: {
             send_alerts: true,
@@ -120,6 +115,19 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
             skip_secret_interp: true,
           },
         },
+        termination: {
+          termination: {
+            termination_signal: (value, set) => (
+              <DefaultTerminationSignal arg={value} set={set} />
+            ),
+            termination_timeout: (value, set) => (
+              <TerminationTimeout arg={value} set={set} />
+            ),
+            term_signal_labels: (value, set) => (
+              <TermSignalLabels args={value} set={set} />
+            ),
+          },
+        },
       }}
     />
   );