refactor(ui): convert all route paths to named routes

ui/src/components/shared/BaseBreadcrumb.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric } from 'vue-router'
 
 const { t } = useI18n()
 
 interface Breadcrumb {
   title: string;
   disabled: boolean;
-  href: string;
+  to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
 }
 
 const props = defineProps({

ui/src/layouts/sidebar/sidebarItems.ts

@@ -33,16 +33,16 @@ export interface menuItem {
 }
 
 const sidebarItems: menuItem[] = [
-  { header: 'Dashboard', icon:  IconHome },
+  { header: 'Dashboard', icon: IconHome },
   {
     title: 'Overview',
     icon: IconHome,
-    to: '/app/overview',
+    to: { name: "Overview" },
   },
   {
     title: 'Analytics',
     icon: IconChartHistogram,
-    to: '/app/analytics',
+    to: { name: "Analytics" },
   },
   { header: 'Sealing', icon: IconBrandAsana },
   {
@@ -51,51 +51,51 @@ const sidebarItems: menuItem[] = [
     children: [
       {
         title: 'Running',
-        to: '/app/running-tasks',
+        to: { name: 'RunningTasks' }
       },
       {
         title: 'History',
-        to: '/app/task-history',
+        to: { name: "TaskHistory" },
       },
     ],
   },
   {
     title: 'PoRep',
     icon: IconVector,
-    to: '/app/porep',
+    to: { name: "PoRep" },
   },
   {
     title: 'Sectors',
     icon: IconBox,
-    to: '/app/sectors',
+    to: { name: "Sectors" },
   },
   {
     title: 'Deals',
     icon: IconParking,
-    to: '/app/deals/pending',
+    to: { name: "PendingDeals" },
   },
   {
     title: 'Messages',
     icon: IconVector,
-    to: '/app/messages/sends',
+    to: { name: "MessageSends" },
   },
   { header: 'Mining', icon: IconUsers },
   {
     title: 'Miners',
     icon: IconUsers,
-    to: '/app/miners',
+    to: { name: "Miners" },
   },
   {
     title: "Wins",
     icon: IconCurrency,
     children: [
       {
         title: 'Overview',
-        to: '/app/mining/overview',
+        to: { name: "MiningOverview" },
       },
       {
         title: 'Blocks',
-        to: '/app/mining/wins',
+        to: { name: "MiningTaskList" },
       },
     ],
   },
@@ -106,7 +106,7 @@ const sidebarItems: menuItem[] = [
     children: [
       {
         title: 'Storage Asks',
-        to: '/app/market/storage-asks',
+        to: { name: "StorageAsks" },
         icon: IconPointFilled,
       },
       {
@@ -120,17 +120,17 @@ const sidebarItems: menuItem[] = [
   {
     title: 'Machines',
     icon: IconServer,
-    to: '/app/machines',
+    to: { name: "Machines" },
   },
   {
     title: 'Storages',
     icon: IconDatabase,
-    to: '/app/storages',
+    to: { name: "Storages" },
   },
   {
     title: 'Configurations',
     icon: IconSettings,
-    to: '/app/configurations',
+    to: { name: "Configurations" },
   },
 ]
 

ui/src/router/AppRoutes.ts

@@ -1,16 +1,16 @@
 import { RouteLocationNormalizedLoaded } from 'vue-router'
 
 const AppRoutes = {
-  path: '/app',
+  path: '/',
   meta: {
     requiresAuth: true,
   },
-  redirect: '/app/overview',
+  redirect: '/overview',
   component: () => import('@/layouts/DashboardLayout.vue'),
   children: [
     {
       name: 'Overview',
-      path: '/app/overview',
+      path: '/overview',
       component: () => import('@/views/overview/OverviewIndex.vue'),
       meta: {
         title: 'Overview',
@@ -19,7 +19,7 @@ const AppRoutes = {
     },
     {
       name: 'Analytics',
-      path: '/app/analytics',
+      path: '/analytics',
       component: () => import('@/views/analytics/AnalyticsIndex.vue'),
       meta: {
         title: 'Analytics',
@@ -28,7 +28,7 @@ const AppRoutes = {
     },
     {
       name: 'Machines',
-      path: '/app/machines',
+      path: '/machines',
       component: () => import('@/views/machines/MachineIndex.vue'),
       meta: {
         title: 'Machine List',
@@ -37,7 +37,7 @@ const AppRoutes = {
     },
     {
       name: 'MachineInfo',
-      path: '/app/machines/:id',
+      path: '/machines/:id',
       component: () => import('@/views/machines/MachineInfo.vue'),
       props: true,
       meta: {
@@ -47,7 +47,7 @@ const AppRoutes = {
     },
     {
       name: 'Storages',
-      path: '/app/storages',
+      path: '/storages',
       component: () => import('@/views/storages/StorageIndex.vue'),
       meta: {
         title: 'Storage List',
@@ -56,7 +56,7 @@ const AppRoutes = {
     },
     {
       name: 'PoRep',
-      path: '/app/porep',
+      path: '/porep',
       component: () => import('@/views/porep/PorepIndex.vue'),
       meta: {
         title: 'PoRep Pipeline',
@@ -65,7 +65,7 @@ const AppRoutes = {
     },
     {
       name: 'RunningTasks',
-      path: '/app/running-tasks',
+      path: '/running-tasks',
       component: () => import('@/views/task/TaskIndex.vue'),
       meta: {
         title: 'Running',
@@ -74,7 +74,7 @@ const AppRoutes = {
     },
     {
       name: 'TaskHistory',
-      path: '/app/task-history',
+      path: '/task-history',
       component: () => import('@/views/task/history/TaskHistoryIndex.vue'),
       props: (route: RouteLocationNormalizedLoaded) => ({
         start: Number(route.query.start),
@@ -90,7 +90,7 @@ const AppRoutes = {
     },
     {
       name: 'Sectors',
-      path: '/app/sectors',
+      path: '/sectors',
       component: () => import('@/views/sectors/SectorIndex.vue'),
       meta: {
         title: 'Sector List',
@@ -99,7 +99,7 @@ const AppRoutes = {
     },
     {
       name: 'SectorDetails',
-      path: '/app/sectors/:miner/:sectorNumber',
+      path: '/sectors/:miner/:sectorNumber',
       component: () => import('@/views/sectors/SectorDetails.vue'),
       props: true,
       meta: {
@@ -109,7 +109,7 @@ const AppRoutes = {
     },
     {
       name: 'MiningTaskList',
-      path: '/app/mining/wins',
+      path: '/mining/wins',
       component: () => import('@/views/mining/wins/MiningWinsIndex.vue'),
       meta: {
         title: 'Mining Wins',
@@ -118,7 +118,7 @@ const AppRoutes = {
     },
     {
       name: 'Configurations',
-      path: '/app/configurations',
+      path: '/configurations',
       component: () => import('@/views/configurations/ConfigurationIndex.vue'),
       meta: {
         title: 'Configuration List',
@@ -127,7 +127,7 @@ const AppRoutes = {
     },
     {
       name: 'ConfigurationEdit',
-      path: '/app/configurations/:layer',
+      path: '/configurations/:layer',
       component: () => import('@/views/configurations/ConfigurationEdit.vue'),
       props: true,
       meta: {
@@ -137,7 +137,7 @@ const AppRoutes = {
     },
     {
       name: 'ConfigurationCreate',
-      path: '/app/configurations/create',
+      path: '/configurations/create',
       component: () => import('@/views/configurations/ConfigurationCreate.vue'),
       meta: {
         title: 'Configuration Create',
@@ -146,7 +146,7 @@ const AppRoutes = {
     },
     {
       name: 'Miners',
-      path: '/app/miners',
+      path: '/miners',
       component: () => import('@/views/miners/MinerIndex.vue'),
       meta: {
         title: 'Miner List',
@@ -155,7 +155,7 @@ const AppRoutes = {
     },
     {
       name: 'MinerDetails',
-      path: '/app/miners/:id',
+      path: '/miners/:id',
       component: () => import('@/views/miners/MinerDetails.vue'),
       props: true,
       meta: {
@@ -165,7 +165,7 @@ const AppRoutes = {
     },
     {
       name: 'PendingDeals',
-      path: '/app/deals/pending',
+      path: '/deals/pending',
       component: () => import('@/views/deals/DealIndex.vue'),
       meta: {
         title: 'Pending Deals',
@@ -174,7 +174,7 @@ const AppRoutes = {
     },
     {
       name: 'MiningOverview',
-      path: '/app/mining/overview',
+      path: '/mining/overview',
       component: () => import('@/views/mining/overview/MiningOverviewIndex.vue'),
       meta: {
         title: 'Mining Overview',
@@ -183,7 +183,7 @@ const AppRoutes = {
     },
     {
       name: "MessageSends",
-      path: "/app/messages/sends",
+      path: "/messages/sends",
       component: () => import('@/views/messages/MessageIndex.vue'),
       meta: {
         title: 'Message Sends',
@@ -192,7 +192,7 @@ const AppRoutes = {
     },
     {
       name: "Settings",
-      path: "/app/settings",
+      path: "/settings",
       component: () => import('@/views/settings/SettingsIndex.vue'),
       meta: {
         title: 'Settings',
@@ -201,7 +201,7 @@ const AppRoutes = {
     },
     {
       name: "StorageAsks",
-      path: "/app/market/storage-asks",
+      path: "/market/storage-asks",
       component: () => import('@/views/market/asks/AskIndex.vue'),
       meta: {
         title: 'Storage Asks',
@@ -210,7 +210,7 @@ const AppRoutes = {
     },
     {
       name: "MarketBalances",
-      path: "/app/market/balances",
+      path: "/market/balances",
       component: () => import('@/views/market/balances/balanceIndex.vue'),
       meta: {
         title: 'Market Balances',

ui/src/router/index.ts

@@ -12,8 +12,8 @@ export const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      redirect: '/app/overview',
+      path: '/:pathMatch(.*)*',
+      component: () => import('@/views/error/Error404Page.vue')
     },
     AuthRoutes,
     AppRoutes,

ui/src/stores/auth.ts

@@ -37,7 +37,7 @@ export const useAuthStore = defineStore({
           username: result.username,
           description: result.description,
         })
-        await router.push(this.returnUrl || '/app/overview')
+        await router.push(this.returnUrl || { name: 'Overview' })
         this.returnUrl = null
       } else {
         if ('message' in result) {

ui/src/views/configurations/ConfigurationCreate.vue

@@ -41,13 +41,8 @@ const breadcrumbs = ref([
   {
     title: 'Configurations',
     disabled: false,
-    href: '/app/configurations',
-  },
-  {
-    title: 'Create',
-    disabled: true,
-    href: '#',
-  },
+    to: { name: 'Configurations' }
+  }
 ])
 
 const customizer = useCustomizerStore()

ui/src/views/configurations/ConfigurationEdit.vue

@@ -62,13 +62,8 @@ const breadcrumbs = ref([
   {
     title: 'Configurations',
     disabled: false,
-    href: '/app/configurations',
-  },
-  {
-    title: props.layer,
-    disabled: true,
-    href: '#',
-  },
+    to: { name: 'Configurations' }
+  }
 ])
 
 const customizer = useCustomizerStore()