From 3994d74c7119be2571bc7963d0c2b30727e59ea1 Mon Sep 17 00:00:00 2001
From: LP B <xAt0mZ@users.noreply.github.com>
Date: Mon, 25 Sep 2023 11:56:03 +0200
Subject: [PATCH] feat(app/home): tooltip aside edge agent version on mismatch
 with Portainer version (#10288)

* feat(app/home): tooltip aside edge agent version on mismatch with Portainer version

* fix(app/home): split agent and edge version display + display warning for agents before 2.15
---
 .../EnvironmentItem/AgentDetails.tsx          | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentDetails.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentDetails.tsx
index a292dfeb2..68af4b81e 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentDetails.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/AgentDetails.tsx
@@ -1,10 +1,52 @@
+import { AlertTriangle } from 'lucide-react';
+
 import { Environment } from '@/react/portainer/environments/types';
-import { isAgentEnvironment } from '@/react/portainer/environments/utils';
+import {
+  isAgentEnvironment,
+  isEdgeEnvironment,
+} from '@/react/portainer/environments/utils';
+import { isVersionSmaller } from '@/react/common/semver-utils';
+import { useSystemStatus } from '@/react/portainer/system/useSystemStatus';
+
+import { Tooltip } from '@@/Tip/Tooltip';
+import { Icon } from '@@/Icon';
 
 export function AgentDetails({ environment }: { environment: Environment }) {
   if (!isAgentEnvironment(environment.Type)) {
     return null;
   }
 
+  if (isEdgeEnvironment(environment.Type)) {
+    return <EdgeAgentDetails environment={environment} />;
+  }
+
   return <span>{environment.Agent.Version}</span>;
 }
+
+function EdgeAgentDetails({ environment }: { environment: Environment }) {
+  const { data: systemStatus } = useSystemStatus();
+  const associated = !!environment.EdgeID;
+
+  if (!systemStatus || !associated) {
+    return null;
+  }
+
+  const agentVersion = environment.Agent.Version;
+
+  const { Version } = systemStatus;
+  const isSmaller =
+    !agentVersion || // agents before 2.15 don't send the version so it will be empty
+    isVersionSmaller(agentVersion, Version);
+
+  if (!isSmaller) {
+    return <span>{agentVersion}</span>;
+  }
+
+  return (
+    <span className="flex items-center gap-1">
+      <Icon icon={AlertTriangle} className="icon-warning" />
+      <span className="icon-warning">{agentVersion || '< 2.15'}</span>
+      <Tooltip message="Features and bug fixes in your current Portainer Server release may not be available to this Edge Agent until it is upgraded." />
+    </span>
+  );
+}