From 7c91780eb762784e465b622219ef509f87e6d227 Mon Sep 17 00:00:00 2001
From: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Date: Thu, 19 Oct 2023 11:26:02 +1300
Subject: [PATCH] fix(edge): introduce pause and rollback status [EE-5992]
 (#10465)

---
 api/portainer.go                              |  6 +++++
 .../EnvironmentsDatatable.tsx                 | 24 +++++++++++++------
 .../EnvironmentsDatatable/columns.tsx         | 12 ++++++++++
 app/react/edge/edge-stacks/types.ts           |  6 +++++
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/api/portainer.go b/api/portainer.go
index f0bf53aae..0983a3643 100644
--- a/api/portainer.go
+++ b/api/portainer.go
@@ -1696,6 +1696,12 @@ const (
 	EdgeStackStatusDeploying
 	// EdgeStackStatusRemoving represents an Edge stack which is being removed
 	EdgeStackStatusRemoving
+	// EdgeStackStatusPausedDeploying represents a paused Edge stack
+	EdgeStackStatusPausedDeploying
+	// EdgeStackStatusRollingBack represents an Edge stack which is being rolled back
+	EdgeStackStatusRollingBack
+	// EdgeStackStatusRolledBack represents an Edge stack which has rolled back
+	EdgeStackStatusRolledBack
 )
 
 const (
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
index e904a536b..955cc6f67 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
@@ -6,6 +6,7 @@ import { EdgeStackStatus, StatusType } from '@/react/edge/edge-stacks/types';
 import { useEnvironmentList } from '@/react/portainer/environments/queries';
 import { useParamState } from '@/react/hooks/useParamState';
 import { EnvironmentId } from '@/react/portainer/environments/types';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { Datatable } from '@@/datatables';
 import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
@@ -78,6 +79,21 @@ export function EnvironmentsDatatable() {
     ]
   );
 
+  const envStatusSelectOptions = [
+    { value: StatusType.Pending, label: 'Pending' },
+    { value: StatusType.Acknowledged, label: 'Acknowledged' },
+    { value: StatusType.ImagesPulled, label: 'Images pre-pulled' },
+    { value: StatusType.Running, label: 'Deployed' },
+    { value: StatusType.Error, label: 'Failed' },
+  ];
+  if (isBE) {
+    envStatusSelectOptions.concat([
+      { value: StatusType.PausedDeploying, label: 'Paused' },
+      { value: StatusType.RollingBack, label: 'Rolling back' },
+      { value: StatusType.RolledBack, label: 'Rolled back' },
+    ]);
+  }
+
   return (
     <Datatable
       columns={columns}
@@ -99,13 +115,7 @@ export function EnvironmentsDatatable() {
             bindToBody
             value={statusFilter}
             onChange={(e) => setStatusFilter(e ?? undefined)}
-            options={[
-              { value: StatusType.Pending, label: 'Pending' },
-              { value: StatusType.Acknowledged, label: 'Acknowledged' },
-              { value: StatusType.ImagesPulled, label: 'Images pre-pulled' },
-              { value: StatusType.Running, label: 'Deployed' },
-              { value: StatusType.Error, label: 'Failed' },
-            ]}
+            options={envStatusSelectOptions}
           />
         </div>
       }
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
index 9047ca79d..358e6274a 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
@@ -155,6 +155,15 @@ function endpointStatusLabel(statusArray: Array<DeploymentStatus>) {
     if (status.Type === StatusType.Error) {
       labels.push('Failed');
     }
+    if (status.Type === StatusType.PausedDeploying) {
+      labels.push('Paused');
+    }
+    if (status.Type === StatusType.RollingBack) {
+      labels.push('Rolling Back');
+    }
+    if (status.Type === StatusType.RolledBack) {
+      labels.push('Rolled Back');
+    }
   });
 
   if (!labels.length) {
@@ -283,6 +292,9 @@ function getStateColor(type: StatusType): 'orange' | 'green' | 'red' {
     case StatusType.Pending:
     case StatusType.Deploying:
     case StatusType.Removing:
+    case StatusType.PausedDeploying:
+    case StatusType.RollingBack:
+    case StatusType.RolledBack:
     default:
       return 'orange';
   }
diff --git a/app/react/edge/edge-stacks/types.ts b/app/react/edge/edge-stacks/types.ts
index 8875c73dd..ccb5a3fe8 100644
--- a/app/react/edge/edge-stacks/types.ts
+++ b/app/react/edge/edge-stacks/types.ts
@@ -30,6 +30,12 @@ export enum StatusType {
   Deploying,
   /** Removing represents an Edge stack which is being removed */
   Removing,
+  /** PausedDeploying represents an Edge stack which is paused for deployment */
+  PausedDeploying,
+  /** PausedRemoving represents an Edge stack which is being rolled back */
+  RollingBack,
+  /** PausedRemoving represents an Edge stack which has been rolled back */
+  RolledBack,
 }
 
 export interface DeploymentStatus {