Set version number in build

Author: Veikkosuhonen

.github/workflows/production.yaml

@@ -28,6 +28,7 @@ jobs:
             BASE_PATH=/chat
             GIT_SHA=${{ github.sha }}
             STAGING=false
+            VERSION=${{ github.ref_name }}
           extra-args: --ulimit nofile=4096:4096
 
       - name: Push to quay.io

Containerfile

@@ -7,6 +7,10 @@ WORKDIR /opt/app-root/src
 ARG GIT_SHA
 ENV REACT_APP_GIT_SHA=$GIT_SHA
 
+ARG VERSION
+ENV VERSION=$VERSION
+ENV VITE_VERSION=$VERSION
+
 ARG BASE_PATH
 ENV PUBLIC_URL=$BASE_PATH
 

dev.Containerfile

@@ -4,6 +4,9 @@ ENV TZ="Europe/Helsinki"
 
 WORKDIR /opt/app-root/src
 
+ENV VERSION=development
+ENV VITE_VERSION=development
+
 COPY package* ./
 RUN npm i
 

src/client/components/Footer/index.tsx

@@ -2,11 +2,9 @@ import { Box, Typography, Link } from '@mui/material'
 import { Trans, useTranslation } from 'react-i18next'
 
 import toskaColor from '../../assets/toscalogo_color.svg'
-import { useQuery } from '@tanstack/react-query'
-import { maxBy } from 'lodash'
-import { Release } from '../../../shared/types'
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistanceToNow, formatDuration, interval } from 'date-fns'
 import { locales } from '../../locales/locales'
+import useCurrentUser from '../../hooks/useCurrentUser'
 
 const supportEmail = '[email protected]'
 
@@ -21,16 +19,11 @@ const styles = {
 
 const Footer = () => {
   const { t, i18n } = useTranslation()
+  const { user } = useCurrentUser()
 
-  const { data: changelog } = useQuery<Release[]>({
-    queryKey: ['/changelog'],
-    select: (data) => {
-      const last = maxBy(data, (d) => Date.parse(d.time))
-      return last ? [last] : []
-    },
-  })
-
-  const publishedAgo = formatDistanceToNow(changelog?.[0]?.time ?? new Date().getTime(), { addSuffix: true, locale: locales[i18n.language] })
+  const uptime = formatDistanceToNow(user?.lastRestart ?? Date.now(), { locale: locales[i18n.language] })
+  const serverVersion = user?.serverVersion
+  const clientVersion = import.meta.env.VITE_VERSION as string | undefined
 
   return (
     <Box
@@ -50,8 +43,13 @@ const Footer = () => {
               }}
             />
           </Typography>
-          <Box display="flex" gap="1rem">
-            <Typography variant="caption">{t('footer:version', { version: changelog?.[0]?.version, publishedAgo })}</Typography>
+          <Box display="flex" gap="1rem" mt="1rem">
+            <Box display="flex" flexDirection="column">
+              <Typography variant="caption">{t('footer:server', { version: serverVersion })}</Typography>
+              <Typography variant="caption">{t('footer:client', { version: clientVersion })}</Typography>
+              {user?.isAdmin && <Typography variant="caption">{t('footer:uptime', { uptime })}</Typography>}
+              {serverVersion !== clientVersion && <Typography variant="caption">{t('footer:mismatch')}</Typography>}
+            </Box>
             <Link href="https://toska.dev" target="_blank" rel="noopener" underline="hover">
               <img src={toskaColor} alt="Toska" width="40" />
             </Link>

src/client/locales/en.json

@@ -63,7 +63,10 @@
   },
   "footer": {
     "contactSupport": "Contact support: <mailTo>{{supportEmail}}</mailTo>",
-    "version": "Version {{version}}"
+    "server": "Server version {{version}}",
+    "client": "Client version {{version}}",
+    "uptime": "Uptime: {{uptime}}",
+    "mismatch": "Reload for latest changes"
   },
   "chat": {
     "start": "Start the conversation by sending a message...",
@@ -350,4 +353,4 @@
     "nameLabel": "Collection name",
     "nameHelperText": "Use a descriptive name (for example the full name of the course)"
   }
-}
+}

src/client/locales/fi.json

@@ -63,7 +63,10 @@
   },
   "footer": {
     "contactSupport": "Ota yhteyttä tukeen: <mailTo>{{supportEmail}}</mailTo>",
-    "version": "Versio {{version}} - julkaistu {{publishedAgo}}"
+    "server": "Palvelinversio {{version}}",
+    "client": "Selainversio {{version}}",
+    "uptime": "Uptime: {{uptime}}",
+    "mismatch": "Lataa sivu uudelleen"
   },
   "chat": {
     "start": "Aloita keskustelu lähettämällä viesti...",
@@ -350,4 +353,4 @@
     "nameLabel": "Kokoelman nimi",
     "nameHelperText": "Käytä kuvaavaa nimeä (esim. kurssin koko nimi)"
   }
-}
+}

src/client/locales/sv.json

@@ -69,7 +69,10 @@
   },
   "footer": {
     "contactSupport": "Kontakta support: <mailTo>{{supportEmail}}</mailTo>",
-    "version": "Version {{version}}"
+    "server": "Server version {{version}}",
+    "client": "Klient version {{version}}",
+    "uptime": "Uptime: {{uptime}}",
+    "mismatch": "Ladda sida om"
   },
   "chat": {
     "start": "Starta konversationen genom att skicka ett meddelande...",

src/client/types.ts

@@ -57,6 +57,7 @@ export interface User {
   isStatsViewer: boolean
   termsAcceptedAt?: string | null
   preferences?: UserPreferences
+  serverVersion?: string
 }
 
 export type Prompt = {

src/server/routes/changeLog.ts

@@ -17,7 +17,6 @@ import emailRouter from './email'
 import adminRouter from './admin'
 import facultyRouter from './faculty'
 import infoTextRouter from './infotext'
-import changeLogRouter from './changeLog'
 import feedbackRouter from './feedback'
 import testUtilsRouter from './testUtils'
 import { inProduction } from '../../config'
@@ -54,7 +53,6 @@ router.use('/email', emailRouter)
 router.use('/admin', adminRouter)
 router.use('/faculties', facultyRouter)
 router.use('/infotexts', infoTextRouter)
-router.use('/changelog', changeLogRouter)
 router.use('/feedback', feedbackRouter)
 
 Sentry.setupExpressErrorHandler(router)