Use JSON over strings as payload format

app/src/actions/Publish.ts

@@ -2,6 +2,7 @@ import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
 import { makePublishEvent, rendererEvents } from '../../../events'
+import { Base64Message } from '../../../backend/src/Model/Base64Message';
 
 export const setTopic = (topic?: string): Action  => {
   return {
@@ -42,7 +43,7 @@ export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, ge
   const publishEvent = makePublishEvent(connectionId)
   const mqttMessage = {
     topic,
-    payload: state.publish.payload,
+    payload: state.publish.payload ? Base64Message.fromString(state.publish.payload) : null,
     retain: state.publish.retain,
     qos: state.publish.qos,
   }

app/src/actions/Settings.ts

@@ -12,6 +12,7 @@ import {
   SettingsState,
   TopicOrder,
 } from '../reducers/Settings'
+import { Base64Message } from '../../../backend/src/Model/Base64Message';
 
 const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
   id: 'Settings',
@@ -110,7 +111,10 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
       return true
     }
 
-    const messageMatches = (node.message && typeof node.message.value === 'string' && node.message.value.toLowerCase().indexOf(filterStr) !== -1)
+    const messageMatches = node.message
+      && node.message.value
+      && Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
+
     return Boolean(messageMatches)
   }
 

app/src/components/BrokerStatistics.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../TopicViewModel'
 import { Typography } from '@material-ui/core'
+import { Base64Message } from '../../../backend/src/Model/Base64Message';
 
 const abbreviate = require('number-abbreviate')
 
@@ -109,7 +110,7 @@ class BrokerStatistics extends React.Component<Props, {}> {
       return null
     }
 
-    let value = node.message && node.message.value
+    let value = (node.message && node.message.value) ? parseFloat(Base64Message.toUnicodeString(node.message.value)) : NaN
     value = !isNaN(value) ? abbreviate(value) : value
 
     return (

app/src/components/Sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ import Delete from '@material-ui/icons/Delete'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import NodeStats from './NodeStats'
 import Topic from './Topic'
-import ValuePanel from './ValueRenderer/Panel'
+import ValuePanel from './ValueRenderer/ValuePanel'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'

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

@@ -4,6 +4,7 @@ import BarChart from '@material-ui/icons/BarChart'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../History'
 import { TopicViewModel } from '../../../TopicViewModel'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
 
 const PlotHistory = React.lazy(() => import('./PlotHistory'))
 
@@ -56,7 +57,11 @@ class MessageHistory extends React.Component<Props, State> {
       selected: message && message === this.props.selected,
     }))
 
-    const numericMessages = history.filter(message => !isNaN(parseFloat(message.value)))
+    const numericMessages = history
+      .map((message: q.Message) => {
+        const number = message.value ? parseFloat(Base64Message.toUnicodeString(message.value)) : NaN
+        return { x: number, y: message.received.getTime() }
+      }).filter(data => !isNaN(data.x))
     const showPlot = numericMessages.length >= 2
 
     return (
@@ -72,10 +77,10 @@ class MessageHistory extends React.Component<Props, State> {
     )
   }
 
-  public renderPlot(numericMessages: q.Message[]) {
+  public renderPlot(data: {x: number, y: number}[]) {
     return (
       <React.Suspense fallback={<div>Loading...</div>}>
-        <PlotHistory messages={numericMessages} />
+        <PlotHistory data={data} />
       </React.Suspense>
     )
   }

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

@@ -3,10 +3,11 @@ import * as React from 'react'
 import DateFormatter from '../../helper/DateFormatter'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import 'react-vis/dist/style.css'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
 const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
 
 interface Props {
-  messages: q.Message[]
+  data: {x: number, y: number}[]
 }
 
 interface Stats {
@@ -25,12 +26,7 @@ class PlotHistory extends React.Component<Props, Stats> {
   }
 
   public render() {
-    const data = this.props.messages.map((message) => {
-      return {
-        x: message.received.getTime(),
-        y: parseFloat(message.value),
-      }
-    })
+    const data = this.props.data
 
     return (
       <div>

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

@@ -27,6 +27,7 @@ import {
   withStyles,
   Theme,
   } from '@material-ui/core'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
 
 interface Props {
   node?: q.TreeNode<any>
@@ -50,7 +51,7 @@ class ValuePanel extends React.Component<Props, State> {
     const { node, classes } = this.props
     const { detailsStyle, summaryStyle } = this.panelStyle()
 
-    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
+    const copyValue = (node && node.message && node.message.value) ? <Copy value={Base64Message.toUnicodeString(node.message.value)} /> : null
 
     return (
       <ExpansionPanel key="value" defaultExpanded={true}>

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

@@ -5,6 +5,7 @@ import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
 
 interface Props {
   message: q.Message
@@ -42,25 +43,33 @@ class ValueRenderer extends React.Component<Props, State> {
       compareMessage = message
     }
 
+    if (!message.value) {
+      return null
+    }
+
+    const compareValue = compareMessage.value || message.value
+    const str = Base64Message.toUnicodeString(message.value)
+    const compareStr = Base64Message.toUnicodeString(compareValue)
+
     let json
     try {
-      json = JSON.parse(message.value)
+      json = JSON.parse(str)
     } catch (error) {
-      return this.renderRawValue(message.value, compareMessage.value)
+      return this.renderRawValue(str, compareStr)
     }
 
     if (typeof json === 'string') {
-      return this.renderRawValue(message.value, compareMessage.value)
+      return this.renderRawValue(str, compareStr)
     } else if (typeof json === 'number') {
-      return this.renderRawValue(message.value, compareMessage.value)
+      return this.renderRawValue(str, compareStr)
     } else if (typeof json === 'boolean') {
-      return this.renderRawValue(message.value, compareMessage.value)
+      return this.renderRawValue(str, compareStr)
     } else {
-      const current = this.messageToPrettyJson(message) || message.value
-      const compare = this.messageToPrettyJson(compareMessage) || compareMessage.value
+      const current = this.messageToPrettyJson(str) || str
+      const compare = this.messageToPrettyJson(compareStr) || compareStr
       const language = current && compare ? 'json' : undefined
 
-      return this.renderDiff(current, compare, language)
+      return this.renderDiff(str, compareStr, language)
     }
   }
 
@@ -75,13 +84,9 @@ class ValueRenderer extends React.Component<Props, State> {
     )
   }
 
-  private messageToPrettyJson(message?: q.Message): string | undefined {
-    if (!message || !message.value) {
-      return undefined
-    }
-
+  private messageToPrettyJson(str: string): string | undefined {
     try {
-      const json = JSON.parse(message.value)
+      const json = JSON.parse(str)
       return JSON.stringify(json, undefined, '  ')
     } catch {
       return undefined

app/src/components/Tree/TreeNodeTitle.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import * as q from '../../../../backend/src/Model'
 import { withStyles, Theme } from '@material-ui/core'
 import { TopicViewModel } from '../../TopicViewModel'
+import { Base64Message } from '../../../../backend/src/Model/Base64Message';
 const debounce = require('lodash.debounce')
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
@@ -35,8 +36,8 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
   }
 
   private renderValue() {
-    return this.props.treeNode.message && this.props.treeNode.message.length > 0
-      ? <span className={this.props.classes.value}> = {this.props.treeNode.message.value.toString().slice(0, 120)}</span>
+    return this.props.treeNode.message && this.props.treeNode.message.value && this.props.treeNode.message.length > 0
+      ? <span className={this.props.classes.value}> = {Base64Message.toUnicodeString(this.props.treeNode.message.value).toString().slice(0, 120)}</span>
       : null
   }