Expose message Ids to the user

thomasnordquist · thomasnordquist · commit 07458cd712a8 · 2020-04-20T18:27:51.000+02:00
diff --git a/app/index.html b/app/index.html
@@ -160,7 +160,7 @@
     </style>
   </head>
   <body>
-    <div id="app" style="font:-webkit-control"></div>
+    <div id="app" style="font: -webkit-control;"></div>
     <script>
       function loadScript(path) {
         var script = document.createElement('script')
@@ -174,7 +174,8 @@
         // loadScript("<%= JSON.stringify(htmlWebpackPlugin) %>")
       }
     </script>
-    <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %><script src="<%- file %>"></script
-    ><% }); %>
+    <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
+    <script src="<%- file %>"></script>
+    <% }); %>
   </body>
 </html>
diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts
@@ -112,8 +112,8 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
 
     const messageMatches =
       node.message &&
-      node.message.value &&
-      Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
+      node.message.payload &&
+      Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1
 
     return Boolean(messageMatches)
   }
diff --git a/app/src/actions/clearTopic.ts b/app/src/actions/clearTopic.ts
@@ -48,6 +48,7 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async
         payload: null,
         retain: true,
         qos: 0 as 0,
+        messageId: undefined,
       }
       // Rate limit deletion
       setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
diff --git a/app/src/components/SettingsDrawer/BrokerStatistics.tsx b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
@@ -123,8 +123,8 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
     return null
   }
 
