Update icons

.travis.yml

@@ -24,6 +24,7 @@ services:
 
 install:
   - yarn install
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get update && sudo apt-get -y install snap squashfs-tools && sudo snap install snapcraft --classic; fi;
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker build docker --tag uitest; fi;
 
 script:
@@ -31,6 +32,6 @@ script:
   - yarn test
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker run -e GH_TOKEN=$GH_TOKEN -e GIT_TAG=$TRAVIS_TAG --rm -v `pwd`:/app uitest sh -c "cd app && docker/testMounted.sh"; fi
   - if [[ "$TRAVIS_TAG" != "" ]]; then yarn run prepare-release; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- linux; fi
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package linux; fi
   - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- mac; fi
   - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- win; fi

Changelog.md

@@ -1,6 +1,12 @@
-# next release
-- Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
-- Add message diff view
-- Make user interactions more predictable
+# 0.2.1
 
-# 0.2.0
+- Highlight differences in the last received message with a "diff" view
+- Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
+- Make user interactions more predictable by removing "select topic on mouse over"
+- Add "Quick Preview" setting, to enable topic selection on mouse over
+- Add JSON formatter
+- Show error when connection to the mqtt broker is lost
+- Fix bug where mqtt explorer resets the tree after a reconnect
+- Fix MQTT-Client id
+
+# 0.2.0

Readme.md

