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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.2.1-alpha4",
+  "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/showJsonFormatting.ts

@@ -12,7 +12,7 @@ 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)

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"