-  const str = node.message.value ? Base64Message.toUnicodeString(node.message.value) : ''
-  let value = node.message && node.message.value ? parseFloat(str) : NaN
+  const str = node.message.payload ? Base64Message.toUnicodeString(node.message.payload) : ''
+  let value = node.message && node.message.payload ? parseFloat(str) : NaN
   value = !isNaN(value) ? abbreviate(value) : str
 
   return (
diff --git a/app/src/components/Sidebar/MessageId.tsx b/app/src/components/Sidebar/MessageId.tsx
@@ -0,0 +1,20 @@
+import React, { memo } from 'react'
+import { Message } from '../../../../backend/src/Model'
+import { Tooltip } from '@material-ui/core'
+
+export const MessageId = memo(function MessageId(props: { message: Message; addComma?: boolean }) {
+  const { message, addComma } = props
+
+  if (!message.messageId) {
+    return null
+  }
+
+  return (
+    <Tooltip title="MessageIds are used to signal a successful transmission of a message.">
+      <span>
+        #msg: {message.messageId}
+        {addComma ? ', ' : ''}
+      </span>
+    </Tooltip>
+  )
+})
diff --git a/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx b/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
@@ -8,7 +8,7 @@ export const TopicDeleteButton = (props: {
   deleteTopicAction: (node: q.TreeNode<any>) => void
 }) => {
   const { node } = props
-  if (!node || !node.message || !node.message.value) {
+  if (!node || !node.message || !node.message.payload) {
     return null
   }
   return (
diff --git a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
@@ -12,6 +12,7 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
 import CustomIconButton from '../../helper/CustomIconButton'
+import { MessageId } from '../MessageId'
 
 const throttle = require('lodash.throttle')
 
@@ -81,19 +82,25 @@ class MessageHistory extends React.PureComponent<Props, State> {
     const history = node.messageHistory.toArray()
     let previousMessage: q.Message | undefined = node.message
     const historyElements = [...history].reverse().map((message, idx) => {
-      const value = message.value ? Base64Message.toUnicodeString(message.value) : ''
+      const value = message.payload ? Base64Message.toUnicodeString(message.payload) : ''
       const element = {
         value,
         key: `${message.messageNumber}-${message.received}`,
         title: (
           <span>
-            <DateFormatter date={message.received} />
-            {previousMessage && previousMessage !== message ? (
-              <i>
-                (-
-                <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
-              </i>
-            ) : null}
+            <div style={{ float: 'left' }}>
+              <DateFormatter date={message.received} />
+              {previousMessage && previousMessage !== message ? (
+                <i>
+                  (-
+                  <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
+                </i>
+              ) : null}
+            </div>
+            <span>
+              &nbsp;
+              <MessageId message={message} />
+            </span>
             <div style={{ float: 'right' }}>
               <Copy value={value} />
             </div>
@@ -106,7 +113,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
     })
 
     const isMessagePlottable =
-      node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
+      node.message && node.message.payload && isPlottable(Base64Message.toUnicodeString(node.message.payload))
     return (
       <div>
         <History
diff --git a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
@@ -13,6 +13,7 @@ import { Theme, Typography, withStyles } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
+import { MessageId } from '../MessageId'
 
 interface Props {
   node?: q.TreeNode<any>
@@ -36,7 +37,7 @@ function ValuePanel(props: Props) {
   const { node, compareMessage } = props
 
   function renderViewOptions() {
-    if (!props.node || !props.node.message || !props.node.mqttMessage) {
+    if (!props.node || !props.node.message) {
       return null
     }
 
@@ -46,21 +47,24 @@ function ValuePanel(props: Props) {
           <ActionButtons />
         </span>
         <span style={{ flex: 6, textAlign: 'right' }}>
-          {props.node.mqttMessage.retain ? <DeleteSelectedTopicButton /> : null}
+          {props.node.message.retain ? <DeleteSelectedTopicButton /> : null}
         </span>
         {messageMetaInfo()}
       </div>
     )
   }
 
   function messageMetaInfo() {
-    if (!props.node || !props.node.message || !props.node.mqttMessage) {
+    if (!props.node || !props.node.message) {
       return null
     }
 
     return (
       <span style={{ width: '100%', paddingLeft: '8px', flex: 6 }}>
-        <Typography style={{ textAlign: 'right' }}>QoS: {props.node.mqttMessage.qos}</Typography>
+        <Typography style={{ textAlign: 'right' }}>
+          <MessageId message={props.node.message} addComma={true} />
+          {`QoS: ${props.node.message.qos}`}
+        </Typography>
         <Typography style={{ textAlign: 'right' }}>
           <i>
             <DateFormatter date={props.node.message.received} />
@@ -82,8 +86,8 @@ function ValuePanel(props: Props) {
   )
 
   const copyValue =
-    node && node.message && node.message.value ? (
-      <Copy value={Base64Message.toUnicodeString(node.message.value)} />
+    node && node.message && node.message.payload ? (
+      <Copy value={Base64Message.toUnicodeString(node.message.payload)} />
     ) : null
 
   return (
diff --git a/app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx b/app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
@@ -63,12 +63,12 @@ class ValueRenderer extends React.Component<Props, State> {
   }
 
   private renderRawMode(message: q.Message, compare?: q.Message) {
-    if (!message.value) {
+    if (!message.payload) {
       return
     }
-    const [value, valueLanguage] = this.convertMessage(message.value)
+    const [value, valueLanguage] = this.convertMessage(message.payload)
     const [compareStr, compareStrLanguage] =
-      compare && compare.value ? this.convertMessage(compare.value) : [undefined, undefined]
+      compare && compare.payload ? this.convertMessage(compare.payload) : [undefined, undefined]
 
     return (
       <div>
@@ -95,12 +95,12 @@ class ValueRenderer extends React.Component<Props, State> {
     if (renderMode === 'raw') {
       return this.renderRawMode(message, compareWith)
     }
-    if (!message.value) {
+    if (!message.payload) {
       return null
     }
 
-    const compareValue = compareMessage.value || message.value
-    const [current, currentLanguage] = this.convertMessage(message.value)
+    const compareValue = compareMessage.payload || message.payload
+    const [current, currentLanguage] = this.convertMessage(message.payload)
     const [compare, compareLanguage] = this.convertMessage(compareValue)
 
     const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
diff --git a/app/src/components/TopicPlot.tsx b/app/src/components/TopicPlot.tsx
@@ -28,7 +28,7 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
 function nodeToHistory(startTime: number | undefined, history: q.MessageHistory) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      const value = message.value ? toPlottableValue(Base64Message.toUnicodeString(message.value)) : NaN
+      const value = message.payload ? toPlottableValue(Base64Message.toUnicodeString(message.payload)) : NaN
       return { x: message.received.getTime(), y: toPlottableValue(value) }
     })
     .filter(data => !isNaN(data.y as any)) as any
@@ -39,7 +39,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
     .map((message: q.Message) => {
       let json = {}
       try {
-        json = message.value ? JSON.parse(Base64Message.toUnicodeString(message.value)) : {}
+        json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
       } catch (ignore) {}
 
       const value = dotProp.get(json, dotPath)
diff --git a/app/src/components/Tree/TreeNode/TreeNodeTitle.tsx b/app/src/components/Tree/TreeNode/TreeNodeTitle.tsx
@@ -27,17 +27,17 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
 
   private truncatedMessage() {
     const limit = 400
-    if (!this.props.treeNode.message || !this.props.treeNode.message.value) {
+    if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
       return ''
     }
 
-    const str = Base64Message.toUnicodeString(this.props.treeNode.message.value)
+    const str = Base64Message.toUnicodeString(this.props.treeNode.message.payload)
     return str.length > limit ? `${str.slice(0, limit)}…` : str
   }
 
   private renderValue() {
     return this.props.treeNode.message &&
-      this.props.treeNode.message.value &&
+      this.props.treeNode.message.payload &&
       this.props.treeNode.message.length > 0 ? (
       <span key="value" className={this.props.classes.value}>
         {' '}
diff --git a/app/src/components/Tree/TreeNode/index.tsx b/app/src/components/Tree/TreeNode/index.tsx
@@ -81,7 +81,7 @@ function TreeNodeComponent(props: Props) {
   const mouseOver = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation()
-      if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.value) {
+      if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.payload) {
         didSelectTopic()
       }
     },
diff --git a/backend/src/DataSource/DataSource.ts b/backend/src/DataSource/DataSource.ts
@@ -1,7 +1,7 @@
 import { DataSourceStateMachine } from './'
 import { MqttMessage } from '../../../events'
 
-type MessageCallback = (topic: string, payload: Buffer) => void
+type MessageCallback = (topic: string, payload: Buffer, packet: any) => void
 
 // A DataSource should automatically reconnect if connection was broken
 interface DataSource<DataSourceOptions> {
diff --git a/backend/src/Model/Message.ts b/backend/src/Model/Message.ts
@@ -1,8 +1,17 @@
 import { Base64Message } from './Base64Message'
+import { QoS } from '../DataSource/MqttSource'
 
 export interface Message {
-  value?: Base64Message
+  // mqtt based info
+  payload: Base64Message | null
+  messageId?: number
+  retain: boolean
+  qos: QoS
+
+  // meta info
   length: number
   received: Date
+
+  // Global message counter, not mqtt related
   messageNumber: number
 }
diff --git a/backend/src/Model/Tree.ts b/backend/src/Model/Tree.ts
@@ -75,13 +75,7 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
 
   public applyUnmergedChanges() {
     this.unmergedMessages.popAll().forEach(bufferedItem => {
-      const edges = bufferedItem.message.topic.split('/')
-      const node = TreeNodeFactory.fromEdgesAndValue<ViewModel>(
-        edges,
-        bufferedItem.message.payload,
-        bufferedItem.received
-      )
-      node.mqttMessage = bufferedItem.message
+      const node = TreeNodeFactory.fromMessage<ViewModel>(bufferedItem.message, bufferedItem.received)
 
       if (!this.nodeFilter || this.nodeFilter(node)) {
         this.updateWithNode(node.firstNode())
diff --git a/backend/src/Model/TreeNode.ts b/backend/src/Model/TreeNode.ts
@@ -1,11 +1,10 @@
 import { Destroyable } from './Destroyable'
 import { Edge, Message, RingBuffer, MessageHistory } from './'
-import { EventDispatcher, MqttMessage } from '../../../events'
+import { EventDispatcher } from '../../../events'
 
 export class TreeNode<ViewModel extends Destroyable> {
   public sourceEdge?: Edge<ViewModel>
   public message?: Message
-  public mqttMessage?: MqttMessage
   public messageHistory: MessageHistory = new RingBuffer<Message>(20000, 100)
   public viewModel?: ViewModel
   public edges: { [s: string]: Edge<ViewModel> } = {}
@@ -105,7 +104,7 @@ export class TreeNode<ViewModel extends Destroyable> {
   }
 
   public hasMessage() {
-    return this.message && this.message.value && this.message.value.length !== 0
+    return this.message && this.message.payload && this.message.length !== 0
   }
 
   public destroy() {
@@ -131,7 +130,6 @@ export class TreeNode<ViewModel extends Destroyable> {
   public unconnectedClone() {
     const node = new TreeNode<ViewModel>()
     node.message = this.message
-    node.mqttMessage = this.mqttMessage
     node.messageHistory = this.messageHistory.clone()
     node.messages = this.messages
     node.lastUpdate = this.lastUpdate
@@ -203,7 +201,6 @@ export class TreeNode<ViewModel extends Destroyable> {
     if (node.message) {
       this.setMessage(node.message)
       this.onMessage.dispatch(node.message)
-      this.mqttMessage = node.mqttMessage
     }
 
     this.removeFromTreeIfEmpty()
@@ -236,7 +233,7 @@ export class TreeNode<ViewModel extends Destroyable> {
 
   public childTopics(): Array<TreeNode<ViewModel>> {
     if (this.cachedChildTopics === undefined) {
-      const initialValue = this.message && this.message.value ? [this] : []
+      const initialValue = this.message && this.message.payload ? [this] : []
 
       this.cachedChildTopics = this.edgeArray
         .map(e => e.target.childTopics())
diff --git a/backend/src/Model/TreeNodeFactory.ts b/backend/src/Model/TreeNodeFactory.ts
@@ -1,6 +1,6 @@
-import { Base64Message } from './Base64Message'
 import { Destroyable } from './Destroyable'
 import { Edge, Tree, TreeNode } from './'
+import { MqttMessage } from '../../../events'
 
 export abstract class TreeNodeFactory {
   private static messageCounter = 0
@@ -20,21 +20,23 @@ export abstract class TreeNodeFactory {
     node.sourceEdge!.target = node
   }
 
-  public static fromEdgesAndValue<ViewModel extends Destroyable>(
-    edgeNames: Array<string>,
-    value?: Base64Message | null,
+  public static fromMessage<ViewModel extends Destroyable>(
+    mqttMessage: MqttMessage,
     receiveDate: Date = new Date()
   ): TreeNode<ViewModel> {
     const node = new TreeNode<ViewModel>()
+    const edges = mqttMessage.topic.split('/')
+
+    mqttMessage.retain
     node.setMessage({
-      value: value || undefined,
-      length: value ? value.length : 0,
+      ...mqttMessage,
+      length: mqttMessage.payload?.length ?? 0,
       received: receiveDate,
       messageNumber: this.messageCounter,
     })
     this.messageCounter += 1
 
-    this.insertNodeAtPosition<ViewModel>(edgeNames, node)
+    this.insertNodeAtPosition<ViewModel>(edges, node)
 
     return node
   }
diff --git a/backend/src/Model/spec/Edge.spec.ts b/backend/src/Model/spec/Edge.spec.ts
diff --git a/backend/src/Model/spec/Tree.spec.ts b/backend/src/Model/spec/Tree.spec.ts
diff --git a/backend/src/Model/spec/TreeNode.findNode.spec.ts b/backend/src/Model/spec/TreeNode.findNode.spec.ts
diff --git a/backend/src/Model/spec/TreeNode.spec.ts b/backend/src/Model/spec/TreeNode.spec.ts
diff --git a/backend/src/Model/spec/TreeNodeFactory.spec.ts b/backend/src/Model/spec/TreeNodeFactory.spec.ts
diff --git a/backend/src/Model/spec/makeTreeNode.ts b/backend/src/Model/spec/makeTreeNode.ts
diff --git a/backend/src/index.ts b/backend/src/index.ts
diff --git a/events/Events.ts b/events/Events.ts

Original file line number	Diff line number	Diff line change
`@@ -112,8 +112,8 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get`
`112`	`112`
`113`	`113`	`const messageMatches =`
`114`	`114`	`node.message &&`
`115`		`- node.message.value &&`
`116`		`- Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1`
	`115`	`+ node.message.payload &&`
	`116`	`+ Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1`
`117`	`117`
`118`	`118`	`return Boolean(messageMatches)`
`119`	`119`	`}`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async`
`48`	`48`	`payload: null,`
`49`	`49`	`retain: true,`
`50`	`50`	`qos: 0 as 0,`
	`51`	`+ messageId: undefined,`
`51`	`52`	`}`
`52`	`53`	`// Rate limit deletion`
`53`	`54`	`setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)`
Original file line number	Diff line number	Diff line change
`@@ -123,8 +123,8 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {`
`123`	`123`	`return null`
`124`	`124`	`}`
`125`	`125`
`126`		`- const str = node.message.value ? Base64Message.toUnicodeString(node.message.value) : ''`
`127`		`- let value = node.message && node.message.value ? parseFloat(str) : NaN`
	`126`	`+ const str = node.message.payload ? Base64Message.toUnicodeString(node.message.payload) : ''`
	`127`	`+ let value = node.message && node.message.payload ? parseFloat(str) : NaN`
`128`	`128`	`value = !isNaN(value) ? abbreviate(value) : str`
`129`	`129`
`130`	`130`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ export const TopicDeleteButton = (props: {`
`8`	`8`	`deleteTopicAction: (node: q.TreeNode<any>) => void`
`9`	`9`	`}) => {`
`10`	`10`	`const { node } = props`
`11`		`- if (!node \|\| !node.message \|\| !node.message.value) {`
	`11`	`+ if (!node \|\| !node.message \|\| !node.message.payload) {`
`12`	`12`	`return null`
`13`	`13`	`}`
`14`	`14`	`return (`