@@ -38,12 +38,15 @@ The hierarchical view allows for a quick understanding what is going on on your
 ![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.
-So don't worry if you got >=30k topics and >=100.000 messages per minute.
 
-One can also subscribe to custom topics insted of the "root wildcard #", therefore limiting the amount of messages.
+This App is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+In very large productive environments brokers may handle an exteme load of topics.
+Subscribing with a wildcard topic is in this scenario not adviced.
+To avoid a scenario where the MQTT-Explorer would have to handle millions of updates, one can set up custom subscriptions in the "Advanced" connection settings.
 
 ## Develop
+
 PRs and issues are welcome
 
 Install with `npm run install`, build with `npm run build`
@@ -53,22 +56,27 @@ Start with `npm run start`
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
 
 ## Automated Tests
+
 To achieve a reliable product automated tests run regulary on travis.
+
 - Data model
 - MQTT integration
 - UI-Tests (The demo is a recorded ui test)
 
 ## Telemetry
-The App sends telemetry and error reports, this enables me to quickly react on bugs/errors I produced.
-This is a difficutlt task since this App runs on three different operating systems and architectures.
+
+No personal data is processed, sent or stored.
+
+The app sends telemetry and error reports, this enables me to quickly react on bugs/errors and understand what's going on.
+The app runs on winows, linux and mac and has thousands of users. Responding quickly to bugs is essential.
+This greatly helps to improve the software quality and reliability.
 
 It basically sends: app version, processor architecture, operating system, used memory, user interactions and error stacks.
 
-This greatly helps to improve the software quality and reliability.
-No data about you or your data is send or stored.
-Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+<details>
+<summary>Example telemetry</summary>
+<p>
 
-Example telemetry:
 ```javascript
 { system: { arch: 'x64', platform: 'darwin' },
   appVersion: '0.0.7',
@@ -84,5 +92,10 @@ Example telemetry:
   transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
 ```
 
+</p>
+</details>
+
+Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+
 ## License
 [AGPL 3](./LICENSE)

Readme.tpl.md

@@ -4,6 +4,8 @@
 [![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
 [![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
 
+<img src="./icon.png" height="48" />
+
 ### Version {{ version }}
 
 A MQTT Tool to get a quick overview of your MQTT topics and integrate new devices/services more efficiently.
@@ -38,12 +40,15 @@ The hierarchical view allows for a quick understanding what is going on on your
 ![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.
-So don't worry if you got >=30k topics and >=100.000 messages per minute.
 
-One can also subscribe to custom topics insted of the "root wildcard #", therefore limiting the amount of messages.
+This App is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+In very large productive environments brokers may handle an exteme load of topics.
+Subscribing with a wildcard topic is in this scenario not adviced.
+To avoid a scenario where the MQTT-Explorer would have to handle millions of updates, one can set up custom subscriptions in the "Advanced" connection settings.
 
 ## Develop
+
 PRs and issues are welcome
 
 Install with `npm run install`, build with `npm run build`
@@ -53,22 +58,27 @@ Start with `npm run start`
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
 
 ## Automated Tests
+
 To achieve a reliable product automated tests run regulary on travis.
+
 - Data model
 - MQTT integration
 - UI-Tests (The demo is a recorded ui test)
 
 ## Telemetry
-The App sends telemetry and error reports, this enables me to quickly react on bugs/errors I produced.
-This is a difficutlt task since this App runs on three different operating systems and architectures.
+
+No personal data is processed, sent or stored.
+
+The app sends telemetry and error reports, this enables me to quickly react on bugs/errors and understand what's going on.
+The app runs on winows, linux and mac and has thousands of users. Responding quickly to bugs is essential.
+This greatly helps to improve the software quality and reliability.
 
 It basically sends: app version, processor architecture, operating system, used memory, user interactions and error stacks.
 
-This greatly helps to improve the software quality and reliability.
-No data about you or your data is send or stored.
-Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+<details>
+<summary>Example telemetry</summary>
+<p>
 
-Example telemetry:
 ```javascript
 { system: { arch: 'x64', platform: 'darwin' },
   appVersion: '0.0.7',
@@ -84,5 +94,10 @@ Example telemetry:
   transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
 ```
 
+</p>
+</details>
+
+Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+
 ## License
 [AGPL 3](./LICENSE)

app/src/App.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import CodeDiff from './components/CodeDiff'
 import ConnectionSetup from './components/ConnectionSetup/ConnectionSetup'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import ErrorBoundary from './ErrorBoundary'
@@ -89,7 +88,7 @@ class App extends React.PureComponent<Props, {}> {
           <UpdateNotifier />
           <ConnectionSetup />
         </ErrorBoundary>
-      </div >
+      </div>
     )
   }
 }

app/src/actions/Connection.ts

@@ -1,18 +1,19 @@
 import * as q from '../../../backend/src/Model'
 import * as url from 'url'
 import { Action, ActionTypes } from '../reducers/Connection'
+import { AppState } from '../reducers'
+import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource'
+import { Dispatch } from 'redux'
+import { globalActions } from '.'
+import { showError } from './Global'
+import { showTree } from './Tree'
+import { TopicViewModel } from '../TopicViewModel'
 import {
   addMqttConnectionEvent,
   makeConnectionStateEvent,
   removeConnection,
   rendererEvents,
 } from '../../../events'
-import { AppState } from '../reducers'
-import { Dispatch } from 'redux'
-import { MqttOptions, DataSourceState } from '../../../backend/src/DataSource'
-import { showTree } from './Tree'
-import { TopicViewModel } from '../TopicViewModel'
-import { showError } from './Global'
 
 export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   dispatch(connecting(connectionId))
@@ -23,10 +24,13 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
   rendererEvents.subscribe(event, (dataSourceState) => {
     console.log(dataSourceState)
     if (dataSourceState.connected) {
-      const tree = new q.Tree<TopicViewModel>()
-      tree.updateWithConnection(rendererEvents, connectionId)
-      dispatch(connected(tree, host!))
-      dispatch(showTree(tree))
+      const didReconnect = Boolean(getState().connection.tree)
+      if (!didReconnect) {
+        const tree = new q.Tree<TopicViewModel>()
+        tree.updateWithConnection(rendererEvents, connectionId)
+        dispatch(showTree(tree))
+        dispatch(connected(tree, host!))
+      }
     } else if (dataSourceState.error) {
       dispatch(showError(dataSourceState.error))
       dispatch(disconnect())
@@ -41,6 +45,7 @@ const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<a
     state = 'connecting'
   } else if (!dataSourceState.connected) {
     state = 'offline'
+    dispatch(globalActions.showError('Disconnected from server'))
   } else if (dataSourceState.connected) {
     state = 'online'
   } else {
@@ -68,7 +73,11 @@ export const connecting: (connectionId: string) => Action = (connectionId: strin
 
 export const disconnect = () => (dispatch: Dispatch<any>, getState: () => AppState)  => {
   const { connectionId, tree } = getState().connection
-  rendererEvents.emit(removeConnection, connectionId)
+  if (connectionId) {
+    rendererEvents.emit(removeConnection, connectionId)
+    rendererEvents.unsubscribeAll(makeConnectionStateEvent(connectionId))
+  }
+
   tree && tree.stopUpdating()
 
   dispatch(showTree(undefined))

app/src/actions/Publish.ts

@@ -1,7 +1,7 @@
-import { ActionTypes, Action } from '../reducers/Publish'
+import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
-import { rendererEvents, makePublishEvent } from '../../../events'
+import { makePublishEvent, rendererEvents } from '../../../events'
 
 export const setTopic = (topic?: string): Action  => {
   return {

app/src/actions/Sidebar.ts

@@ -1,7 +1,7 @@
-import { Dispatch, Action } from 'redux'
+import * as q from '../../../backend/src/Model'
+import { Action, Dispatch } from 'redux'
 import { AppState } from '../reducers'
 import { makePublishEvent, rendererEvents } from '../../../events'
-import * as q from '../../../backend/src/Model'
 
 export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const { selectedTopic } = getState().tree

app/src/actions/Tree.ts

@@ -1,10 +1,10 @@
-import { AppState } from '../reducers'
-import { ActionTypes } from '../reducers/Tree'
 import * as q from '../../../backend/src/Model'
-import { Dispatch, AnyAction } from 'redux'
+import { ActionTypes } from '../reducers/Tree'
+import { AnyAction, Dispatch } from 'redux'
+import { AppState } from '../reducers'
+import { batchActions } from 'redux-batched-actions'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../TopicViewModel'
-import { batchActions } from 'redux-batched-actions'
 const debounce = require('lodash.debounce')
 
 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {

app/src/actions/index.ts

@@ -1,10 +1,10 @@
-import * as settingsActions from './Settings'
-import * as publishActions from './Publish'
-import * as treeActions from './Tree'
-import * as updateNotifierActions from './UpdateNotifier'
 import * as connectionActions from './Connection'
-import * as sidebarActons from './Sidebar'
 import * as connectionManagerActions from './ConnectionManager'
 import * as globalActions from './Global'
+import * as publishActions from './Publish'
+import * as settingsActions from './Settings'
+import * as sidebarActons from './Sidebar'
+import * as treeActions from './Tree'
+import * as updateNotifierActions from './UpdateNotifier'
 
 export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons, connectionManagerActions, globalActions }

app/src/components/BrokerStatistics.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react'
 import * as q from '../../../backend/src/Model'
-
+import * as React from 'react'
 import { AppState } from '../reducers'
-import { Typography } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
 import { connect } from 'react-redux'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../TopicViewModel'
+import { Typography } from '@material-ui/core'
+
 const abbreviate = require('number-abbreviate')
 
 interface Stats {

app/src/components/CodeDiff.tsx

@@ -1,13 +1,14 @@
 import * as diff from 'diff'
 import * as Prism from 'prismjs'
 import * as React from 'react'
-import { Theme, withStyles, Badge } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core'
 import 'prismjs/components/prism-json'
 import 'prismjs/themes/prism-tomorrow.css'
 
 interface Props {
   previous: string
   current: string
+  nameOfCompareMessage: string
   language?: 'json'
   classes: any
 }
@@ -60,9 +61,13 @@ class CodeDiff extends React.Component<Props, {}> {
     }
 
     return (
-      <span style={{ display: 'block', textAlign: 'right' }}>
-        Diff: <span className={this.props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
-        , <span className={this.props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
+      <span style={{ display: 'block', marginBottom: '8px', float: 'right' }}>
+        <span>
+          Comparing with <b>{this.props.nameOfCompareMessage}</b> message:&nbsp;
+
+          <span className={this.props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
+          , <span className={this.props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
+        </span>
       </span>
     )
   }

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -66,7 +66,7 @@ class ConnectionSettings extends React.Component<Props, State> {
             </Grid>
             <Grid item={true} xs={12} style={{ padding: 0 }}>
               <List
-                className={classes.topicList}
+                className={`${classes.topicList} advanced-connection-settings-topic-list`}
                 component="nav"
               >
                 <div className={classes.list}>

app/src/components/Copy.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
-import FileCopy from '@material-ui/icons/FileCopy'
 import Check from '@material-ui/icons/Check'
+import CustomIconButton from './CustomIconButton'
+import FileCopy from '@material-ui/icons/FileCopy'
 import green from '@material-ui/core/colors/green'
-import { withStyles, Theme } from '@material-ui/core/styles'
-import CustomIconButton from './CustomIconButton';
+import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
 const copy = require('copy-text-to-clipboard')
 

app/src/components/CustomIconButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { IconButton } from '@material-ui/core'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface Props {
   onClick: any,

app/src/components/Sidebar/MessageHistory.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
+import * as React from 'react'
 import BarChart from '@material-ui/icons/BarChart'
 import DateFormatter from '../helper/DateFormatter'
 import History from './History'
 import { TopicViewModel } from '../../TopicViewModel'
+
 const PlotHistory = React.lazy(() => import('./PlotHistory'))
 
 const throttle = require('lodash.throttle')

app/src/components/Sidebar/NodeStats.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { Typography } from '@material-ui/core'
+import * as React from 'react'
 import { TopicViewModel } from '../../TopicViewModel'
+import { Typography } from '@material-ui/core'
 
 interface Props {
   node: q.TreeNode<TopicViewModel>

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,10 +1,9 @@
-const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
-import { default as ReactResizeDetector } from 'react-resize-detector'
-
-import DateFormatter from '../helper/DateFormatter'
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import DateFormatter from '../helper/DateFormatter'
+import { default as ReactResizeDetector } from 'react-resize-detector'
 import 'react-vis/dist/style.css'
+const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
 
 interface Props {
   messages: q.Message[]

app/src/components/Sidebar/Publish/Publish.tsx

@@ -31,10 +31,9 @@ import Navigation from '@material-ui/icons/Navigation'
 import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { publishActions } from '../../../actions'
+import { publishActions, globalActions } from '../../../actions'
 import ClearAdornment from '../../helper/ClearAdornment'
 import { TopicViewModel } from '../../../TopicViewModel'
-import CustomIconButton from '../../CustomIconButton';
 
 interface Props {
   node?: q.TreeNode<TopicViewModel>
@@ -42,6 +41,7 @@ interface Props {
   topic?: string
   payload?: string
   actions: typeof publishActions
+  globalActions: typeof globalActions
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
@@ -158,7 +158,9 @@ class Publish extends React.Component<Props, State> {
       try {
         const str = JSON.stringify(JSON.parse(this.props.payload), undefined, '  ')
         this.updatePayload(str)
-      } catch { }
+      } catch (error) {
+        this.props.globalActions.showError(`Format error: ${error.message}`)
+      }
     }
   }
 
@@ -325,6 +327,7 @@ class Publish extends React.Component<Props, State> {
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: bindActionCreators(publishActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
   }
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -89,7 +89,7 @@ class Sidebar extends React.Component<Props, State> {
 
   public render() {
     return (
-      <div className={this.props.classes.drawer}>
+      <div id="Sidebar" className={this.props.classes.drawer}>
         {this.renderNode()}
       </div>
     )

app/src/components/Sidebar/ValueRenderer.tsx

@@ -70,6 +70,7 @@ class ValueRenderer extends React.Component<Props, State> {
         previous={previous}
         current={current}
         language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
       />
     )
   }

app/src/components/TitleBar.tsx

@@ -1,8 +1,15 @@
 import * as React from 'react'
 import ClearAdornment from './helper/ClearAdornment'
 import CloudOff from '@material-ui/icons/CloudOff'
+import ConnectionHealthIndicator from './ConnectionHealthIndicator'
 import Menu from '@material-ui/icons/Menu'
 import Search from '@material-ui/icons/Search'
+import { AppState } from '../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionActions, settingsActions } from '../actions'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import {
   AppBar,
   Button,
@@ -11,13 +18,6 @@ import {
   Toolbar,
   Typography,
 } from '@material-ui/core'
-import { AppState } from '../reducers'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { connectionActions, settingsActions } from '../actions'
-import { fade } from '@material-ui/core/styles/colorManipulator'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import ConnectionHealthIndicator from './ConnectionHealthIndicator';
 
 const styles: StyleRulesCallback = theme => ({
   title: {

app/src/components/helper/ClearAdornment.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { IconButton } from '@material-ui/core'
 import Clear from '@material-ui/icons/Clear'
+import { IconButton } from '@material-ui/core'
 
 interface Props {
   value?: string

app/src/index.tsx

@@ -1,17 +1,17 @@
-import './tracking'
-
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import reduxThunk from 'redux-thunk'
-import { batchDispatchMiddleware } from 'redux-batched-actions'
-
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import reducers from './reducers'
-
 import App from './App'
-import { Provider } from 'react-redux'
-import { createStore, applyMiddleware, compose } from 'redux'
 import Demo from './components/demo'
+import reducers from './reducers'
+import reduxThunk from 'redux-thunk'
+import { applyMiddleware, compose, createStore } from 'redux'
+import { batchDispatchMiddleware } from 'redux-batched-actions'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
+import { Provider } from 'react-redux'
+import './tracking'
+
+
+
 
 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(

app/src/reducers/Connection.ts

@@ -1,6 +1,6 @@
+import * as q from '../../../backend/src/Model'
 import { Action } from 'redux'
 import { createReducer } from './lib'
-import * as q from '../../../backend/src/Model'
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { TopicViewModel } from '../TopicViewModel'
 

app/src/reducers/index.ts

@@ -1,11 +1,11 @@
-import { Action, Reducer, combineReducers } from 'redux'
-
+import { Action, combineReducers, Reducer } from 'redux'
+import { connectionManagerReducer, ConnectionManagerState } from './ConnectionManager'
+import { connectionReducer, ConnectionState } from './Connection'
+import { publishReducer, PublishState } from './Publish'
+import { settingsReducer, SettingsState } from './Settings'
 import { trackEvent } from '../tracking'
-import { PublishState, publishReducer } from './Publish'
-import { ConnectionState, connectionReducer } from './Connection'
-import { SettingsState, settingsReducer } from './Settings'
-import { TreeState, treeReducer } from './Tree'
-import { ConnectionManagerState, connectionManagerReducer } from './ConnectionManager'
+import { treeReducer, TreeState } from './Tree'
+
 
 export enum ActionTypes {
   showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha7",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -23,10 +23,12 @@
     "appId": "mqtt-explorer",
     "nodeGypRebuild": false,
     "mac": {
-      "category": "de.t7n.apps.mqtt-explorer",
+      "appId": "de.t7n.apps.mqtt-explorer",
+      "category": "public.app-category.developer-tools",
       "publish": [
         "github"
-      ]
+      ],
+      "provisioningProfile": "res/MQTT_Explorer_Store_Distribution_Profile.provisionprofile"
     },
     "linux": {
       "category": "Development",
@@ -43,7 +45,8 @@
       "app": "./",
       "buildResources": "res",
       "output": "build"
-    }
+    },
+    "afterAllArtifactBuild": "./dist/scripts/afterPack.js"
   },
   "author": "Thomas Nordquist",
   "email": "xxnerowingerxx@gmail.com",

package.ts

@@ -1,11 +1,12 @@
 import * as builder from 'electron-builder'
+import * as fs from 'fs'
+import * as path from 'path'
 
-const linux: builder.CliOptions = {
+const linuxAppImage: builder.CliOptions = {
   x64: true,
   ia32: true,
   armv7l: true,
   arm64: false,
-  linux: ['AppImage'],
   projectDir: './build/clean',
   publish: 'always',
 }
@@ -15,17 +16,24 @@ const linuxSnap: builder.CliOptions = {
   ia32: false,
   armv7l: false,
   arm64: false,
-  linux: ['snap'],
   projectDir: './build/clean',
   publish: 'always',
 }
 
-const win: builder.CliOptions = {
+const winPortable: builder.CliOptions = {
+  x64: true,
+  ia32: true,
+  armv7l: false,
+  arm64: false,
+  projectDir: './build/clean',
+  publish: 'always',
+}
+
+const winNsis: builder.CliOptions = {
   x64: true,
   ia32: true,
   armv7l: false,
   arm64: false,
-  win: ['portable', 'nsis'],
   projectDir: './build/clean',
   publish: 'always',
 }
@@ -35,9 +43,8 @@ const winAppx: builder.CliOptions = {
   ia32: true,
   armv7l: false,
   arm64: false,
-  win: ['appx'],
   projectDir: './build/clean',
-  publish: 'never',
+  publish: 'onTag',
 }
 
 const mac: builder.CliOptions = {
@@ -45,7 +52,6 @@ const mac: builder.CliOptions = {
   ia32: true,
   armv7l: false,
   arm64: false,
-  mac: ['dmg'],
   projectDir: './build/clean',
   publish: 'always',
 }
@@ -53,29 +59,40 @@ const mac: builder.CliOptions = {
 async function executeBuild() {
   switch (process.argv[2]) {
     case 'win':
-      await builder.build(win)
+      await buildWithOptions(winPortable, { platform: 'win', package: 'portable' })
+      await buildWithOptions(winNsis, { platform: 'win', package: 'nsis' })
       break
     case 'appx':
-      await builder.build(winAppx)
+      await buildWithOptions(winAppx, { platform: 'win', package: 'appx' })
       break
     case 'linux':
-      await builder.build(linux)
-      break
-    case 'snap':
-      try {
-        await builder.build(linuxSnap)
-      } catch {
-        // ignore
-      }
+      await buildWithOptions(linuxAppImage, { platform: 'linux', package: 'AppImage' })
+      await buildWithOptions(linuxSnap, { platform: 'linux', package: 'snap' })
       break
     case 'mac':
-      await builder.build(mac)
+      await buildWithOptions(mac, { platform: 'mac', package: 'mas' })
+      await buildWithOptions(mac, { platform: 'mac', package: 'dmg' })
+      await buildWithOptions(mac, { platform: 'mac', package: 'zip' })
       break
     default:
-      await builder.build(mac)
+      throw new Error('No target selected')
   }
 }
 
+export interface BuildInfo {
+  platform: 'win' | 'linux' | 'mac'
+  package: 'portable' | 'nsis' | 'appx' | 'AppImage' | 'snap' | 'dmg' | 'zip' | 'mas'
+}
+
+async function buildWithOptions(options: builder.CliOptions, buildInfo: BuildInfo) {
+  fs.writeFileSync(path.join(options.projectDir!, 'buildOptions.json'), JSON.stringify(buildInfo))
+
+  await builder.build({
+    ...options,
+    [buildInfo.platform]: [buildInfo.package],
+  })
+}
+
 function build() {
   try {
     executeBuild()

scripts/afterPack.ts

@@ -0,0 +1,22 @@
+import * as fs from 'fs-extra'
+import * as path from 'path'
+import { chdir } from 'process'
+import { exec } from './util'
+
+export default async function (info: any) {
+  for (const snapFile of info.artifactPaths) {
+    if (/\.snap$/.test(snapFile)) {
+      const originalDir = __dirname
+      const dirname = path.dirname(snapFile)
+      chdir(dirname)
+
+      await exec('sudo', ['unsquashfs', snapFile])
+      await fs.remove(snapFile)
+      await exec('sudo', ['chmod', '-R', 'g-s', 'squashfs-root'])
+      await exec('sudo', ['snap', 'run', 'snapcraft', 'pack', 'squashfs-root', '--output', snapFile])
+      await fs.remove('squashfs-root')
+
+      chdir(originalDir)
+    }
+  }
+}

scripts/prepare-release.ts

@@ -1,36 +1,7 @@
 import * as fs from 'fs-extra'
 import * as path from 'path'
-import { spawn, ChildProcess } from 'child_process'
 import { chdir } from 'process'
-
-async function exec(cmd: string, args: string[] = []) {
-  const child = spawn(cmd, args, { shell: true })
-  redirectOutputFor(child)
-  await waitFor(child)
-}
-
-function redirectOutputFor(child: ChildProcess) {
-  const printStdout = (data: Buffer) => {
-    process.stdout.write(data.toString())
-  }
-  const printStderr = (data: Buffer) => {
-    process.stderr.write(data.toString())
-  }
-  child.stdout.on('data', printStdout)
-  child.stderr.on('data', printStderr)
-
-  child.once('close', () => {
-    child.stdout.off('data', printStdout)
-    child.stderr.off('data', printStderr)
-  })
-}
-
-async function waitFor(child: ChildProcess) {
-
-  return new Promise((resolve) => {
-    child.once('close', () => resolve())
-  })
-}
+import { exec } from './util'
 
 const targetDir = path.join('build', 'clean')
 async function prepareRelease() {

scripts/util.ts

@@ -0,0 +1,29 @@
+import { spawn, ChildProcess } from 'child_process'
+
+export async function exec(cmd: string, args: string[] = []) {
+  const child = spawn(cmd, args, { shell: true })
+  redirectOutputFor(child)
+  await waitFor(child)
+}
+
+function redirectOutputFor(child: ChildProcess) {
+  const printStdout = (data: Buffer) => {
+    process.stdout.write(data.toString())
+  }
+  const printStderr = (data: Buffer) => {
+    process.stderr.write(data.toString())
+  }
+  child.stdout.on('data', printStdout)
+  child.stderr.on('data', printStderr)
+
+  child.once('close', () => {
+    child.stdout.off('data', printStdout)
+    child.stderr.off('data', printStderr)
+  })
+}
+
+async function waitFor(child: ChildProcess) {
+  return new Promise((resolve) => {
+    child.once('close', () => resolve())
+  })
+}

src/electron.ts

@@ -1,3 +1,4 @@
+import * as fs from 'fs'
 import * as log from 'electron-log'
 import * as path from 'path'
 import ConfigStorage from '../backend/src/ConfigStorage'
@@ -7,10 +8,23 @@ import { ConnectionManager, updateNotifier } from '../backend/src/index'
 import { electronTelemetryFactory } from 'electron-telemetry'
 import { menuTemplate } from './MenuTemplate'
 import { UpdateInfo } from '../events'
+import { BuildInfo } from 'electron-telemetry/build/Model';
 const isDev = require('electron-is-dev')
 
 if (!isDev) {
-  const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')
+  let buildOptions: BuildInfo = ({ platform: 'unknown', package: 'unknown' } as any)
+
+  try {
+    const options = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'buildOptions.json')).toString())
+    if (typeof options.platform === 'string' && typeof options.package === 'string') {
+      buildOptions = options
+    }
+  } catch (error) {
+    console.log(error)
+  }
+
+  console.log(buildOptions)
+  const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5', buildOptions)
 }
 
 // const isDebugEnabled = Boolean(process.argv.find(arg => arg === 'debug'))

src/spec/scenarios/connect.ts

@@ -6,6 +6,8 @@ export async function connectTo(host: string, browser: Browser<void>) {
   await writeTextToInput('Username', 'thomas', browser, false)
   await writeTextToInput('Password', 'bierbier', browser, false)
 
+  await browser.saveScreenshot('screen1.png')
+
   const connectButton = await browser.$('//button/span[contains(text(),"Connect")]')
   clickOn(connectButton, browser)
 }

src/spec/scenarios/showAdvancedConnectionSettings.ts

@@ -24,6 +24,6 @@ export async function showAdvancedConnectionSettings(browser: Browser<void>) {
 }
 
 async function deleteFirstSubscribedTopic(browser: Browser<void>) {
-  const deleteButton = await browser.$('//*[contains(@class,"topicList")]//button')
+  const deleteButton = await browser.$('.advanced-connection-settings-topic-list button')
   await clickOn(deleteButton, browser)
 }

src/spec/scenarios/showJsonFormatting.ts

@@ -12,13 +12,13 @@ export async function showJsonFormatting(browser: Browser<void>) {
   await browser.keys(['\uE009', 'A']) // Ctrl + A
   await browser.keys(['\uE000']) // End keyboard modifier
   await browser.keys(['\uE003']) // Backspace
-  await sleep(300)
+  await sleep(500)
   await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
   await sleep(300)
   await clickOn(formatJsonButton, browser)
   await sleep(1200)
 
-  const sidebarDrawer = await browser.$('//*[contains(@class, "Sidebar")]')
+  const sidebarDrawer = await browser.$('#Sidebar')
   await sidebarDrawer.scrollIntoView()
 }
 

src/spec/scenarios/showJsonPreview.ts

@@ -3,6 +3,6 @@ import { expandTopic, sleep } from '../util'
 
 export async function showJsonPreview(browser: Browser<void>) {
   await expandTopic('actuality/showcase', browser)
-
+  await browser.saveScreenshot('screen3.png')
   await sleep(1000)
 }

src/spec/scenarios/showMenu.ts

@@ -9,6 +9,8 @@ export async function showMenu(browser: Browser<void>) {
   // moveToCenterOfElement(brokerStatistics, browser)
   await sleep(2000)
 
+  await browser.saveScreenshot('screen4.png')
+
   const topicOrder = await browser.$('#select-node-order')
   await clickOn(topicOrder, browser)
   await sleep(1000)

src/spec/scenarios/showNumericPlot.ts

@@ -5,7 +5,7 @@ export async function showNumericPlot(browser: Browser<void>) {
   await expandTopic('livingroom/temperature', browser)
 
   await clickOnHistory(browser)
-
+  await browser.saveScreenshot('screen2.png')
   await sleep(1000)
   await expandTopic('livingroom/humidity', browser)
 }

src/spec/webdriverio.ts

@@ -57,7 +57,7 @@ async function doStuff() {
   await sleep(1000)
 
   await sleep(1000)
-  await showText('Topics overview', 2000, browser, 'top')
+  await showText('Topic overview', 2000, browser, 'top')
   await sleep(2000)
   await showText('Indicate topic updates', 2000, browser, 'bottom')
   await sleep(3000)

tsconfig.json

@@ -11,5 +11,5 @@
     "lib": ["es2017", "dom"],
     "sourceMap": true
   },
-  "include": ["src/electron.ts", "src/spec/electron.ts", "src/spec/webdriverio.ts"]
+  "include": ["src/electron.ts", "src/spec/electron.ts", "src/spec/webdriverio.ts", "scripts/*.ts"]
 }

yarn.lock

@@ -1147,7 +1147,7 @@ electron-publish@20.38.5:
 
 "electron-telemetry@git+https://github.com/thomasnordquist/electron-telemetry.git#dist":
   version "1.0.0"
-  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#24792a0d8d6c2b047855acfda7d740ee4e51b97f"
+  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#3d6c0c5e3fd9d8101dcb7a0435256572ed58b2b6"
   dependencies:
     axios "^0.18.0"
     pako "^1.0.8"