fix(home): fix homepage edge heartbeat judgement [EE-2041] (#6624)

* fix(home): judge LastCheckInDate with QueryDate for heartbeat

* refactor(environments): remove deprecated variable homepageLoadTime

* style(environments): run yarn format

Co-authored-by: sam@gemibook <huapox@126.com>

api/http/handler/endpoints/endpoint_list.go

@@ -4,6 +4,7 @@ import (
 	"net/http"
 	"strconv"
 	"strings"
+	"time"
 
 	"github.com/portainer/libhttp/request"
 
@@ -125,6 +126,7 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 		if paginatedEndpoints[idx].EdgeCheckinInterval == 0 {
 			paginatedEndpoints[idx].EdgeCheckinInterval = settings.EdgeAgentCheckinInterval
 		}
+		paginatedEndpoints[idx].QueryDate = time.Now().Unix()
 	}
 
 	w.Header().Set("X-Total-Count", strconv.Itoa(filteredEndpointCount))

api/portainer.go

@@ -325,6 +325,8 @@ type (
 		AMTDeviceGUID string `json:"AMTDeviceGUID,omitempty" example:"4c4c4544-004b-3910-8037-b6c04f504633"`
 		// LastCheckInDate mark last check-in date on checkin
 		LastCheckInDate int64
+		// QueryDate of each query with the endpoints list
+		QueryDate int64
 		// IsEdgeDevice marks if the environment was created as an EdgeDevice
 		IsEdgeDevice bool
 		// Whether the device has been trusted or not by the user

app/portainer/environments/types.ts

@@ -63,6 +63,7 @@ export type Environment = {
   GroupId: EnvironmentGroupId;
   EdgeID?: string;
   EdgeCheckinInterval?: number;
+  QueryDate?: number;
   LastCheckInDate?: number;
   Name: string;
   Status: EnvironmentStatus;

app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.test.tsx

@@ -21,14 +21,14 @@ function renderComponent(
   edgeId = '',
   lastCheckInDate = 0,
   checkInInterval = 0,
-  homepageLoadTime = 0
+  queryDate = 0
 ) {
   return render(
     <EdgeIndicator
       edgeId={edgeId}
       lastCheckInDate={lastCheckInDate}
       checkInInterval={checkInInterval}
-      homepageLoadTime={homepageLoadTime}
+      queryDate={queryDate}
     />
   );
 }

app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx

@@ -5,7 +5,7 @@ import { isoDateFromTimestamp } from '@/portainer/filters/filters';
 interface Props {
   checkInInterval?: number;
   edgeId?: string;
-  homepageLoadTime?: number;
+  queryDate?: number;
   lastCheckInDate?: number;
 }
 
@@ -13,7 +13,7 @@ export function EdgeIndicator({
   edgeId,
   lastCheckInDate,
   checkInInterval,
-  homepageLoadTime,
+  queryDate,
 }: Props) {
   if (!edgeId) {
     return (
@@ -25,9 +25,8 @@ export function EdgeIndicator({
 
   // give checkIn some wiggle room
   let isCheckValid = false;
-  if (checkInInterval && homepageLoadTime && lastCheckInDate) {
+  if (checkInInterval && queryDate && lastCheckInDate) {
-    isCheckValid =
+    isCheckValid = queryDate - lastCheckInDate <= checkInInterval * 2 + 20;
-      homepageLoadTime - lastCheckInDate <= checkInInterval * 2 + 20;
   }
 
   return (

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx

@@ -15,17 +15,10 @@ export default {
 
 interface Args {
   environment: Environment;
-  homepageLoadTime: number;
 }
 
-function Template({ environment, homepageLoadTime = 1 }: Args) {
+function Template({ environment }: Args) {
-  return (
+  return <EnvironmentItem environment={environment} onClick={() => {}} />;
-    <EnvironmentItem
-      environment={environment}
-      homepageLoadTime={homepageLoadTime}
-      onClick={() => {}}
-    />
-  );
 }
 
 export const DockerEnvironment: Story<Args> = Template.bind({});

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx

@@ -67,7 +67,6 @@ function renderComponent(
         onClick={() => {}}
         environment={env}
         groupName={group.Name}
-        homepageLoadTime={0}
       />
     </UserContext.Provider>
   );

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx

@@ -25,18 +25,12 @@ import styles from './EnvironmentItem.module.css';
 import { EnvironmentStatusBadge } from './EnvironmentStatusBadge';
 
 interface Props {
-  homepageLoadTime?: number;
   environment: Environment;
   groupName?: string;
   onClick(environment: Environment): void;
 }
 
-export function EnvironmentItem({
+export function EnvironmentItem({ environment, onClick, groupName }: Props) {
-  environment,
-  onClick,
-  homepageLoadTime,
-  groupName,
-}: Props) {
   const isAdmin = useIsAdmin();
   const isEdge = isEdgeEnvironment(environment.Type);
 
@@ -77,7 +71,7 @@ export function EnvironmentItem({
                         edgeId={environment.EdgeID}
                         checkInInterval={environment.EdgeCheckinInterval}
                         lastCheckInDate={environment.LastCheckInDate}
-                        homepageLoadTime={homepageLoadTime}
+                        queryDate={environment.QueryDate}
                       />
                     ) : (
                       <>

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -31,8 +31,6 @@ interface Props {
 }
 
 export function EnvironmentList({ onClickItem, onRefresh }: Props) {
-  const homepageLoadTime = usePageLoadingTime();
-
   const isAdmin = useIsAdmin();
   const storageKey = 'home_endpoints';
 
@@ -98,7 +96,6 @@ export function EnvironmentList({ onClickItem, onRefresh }: Props) {
                       groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
                     }
                     onClick={onClickItem}
-                    homepageLoadTime={homepageLoadTime}
                   />
                 ))
               )}
@@ -145,15 +142,3 @@ function renderItems(
 
   return items;
 }
-
-function usePageLoadingTime() {
-  const [homepageLoadTime, setHomepageLoadTime] = useState<
-    number | undefined
-  >();
-
-  useEffect(() => {
-    setHomepageLoadTime(Math.floor(Date.now() / 1000));
-  }, []);
-
-  return homepageLoadTime;
-}

app/portainer/home/EnvironmentList/index.ts

@@ -8,6 +8,5 @@ export const EnvironmentListAngular = react2angular(EnvironmentList, [
   'tags',
   'onClickItem',
   'onRefresh',
-  'homepageLoadTime',
   'groups',
 ]);