Expose message Ids to the user

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>
+  )
+})

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 (

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

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,7 +47,7 @@ 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>
@@ -54,13 +55,16 @@ function ValuePanel(props: Props) {
   }
 
   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 (

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