feat(ui): Added a version indicator

.github/workflows/build.yml

@@ -55,6 +55,8 @@ jobs:
           context: .
           platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
+          build-args: |
+            GIT_SHA=${{ github.sha }}
           tags: |
             ${{ steps.meta.outputs.tags }}
             jorenn92/maintainerr:develop

.github/workflows/release.yml

@@ -28,8 +28,8 @@ jobs:
           node-version: 20.x
       - name: Activate corepack
         run: |
-            corepack install
-            corepack enable
+          corepack install
+          corepack enable
       - name: Install dependencies
         run: yarn --immutable
       - name: Release
@@ -87,6 +87,9 @@ jobs:
           context: .
           platforms: linux/amd64,linux/arm64
           push: true
+          build-args: |
+            GIT_SHA=${{ github.sha }}
+            VERSION_TAG=stable
           tags: |
             ghcr.io/jorenn92/maintainerr:${{ steps.package-version.outputs.current-version}}
             ghcr.io/jorenn92/maintainerr:latest

Dockerfile

@@ -14,7 +14,7 @@ COPY yarn.lock ./yarn.lock
 COPY jsdoc.json ./jsdoc.json
 COPY .yarnrc.yml ./.yarnrc.yml
 
-# enable correct yarn version
+# Enable correct yarn version
 RUN corepack install && \
     corepack enable
 
@@ -56,7 +56,7 @@ RUN rm -rf .yarn && \
     rm -rf /opt/yarn-* && \
     chown -R node:node /opt/ && \
     chmod -R 755 /opt/ && \
-    # data dir
+    # Data dir
     mkdir -m 777 /opt/data && \
     mkdir -m 777 /opt/data/logs && \
     chown -R node:node /opt/data
@@ -70,7 +70,15 @@ ENV NODE_ENV=${NODE_ENV}
 ARG DEBUG=false
 ENV DEBUG=${DEBUG}
 
-# set global yarn vars to a folder read/write able for all users
+# Hash of the last GIT commit
+ARG GIT_SHA
+ENV GIT_SHA=$GIT_SHA
+
+# container version type. develop, stable, edge,.. a release=stable
+ARG VERSION_TAG=develop
+ENV VERSION_TAG=$VERSION_TAG
+
+# Set global yarn vars to a folder read/write able for all users
 ENV YARN_INSTALL_STATE_PATH=/tmp/.yarn/install-state.gz
 ENV YARN_GLOBAL_FOLDER=/tmp/.yarn/global
 ENV YARN_CACHE_FOLDER=/tmp/.yarn/cache
@@ -84,12 +92,12 @@ WORKDIR /opt/app
 
 COPY supervisord.conf /etc/supervisord.conf
 
-# enable correct yarn version, add supervisor & chown root /opt dir
+# Enable correct yarn version, add supervisor & chown root /opt dir
 RUN corepack install && \
     corepack enable && \
     apk add supervisor && \
     chown node:node /opt && \
-    # This is required for docker user directive  to work
+    # This is required for docker user directive to work
     chmod 777 /opt && \
     mkdir -m 777 /.cache 
 

server/src/app/app.controller.ts

@@ -1,7 +1,12 @@
-import { Controller } from '@nestjs/common';
+import { Controller, Get } from '@nestjs/common';
 import { AppService } from './app.service';
 
-@Controller()
+@Controller('/api/app')
 export class AppController {
   constructor(private readonly appService: AppService) {}
+
+  @Get('/status')
+  async getAppStatus() {
+    return JSON.stringify(await this.appService.getAppVersionStatus());
+  }
 }

server/src/app/app.service.ts

@@ -1,4 +1,92 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, Logger } from '@nestjs/common';
+import { ExternalApiService } from 'src/modules/api/external-api/external-api.service';
+
+interface VersionResponse {
+  status: 1 | 0;
+  version: string;
+  commitTag: string;
+  updateAvailable: boolean;
+}
 
 @Injectable()
-export class AppService {}
+export class AppService {
+  private readonly logger = new Logger(AppService.name);
+
+  constructor(private readonly externalApi: ExternalApiService) {}
+
+  async getAppVersionStatus(): Promise<VersionResponse> {
+    try {
+      const packageVersion = process.env.npm_package_version
+        ? process.env.npm_package_version
+        : '0.0.1';
+
+      const versionTag = process.env.VERSION_TAG
+        ? process.env.VERSION_TAG
+        : 'develop';
+
+      const calculatedVersion =
+        versionTag !== 'stable'
+          ? process.env.GIT_SHA
+            ? `${versionTag}-${process.env.GIT_SHA}`
+            : `${versionTag}-`
+          : `${versionTag}-${packageVersion}`;
+
+      const local = process.env.NODE_ENV !== 'production';
+
+      return {
+        status: 1,
+        version: calculatedVersion,
+        commitTag: `${local ? 'local' : ''}`,
+        updateAvailable: await this.isUpdateAvailable(
+          packageVersion,
+          versionTag,
+        ),
+      };
+    } catch (err) {
+      this.logger.error(`Couldn't fetch app version status`);
+      this.logger.debug(err);
+      return {
+        status: 0,
+        version: '0.0.1',
+        commitTag: '',
+        updateAvailable: false,
+      };
+    }
+  }
+
+  private async isUpdateAvailable(currentVersion: string, versionTag: string) {
+    if (versionTag === 'stable') {
+      const githubResp: { tag_name: string } = await this.externalApi.get(
+        'https://api.github.com/repos/jorenn92/maintainerr/releases/latest',
+        {},
+        7200, // cache this for 2 hours
+      );
+      if (githubResp && githubResp.tag_name) {
+        const transformedLocalVersion = currentVersion
+          .replace('v', '')
+          .replace('.', '');
+
+        const transformedGithubVersion = githubResp.tag_name
+          .replace('v', '')
+          .replace('.', '');
+
+        return transformedGithubVersion > transformedLocalVersion;
+      }
+      this.logger.warn(`Couldn't fetch latest release version from GitHub`);
+      return false;
+    } else {
+      // in case of develop, compare SHA's
+      if (process.env.GIT_SHA) {
+        const githubResp: { sha: string } = await this.externalApi.get(
+          'https://api.github.com/repos/jorenn92/maintainerr/commits/main',
+          {},
+          7200, // cache this for 2 hours
+        );
+        if (githubResp && githubResp.sha) {
+          return githubResp.sha !== process.env.GIT_SHA;
+        }
+      }
+    }
+    return false;
+  }
+}

