remobe generated ts and load proto file directly

Author: dubyte

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -1,9 +1,10 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
+import * as fs from 'fs'
 import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
-import { Payload } from '../../../../../backend/src/Model/sparkplug'
+import { Payload } from '../../../../../backend/src/Model/sparkplugb'
 import { connect } from 'react-redux'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
 import { Fade } from '@material-ui/core'
@@ -50,8 +51,14 @@ class ValueRenderer extends React.Component<Props, State> {
     } catch (error) {
       try {
         //Sparkplugb
-        let payload = Payload.decode(Base64Message.toUint8Array(msg))
-        const json = Payload.toJSON(payload)
+        if (Payload === undefined) {
+          throw Error('sparkplugb.Payload is not loaded yet')
+        }
+        let json = Payload.toObject(Payload.decode(Base64Message.toUint8Array(msg)), {
+          longs: String,
+          enums: String,
+          bytes: String,
+        })
         return [JSON.stringify(json, undefined, '  '), 'json']
       } catch (error) {
         return [str, undefined]

app/src/components/TopicPlot.tsx

@@ -5,7 +5,7 @@ import PlotHistory from './Chart/Chart'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { toPlottableValue } from './Sidebar/CodeDiff/util'
 import { PlotCurveTypes } from '../reducers/Charts'
-import { Payload } from '../../../backend/src/Model/sparkplug'
+import { Payload } from '../../../backend/src/Model/sparkplugb'
 const parseDuration = require('parse-duration')
 
 interface Props {
@@ -41,12 +41,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
       let json: any = {}
       try {
         json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
-      } catch (ignore) {
-        // sparkplugb
-        try {
-          json = message.payload ? Payload.toJSON(Payload.decode(Base64Message.toUint8Array(message.payload))) : {}
-        } catch (ignore) {}
-      }
+      } catch (ignore) {}
 
       const value = dotProp.get(json, dotPath)
 

app/src/index.tsx

@@ -10,9 +10,11 @@ import { connect, Provider } from 'react-redux'
 import { ThemeProvider } from '@material-ui/styles'
 import './utils/tracking'
 import { themes } from './theme'
+import { loadSparkplugBPayload } from '../../backend/src/Model/sparkplugb'
 
 const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 const store = createStore(reducers, composeEnhancers(applyMiddleware(reduxThunk, batchDispatchMiddleware)))
+loadSparkplugBPayload()
 
 function ApplicationRenderer(props: { theme: 'light' | 'dark' }) {
   return (

app/webpack.config.js

@@ -87,6 +87,17 @@ module.exports = {
           }
         }
       },
+      {
+        test: /\.proto$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              esModule: false,
+            },
+          },
+        ]
+      },
     ],
   },