From efdd0fb04c573d033bbf806b5f0011dd14a448bd Mon Sep 17 00:00:00 2001
From: Reinier van der Leer <pwuts@agpt.co>
Date: Tue, 27 Aug 2024 18:05:46 +0200
Subject: [PATCH] feat(builder): Add "Stop Run" button to `FlowRunInfo` on
 `/monitor` page

---
 .../src/components/monitor/FlowRunInfo.tsx    | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/rnd/autogpt_builder/src/components/monitor/FlowRunInfo.tsx b/rnd/autogpt_builder/src/components/monitor/FlowRunInfo.tsx
index 1247ba2d22..10be74e29b 100644
--- a/rnd/autogpt_builder/src/components/monitor/FlowRunInfo.tsx
+++ b/rnd/autogpt_builder/src/components/monitor/FlowRunInfo.tsx
@@ -1,9 +1,10 @@
-import React from "react";
-import { GraphMeta } from "@/lib/autogpt-server-api";
+import React, { useCallback } from "react";
+import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
 import { FlowRun } from "@/lib/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Link from "next/link";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { IconSquare } from "@/components/ui/icons";
 import { Pencil2Icon } from "@radix-ui/react-icons";
 import moment from "moment/moment";
 import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
@@ -20,6 +21,11 @@ export const FlowRunInfo: React.FC<
     );
   }
 
+  const handleStopRun = useCallback(() => {
+    const api = new AutoGPTServerAPI();
+    api.stopGraphExecution(flow.id, flowRun.id);
+  }, [flow.id, flowRun.id]);
+
   return (
     <Card {...props}>
       <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
@@ -34,12 +40,19 @@ export const FlowRunInfo: React.FC<
             Run ID: <code>{flowRun.id}</code>
           </p>
         </div>
-        <Link
-          className={buttonVariants({ variant: "outline" })}
-          href={`/build?flowID=${flow.id}`}
-        >
-          <Pencil2Icon className="mr-2" /> Edit Agent
-        </Link>
+        <div className="flex space-x-2">
+          {flowRun.status === "running" && (
+            <Button onClick={handleStopRun} variant="destructive">
+              <IconSquare className="mr-2" /> Stop Run
+            </Button>
+          )}
+          <Link
+            className={buttonVariants({ variant: "outline" })}
+            href={`/build?flowID=${flow.id}`}
+          >
+            <Pencil2Icon className="mr-2" /> Edit Agent
+          </Link>
+        </div>
       </CardHeader>
       <CardContent>
         <p>