ui/src/components/Layout/NavBar/index.tsx

@@ -9,6 +9,8 @@ import Link from 'next/link'
 import { ReactNode, useContext, useEffect, useRef } from 'react'
 import SearchContext from '../../../contexts/search-context'
 import Transition from '../../Transition'
+import VersionStatus from '../../VersionStatus'
+import CachedImage from '../../Common/CachedImage'
 
 interface NavBarLink {
   key: string
@@ -163,6 +165,9 @@ const NavBar: React.FC<NavBarProps> = ({ open, setClosed }) => {
                       })}
                     </nav>
                   </div>
+                  <span className="mb-4">
+                    <VersionStatus />
+                  </span>
                 </div>
                 <div className="w-14 flex-shrink-0">
                   {/* <!-- Force sidebar to shrink to fit close icon --> */}
@@ -179,15 +184,22 @@ const NavBar: React.FC<NavBarProps> = ({ open, setClosed }) => {
             <div className="flex flex-1 flex-col overflow-y-auto pt-4 pb-4">
               <div className="flex flex-shrink-0 items-center">
                 <span className="px-4 text-2xl text-zinc-50">
-                  <a href="/">
-                    <img src="/logo.svg" alt="Logo" />
-                  </a>
+                  <Link href="/">
+                    <CachedImage
+                      width={0}
+                      height={0}
+                      style={{ width: '100%', height: 'auto' }}
+                      src="/logo.svg"
+                      alt="Logo"
+                    />
+                  </Link>
                 </span>
               </div>
               <nav className="mt-12 flex-1 space-y-4 px-4">
                 {navBarItems.map((navBarLink) => {
                   return (
-                    <Link legacyBehavior
+                    <Link
+                      legacyBehavior
                       key={`desktop-${navBarLink.key}`}
                       href={navBarLink.href}
                     >
@@ -214,6 +226,7 @@ const NavBar: React.FC<NavBarProps> = ({ open, setClosed }) => {
                   )
                 })}
               </nav>
+              <VersionStatus />
             </div>
           </div>
         </div>

ui/src/components/VersionStatus/index.tsx

@@ -0,0 +1,94 @@
+import Link from 'next/link'
+import GetApiHandler from '../../utils/ApiHandler'
+import { useEffect, useState } from 'react'
+import {
+  ArrowCircleUpIcon,
+  BeakerIcon,
+  CodeIcon,
+  ServerIcon,
+} from '@heroicons/react/outline'
+
+enum messages {
+  DEVELOP = 'Maintainerr Develop',
+  STABLE = 'Maintainerr Stable',
+  OUT_OF_DATE = 'Out of Date',
+}
+
+interface VersionResponse {
+  status: 1 | 0
+  version: string
+  commitTag: string
+  updateAvailable: boolean
+}
+
+interface VersionStatusProps {
+  onClick?: () => void
+}
+
+const VersionStatus = ({ onClick }: VersionStatusProps) => {
+  const [version, setVersion] = useState<string>('1.7.1')
+  const [commitTag, setCommitTag] = useState<string>('')
+  const [updateAvailable, setUpdateAvailable] = useState<boolean>(false)
+
+  useEffect(() => {
+    GetApiHandler('/app/status').then((resp: VersionResponse) => {
+      if (resp.status) {
+        setVersion(resp.version)
+        setCommitTag(resp.commitTag)
+        setUpdateAvailable(resp.updateAvailable)
+      }
+    })
+  }, [])
+
+  const versionStream =
+    commitTag === 'local'
+      ? 'Keep it up! 👍'
+      : version?.startsWith('develop-')
+        ? messages.DEVELOP
+        : messages.STABLE
+
+  return (
+    <Link
+      href="https://github.com/jorenn92/Maintainerr/releases"
+      target="_blank"
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && onClick) {
+          onClick()
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-zinc-700 transition duration-300 ${
+        updateAvailable
+          ? 'bg-amber-800 text-white hover:bg-amber-600'
+          : 'bg-zinc-900 text-zinc-300 hover:bg-zinc-800'
+      }`}
+    >
+      {commitTag === 'local' ? (
+        <CodeIcon className="h-6 w-6" />
+      ) : version.startsWith('develop-') ? (
+        <BeakerIcon className="h-6 w-6" />
+      ) : (
+        <ServerIcon className="h-6 w-6" />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
+        <span className="font-bold">{versionStream}</span>
+        <span className="truncate">
+          {commitTag === 'local' ? (
+            ''
+          ) : updateAvailable ? (
+            messages.OUT_OF_DATE
+          ) : (
+            <code className="bg-transparent p-0">
+              {version.replace('develop-', '')}
+            </code>
+          )}
+        </span>
+      </div>
+      {updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
+    </Link>
+  )
+}
+
+export default VersionStatus