update sidebar to handle failed api gracefully

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

@@ -82,15 +82,22 @@ function getProjectVersionInfo(): ProjectVersionInfo {
  };
 }
 
-async function fetchDockerHubTags(): Promise<TagCompressed[]> {
- const dockerHubUrl = `https://hub.docker.com/v2/repositories/${dockerRepoName}/tags/`;
+async function fetchDockerHubLatestTag(): Promise<TagCompressed> {
+ const dockerHubUrl = `https://hub.docker.com/v2/repositories/${dockerRepoName}/tags?ordering=last_updated&page_size=1`;
  const response = await axios.get<DockerHubAPIResponse>(dockerHubUrl);
 
- return response.data.results.map((tag) => ({
- name: tag.name,
- digest: tag.images[0].digest,
- last_updated: tag.last_updated
- }));
+ const latestTagName = response.data.results[0].name;
+
+ const tagUrl = `https://hub.docker.com/v2/repositories/${dockerRepoName}/tags/${latestTagName}`;
+ const latestTag = (await axios.get<TagResult>(tagUrl)).data;
+
+ const amdArchImage = latestTag.images.find((i) => i.architecture === 'amd64');
+
+ return {
+ name: latestTag.name,
+ digest: amdArchImage.digest,
+ last_updated: latestTag.last_updated
+ };
 }
 
 function isUpdateAvailable({
@@ -122,13 +129,8 @@ 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}`;

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

@@ -67,10 +67,12 @@ 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 formattedDate = imageStatus?.current_docker_image_build_date
+ ? format(
+ new Date(imageStatus.current_docker_image_build_date),
+ 'dd MMM yyyy HH:mm:ss'
+ )
+ : 'Not Available';
 
  return (
  <>