Merge pull request #629 from thomasnordquist/dubyte/add_sparkplug

Add sparkplug b support

Author: thomasnordquist

app/package.json

@@ -28,7 +28,6 @@
     "d3-shape": "^1.3.5",
     "diff": "^4.0.1",
     "dot-prop": "^5.0.0",
-    "file-loader": "6",
     "get-value": "^3.0.1",
     "immutable": "^4.0.0-rc.12",
     "in-viewport": "^3.6.0",
@@ -73,6 +72,7 @@
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "lodash": "^4.17.21",
     "mocha": "^9.2.1",
@@ -90,4 +90,4 @@
   "peerDependencies": {
     "electron": "^17"
   }
-}
+}

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

@@ -40,7 +40,7 @@ function ActionButtons(props: {
         </Tooltip>
       </ToggleButton>
       <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
-        <Tooltip title="Raw / formatted JSON">
+        <Tooltip title="Raw / formatted JSON / formatted sparkplugb protojson">
           <span>
             <Reorder className={props.classes.toggleButtonIcon} />
           </span>

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

@@ -4,9 +4,9 @@ import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
-import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Typography, Fade, Grow } from '@material-ui/core'
+import { Fade } from '@material-ui/core'
+import { Decoder } from '../../../../../backend/src/Model/Decoder'
 
 interface Props {
   message: q.Message
@@ -83,7 +83,10 @@ class ValueRenderer extends React.Component<Props, State> {
   }
 
   public render() {
-    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>{this.renderValue()}</div>
+    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
+      {this.props.message?.payload?.decoder === Decoder.SPARKPLUG && "Decoded SparkplugB"}
+      {this.renderValue()}
+    </div>
   }
 
   public renderValue() {

app/src/components/TopicPlot.tsx

@@ -37,10 +37,10 @@ function nodeToHistory(startTime: number | undefined, history: q.MessageHistory)
 function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      let json = {}
+      let json: any = {}
       try {
         json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
-      } catch (ignore) {}
+      } catch (ignore) { }
 
       const value = dotProp.get(json, dotPath)
 

app/yarn.lock

@@ -2054,13 +2054,13 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
-file-loader@6:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz"
-  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
   dependencies:
     loader-utils "^2.0.0"
-    schema-utils "^2.6.5"
+    schema-utils "^3.0.0"
 
 fill-range@^7.0.1:
   version "7.0.1"
@@ -3766,7 +3766,7 @@ schema-utils@^2.6.5:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==

backend/package.json

@@ -42,6 +42,8 @@
     "fs-extra": "^8.0.1",
     "js-base64": "^2.5.1",
     "lowdb": "^1.0.0",
-    "mqtt": "^3.0.0"
+    "mqtt": "^3.0.0",
+    "protobufjs": "~6.11.2",
+    "long": "^4.0.0"
   }
 }

backend/src/Model/Base64Message.ts

@@ -1,15 +1,17 @@
-const { Base64 } = require('js-base64')
+import { Base64 } from 'js-base64'
+import { Decoder } from './Decoder'
 
 export class Base64Message {
   private base64Message: string
   private unicodeValue: string
-
+  public decoder: Decoder
   public length: number
 
   private constructor(base64Str: string) {
     this.base64Message = base64Str
     this.unicodeValue = Base64.decode(base64Str)
     this.length = base64Str.length
+    this.decoder = Decoder.NONE
   }
 
   public static toUnicodeString(message: Base64Message) {

backend/src/Model/Decoder.ts

@@ -0,0 +1,4 @@
+export enum Decoder {
+    NONE,
+    SPARKPLUG
+}

backend/src/Model/sparkplugb.ts

@@ -0,0 +1,24 @@
+import { readFileSync } from 'fs'
+import * as protobuf from 'protobufjs'
+import { Base64Message } from './Base64Message';
+import { Decoder } from './Decoder';
+
+const buffer = readFileSync(require.resolve('../../../../res/sparkplug_b.proto'));
+const root = protobuf.parse(buffer.toString()).root
+export let SparkplugPayload = root.lookupType('com.cirruslink.sparkplug.protobuf.Payload')
+
+export const SparkplugDecoder = {
+  decode(input: Buffer): Base64Message | undefined {
+    try {
+      let message = Base64Message.fromString(
+        JSON.stringify(
+          SparkplugPayload.toObject(SparkplugPayload.decode(new Uint8Array(input)))
+        )
+      )
+      message.decoder = Decoder.SPARKPLUG
+      return message
+    } catch {
+      // ignore
+    }
+  }
+}

backend/src/index.ts

@@ -10,6 +10,7 @@ import {
   makePublishEvent,
   removeConnection,
 } from '../../events'
+import { SparkplugDecoder } from './Model/sparkplugb'
 
 export class ConnectionManager {
   private connections: { [s: string]: DataSource<any> } = {}
@@ -48,7 +49,7 @@ export class ConnectionManager {
 
       backendEvents.emit(messageEvent, {
         topic,
-        payload: Base64Message.fromBuffer(buffer),
+        payload: SparkplugDecoder.decode(buffer) ?? Base64Message.fromBuffer(buffer),
         qos: packet.qos,
         retain: packet.retain,
         messageId: packet.messageId,