fix: use custom worflowRun hook to run the workflow at all places (#1890

) Signed-off-by: Rajesh Jonnalagadda <[email protected]>
keephq · Sep 11, 2024 · 1f4eba8 · 1f4eba8
1 parent 6bee31b
commit 1f4eba8
Show file tree

Hide file tree

Showing 9 changed files with 313 additions and 359 deletions.
diff --git a/keep-ui/app/workflows/[workflow_id]/executions.tsx b/keep-ui/app/workflows/[workflow_id]/executions.tsx
@@ -27,6 +27,7 @@ import { useWorkflowRun } from "utils/hooks/useWorkflowRun";
 import BuilderWorkflowTestRunModalContent from "../builder/builder-workflow-testrun-modal";
 import Modal from "react-modal";
 import { TableFilters } from "./table-filters";
+import AlertTriggerModal from "../workflow-run-with-alert-modal";
 
 const tabs = [
     { name: "All Time", value: 'alltime' },
@@ -67,10 +68,10 @@ export const FilterTabs = ({
 
 export function StatsCard({ children, data }: { children: any, data?: string }) {
     return <Card className="group relative container flex flex-col p-4 space-y-2 min-w-1/5">
-            {!!data && <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white rounded py-1 p-2 text-2xl font-bold">
-                {data}
-            </div>}
-            {children}
+        {!!data && <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-800 text-white rounded py-1 p-2 text-2xl font-bold">
+            {data}
+        </div>}
+        {children}
     </Card>
 }
 
@@ -109,11 +110,12 @@ export default function WorkflowDetailPage({
     } = useWorkflowExecutionsV2(params.workflow_id, tab, executionPagination.limit, executionPagination.offset);
 
     const {
-        loading,
-        runModalOpen,
-        setRunModalOpen,
-        runningWorkflowExecution,
-        setRunningWorkflowExecution } = useWorkflowRun(data?.workflow?.workflow_raw!)
+        isRunning,
+        handleRunClick,
+        getTriggerModalProps,
+        isRunButtonDisabled,
+        message,
+    } = useWorkflowRun(data?.workflow!)
 
 
     if (isLoading || !data) return <Loading />;
@@ -144,7 +146,7 @@ export default function WorkflowDetailPage({
         } else if (num >= 1_000) {
             return `${(num / 1_000).toFixed(1)}k`;
         } else {
-            return num.toString();
+            return num?.toString() ?? "";
         }
     };
 
@@ -159,7 +161,12 @@ export default function WorkflowDetailPage({
                             {/*TO DO update searchParams for these filters*/}
                             <FilterTabs tabs={tabs} setTab={setTab} tab={tab} />
                         </div>
-                        <Button className="p-2 px-4" onClick={(e) => { e.preventDefault(); setRunModalOpen(true) }}>Run now</Button>
+                        {!!data.workflow && <Button
+                            disabled={isRunning || isRunButtonDisabled}
+                            className="p-2 px-4"
+                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.stopPropagation(); e.preventDefault(); handleRunClick?.(); }}
+                            tooltip={message}
+                        >Run now</Button>}
                     </div>
                     {data?.items && (
                         <div className="mt-2 flex flex-col gap-2">
@@ -170,16 +177,14 @@ export default function WorkflowDetailPage({
                                     </Title>
                                     <div>
                                         <h1 className="text-2xl font-bold">{formatNumber(data.count ?? 0)}</h1>
-                                        {/* <div className="text-sm text-gray-500">__ from last month</div> */}
                                     </div>
                                 </StatsCard>
-                                <StatsCard data= {`${data.passCount}/${data.failCount}`}>
+                                <StatsCard data={`${data.passCount}/${data.failCount}`}>
                                     <Title>
                                         Pass / Fail ratio
                                     </Title>
                                     <div>
                                         <h1 className="text-2xl font-bold">{formatNumber(data.passCount)}{'/'}{formatNumber(data.failCount)}</h1>
-                                        {/* <div className="text-sm text-gray-500">__ from last month</div> */}
                                     </div>
 
                                 </StatsCard>
@@ -189,7 +194,6 @@ export default function WorkflowDetailPage({
                                     </Title>
                                     <div>
                                         <h1 className="text-2xl font-bold">{(data.count ? (data.passCount / data.count) * 100 : 0).toFixed(2)}{"%"}</h1>
-                                        {/* <div className="text-sm text-gray-500">__ from last month</div> */}
                                     </div>
 
                                 </StatsCard>
@@ -199,7 +203,6 @@ export default function WorkflowDetailPage({
                                     </Title>
                                     <div>
                                         <h1 className="text-2xl font-bold">{(data.avgDuration ?? 0).toFixed(2)}</h1>
-                                        {/* <div className="text-sm text-gray-500">__ from last month</div> */}
                                     </div>
 
                                 </StatsCard>
@@ -221,16 +224,8 @@ export default function WorkflowDetailPage({
                     )}
                 </div>
             </Card>
-            <Modal
-                isOpen={runModalOpen}
-                onRequestClose={() => { setRunModalOpen(false); setRunningWorkflowExecution(null) }}
-                className="bg-gray-50 p-4 md:p-10 mx-auto max-w-7xl mt-20 border border-orange-600/50 rounded-md"
-            >
-                <BuilderWorkflowTestRunModalContent
-                    closeModal={() => { setRunModalOpen(false); setRunningWorkflowExecution(null) }}
-                    workflowExecution={runningWorkflowExecution}
-                />
-            </Modal>
+            {!!data.workflow && !!getTriggerModalProps && <AlertTriggerModal {...getTriggerModalProps()}
+            />}
         </>
     );
 }
diff --git a/keep-ui/app/workflows/mockworkflows.tsx b/keep-ui/app/workflows/mockworkflows.tsx
@@ -24,7 +24,7 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
         return (
           <>
             {provider && (
-              <div key={`step-${index}`} className="flex items-center gap-2 flex-shrink-0">
+              <div key={`step-${step.id}`} className="flex items-center gap-2 flex-shrink-0">
                 {index > 0 && (
                   <TiArrowRight size={24} className="text-gray-500" />
                 )}
@@ -48,7 +48,7 @@ export function WorkflowSteps({ workflow }: { workflow: MockWorkflow }) {
         return (
           <>
             {provider && (
-              <div key={`action-${index}`} className="flex items-center gap-2 flex-shrink-0">
+              <div key={`action-${action.id}`} className="flex items-center gap-2 flex-shrink-0">
                 {(index > 0 || isStepPresent) && (
                   <TiArrowRight size={24} className="text-gray-500" />
                 )}

diff --git a/keep-ui/app/workflows/workflow-menu.tsx b/keep-ui/app/workflows/workflow-menu.tsx
@@ -11,10 +11,8 @@ interface WorkflowMenuProps {
   onView?: () => void;
   onDownload?: () => void;
   onBuilder?: () => void;
-  allProvidersInstalled: boolean;
-  hasManualTrigger: boolean;
-  hasAlertTrigger: boolean;
-  isWorkflowDisabled:boolean
+  isRunButtonDisabled: boolean;
+  runButtonToolTip?: string; 
 }
 
 
@@ -24,24 +22,13 @@ export default function WorkflowMenu({
   onView,
   onDownload,
   onBuilder,
-  allProvidersInstalled,
-  hasManualTrigger,
-  hasAlertTrigger,
-  isWorkflowDisabled,
+  isRunButtonDisabled,
+  runButtonToolTip,
 }: WorkflowMenuProps) {
-  const getDisabledTooltip = () => {
-    if (!allProvidersInstalled) return "Not all providers are installed.";
-    if (!hasManualTrigger) return "No manual trigger available.";
-    if (isWorkflowDisabled) return "Workflow is disabled";
-    return "";
-  };
   const stopPropagation = (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       };
 
-  const isRunButtonDisabled = !allProvidersInstalled || (!hasManualTrigger && !hasAlertTrigger) || isWorkflowDisabled;
-
-
   return (
     <div className="w-44 text-right">
       <Menu as="div" className="relative inline-block text-left z-10">
@@ -79,9 +66,9 @@ export default function WorkflowMenu({
                     <PlayIcon className="mr-2 h-4 w-4" aria-hidden="true" />
                     Run
                   </button>
-                  {isRunButtonDisabled && (
+                  {isRunButtonDisabled && !!runButtonToolTip &&(
                     <div className="absolute bottom-full transform -translate-x-1/2 bg-black text-white text-xs rounded px-4 py-1 z-10 opacity-0 group-hover:opacity-100">
-                      {getDisabledTooltip()}
+                      {runButtonToolTip}
                     </div>
                   )}
                 </div>