feat(added new tests for testing vue components Routers, updated routes logic, added nan check for route fields):

proxy-ui-app/src/App.vue

@@ -35,6 +35,18 @@ export default {
         v-for="route in routes"
         :id="route.id"
         :key="`key-${route.id}`"
+        :isCbOn="route.is_cb_on"
+        :isOnline="route.is_online"
+        :path="route.path"
+        :role="route.role"
+        :description="route.description"
+        :errorPercent="route.cb_error_threshold_percentage"
+        :intervalDuration="route.cb_interval_duration"
+        :minRequests="route.cb_min_requests"
+        :openStateTimeout="route.cb_open_state_timeout"
+        :requestLimit="route.cb_request_limit"
+        :deepness="route.deepness"
+        :order="route.order"
       />
     </RoutesList>
   </div>

proxy-ui-app/src/components/3_organisms/RoutersEditor/RouterRow.vue

@@ -13,6 +13,54 @@ export default {
       default: -1,
       type: Number
     },
+    isCbOn: {
+      default: false,
+      type: Boolean
+    },
+    isOnline: {
+      default: false,
+      type: Boolean
+    },
+    path: {
+      default: "",
+      type: String
+    },
+    role: {
+      default: null,
+      type: Number
+    },
+    description: {
+      default: "",
+      type: String
+    },
+    errorPercent: {
+      default: 0,
+      type: Number
+    },
+    intervalDuration: {
+      default: 0,
+      type: Number
+    },
+    minRequests: {
+      default: 0,
+      type: Number
+    },
+    openStateTimeout: {
+      default: 0,
+      type: Number
+    },
+    requestLimit: {
+      default: 0,
+      type: Number
+    },
+    deepness: {
+      default: 0,
+      type: Number
+    },
+    order: {
+      default: 0,
+      type: Number
+    },
   },
   data() {
     return {
@@ -23,51 +71,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('proxy', ["selectedSite", "routes", 'routeOptions', 'routesLib']),
-    path() {
-      return this.routesLib[this.id]?.path || ""
-    },
-    role() {
-      return this.routesLib[this.id]?.role || ""
-    },
-    description() {
-      return this.routesLib[this.id]?.description || ""
-    },
-    errorPercent() {
-      if (!this.routesLib[this.id]?.cb_error_threshold_percentage && this.routesLib[this.id]?.cb_error_threshold_percentage !== 0) return ""
-      return this.routesLib[this.id]?.cb_error_threshold_percentage
-    },
-    intervalDuration() {
-      if (!this.routesLib[this.id]?.cb_interval_duration && this.routesLib[this.id]?.cb_interval_duration !== 0) return ""
-      return this.routesLib[this.id]?.cb_interval_duration
-    },
-    minRequests() {
-      if (!this.routesLib[this.id]?.cb_min_requests && this.routesLib[this.id]?.cb_min_requests !== 0) return ""
-      return this.routesLib[this.id]?.cb_min_requests
-    },
-    openStateTimeout() {
-      if (!this.routesLib[this.id]?.cb_open_state_timeout && this.routesLib[this.id]?.cb_open_state_timeout !== 0) return ""
-      return this.routesLib[this.id]?.cb_open_state_timeout
-    },
-    requestLimit() {
-      if (!this.routesLib[this.id]?.cb_request_limit && this.routesLib[this.id]?.cb_request_limit !== 0) return ""
-      return this.routesLib[this.id]?.cb_request_limit
-    },
-    deepness() {
-      if (!this.routesLib[this.id]?.deepness && this.routesLib[this.id]?.deepness !== 0) return ""
-      return this.routesLib[this.id]?.deepness
-    },
-    order() {
-      if (!this.routesLib[this.id]?.order && this.routesLib[this.id]?.order !== 0) return ""
-      return this.routesLib[this.id]?.order
-    },
-    isCbOn() {
-      return this.routesLib[this.id]?.is_cb_on
-    },
-    isOnline() {
-      return this.routesLib[this.id]?.is_online
-    },
-
+    ...mapGetters('proxy', ["selectedSite", "routes", 'routeOptions', 'newRoute']),
   },
   methods: {
     ...mapActions('proxy', ["updateRouteRow", "removeRoute", "breateAddingRoute"]),
@@ -77,17 +81,21 @@ export default {
     },
     setValue(key, value) {
       this.updateRouteRow({
-        ...this.routesLib[this.id],
+        id: this.id,
         [key]: value
       })
     },
     setInputValue(params) {
-      const value = params.isNumber ? parseFloat(params.value) : params.value
+      const value = params.isNumber ? this.parseNumber(params.value) : params.value
       this.updateRouteRow({
-        ...this.routesLib[this.id],
+        id: this.id,
         [params.key]: value
       })
     },
+    parseNumber (value) {
+      if (!value || value !== 0) return 0
+      return parseFloat(value)
+    },
     removeCurrentRoute() {
       this.removeRoute({id: this.id})
     },

proxy-ui-app/src/store/modules/proxy/helpers.js

@@ -1,5 +1,6 @@
 const addedSite = (addedSite, sites) => {
-  return [addedSite,...sites]
+  const sitesWithoutNewSite = removedNewSite(sites)
+  return [addedSite,...sitesWithoutNewSite]
 }
 
 const updatedSite = (updatedSite, sites) => {
@@ -41,6 +42,7 @@ const updatedRoute = (updatedRoute, routes) => {
   return routes.reduce((acc, cur) => {
     if (cur.id === updatedRoute.id) {
       return  [...acc, {
+        ...cur,
         ...updatedRoute,
         action: updatedRoute.action === "create" ? "create" : "update"
       }]

proxy-ui-app/src/store/modules/proxy/index.js

@@ -15,8 +15,8 @@ const initState = {
   selectedSite: null,
 
   routes: [],
+  newRoute: null,
   routesState: "await",
-  routesLib: {},
 };
 
 const state = {
@@ -27,14 +27,11 @@ const getters = {
   isSaveData:  (state) => state.isSaveData,
   sites:        (state) => state.sites,
   routes:       (state) => state.routes.filter(({action}) => !["remove", "delete"].includes(action)),
-  routesLib:    (state) => state.routes.reduce((acc, cur) => ({
-    ...acc,
-    [cur.id]: cur
-  }), {}),
   routesState:  (state) => state.routesState,
   sitesState:   (state) => state.sitesState,
   routeOptions: () => routeOptions,
   selectedSite: (state) => state.selectedSite,
+  newRoute:     (state) => state.newRoute,
 };
 
 const mutations = {
@@ -44,6 +41,7 @@ const mutations = {
   setSelectedSite: (state, payload) => state.selectedSite = payload,
   setRoutes: (state, payload) => state.routes = payload,
   setRoutesState: (state, payload) => state.routesState = payload,
+  setNewRoute: (state, payload) => state.newRoute = payload,
 };
 
 const actions = {
@@ -114,14 +112,20 @@ const actions = {
       action: "create",
       server_id: getters.selectedSite.id
     }
+    commit('setNewRoute', newRoute)
     commit('setRoutes', [newRoute, ...state.routes])
   },
   updateRouteRow: ({commit, state}, editRoute) => {
-    const updatedRoutes = updatedRoute(editRoute, state.routes)
+    const editedRoute = state.newRoute ? {...state.newRoute, ...editRoute} : editRoute
+    const updatedRoutes = updatedRoute(editedRoute, state.routes)
+    if (state.newRoute && state.newRoute.id === editRoute.id) {
+      commit('setNewRoute', {...state.newRoute, ...editRoute})
+    }
     commit('setRoutes', updatedRoutes)
   },
   updateRoutesWithApi: async ({commit, state}, payload) => {
     commit('setRoutesState', "loading")
+    if (!state.routes || isEmpty(state.routes)) return commit('setRoutesState', "await")
     let updatedRoutes = state.routes.filter(({action}) => action)
     updatedRoutes = updatedRoutes.map((el) => {
       if (el.action === "create") return dissoc('id', el)
@@ -132,6 +136,7 @@ const actions = {
     routes = sortedRoutes(routes)
     commit('setRoutes', routes)
     commit('setRoutesState', "await")
+    commit('setNewRoute', null)
   },
   removeRoute: ({commit, state}, {id}) => {
     const updatedRoutes = deletedRoute(id, state.routes)