feat: implement version fetching and display in footer and settings

- Added orchestrator and daemon version fetching logic in the default layout and settings page.
- Updated footer component to display current versions with links to their respective release tags.
- Enhanced settings page to show last refresh time and automatic update countdown for health indicators.
- Refactored help button integration across various layouts for consistency.

Author: tacxou

apps/web/src/components/core/help-buttons.vue

@@ -0,0 +1,61 @@
+<template lang="pug">
+
+  q-btn.q-px-sm(@click="toogleDark" flat stretch icon="mdi-theme-light-dark" :size="size")
+    q-tooltip.text-body2(anchor="top middle" self="bottom middle") Mode sombre/clair
+  q-btn.q-px-sm(flat stretch icon="mdi-frequently-asked-questions" :href="getQAndALink" target="_blank" :size="size")
+    q-tooltip.text-body2 Poser&nbsp;une&nbsp;question&nbsp;ou&nbsp;signaler&nbsp;un&nbsp;problème
+  q-btn.q-px-sm(flat stretch icon="mdi-help" href="https://libertech-fr.github.io/sesame-doc/" target="_blank" :size="size")
+    q-tooltip.text-body2 Aide&nbsp;et&nbsp;Documentation
+</template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'HelpButtonsComponent',
+  props: {
+    size: {
+      type: String as PropType<'sm' | 'md' | 'lg'>,
+      default: 'sm',
+    },
+  },
+  computed: {
+    getQAndALink(): string {
+      return (
+        'https://github.com/Libertech-FR/sesame-orchestrator/discussions/new?' +
+        [
+          'category=q-a',
+          'title=[QUESTION]%20Votre%20titre%20ici',
+          "body=Décrivez%20votre%20question%20ici.%0A%0A---%0A%0A*Merci%20de%20ne%20pas%20oublier%20de%20fournir%20les%20informations%20suivantes%20:%0A%20-%20Version%20de%20l'Orchestrator%20:%20" +
+            (this.orchestratorVersion?.currentVersion || 'N/A') +
+            '%0A%20-%20Version%20du%20Daemon%20:%20' +
+            (this.daemonVersion?.currentVersion || 'N/A') +
+            "%0A%20-%20Système%20d'exploitation%20:%20" +
+            (navigator.userAgent || 'N/A'),
+        ].join('&')
+      )
+    },
+  },
+  setup() {
+    const orchestratorVersion = inject<{
+      currentVersion?: string
+      lastVersion?: string
+      updateAvailable?: boolean
+    }>('orchestratorVersion', {})
+    const daemonVersion = inject<{
+      currentVersion?: string
+      lastVersion?: string
+      updateAvailable?: boolean
+    }>('daemonVersion', {})
+
+    return {
+      orchestratorVersion,
+      daemonVersion,
+    }
+  },
+  methods: {
+    toogleDark() {
+      this.$q.dark.toggle()
+      window.sessionStorage.setItem('darkMode', this.$q.dark.isActive ? 'true' : 'false')
+    },
+  },
+})
+</script>

apps/web/src/components/layouts/default/footer.vue

@@ -1,11 +1,21 @@
 <template lang="pug">
   q-footer(:class="$q.dark.isActive ? 'bg-dark' : 'bg-white'" bordered)
     q-bar(:class="$q.dark.isActive ? 'bg-dark' : 'bg-white text-black'")
-      span
+      a(
+        :href="'https://github.com/Libertech-FR/sesame-orchestrator/releases/tag/' + (orchestratorVersion?.currentVersion || '0.0.0')"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="color: inherit; text-decoration: none;"
+      )
         small.gt-xs Orchestrator&nbsp;
         small(v-text="'v' + (orchestratorVersion?.currentVersion || '0.0.0')")
       small.bold &nbsp;/&nbsp;
-      span
+      a(
+        :href="'https://github.com/Libertech-FR/sesame-daemon/releases/tag/' + (daemonVersion?.currentVersion || '0.0.0')"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="color: inherit; text-decoration: none;"
+      )
         small.gt-xs Daemon&nbsp;
         small(v-text="'v' + (daemonVersion?.currentVersion || '0.0.0')")
       div.q-pr-xs
@@ -28,44 +38,21 @@
           span(v-text="daemonVersion?.lastVersion || '0.0.0'")
           | )
       q-space
