Fix Invalid time range issue (#686)

Author: Kamlesh72

web-server/pages/api/internal/version.ts

@@ -5,6 +5,7 @@ import { Endpoint, nullSchema } from '@/api-helpers/global';
 const dockerRepoName = 'middlewareeng/middleware';
 const githubOrgName = 'middlewarehq';
 const githubRepoName = 'middleware';
+const latestTagName = 'latest';
 
 const endpoint = new Endpoint(nullSchema);
 
@@ -26,13 +27,6 @@ type CheckNewVersionResponse = {
   current_docker_image_build_date: Date;
 };
 
-type DockerHubAPIResponse = {
-  count: number;
-  next: string | null;
-  previous: string | null;
-  results: TagResult[];
-};
-
 type TagResult = {
   creator: number;
   id: number;
@@ -69,7 +63,7 @@ type DockerImage = {
 type TagCompressed = {
   name: string;
   last_updated: string;
-  digest: string;
+  digest?: string;
 };
 
 function getProjectVersionInfo(): ProjectVersionInfo {
@@ -82,15 +76,17 @@ function getProjectVersionInfo(): ProjectVersionInfo {
   };
 }
 
-async function fetchDockerHubTags(): Promise<TagCompressed[]> {
-  const dockerHubUrl = `https://hub.docker.com/v2/repositories/${dockerRepoName}/tags/`;
-  const response = await axios.get<DockerHubAPIResponse>(dockerHubUrl);
+async function fetchDockerHubLatestTag(): Promise<TagCompressed> {
+  const latestTagUrl = `https://hub.docker.com/v2/repositories/${dockerRepoName}/tags/${latestTagName}`;
+  const latestTag = (await axios.get<TagResult>(latestTagUrl)).data;
+
+  const amdArchImage = latestTag.images.find((i) => i.architecture === 'amd64');
 
-  return response.data.results.map((tag) => ({
-    name: tag.name,
-    digest: tag.images[0].digest,
-    last_updated: tag.last_updated
-  }));
+  return {
+    name: latestTag.name,
+    digest: amdArchImage?.digest,
+    last_updated: latestTag.last_updated
+  };
 }
 
 function isUpdateAvailable({
@@ -122,16 +118,14 @@ function isUpdateAvailable({
 async function checkNewImageRelease(): Promise<CheckNewVersionResponse> {
   const versionInfo = getProjectVersionInfo();
 
-  const [dockerRemoteTags] = await Promise.all([fetchDockerHubTags()]);
+  const latestTag = await fetchDockerHubLatestTag();
 
-  dockerRemoteTags.sort(
-    (a, b) =>
-      new Date(b.last_updated).getTime() - new Date(a.last_updated).getTime()
-  );
-  const latestTag = dockerRemoteTags[0];
   const latestRemoteDate = new Date(latestTag.last_updated);
 
-  const latestDockerImageLink = `https://hub.docker.com/layers/${dockerRepoName}/${latestTag.name}/images/${latestTag.digest}`;
+  let latestDockerImageLink = `https://hub.docker.com/r/${dockerRepoName}/tags`;
+  if (latestTag.digest) {
+    latestDockerImageLink = `https://hub.docker.com/layers/${dockerRepoName}/${latestTag.name}/images/${latestTag.digest}`;
+  }
 
   const githubRepLink = `https://github.com/${githubOrgName}/${githubRepoName}`;
 

web-server/src/layouts/ExtendedSidebarLayout/Sidebar/index.tsx

@@ -7,7 +7,7 @@ import {
   useTheme,
   lighten
 } from '@mui/material';
-import { format } from 'date-fns';
+import { format, isValid } from 'date-fns';
 import { useContext, useMemo } from 'react';
 
 import { FlexBox } from '@/components/FlexBox';
@@ -67,10 +67,10 @@ const SidebarContent = () => {
 
   const imageStatus = useSelector((s) => s.app.latestImageStatus);
 
-  const formattedDate = format(
-    new Date(imageStatus.current_docker_image_build_date),
-    'dd MMM yyyy HH:mm:ss'
-  );
+  const imageBuildDate = new Date(imageStatus?.current_docker_image_build_date);
+  const formattedDate = isValid(imageBuildDate)
+    ? format(imageBuildDate, 'dd MMM yyyy HH:mm:ss')
+    : 'Not Available';
 
   return (
     <>