feat(front): catch-all route to report not found

Add catch-all route to report page not found with button to clusters.

Author: rezib

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Back button in job details page redirect to node details page when clicking
     on a job running on a node (#663).
   - Add support for running under a subfolder prefix on HTTP server.
+  - Add catch-all route to report page not found with button to clusters.
 - agent:
   - Automatically discover latest Slurm REST API version supported by
     `slurmrestd` among the list of Slurm-web supported versions declared in

frontend/src/router/index.ts

@@ -30,6 +30,7 @@ import QosView from '@/views/QosView.vue'
 import ReservationsView from '@/views/ReservationsView.vue'
 import JobsStatusBadges from '@/views/tests/JobsStatusBadges.vue'
 import NodesStatusBadges from '@/views/tests/NodesStatusBadges.vue'
+import NotFoundView from '@/views/NotFoundView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -169,6 +170,11 @@ const router = createRouter({
       path: '/tests/nodes-status-badges',
       name: 'tests-nodes-status-badges',
       component: NodesStatusBadges
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'not-found',
+      component: NotFoundView
     }
   ]
 })
@@ -182,7 +188,7 @@ router.beforeEach(async (to, from) => {
     '/tests/jobs-status-badges',
     '/tests/nodes-status-badges'
   ]
-  const authRequired = !publicPages.includes(to.path)
+  const authRequired = !publicPages.includes(to.path) && to.name !== 'not-found'
   const auth = useAuthStore()
   const runtime = useRuntimeStore()
   const runtimeConfiguration = useRuntimeConfiguration()

frontend/src/views/NotFoundView.vue

@@ -0,0 +1,37 @@
+<!--
+  Copyright (c) 2025 Rackslab
+
+  This file is part of Slurm-web.
+
+  SPDX-License-Identifier: MIT
+-->
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+  <main>
+    <section class="bg-slurmweb-light flex h-screen items-center justify-center dark:bg-gray-900">
+      <div class="mx-auto max-w-md text-center">
+        <div class="mb-8">
+          <h1 class="text-9xl font-bold text-gray-400 dark:text-gray-600" aria-label="404">404</h1>
+        </div>
+        <div class="mb-8">
+          <h2 class="mb-4 text-2xl font-semibold text-gray-900 dark:text-white">Page not found</h2>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            The page you are looking for does not exist or has been moved.
+          </p>
+        </div>
+        <div>
+          <RouterLink
+            :to="{ name: 'clusters' }"
+            class="bg-slurmweb hover:bg-slurmweb-dark focus:ring-slurmweb-light dark:bg-slurmweb-dark dark:hover:bg-slurmweb dark:focus:ring-slurmweb-verydark inline-flex items-center rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:outline-hidden"
+          >
+            Go to clusters
+          </RouterLink>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>