Update readme

Readme.md

@@ -30,7 +30,7 @@ The app is available for Windows ([portable](https://github.com/t
 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 
 ## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/51978075-5bc0eb00-2489-11e9-953a-0965b154557b.gif)
+![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
 
 ## Performance
 This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.

Readme.tpl.md

@@ -30,7 +30,7 @@ The app is available for Windows ({{windowsTargets}}), Linux ({{linuxTargets}})
 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 
 ## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/51978075-5bc0eb00-2489-11e9-953a-0965b154557b.gif)
+![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
 
 ## Performance
 This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.

app/src/PersistantStorage.ts

@@ -31,7 +31,6 @@ class RemoteStorage implements PersistantStorage {
     const ack = makeStorageAcknoledgementEvent(transactionId)
     return new Promise<void>((resolve, reject) => {
       const callback = (msg: any) => {
-        console.log(msg)
         if (msg && msg.error) {
           reject(msg.error)
         } else {
@@ -57,8 +56,6 @@ class RemoteStorage implements PersistantStorage {
 
     const promise = new Promise<Model>((resolve, reject) => {
       const callback = (msg: any) => {
-        console.log(msg)
-
         if (msg.error) {
           reject(msg.error)
         } else {

app/src/actions/Sidebar.ts

@@ -1,21 +1,46 @@
 import { Dispatch, Action } from 'redux'
 import { AppState } from '../reducers'
 import { makePublishEvent, rendererEvents } from '../../../events'
+import * as q from '../../../backend/src/Model'
 
-export const clearRetainedTopic = () => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
+export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const { selectedTopic } = getState().tree
-  const { connectionId } = getState().connection
+  if (!selectedTopic) {
+    return
+  }
 
-  if (!selectedTopic || !connectionId) {
+  dispatch(clearTopic(selectedTopic, false))
+}
+
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+  const { connectionId } = getState().connection
+  if (!connectionId) {
     return
   }
 
   const publishEvent = makePublishEvent(connectionId)
   const mqttMessage = {
-    topic: selectedTopic.path(),
+    topic: topic.path(),
     payload: null,
     retain: true,
     qos: 0 as 0,
   }
+  console.log('deleting', topic.path())
   rendererEvents.emit(publishEvent, mqttMessage)
+
+  if (recursive) {
+    topic.childTopics()
+      .filter(topic => Boolean(topic.message && topic.message.value))
+      .slice(0, subtopicClearLimit)
+      .forEach((topic) => {
+        console.log('deleting', topic.path())
+        const mqttMessage = {
+          topic: topic.path(),
+          payload: null,
+          retain: true,
+          qos: 0 as 0,
+        }
+        rendererEvents.emit(publishEvent, mqttMessage)
+      })
+  }
 }

app/src/components/ConnectionHealthIndicator.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { ConnectionHealth } from '../reducers/Connection'
 import { green, orange, red } from '@material-ui/core/colors'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@material-ui/core'
 
 const styles: StyleRulesCallback = theme => ({
   offline: {

app/src/components/Copy.tsx

@@ -4,6 +4,7 @@ import FileCopy from '@material-ui/icons/FileCopy'
 import Check from '@material-ui/icons/Check'
 import green from '@material-ui/core/colors/green'
 import { withStyles, Theme } from '@material-ui/core/styles'
+import CustomIconButton from './CustomIconButton';
 
 const copy = require('copy-text-to-clipboard')
 
@@ -32,13 +33,17 @@ class Copy extends React.Component<Props, State> {
 
   public render() {
     const icon = !this.state.didCopy
-      ? <FileCopy fontSize="inherit" style={{ cursor: 'pointer' }} onClick={this.handleClick} />
+      ? <FileCopy fontSize="inherit" />
       : <Check fontSize="inherit" style={{ cursor: 'default' }} />
 
     return (
       <span>
         <Tooltip placement="top" title="Copy to clipboard">
-          <span style={{ fontSize: '16px' }}>{icon}</span>
+          <span style={{ fontSize: '16px' }}>
+          <CustomIconButton onClick={this.handleClick} >
+            {icon}
+          </CustomIconButton>
+          </span>
         </Tooltip>
         <span>
           <Snackbar

app/src/components/CustomIconButton.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { IconButton } from '@material-ui/core'
+import { withStyles, Theme } from '@material-ui/core/styles'
+
+interface Props {
+  onClick: any,
+  classes: any
+}
+
+const styles = (theme: Theme) => ({
+  button: {
+    padding: '6px',
+    fontSize: '1.2em',
+  },
+})
+
+class CustomIconButton extends React.Component<Props, {}> {
+  constructor(props: Props) {
+    super(props)
+  }
+
+  public render() {
+    return (
+      <IconButton className={this.props.classes.button} onClick={this.onClick}>{this.props.children}</IconButton>
+    )
+  }
+
+  private onClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    this.props.onClick(event)
+  }
+}
+
+export default withStyles(styles)(CustomIconButton)

app/src/components/Settings.tsx

@@ -18,7 +18,7 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import ChevronRight from '@material-ui/icons/ChevronRight'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { settingsActions, treeActions } from '../actions'
+import { settingsActions } from '../actions'
 import { TopicOrder } from '../reducers/Settings'
 import BrokerStatistics from './BrokerStatistics'
 import { shell } from 'electron';

app/src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,22 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import Clear from '@material-ui/icons/Clear'
+import Copy from '../Copy'
+import CustomIconButton from '../CustomIconButton'
+import DateFormatter from '../helper/DateFormatter'
+import Delete from '@material-ui/icons/Delete'
+import DeleteForever from '@material-ui/icons/DeleteForever'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import MessageHistory from './MessageHistory'
+import NodeStats from './NodeStats'
+import Topic from './Topic'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import { sidebarActons } from '../../actions'
+import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+import { TopicViewModel } from '../../TopicViewModel'
 
 import {
   Button,
@@ -11,23 +28,9 @@ import {
   Popper,
   Typography,
   Tooltip,
+  Badge,
 } from '@material-ui/core'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 
-import { sidebarActons } from '../../actions'
-
-import { AppState } from '../../reducers'
-import Copy from '../Copy'
-import DateFormatter from '../helper/DateFormatter'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import Clear from '@material-ui/icons/Clear'
-import MessageHistory from './MessageHistory'
-import NodeStats from './NodeStats'
-import Topic from './Topic'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { TopicViewModel } from '../../TopicViewModel'
-import { default as ReactResizeDetector } from 'react-resize-detector'
 const throttle = require('lodash.throttle')
 
 const Publish = React.lazy(() => import('./Publish/Publish'))
@@ -92,17 +95,63 @@ class Sidebar extends React.Component<Props, State> {
 
   private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
 
+  private renderTopicDeleteButton() {
+    if (!this.props.node) {
+      return null
+    }
+
+    return (
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
+        <Tooltip title="Clear this topic">
+          <Delete />
+        </Tooltip>
+      </CustomIconButton>
+    )
+  }
+
+  private renderRecursiveTopicDeleteButton() {
+    const deleteLimit = 50
+    const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
+    if (!this.props.node || topicCount === 0) {
+      return null
+    }
+
+    return (
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
+        <Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
+          <Badge
+            classes={{ badge: this.props.classes.badge }}
+            badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
+            color="secondary"
+          >
+            <DeleteForever color="action" />
+          </Badge>
+        </Tooltip>
+      </CustomIconButton>
+    )
+  }
+
+  private deleteTopic = (topic?: q.TreeNode<TopicViewModel>, recursive: boolean = false, maxCount = 50) => {
+    if (!topic) {
+      return
+    }
+
+    this.props.actions.clearTopic(topic, recursive, maxCount)
+  }
+
   private renderNode() {
     const { classes, node } = this.props
 
     const copyTopic = node ? <Copy value={node.path()} /> : null
+    const deleteTopic = this.renderTopicDeleteButton()
+    const deleteRecursiveTopic = this.renderRecursiveTopicDeleteButton()
     const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
     const summeryStyle = { minHeight: '0' }
     return (
       <div>
         <ExpansionPanel key="topic" defaultExpanded={true} disabled={!Boolean(this.props.node)}>
           <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Topic {copyTopic}</Typography>
+            <Typography className={classes.heading}>Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic}</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
             <Topic node={this.props.node} didSelectNode={this.updateNode} />

app/src/reducers/Connection.ts

@@ -54,7 +54,7 @@ export interface ShowError {
 const initialState: ConnectionState = {
   connected: false,
   connecting: false,
-  health: 'disconnected',
+  health: undefined,
 }
 
 export const connectionReducer = createReducer(initialState, {

backend/src/Model/TreeNode.ts

@@ -47,6 +47,9 @@ export class TreeNode<ViewModel> {
       this.lastUpdate = Date.now()
     })
     this.onEdgesChange.subscribe(() => {
+      this.cachedChildTopics = undefined
+      this.cachedChildTopicCount = undefined
+      this.cachedLeafMessageCount = undefined
       this.lastUpdate = Date.now()
     })
     this.onMessage.subscribe(() => {
@@ -102,6 +105,34 @@ export class TreeNode<ViewModel> {
     return previous.branch().concat([this])
   }
 
+  private isTopicEmptyLeaf() {
+    const hasNoMessage = (!this.message || !this.message.value)
+    return hasNoMessage && this.isLeaf()
+  }
+
+  private isLeaf() {
+    return this.edgeArray.length === 0
+  }
+
+  private removeFromParent() {
+    const previous = this.previous()
+    if (!previous || !this.sourceEdge) {
+      return
+    }
+    previous.removeEdge(this.sourceEdge)
+  }
+
+  public removeEdge(edge: Edge<any>) {
+    delete this.edges[edge.name]
+    this.edgeArray = Object.values(this.edges)
+    this.onMerge.dispatch()
+
+    if (this.isTopicEmptyLeaf()) {
+      debugger
+      this.removeFromParent()
+    }
+  }
+
   public updateWithNode(node: TreeNode<ViewModel>) {
     if (node.message) {
       this.setMessage(node.message)
@@ -109,6 +140,10 @@ export class TreeNode<ViewModel> {
       this.mqttMessage = node.mqttMessage
     }
 
+    if (this.isTopicEmptyLeaf()) {
+      this.removeFromParent()
+    }
+
     this.mergeEdges(node)
     this.onMerge.dispatch()
   }

backend/src/Model/spec/TreeNode.spec.ts

@@ -43,10 +43,10 @@ describe('TreeNode', () => {
 
   it('updateWithNode should add nodes to the tree', () => {
     const topics1 = 'foo/bar'.split('/')
-    const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined)
+    const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, 'foo')
 
     const topics2 = 'foo/bar/baz'.split('/')
-    const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined)
+    const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, 'bar')
 
     leaf1.firstNode().updateWithNode(leaf2.firstNode())
 

events/EventBus.ts

@@ -30,6 +30,7 @@ class IpcMainEventBus implements EventBusInterface {
   }
 
   public unsubscribeAll<MessageType>(event: Event<MessageType>) {
+    console.log('unsubscribeAll', event.topic)
     this.ipc.removeAllListeners(event.topic)
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.1.3",
+  "version": "0.2.0-alpha",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -71,6 +71,7 @@
     "webdriverio": "5.4"
   },
   "dependencies": {
+    "about-window": "^1.12.1",
     "electron-debug": "^2.0.0",
     "electron-is-dev": "^1.0.1",
     "electron-log": "^2.2.17",

scripts/prepareVideo.sh

@@ -1,27 +1,24 @@
 #!/bin/bash
-# cp app.mp4 original.mp4
 ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
+
 # The video starts with a few blank frames, we want to know when the stop
 ffprobe -f lavfi -i "movie=app2.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
 END_OF_BLACK=`cat ffmpeg_info | grep end | head -n1 | cut -d'=' -f2`
 
+# Remove grey frames at the beginning (app start and splash screen)
 END_OF_BLACK=`awk "BEGIN {print $END_OF_BLACK+0.8; exit}"`
-# Trim black frames at start
-ffmpeg -ss $END_OF_BLACK -i app2.mp4 app.mp4
-# mv app2.mp4 app.mp4
 
-# ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv
+# Trim black frames at start
+ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -ss $END_OF_BLACK  app.mp4
+
 # Generate gif palette
-# ffmpeg -y -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf fps=10,scale=720:-1:flags=lanczos,palettegen palette.png
 ffmpeg -y -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf fps=10,scale=1024:-1:flags=lanczos,palettegen palette1024.png
 
 # Create gif
-# ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=720:-1:flags=lanczos[x];[x][1:v]paletteuse" app.gif
 ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=1024:-1:flags=lanczos[x];[x][1:v]paletteuse" app1024.gif
 
 # Clean up
 rm ffmpeg_info palette*.png qrawvideorgb24.yuv
 
-# mv app.mp4 ui-test.mp4
-# mv app.gif ui-test.gif
+mv app.mp4 ui-test.mp4
 mv app1024.gif ui-test.gif

src/MenuTemplate.ts

@@ -1,11 +1,22 @@
 import { Menu, app, BrowserWindow, webContents } from 'electron'
+import openAboutWindow from 'about-window'
+import * as path from 'path'
 
 const applicationMenu = {
   label: 'Application',
   submenu: [
     {
       label: 'About Application',
-      selector: 'orderFrontStandardAboutPanel:',
+      click: () => {
+        console.log(path.join(__dirname, 'icon.png'))
+        openAboutWindow({
+          icon_path: path.join(__dirname, '..', '..', 'icon.png'),
+          license: 'AGPL-3.0',
+          homepage: 'https://thomasnordquist.github.io/MQTT-Explorer/',
+          bug_report_url: 'https://github.com/thomasnordquist/MQTT-Explorer/issues',
+          description: 'Author: Thomas Nordquist',
+        })
+      },
     },
     {
       type: 'separator' as 'separator',

yarn.lock

@@ -189,6 +189,11 @@
   dependencies:
     "@wdio/config" "^5.4.6"
 
+about-window@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/about-window/-/about-window-1.12.1.tgz#b81c10f6de58d38bce2aa5f31f61a82e6c3d6c2b"
+  integrity sha512-P/fJACq7RBFpv5Ql0kIqpOYgFqQ8WdoZoB7wrKmDvwTSKVOMbUZMYnQYtnOW6dHmMCYuNrmQFf+MxvuhE+KrzQ==
+
 ajv-keywords@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"