feat(edge/stacks): info for old agent status [EE-5792] (#10013)

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/EdgeStacksStatus.tsx

@@ -5,9 +5,14 @@ import {
   type Icon as IconType,
   Loader2,
   XCircle,
+  MinusCircle,
 } from 'lucide-react';
 
+import { useEnvironmentList } from '@/react/portainer/environments/queries';
+import { isVersionSmaller } from '@/react/common/semver-utils';
+
 import { Icon, IconMode } from '@@/Icon';
+import { Tooltip } from '@@/Tip/Tooltip';
 
 import { DeploymentStatus, EdgeStack, StatusType } from '../../types';
 
@@ -15,28 +20,51 @@ export function EdgeStackStatus({ edgeStack }: { edgeStack: EdgeStack }) {
   const status = Object.values(edgeStack.Status);
   const lastStatus = _.compact(status.map((s) => _.last(s.Status)));
 
-  const { icon, label, mode, spin } = getStatus(
+  const environmentsQuery = useEnvironmentList({ edgeStackId: edgeStack.Id });
+
+  if (environmentsQuery.isLoading) {
+    return null;
+  }
+
+  const hasOldVersion = environmentsQuery.environments.some((env) =>
+    isVersionSmaller(env.Agent.Version, '2.19.0')
+  );
+
+  const { icon, label, mode, spin, tooltip } = getStatus(
     edgeStack.NumDeployments,
-    lastStatus
+    lastStatus,
+    hasOldVersion
   );
 
   return (
     <div className="mx-auto inline-flex items-center gap-2">
       {icon && <Icon icon={icon} spin={spin} mode={mode} />}
       {label}
+      {tooltip && <Tooltip message={tooltip} />}
     </div>
   );
 }
 
 function getStatus(
   numDeployments: number,
-  envStatus: Array<DeploymentStatus>
+  envStatus: Array<DeploymentStatus>,
+  hasOldVersion: boolean
 ): {
   label: string;
   icon?: IconType;
   spin?: boolean;
   mode?: IconMode;
+  tooltip?: string;
 } {
+  if (!numDeployments || hasOldVersion) {
+    return {
+      label: 'Unavailable',
+      icon: MinusCircle,
+      mode: 'secondary',
+      tooltip: getUnavailableTooltip(),
+    };
+  }
+
   if (envStatus.length < numDeployments) {
     return {
       label: 'Deploying',
@@ -56,7 +84,11 @@ function getStatus(
     };
   }
 
-  const allRunning = envStatus.every((s) => s.Type === StatusType.Running);
+  const allRunning = envStatus.every(
+    (s) =>
+      s.Type === StatusType.Running ||
+      (s.Type === StatusType.DeploymentReceived && hasOldVersion)
+  );
 
   if (allRunning) {
     return {
@@ -84,4 +116,16 @@ function getStatus(
     spin: true,
     mode: 'primary',
   };
+
+  function getUnavailableTooltip() {
+    if (!numDeployments) {
+      return 'Your edge stack is currently unavailable due to the absence of an available environment in your edge group';
+    }
+
+    if (hasOldVersion) {
+      return 'Please note that the new status feature for the Edge stack is only available for Edge Agent versions 2.19.0 and above. To access the status of your edge stack, it is essential to upgrade your Edge Agent to a corresponding version that is compatible with your Portainer server.';
+    }
+
+    return '';
+  }
 }

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx

@@ -45,13 +45,19 @@ export const columns = _.compact([
       (item) => item.aggregatedStatus[StatusType.ImagesPulled] || 0,
       {
         header: 'Images pre-pulled',
-        cell: ({ getValue, row }) => (
-          <DeploymentCounter
-            count={getValue()}
-            type={StatusType.ImagesPulled}
-            total={row.original.NumDeployments}
-          />
-        ),
+        cell: ({ getValue, row: { original: item } }) => {
+          if (!item.PrePullImage) {
+            return <div className="text-center">-</div>;
+          }
+
+          return (
+            <DeploymentCounter
+              count={getValue()}
+              type={StatusType.ImagesPulled}
+              total={item.NumDeployments}
+            />
+          );
+        },
         enableSorting: false,
         enableHiding: false,
         meta: {