Implemented re run button

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentCard.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import styled, { keyframes } from "styled-components";
-import { PRDeployment } from "../types";
+import { DeploymentStatus, PRDeployment } from "../types";
 import pr_icon from "assets/pull_request_icon.svg";
-import { useRouteMatch } from "react-router";
 import DynamicLink from "components/DynamicLink";
 import { capitalize, readableDate } from "shared/string_utils";
 import api from "shared/api";
@@ -11,6 +10,7 @@ import { Context } from "shared/Context";
 import Loading from "components/Loading";
 import { ActionButton } from "../components/ActionButton";
 import { EllipsisTextWrapper, RepoLink } from "../components/styled";
+import MaterialTooltip from "@material-ui/core/Tooltip";
 
 const DeploymentCard: React.FC<{
   deployment: PRDeployment;
@@ -27,6 +27,8 @@ const DeploymentCard: React.FC<{
   const [isLoading, setIsLoading] = useState(false);
   const [hasErrorOnReEnabling, setHasErrorOnReEnabling] = useState(false);
   const [showMergeInfoTooltip, setShowMergeInfoTooltip] = useState(false);
+  const [isReRunningWorkflow, setIsReRunningWorkflow] = useState(false);
+  const [hasErrorOnReRun, setHasErrorOnReRun] = useState(false);
 
   const deleteDeployment = () => {
     setIsDeleting(true);
@@ -51,11 +53,10 @@ const DeploymentCard: React.FC<{
       });
   };
 
-  const reEnablePreviewEnvironment = () => {
+  const reEnablePreviewEnvironment = async () => {
     setIsLoading(true);
-
-    api
-      .reenablePreviewEnvironmentDeployment(
+    try {
+      await api.reenablePreviewEnvironmentDeployment(
         "<token>",
         {},
         {
@@ -63,19 +64,44 @@ const DeploymentCard: React.FC<{
           project_id: currentProject.id,
           deployment_id: deployment.id,
         }
-      )
-      .then(() => {
-        setIsLoading(false);
-        onReEnable();
-      })
-      .catch((err) => {
-        setHasErrorOnReEnabling(true);
-        setIsLoading(false);
-        setCurrentError(err?.response?.data?.error || err);
-        setTimeout(() => {
-          setHasErrorOnReEnabling(false);
-        }, 500);
-      });
+      );
+
+      setIsLoading(false);
+      onReEnable();
+    } catch (err) {
+      setHasErrorOnReEnabling(true);
+      setIsLoading(false);
+      setCurrentError(err?.response?.data?.error || err);
+      setTimeout(() => {
+        setHasErrorOnReEnabling(false);
+      }, 500);
+    }
+  };
+
+  const reRunWorkflow = async () => {
+    setIsReRunningWorkflow(true);
+    try {
+      await api.reRunGHWorkflow(
+        "<token>",
+        {},
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          owner: deployment.gh_repo_owner,
+          name: deployment.gh_repo_name,
+          filename: deployment.gh_workflow_filename,
+          git_installation_id: deployment.gh_installation_id,
+        }
+      );
+      setIsReRunningWorkflow(false);
+    } catch (error) {
+      setHasErrorOnReRun(true);
+      setIsReRunningWorkflow(false);
+      setCurrentError(error);
+      setTimeout(() => {
+        setHasErrorOnReRun(false);
+      }, 500);
+    }
   };
 
   return (
@@ -133,8 +159,23 @@ const DeploymentCard: React.FC<{
       <Flex>
         {!isDeleting ? (
           <>
-            {deployment.status !== "creating" &&
-              deployment.status !== "inactive" && (
+            {deployment.status === DeploymentStatus.Failed ||
+            deployment.status === DeploymentStatus.TimedOut ? (
+              <>
+                <MaterialTooltip title="Re run last github workflow">
+                  <ReRunButton
+                    onClick={() => reRunWorkflow()}
+                    disabled={isReRunningWorkflow}
+                    hasError={hasErrorOnReRun}
+                  >
+                    <i className="material-icons-outlined">loop</i>
+                  </ReRunButton>
+                </MaterialTooltip>
+              </>
+            ) : null}
+
+            {deployment.status !== DeploymentStatus.Creating &&
+              deployment.status !== DeploymentStatus.Inactive && (
                 <>
                   <RowButton
                     to={`/preview-environments/details/${deployment.namespace}?environment_id=${deployment.environment_id}`}
@@ -153,7 +194,7 @@ const DeploymentCard: React.FC<{
                   </RowButton>
                 </>
               )}
-            {deployment.status === "inactive" ? (
+            {deployment.status === DeploymentStatus.Inactive ? (
               <ActionButton
                 onClick={reEnablePreviewEnvironment}
                 disabled={isLoading}
@@ -198,6 +239,14 @@ const DeploymentCard: React.FC<{
 
 export default DeploymentCard;
 
+const ReRunButton = styled(ActionButton)`
+  min-width: unset;
+
+  > i {
+    margin-right: unset;
+  }
+`;
+
 const SepDot = styled.div`
   color: #aaaabb66;
 `;

dashboard/src/main/home/cluster-dashboard/preview-environments/types.ts

@@ -1,19 +1,32 @@
+export enum DeploymentStatus {
+  Failed = "failed",
+  Created = "created",
+  Creating = "creating",
+  Inactive = "inactive",
+  TimedOut = "timed_out",
+  Updating = "updating",
+}
+
+export type DeploymentStatusUnion = `${DeploymentStatus}`;
+
 export type PRDeployment = {
   id: number;
   created_at: string;
   updated_at: string;
   subdomain: string;
-  status: "creating" | "failed" | "created" | "inactive";
+  status: DeploymentStatusUnion;
   environment_id: number;
   pull_request_id: number;
   namespace: string;
+  last_workflow_run_url: string;
+  gh_installation_id: number;
+  gh_workflow_filename: string;
   gh_pr_name: string;
   gh_repo_owner: string;
   gh_repo_name: string;
   gh_commit_sha: string;
   gh_pr_branch_from?: string;
   gh_pr_branch_into?: string;
-  last_workflow_run_url: string;
 };
 
 export type Environment = {
@@ -24,7 +37,7 @@ export type Environment = {
   name: string;
   git_repo_owner: string;
   git_repo_name: string;
-  last_deployment_status: "failed" | "created" | "inactive" | "disabled";
+  last_deployment_status: DeploymentStatusUnion;
   deployment_count: number;
   mode: "manual" | "auto";
 };