refactor device component

.gitmodules

@@ -9,3 +9,6 @@
 [submodule "models/YangModels"]
 	path = models/YangModels
 	url = https://github.com/YangModels/yang.git
+[submodule "react-ui/yang_model"]
+	path = react-ui/yang_model
+	url = https://github.com/openconfig/public.git

react-ui/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/yang_model
 
 # testing
 /coverage

react-ui/package.json

@@ -25,7 +25,8 @@
         "redux": "^5.0.1",
         "redux-observable": "^3.0.0-rc.2",
         "redux-persist": "^6.0.0",
-        "web-vitals": "^4.2.2"
+        "web-vitals": "^4.2.2",
+        "yang-js": "^0.24.70"
     },
     "scripts": {
         "start": "vite",

react-ui/src/components/devices/reducer/device.reducer.ts

 import { api, NetworkelementFlattenedManagedNetworkElement, NetworkelementManagedNetworkElement, PndPrincipalNetworkDomain, PndServiceGetPndListApiArg } from '@api/api';
 import { DeviceViewTabValues } from '@component/devices/view/device.view.tabs';
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import '../routines/index';
+
 
 export type Device = NetworkelementFlattenedManagedNetworkElement;
 

react-ui/src/components/devices/routines/action.routine.ts

-export const FETCH_MNE_ACTION = 'subscription/device/fetchSelectedMNE';
-export const FETCH_DEVICE_ACTION = 'subscription/device/fetchDevices'
\ No newline at end of file

react-ui/src/components/devices/routines/device.routine.ts

@@ -4,7 +4,8 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
 import { setUser } from "@shared/reducer/user.reducer";
 import { RootState } from "src/stores";
 import { startListening } from "../../../stores/middleware/listener.middleware";
-import { FETCH_DEVICE_ACTION } from "./action.routine";
+
+export const FETCH_DEVICE_ACTION = 'subscription/device/fetchDevices'
 
 // continously fetch devices
 const FETCH_DEVICES_INTERVAL = 15000; // in ms
@@ -15,6 +16,7 @@ startListening({
     },
 })
 