-      q-btn.q-px-sm(@click="toogleDark" flat stretch icon="mdi-theme-light-dark")
-      q-btn.q-px-sm(flat stretch icon="mdi-frequently-asked-questions" :href="getQAndALink" target="_blank")
-        q-tooltip.text-body2 Poser&nbsp;une&nbsp;question&nbsp;ou&nbsp;signaler&nbsp;un&nbsp;problème
-      q-btn.q-px-sm(flat stretch icon="mdi-help" href="https://libertech-fr.github.io/sesame-doc/" target="_blank")
-        q-tooltip.text-body2 Aide&nbsp;et&nbsp;Documentation
+      sesame-core-help-buttons
 </template>
 
 <script lang="ts">
 export default defineNuxtComponent({
   name: 'LayoutsDefaultFooterComponent',
+  inject: ['orchestratorVersion', 'daemonVersion'],
   setup() {
+    const orchestratorVersion = inject('orchestratorVersion')
+    const daemonVersion = inject('daemonVersion')
+
     return {
-      orchestratorVersion: {},
-      daemonVersion: {},
+      orchestratorVersion,
+      daemonVersion,
     }
   },
-  computed: {
-    getQAndALink(): string {
-      return (
-        'https://github.com/Libertech-FR/sesame-orchestrator/discussions/new?' +
-        [
-          'category=q-a',
-          'title=[QUESTION]%20Votre%20titre%20ici',
-          "body=Décrivez%20votre%20question%20ici.%0A%0A---%0A%0A*Merci%20de%20ne%20pas%20oublier%20de%20fournir%20les%20informations%20suivantes%20:%0A%20-%20Version%20de%20l'Orchestrator%20:%20" +
-            (this.orchestratorVersion?.currentVersion || 'N/A') +
-            '%0A%20-%20Version%20du%20Daemon%20:%20' +
-            (this.daemonVersion?.currentVersion || 'N/A') +
-            "%0A%20-%20Système%20d'exploitation%20:%20" +
-            (navigator.userAgent || 'N/A'),
-        ].join('&')
-      )
-    },
-  },
-  methods: {
-    toogleDark() {
-      this.$q.dark.toggle()
-      window.sessionStorage.setItem('darkMode', this.$q.dark.isActive ? 'true' : 'false')
-    },
-  },
 })
 </script>

apps/web/src/layouts/default.vue

