fix(edge): introduce pause and rollback status [EE-5992] (#10466)

api/portainer.go

@@ -1682,6 +1682,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 (

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>
       }

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';
   }

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 {