+
 export const fetchDevicesThunk = createAsyncThunk(FETCH_DEVICE_ACTION, (_, thunkApi) => {
     const { user } = thunkApi.getState() as RootState;
 

react-ui/src/components/devices/routines/index.ts

+import './device.routine';
+import './mne.routine';
+

react-ui/src/components/devices/reducer/mne.subscription.ts → react-ui/src/components/devices/routines/mne.routine.ts

@@ -2,16 +2,17 @@ import { api, NetworkElementServiceGetApiArg } from "@api/api";
 import { Device, setSelectedDevice, setSelectedMne } from "@component/devices/reducer/device.reducer";
 import { createAsyncThunk } from "@reduxjs/toolkit";
 import { addRoutine, CATEGORIES } from "@shared/reducer/routine.reducer";
-import { THUNK_KEY } from "@utils/routine.manager";
 import { RootState } from "src/stores";
 import { startListening } from "../../../stores/middleware/listener.middleware";
-import { FETCH_MNE_ACTION } from "../routines/action.routine";
+
+export const FETCH_MNE_ACTION = 'subscription/device/fetchSelectedMNE';
+
 
 // fetch mne if selected device is set
 startListening({
     predicate: (action) => setSelectedDevice.match(action) && !!action.payload,
     effect: async (action, listenerApi) => {
-        listenerApi.dispatch(addRoutine({category: CATEGORIES.TAB, thunkKey: THUNK_KEY.MNE, payload: action.payload}));
+        listenerApi.dispatch(addRoutine({thunk: fetchSelectedMneThunk, category: CATEGORIES.TAB, payload: action.payload}));
     },
 })
 

react-ui/src/components/devices/view/device.view.tsx

@@ -22,7 +22,6 @@ function DeviceView() {
                             <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
                         </Nav>
                     </Col>
-
                 </Row>
 
                 <Row className='align-items-center'>

react-ui/src/shared/reducer/routine.reducer.ts

 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { RoutineDictionary, RoutineManager, THUNK_KEY } from '@utils/routine.manager';
+import { RoutineManager } from '@utils/routine.manager';
 import { REHYDRATE } from 'redux-persist';
 import { RootState } from '../../stores';
 import { startListening } from '../../stores/middleware/listener.middleware';
@@ -8,7 +8,7 @@ import { setToken } from './user.reducer';
 
 
 interface ThunkEntityDTO {
-    thunkKey: THUNK_KEY,
+    thunk: any,
     payload: any
 
     /**
@@ -59,7 +59,6 @@ const RoutineSlice = createSlice({
         },
 
         removeAll: (state) => {
-            RoutineManager.unsubscribeAll()
             state.thunks = initialState.thunks;
         },
     },
@@ -69,8 +68,9 @@ export const { addRoutine } = RoutineSlice.actions
 
 // on logout remove all routine
 startListening({
-    predicate: (action) => setToken.match(action) && action.payload.token === null,
+    predicate: (action) => setToken.match(action) && action.payload === null,
     effect: async (_, listenerApi) => {
+        RoutineManager.unsubscribeAll()
         listenerApi.dispatch(RoutineSlice.actions.removeAll());
     },
 })
@@ -107,15 +107,8 @@ startListening({
 startListening({
     predicate: (action) => addRoutine.match(action),
     effect: async (action, listenerApi) => {
-        const {thunkKey} = action.payload as ThunkEntity;
-
-        const thunkFn = RoutineDictionary.get(thunkKey);
-        if (!thunkFn) {
-            // TODO
-            throw new Error('Thunk not found');
-        }
-        
-        const subscription = await listenerApi.dispatch(thunkFn(action.payload.payload));
+        const {thunk} = action.payload as ThunkEntity;
+        const subscription = await listenerApi.dispatch(thunk(action.payload.payload));
         const thunkId = await RoutineManager.add(subscription.payload);
         listenerApi.dispatch(RoutineSlice.actions.setThunkId({id: thunkId, category: action.payload.category}));
     },

react-ui/src/shared/utils/routine.manager.ts

-import { fetchSelectedMneThunk } from '@component/devices/reducer/mne.subscription';
-import { fetchDevicesThunk } from '@component/devices/routines/device.routine';
-import { AsyncThunk } from '@reduxjs/toolkit';
 import { QueryActionCreatorResult } from '@reduxjs/toolkit/query';
 
 type Routine = QueryActionCreatorResult<any>;
@@ -14,16 +11,6 @@ const initialState = {
     routines: [] as Entity[]
 }
 
-export enum THUNK_KEY {
-    MNE =  'device/fetch',
-    DEVICE =  'mne/fetch',
-}
-
-export const RoutineDictionary = new Map<THUNK_KEY,AsyncThunk<any, any, {}>>([
-    [THUNK_KEY.DEVICE, fetchDevicesThunk],
-    [THUNK_KEY.MNE, fetchSelectedMneThunk]
-])
-
 
 /**
  * Routine manager is a singleton that holds all running routines.

react-ui/src/stores/index.ts

-import { FETCH_DEVICE_ACTION, FETCH_MNE_ACTION } from '@component/devices/routines/action.routine'
+import { FETCH_DEVICE_ACTION } from '@component/devices/routines/device.routine'
+import { FETCH_MNE_ACTION } from '@component/devices/routines/mne.routine'
 import { configureStore } from '@reduxjs/toolkit'
 import { setupListeners } from '@reduxjs/toolkit/query'
 import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from 'redux-persist'
@@ -15,6 +16,7 @@ export const store = configureStore({
     getDefaultMiddleware({
       serializableCheck: {
         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, FETCH_DEVICE_ACTION + '/fulfilled', FETCH_MNE_ACTION + '/fulfilled', 'routine/addRoutine'],
+        ignoredPaths: ['routine.thunks']
       },
     }).prepend(listenerMiddleware.middleware).concat(emptySplitApi.middleware, rtkQueryErrorLogger),
 })

yang_model @ 3a301859

+Subproject commit 3a3018590be5f7c11a3ed8c3530b128c53633d7b