fix: URL encode resource's id before calling API endpoints

webui/src/_mixins/GetTableProps.js

@@ -138,7 +138,7 @@ const GetTablePropsMixin = {
       return {
         onRowClick: row =>
           this.$router.push({
-            path: `/${type.replace('-', '/', 'gi')}/${row.name}`
+            path: `/${type.replace('-', '/', 'gi')}/${encodeURIComponent(row.name)}`
           }),
         columns: allColumns.filter(c =>
           get(propsByType, `${type}.columns`, []).includes(c.name)

webui/src/_services/HttpService.js

@@ -14,7 +14,7 @@ function getAllRouters (params) {
 }
 
 function getRouterByName (name) {
-  return APP.api.get(`${apiBase}/routers/${name}`)
+  return APP.api.get(`${apiBase}/routers/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> HttpService -> getRouterByName', body.data)
       return body.data
@@ -32,7 +32,7 @@ function getAllServices (params) {
 }
 
 function getServiceByName (name) {
-  return APP.api.get(`${apiBase}/services/${name}`)
+  return APP.api.get(`${apiBase}/services/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> HttpService -> getServiceByName', body.data)
       return body.data
@@ -50,7 +50,7 @@ function getAllMiddlewares (params) {
 }
 
 function getMiddlewareByName (name) {
-  return APP.api.get(`${apiBase}/middlewares/${name}`)
+  return APP.api.get(`${apiBase}/middlewares/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> HttpService -> getMiddlewareByName', body.data)
       return body.data

webui/src/_services/TcpService.js

@@ -14,7 +14,7 @@ function getAllRouters (params) {
 }
 
 function getRouterByName (name) {
-  return APP.api.get(`${apiBase}/routers/${name}`)
+  return APP.api.get(`${apiBase}/routers/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> TcpService -> getRouterByName', body.data)
       return body.data
@@ -32,7 +32,7 @@ function getAllServices (params) {
 }
 
 function getServiceByName (name) {
-  return APP.api.get(`${apiBase}/services/${name}`)
+  return APP.api.get(`${apiBase}/services/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> TcpService -> getServiceByName', body.data)
       return body.data
@@ -50,7 +50,7 @@ function getAllMiddlewares (params) {
 }
 
 function getMiddlewareByName (name) {
-  return APP.api.get(`${apiBase}/middlewares/${name}`)
+  return APP.api.get(`${apiBase}/middlewares/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> TcpService -> getMiddlewareByName', body.data)
       return body.data

webui/src/_services/UdpService.js

@@ -14,7 +14,7 @@ function getAllRouters (params) {
 }
 
 function getRouterByName (name) {
-  return APP.api.get(`${apiBase}/routers/${name}`)
+  return APP.api.get(`${apiBase}/routers/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> UdpService -> getRouterByName', body.data)
       return body.data
@@ -32,7 +32,7 @@ function getAllServices (params) {
 }
 
 function getServiceByName (name) {
-  return APP.api.get(`${apiBase}/services/${name}`)
+  return APP.api.get(`${apiBase}/services/${encodeURIComponent(name)}`)
     .then(body => {
       console.log('Success -> UdpService -> getServiceByName', body.data)
       return body.data

webui/src/pages/_commons/RouterDetail.vue

@@ -279,7 +279,7 @@ export default {
         return data.service
       }
 
-      return `${data.service}@${data.provider}`
+      return `${encodeURIComponent(data.service)}@${data.provider}`
     }
   },
   created () {