Add last message time to sidebar

app/src/components/DateFormatter.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+interface Props {
+  date: Date
+}
+
+class DateFormatter extends React.Component<Props, {}> {
+
+  public render() {
+    return <span>{this.props.date.toLocaleDateString()} {this.props.date.toLocaleTimeString()}</span>
+  }
+}
+
+export default DateFormatter

app/src/components/Sidebar/MessageHistory.tsx

@@ -3,11 +3,8 @@ import * as q from '../../../../backend/src/Model'
 
 import { Theme, withTheme } from '@material-ui/core/styles'
 
-import Fade from '@material-ui/core/Fade'
+import DateFormatter from '../DateFormatter'
 import History from './History'
-import Paper from '@material-ui/core/Paper'
-import Popper from '@material-ui/core/Popper'
-import ValueRenderer from './ValueRenderer'
 
 const throttle = require('lodash.throttle')
 
@@ -53,7 +50,7 @@ class MessageHistory extends React.Component<Props, State> {
 
     const history = node.messageHistory.toArray()
     const historyElements = history.map(message => ({
-      title: message.received.toGMTString(),
+      title: <DateFormatter date={message.received} />,
       value: message.value,
     }))
 

app/src/components/Sidebar/Sidebar.tsx

@@ -14,6 +14,7 @@ import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 
 import { AppState } from '../../reducers'
 import Copy from '../Copy'
+import DateFormatter from '../DateFormatter'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
@@ -115,7 +116,12 @@ class Sidebar extends React.Component<Props, State> {
             <Typography className={classes.heading}>Value {copyValue}</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
-            <div ref={this.valueRef}><ValueRenderer message={this.props.node && this.props.node.message} /></div>
+            <div style={{ width: '100%', textAlign:'right' }}>
+              {this.props.node && this.props.node.message && <i><DateFormatter date={this.props.node.message.received} /></i>}
+            </div>
+            <div ref={this.valueRef}>
+              <ValueRenderer message={this.props.node && this.props.node.message} />
+            </div>
             <div><MessageHistory onSelect={this.handleMessageHistorySelect} node={this.props.node} /></div>
             <Popper open={Boolean(this.state.compareMessage)} anchorEl={this.valueRef.current} placement="left" transition={true}>
               {({ TransitionProps }) => (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Explore your message queues",
   "main": "electron.js",
   "scripts": {