@@ -28,6 +28,8 @@ export default defineNuxtComponent({
   provide() {
     return {
       syncing: this.syncing,
+      orchestratorVersion: this.orchestratorVersion,
+      daemonVersion: this.daemonVersion,
     }
   },
   data() {
@@ -42,6 +44,16 @@ export default defineNuxtComponent({
       eventSeamless: false,
       eventSeamlessCurrent: 0,
       eventSeamlessCurrentJobs: {},
+      orchestratorVersion: {
+        currentVersion: '0.0.0',
+        lastVersion: '0.0.0',
+        updateAvailable: false,
+      },
+      daemonVersion: {
+        currentVersion: '0.0.0',
+        lastVersion: '0.0.0',
+        updateAvailable: false,
+      },
     }
   },
   async setup() {
@@ -72,6 +84,76 @@ export default defineNuxtComponent({
     },
   },
   methods: {
+    async fetchVersions(): Promise<void> {
+      try {
+        const orchestratorResponse = await $http.$get('/get-update/sesame-orchestrator') as {
+          data?: {
+            currentVersion?: string
+            lastVersion?: string
+            updateAvailable?: boolean
+          }
+        }
+        const orchestratorData = orchestratorResponse?.data
+        Object.assign(this.orchestratorVersion, {
+          currentVersion: orchestratorData?.currentVersion || '0.0.0',
+          lastVersion: orchestratorData?.lastVersion || '0.0.0',
+          updateAvailable: Boolean(orchestratorData?.updateAvailable),
+        })
+      } catch (error) {
+        console.error(error)
+      }
+
+      try {
+        const daemonPackageResponse = await $http.$post('/core/backends/execute?async=false', {
+          method: 'POST',
+          body: {
+            action: 'DUMP_PACKAGE_CONFIG',
+          },
+        }) as {
+          response?: {
+            data?: Array<{
+              version?: string
+            }> | {
+              package?: {
+                version?: string
+              }
+              version?: string
+            }
+            package?: {
+              version?: string
+            }
+            version?: string
+          }
+        }
+
+        const daemonResponseData = daemonPackageResponse?.response?.data
+        const daemonResponseDataVersion = Array.isArray(daemonResponseData)
+          ? daemonResponseData?.[0]?.version
+          : daemonResponseData?.package?.version || daemonResponseData?.version
+
+        const daemonCurrentVersion =
+          daemonResponseDataVersion ||
+          daemonPackageResponse?.response?.package?.version ||
+          daemonPackageResponse?.response?.version ||
+          '0.0.0'
+
+        const daemonUpdateResponse = await $http.$get(`/get-update/sesame-daemon?current=${encodeURIComponent(daemonCurrentVersion)}`) as {
+          data?: {
+            currentVersion?: string
+            lastVersion?: string
+            updateAvailable?: boolean
+          }
+        }
+        const daemonUpdateData = daemonUpdateResponse?.data
+        Object.assign(this.daemonVersion, {
+          currentVersion: daemonUpdateData?.currentVersion || daemonCurrentVersion,
+          lastVersion: daemonUpdateData?.lastVersion || '0.0.0',
+          updateAvailable: Boolean(daemonUpdateData?.updateAvailable),
+        })
+      } catch (error) {
+        console.error(error)
+      }
+    },
     syncing(payload: { count: number }) {
       this.eventSeamlessTotal = payload.count
       this.eventSeamlessCurrent = 0
@@ -134,6 +216,8 @@ export default defineNuxtComponent({
 
     this.es = new ReconnectingEventSource(esUrl)
     this.es.onmessage = this.onmessage.bind(this)
+
+    this.fetchVersions()
   },
   destroyed() {
     this.removeRouteBeforeEachGuard?.()

apps/web/src/layouts/empty.vue

@@ -3,3 +3,20 @@ q-layout(view="hHh LpR lff" style="margin-top: -1px;")
   q-page-container
     nuxt-page
 </template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'EmptyLayout',
+  setup() {
+    const $q = useQuasar()
+
+    $q.loadingBar.setDefaults({
+      color: 'white',
+      size: '3px',
+      position: 'top'
+    })
+
+    return { }
+  },
+})
+</script>

apps/web/src/layouts/simple-centered.vue

@@ -11,21 +11,22 @@ q-layout(view="lHh Lpr fff")
         icon="mdi-help-circle"
         direction='left'
       )
-        q-fab-action(
-          color="primary"
-          icon='mdi-theme-light-dark' @click="toogleDark()"
-        )
-        q-fab-action(
-          color="primary"
-          icon='mdi-frequently-asked-questions'
-          @click="openLink()"
-        )
+        q-btn-group(:class="$q.dark.isActive ? 'bg-dark' : 'bg-white'")
+          sesame-core-help-buttons(size='sm')
 </template>
 
 <script lang="ts">
 export default defineNuxtComponent({
   name: 'SimpleCenteredLayout',
   setup() {
+    const $q = useQuasar()
+
+    $q.loadingBar.setDefaults({
+      color: 'white',
+      size: '3px',
+      position: 'top'
+    })
+
     const getStyle = () => {
       return {
         backgroundImage: `url('/config/login-background.png'), linear-gradient(#5274C5, #9A4A9F)`,
@@ -35,31 +36,5 @@ export default defineNuxtComponent({
 
     return { getStyle }
   },
-  computed: {
-    getQAndALink(): string {
-      return (
-        'https://github.com/Libertech-FR/sesame-orchestrator/discussions/new?' +
-        [
-          'category=q-a',
-          'title=[QUESTION]%20Votre%20titre%20ici',
-          "body=Décrivez%20votre%20question%20ici.%0A%0A---%0A%0A*Merci%20de%20ne%20pas%20oublier%20de%20fournir%20les%20informations%20suivantes%20:%0A%20-%20Version%20de%20l'Orchestrator%20:%20" +
-            'N/A' +
-            '%0A%20-%20Version%20du%20Daemon%20:%20' +
-            'N/A' +
-            "%0A%20-%20Système%20d'exploitation%20:%20" +
-            (navigator.userAgent || 'N/A'),
-        ].join('&')
-      )
-    },
-  },
-  methods: {
-    openLink() {
-      window.open(this.getQAndALink, '_blank')
-    },
-    toogleDark() {
-      this.$q.dark.toggle()
-      window.sessionStorage.setItem('darkMode', this.$q.dark.isActive ? 'true' : 'false')
-    },
-  },
 })
 </script>

apps/web/src/pages/settings.vue

@@ -1,10 +1,21 @@
 <template lang="pug">
-q-dialog(:model-value="true" transition-show='none' transition-hide='none' full-width full-height persistent)
+q-dialog(
+  :model-value="true"
+  transition-show='none'
+  transition-hide='none'
+  :full-width="$q.screen.gt.md"
+  :full-height="$q.screen.gt.md"
+  persistent
+  :maximized="!$q.screen.gt.md"
+)
   q-card.sesame-sticky-dialog
     q-toolbar.bg-primary.text-white(flat)
       q-btn(flat @click="drawer = !drawer" round dense icon="mdi-menu")
       q-toolbar-title Paramètres
+      sesame-core-help-buttons(size='sm')
+      q-separator.q-mx-sm(vertical dark inset)
       q-btn(icon="mdi-close" flat round dense to='/')
+        q-tooltip.text-body2(anchor="top middle" self="bottom middle") Fermer
     .flex.fit(:style='{ flexDirection: $q.screen.gt.sm ? "row" : "column" }')
       .col-0
         q-tabs.full-height.border-right(
@@ -130,5 +141,11 @@ export default defineNuxtComponent({
       router,
     }
   },
+  methods: {
+    toogleDark() {
+      this.$q.dark.toggle()
+      window.sessionStorage.setItem('darkMode', this.$q.dark.isActive ? 'true' : 'false')
+    },
+  },
 })
 </script>