Add last message time to sidebar

Readme.md

@@ -1,13 +1,13 @@
 # MQTT-Explorer
 [![Build Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
 
-### Version v0.0.5
+### Version 0.0.6
 See the whole picture of your message queue.
 The perfect tool to integrate new services, IoT devices in your network.
 This application subscribes to all topics on your MQTT-Server and displays your message queue hierarchy, allowing you to drill-down to the topics that are of interest.
 
 ## Download
-The app is prebuilt for Windows ([portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.5/MQTT-Explorer-0.0.5.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.5/MQTT-Explorer-Setup-0.0.5.exe)), Linux ([AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.5/MQTT-Explorer-0.0.5-x86_64.AppImage)) and Mac ([dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.5/MQTT-Explorer-0.0.5.dmg)).
+The app is prebuilt for Windows ([portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.6/MQTT-Explorer-0.0.6.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.6/MQTT-Explorer-Setup-0.0.6.exe)), Linux ([AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.6/MQTT-Explorer-0.0.6-x86_64.AppImage)) and Mac ([dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.6/MQTT-Explorer-0.0.6.dmg)).
 
 More architectures and package types: [Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 

app/src/UpdateNotifier.tsx

@@ -42,6 +42,13 @@ class UpdateNotifier extends React.Component<Props, {}> {
     rendererEvents.subscribe(updateAvailable, this.handleUpdate)
   }
 
+  private fixUrl(url: string, version: string) {
+    if (!/^http/.test(url)) {
+      return `https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v${version}/${url}`
+    }
+
+    return url
+  }
   public componentWillUnmount() {
     rendererEvents.unsubscribeAll(updateAvailable)
   }
@@ -156,7 +163,7 @@ class UpdateNotifier extends React.Component<Props, {}> {
         <div key={index}>
           <Button
             className={this.props.classes.download}
-            href={file.url}
+            href={this.fixUrl(file.url, updateInfo.version)}
           >
             <IconButton><CloudDownload /></IconButton>{this.urlToFilename(file.url)}
           </Button>

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 }) => (

electron.js

@@ -4,6 +4,7 @@ const log = require('electron-log');
 const { ConnectionManager, updateNotifier } = require('./backend/build/backend/src/index.js')
 const fs = require('fs')
 const path = require('path')
+require('electron-debug')({enabled: process.argv[2] === '--debug'});
 
 autoUpdater.logger = log;
 autoUpdater.logger.transports.file.level = 'info';
@@ -32,9 +33,6 @@ function createWindow () {
   // and load the index.html of the app.
   mainWindow.loadFile('app/index.html')
 
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
   // Emitted when the window is closed.
   mainWindow.on('close', function () {
     connectionManager.closeAllConnections()

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1199,6 +1199,15 @@
         "yargs": "^12.0.5"
       }
     },
+    "electron-debug": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/electron-debug/-/electron-debug-2.0.0.tgz",
+      "integrity": "sha512-orGlw9uErUztdD7cgdKz78txq3czpOnKG/zvvsINkUsugqL+dn77UFrbwRGVgPwuLJ7Ejbjjk9EcxIcgTivMbA==",
+      "requires": {
+        "electron-is-dev": "^0.3.0",
+        "electron-localshortcut": "^3.0.0"
+      }
+    },
     "electron-download": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-4.1.1.tgz",
@@ -1216,6 +1225,42 @@
         "sumchecker": "^2.0.2"
       }
     },
+    "electron-is-accelerator": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/electron-is-accelerator/-/electron-is-accelerator-0.1.2.tgz",
+      "integrity": "sha1-UJ5RDCala1Xhf4Y6SwThEYRqsns="
+    },
+    "electron-is-dev": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/electron-is-dev/-/electron-is-dev-0.3.0.tgz",
+      "integrity": "sha1-FOb9pcaOnk7L7/nM8DfL18BcWv4="
+    },
+    "electron-localshortcut": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/electron-localshortcut/-/electron-localshortcut-3.1.0.tgz",
+      "integrity": "sha512-MgL/j5jdjW7iA0R6cI7S045B0GlKXWM1FjjujVPjlrmyXRa6yH0bGSaIAfxXAF9tpJm3pLEiQzerYHkRh9JG/A==",
+      "requires": {
+        "debug": "^2.6.8",
+        "electron-is-accelerator": "^0.1.0",
+        "keyboardevent-from-electron-accelerator": "^1.1.0",
+        "keyboardevents-areequal": "^0.2.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "electron-log": {
       "version": "2.2.17",
       "resolved": "https://registry.npmjs.org/electron-log/-/electron-log-2.2.17.tgz",
@@ -2162,6 +2207,16 @@
         "verror": "1.10.0"
       }
     },
+    "keyboardevent-from-electron-accelerator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keyboardevent-from-electron-accelerator/-/keyboardevent-from-electron-accelerator-1.1.0.tgz",
+      "integrity": "sha512-VDC4vKWGrR3VgIKCE4CsXnvObGgP8C2idnTKEMUkuEuvDGE1GEBX9FtNdJzrD00iQlhI3xFxRaeItsUmlERVng=="
+    },
+    "keyboardevents-areequal": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/keyboardevents-areequal/-/keyboardevents-areequal-0.2.2.tgz",
+      "integrity": "sha512-Nv+Kr33T0mEjxR500q+I6IWisOQ0lK1GGOncV0kWE6n4KFmpcu7RUX5/2B0EUtX51Cb0HjZ9VJsSY3u4cBa0kw=="
+    },
     "latest-version": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Explore your message queues",
   "main": "electron.js",
   "scripts": {
@@ -63,6 +63,7 @@
     "typescript": "^3.2.2"
   },
   "dependencies": {
+    "electron-debug": "^2.0.0",
     "electron-log": "^2.2.17",
     "electron-updater": "^4.0.6",
     "mqtt": "^2.18.8",