mirror of
https://github.com/thomasnordquist/MQTT-Explorer.git
synced 2026-09-12 01:23:31 +00:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Thomas Nordquist
|
623303349b |
@@ -1,6 +0,0 @@
|
||||
# next release
|
||||
- Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
|
||||
- Add message diff view
|
||||
- Make user interactions more predictable
|
||||
|
||||
# 0.2.0
|
||||
@@ -1,47 +1,42 @@
|
||||
# [MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
|
||||
[](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
|
||||
|
||||
### Version
|
||||
### Version 0.1.3
|
||||
|
||||
A MQTT Tool to get a quick overview of your MQTT topics and integrate new devices/services more efficiently.
|
||||
|
||||
- Visualize topics and topic activity
|
||||
- Delete retained topics
|
||||
- Search/filter topics
|
||||
- Delete topic recursively
|
||||
- Publish topics
|
||||
- Plot numeric topics
|
||||
- Keep a history of each topic
|
||||
See the whole picture of your broker.
|
||||
- What topics are active?
|
||||
- Which retained topics are abandoned?
|
||||
- Where is this new device / service I connected to the broker?
|
||||
|
||||
MQTT-Explorer strives to be THE swiss-army-knife tool.
|
||||
The perfect tool to integrate new services, IoT devices in your network.
|
||||
The hierarchical view allows for a quick understanding what is going on on your broker.
|
||||
|
||||
## Download
|
||||
|
||||
| Platform | | Downloads |
|
||||
|:----------:|:-------------:|:------:|
|
||||
|  | Windows | [portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.2.0/MQTT-Explorer-0.2.0.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.2.0/MQTT-Explorer-Setup-0.2.0.exe) |
|
||||
|  | Linux | [AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.2.0/MQTT-Explorer-0.2.0-x86_64.AppImage)<br>*Run AppImage:<br>Make it executable and double-click it.* |
|
||||
|  | Ubuntu | [](https://snapcraft.io/mqtt-explorer)<br>[Ubuntu Store](snap://mqtt-explorer) |
|
||||
|  | Mac | [dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.2.0/MQTT-Explorer-0.2.0.dmg) |
|
||||
|
||||
[More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
|
||||
The app is available for Windows ([portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-Setup-0.1.3.exe)), Linux ([AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3-x86_64.AppImage)) and Mac ([dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.dmg)).
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
| Platform | | Downloads |
|
||||
|:----------:|:-------------:|:------:|
|
||||
|  | Windows | [portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-Setup-0.1.3.exe) |
|
||||
|  | Linux | [AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3-x86_64.AppImage)<br>*Run AppImage:<br>Make it executable and double-click it.* |
|
||||
|  | Mac | [dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.dmg) |
|
||||
|
||||
[More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
|
||||
|
||||
## Demo
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
So don't worry if you got >=10k topics and >=100k messages per minute.
|
||||
|
||||
One can also subscribe to custom topics insted of the "root wildcard #", therefore limiting the amount of messages.
|
||||
Future releases will allow for a more granular selection of subscribed topics to handle
|
||||
|
||||
## Develop
|
||||
PRs and issues are welcome
|
||||
|
||||
+19
-24
@@ -1,47 +1,42 @@
|
||||
# [MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
|
||||
[](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
|
||||
[](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
|
||||
|
||||
### Version {{ version }}
|
||||
|
||||
A MQTT Tool to get a quick overview of your MQTT topics and integrate new devices/services more efficiently.
|
||||
|
||||
- Visualize topics and topic activity
|
||||
- Delete retained topics
|
||||
- Search/filter topics
|
||||
- Delete topic recursively
|
||||
- Publish topics
|
||||
- Plot numeric topics
|
||||
- Keep a history of each topic
|
||||
See the whole picture of your broker.
|
||||
- What topics are active?
|
||||
- Which retained topics are abandoned?
|
||||
- Where is this new device / service I connected to the broker?
|
||||
|
||||
MQTT-Explorer strives to be THE swiss-army-knife tool.
|
||||
The perfect tool to integrate new services, IoT devices in your network.
|
||||
The hierarchical view allows for a quick understanding what is going on on your broker.
|
||||
|
||||
## Download
|
||||
|
||||
| Platform | | Downloads |
|
||||
|:----------:|:-------------:|:------:|
|
||||
|  | Windows | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://assets.windowsphone.com/85864462-9c82-451e-9355-a3d5f874397a/English_get-it-from-MS_InvariantCulture_Default.png" width="150" /></a><br/>{{windowsTargets}} |
|
||||
|  | Linux | {{linuxTargets}}<br>*Run AppImage:<br>Make it executable and double-click it.* |
|
||||
|  | Ubuntu | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="150" /><br/>[Ubuntu Store](snap://mqtt-explorer) |
|
||||
|  | Mac | {{macTargets}} |
|
||||
|
||||
[More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
|
||||
The app is available for Windows ({{windowsTargets}}), Linux ({{linuxTargets}}) and Mac ({{macTargets}}).
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
| Platform | | Downloads |
|
||||
|:----------:|:-------------:|:------:|
|
||||
|  | Windows | {{windowsTargets}} |
|
||||
|  | Linux | {{linuxTargets}}<br>*Run AppImage:<br>Make it executable and double-click it.* |
|
||||
|  | Mac | {{macTargets}} |
|
||||
|
||||
[More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
|
||||
|
||||
## Demo
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
So don't worry if you got >=10k topics and >=100k messages per minute.
|
||||
|
||||
One can also subscribe to custom topics insted of the "root wildcard #", therefore limiting the amount of messages.
|
||||
Future releases will allow for a more granular selection of subscribed topics to handle
|
||||
|
||||
## Develop
|
||||
PRs and issues are welcome
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>MQTT Explorer</title>
|
||||
<title>MQTT-Explorer</title>
|
||||
<script src="./bugtracking.bundle.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
+5
-9
@@ -9,13 +9,10 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@material-ui/core": "^4.0.0-alpha.1",
|
||||
"@material-ui/icons": "^3.0.2",
|
||||
"@material-ui/lab": "^3.0.0-alpha.30",
|
||||
"@material-ui/styles": "^3.0.0-alpha.10",
|
||||
"@types/diff": "^4.0.1",
|
||||
"@material-ui/core": "^4.0.0-alpha.0",
|
||||
"@material-ui/icons": "^3.0.1",
|
||||
"@material-ui/styles": "^3.0.0-alpha.8",
|
||||
"@types/node": "^10.12.18",
|
||||
"@types/prismjs": "^1.9.1",
|
||||
"@types/react": "^16.7.18",
|
||||
"@types/react-dom": "^16.0.11",
|
||||
"@types/react-redux": "^6.0.12",
|
||||
@@ -29,7 +26,6 @@
|
||||
"compare-versions": "^3.4.0",
|
||||
"copy-text-to-clipboard": "^1.0.4",
|
||||
"css-loader": "^2.1.0",
|
||||
"diff": "^4.0.1",
|
||||
"electron-nucleus": "^1.11.0",
|
||||
"electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
|
||||
"html-webpack-plugin": "^4.0.0-beta.5",
|
||||
@@ -38,17 +34,17 @@
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"moving-average": "^1.0.0",
|
||||
"number-abbreviate": "^2.0.0",
|
||||
"prismjs": "^1.15.0",
|
||||
"react": "16.8",
|
||||
"react-ace": "^6.3.2",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-json-view": "^1.19.1",
|
||||
"react-keyboard-event-handler": "^1.4.1",
|
||||
"react-redux": "^6.0.0",
|
||||
"react-resize-detector": "^3.4.0",
|
||||
"react-split-pane": "^0.1.85",
|
||||
"react-vis": "^1.11.6",
|
||||
"redux": "^4.0.1",
|
||||
"redux-batched-actions": "^0.4.1",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"sha1": "^1.1.1",
|
||||
"socket.io-client": "^2.2.0",
|
||||
"source-map-loader": "^0.2.4",
|
||||
|
||||
+3
-10
@@ -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'
|
||||
@@ -12,18 +11,18 @@ import { AppState } from './reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { default as SplitPane } from 'react-split-pane'
|
||||
import { globalActions, settingsActions } from './actions'
|
||||
import { globalActions } from './actions'
|
||||
import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const Settings = React.lazy(() => import('./components/Settings'))
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
connectionId: string
|
||||
classes: any
|
||||
settingsVisible: boolean
|
||||
error?: string
|
||||
actions: typeof globalActions
|
||||
settingsActions: typeof settingsActions
|
||||
actions: any
|
||||
}
|
||||
|
||||
class App extends React.PureComponent<Props, {}> {
|
||||
@@ -32,10 +31,6 @@ class App extends React.PureComponent<Props, {}> {
|
||||
this.state = { }
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.props.settingsActions.loadSettings()
|
||||
}
|
||||
|
||||
private renderError() {
|
||||
if (this.props.error) {
|
||||
const error = typeof this.props.error === 'string' ? this.props.error : JSON.stringify(this.props.error)
|
||||
@@ -99,7 +94,6 @@ const mapStateToProps = (state: AppState) => {
|
||||
settingsVisible: state.settings.visible,
|
||||
connectionId: state.connection.connectionId,
|
||||
error: state.globalState.error,
|
||||
highlightTopicUpdates: state.settings.highlightTopicUpdates,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,7 +142,6 @@ const styles = (theme: Theme) => {
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
actions: bindActionCreators(globalActions, dispatch),
|
||||
settingsActions: bindActionCreators(settingsActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -31,6 +31,7 @@ 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 {
|
||||
@@ -43,7 +44,7 @@ class RemoteStorage implements PersistantStorage {
|
||||
})
|
||||
}
|
||||
|
||||
public store<Model>(identifier: StorageIdentifier<Model>, data: Model): Promise<void> {
|
||||
public store<Model>(identifier: StorageIdentifier<Model>, data: Model): Promise<void> {
|
||||
const transactionId = v4()
|
||||
const expectation = this.expectAck(transactionId)
|
||||
rendererEvents.emit(storageStoreEvent, { data, transactionId, store: identifier.id })
|
||||
@@ -56,6 +57,8 @@ 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 {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { EventDispatcher } from '../../events'
|
||||
export class TopicViewModel {
|
||||
private selected: boolean
|
||||
public change = new EventDispatcher<void, TopicViewModel>(this)
|
||||
public attached = true // When the viewmodel is attached it's always visible
|
||||
|
||||
public constructor() {
|
||||
this.selected = false
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
} from '../../../events'
|
||||
import { AppState } from '../reducers'
|
||||
import { Dispatch } from 'redux'
|
||||
import { MqttOptions, DataSourceState } from '../../../backend/src/DataSource'
|
||||
import { MqttOptions } from '../../../backend/src/DataSource'
|
||||
import { showTree } from './Tree'
|
||||
import { TopicViewModel } from '../TopicViewModel'
|
||||
import { showError } from './Global'
|
||||
@@ -31,27 +31,6 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
|
||||
dispatch(showError(dataSourceState.error))
|
||||
dispatch(disconnect())
|
||||
}
|
||||
dispatch(updateHealth(dataSourceState))
|
||||
})
|
||||
}
|
||||
|
||||
const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
let state
|
||||
if (dataSourceState.connecting) {
|
||||
state = 'connecting'
|
||||
} else if (!dataSourceState.connected) {
|
||||
state = 'offline'
|
||||
} else if (dataSourceState.connected) {
|
||||
state = 'online'
|
||||
} else {
|
||||
state = undefined
|
||||
}
|
||||
|
||||
console.log(state)
|
||||
|
||||
dispatch({
|
||||
type: ActionTypes.CONNECTION_SET_HEALTH,
|
||||
health: state,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -35,7 +35,6 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
|
||||
|
||||
export const saveConnectionSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
try {
|
||||
console.log('store settings')
|
||||
await persistantStorage.store(storedConnectionsIdentifier, getState().connectionManager.connections)
|
||||
} catch (error) {
|
||||
dispatch(showError(error))
|
||||
|
||||
+14
-76
@@ -1,92 +1,30 @@
|
||||
import * as q from '../../../backend/src/Model'
|
||||
import { AppState } from '../reducers'
|
||||
import { autoExpandLimitSet } from '../components/Settings'
|
||||
import { batchActions } from 'redux-batched-actions'
|
||||
import { default as persistantStorage, StorageIdentifier } from '../PersistantStorage'
|
||||
import { Action, ActionTypes, TopicOrder } from '../reducers/Settings'
|
||||
import { Dispatch } from 'redux'
|
||||
import { showError } from './Global'
|
||||
import { showTree } from './Tree'
|
||||
import { AppState } from '../reducers'
|
||||
import * as q from '../../../backend/src/Model'
|
||||
import { batchActions } from 'redux-batched-actions'
|
||||
import { autoExpandLimitSet } from '../components/Settings'
|
||||
import { TopicViewModel } from '../TopicViewModel'
|
||||
import {
|
||||
ActionTypes,
|
||||
SettingsState,
|
||||
TopicOrder,
|
||||
} from '../reducers/Settings'
|
||||
|
||||
const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
|
||||
id: 'Settings',
|
||||
}
|
||||
|
||||
export const loadSettings = () => async (dispatch: Dispatch<any>, _getState: () => AppState) => {
|
||||
try {
|
||||
const settings = await persistantStorage.load(settingsIdentifier)
|
||||
dispatch({
|
||||
settings,
|
||||
type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS,
|
||||
})
|
||||
} catch (error) {
|
||||
dispatch(showError(error))
|
||||
}
|
||||
}
|
||||
|
||||
export const storeSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
const settings = {
|
||||
...getState().settings,
|
||||
topicFilter: undefined,
|
||||
visible: undefined,
|
||||
}
|
||||
|
||||
try {
|
||||
await persistantStorage.store(settingsIdentifier, settings)
|
||||
} catch (error) {
|
||||
dispatch(showError(error))
|
||||
}
|
||||
}
|
||||
|
||||
export const setAutoExpandLimit = (autoExpandLimit: number = 0) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
dispatch({
|
||||
export const setAutoExpandLimit = (autoExpandLimit: number = 0): Action => {
|
||||
return {
|
||||
autoExpandLimit,
|
||||
type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT,
|
||||
})
|
||||
dispatch(storeSettings())
|
||||
}
|
||||
}
|
||||
|
||||
export const selectTopicWithMouseOver = (selectTopicWithMouseOver: boolean) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
dispatch({
|
||||
selectTopicWithMouseOver,
|
||||
type: ActionTypes.SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER,
|
||||
})
|
||||
dispatch(storeSettings())
|
||||
}
|
||||
|
||||
export const setValueDisplayMode = (valueRendererDisplayMode: 'diff' | 'raw') => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
dispatch({
|
||||
valueRendererDisplayMode,
|
||||
type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
|
||||
})
|
||||
dispatch(storeSettings())
|
||||
}
|
||||
|
||||
export const toggleSettingsVisibility = () => (dispatch: Dispatch<any>, _getState: () => AppState) => {
|
||||
dispatch({
|
||||
export const toggleSettingsVisibility = (): Action => {
|
||||
return {
|
||||
type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY,
|
||||
})
|
||||
dispatch(storeSettings())
|
||||
}
|
||||
}
|
||||
|
||||
export const togglehighlightTopicUpdates = () => (dispatch: Dispatch<any>, _getState: () => AppState) => {
|
||||
dispatch({
|
||||
type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY,
|
||||
})
|
||||
dispatch(storeSettings())
|
||||
}
|
||||
|
||||
export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none) => (dispatch: Dispatch<any>, _getState: () => AppState) => {
|
||||
dispatch({
|
||||
export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none): Action => {
|
||||
return {
|
||||
topicOrder,
|
||||
type: ActionTypes.SETTINGS_SET_TOPIC_ORDER,
|
||||
})
|
||||
dispatch(storeSettings())
|
||||
}
|
||||
}
|
||||
|
||||
export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
|
||||
@@ -1,46 +1,21 @@
|
||||
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<any>, getState: () => AppState) => {
|
||||
export const clearRetainedTopic = () => (dispatch: Dispatch<Action>, getState: () => AppState) => {
|
||||
const { selectedTopic } = getState().tree
|
||||
if (!selectedTopic) {
|
||||
return
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
if (!selectedTopic || !connectionId) {
|
||||
return
|
||||
}
|
||||
|
||||
const publishEvent = makePublishEvent(connectionId)
|
||||
const mqttMessage = {
|
||||
topic: topic.path(),
|
||||
topic: selectedTopic.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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Dispatch, AnyAction } from 'redux'
|
||||
import { setTopic } from './Publish'
|
||||
import { TopicViewModel } from '../TopicViewModel'
|
||||
import { batchActions } from 'redux-batched-actions'
|
||||
import { treeActions } from '.';
|
||||
const debounce = require('lodash.debounce')
|
||||
|
||||
export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
@@ -43,6 +44,26 @@ const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispat
|
||||
}
|
||||
}, 70)
|
||||
|
||||
export const handleKeyEvent = (key: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
const state = getState()
|
||||
const { tree, selectedTopic } = state.tree
|
||||
if (!tree) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!selectedTopic) {
|
||||
return dispatch(selectTopic(tree.firstNode()))
|
||||
}
|
||||
|
||||
const visibleTopics: q.TreeNode<TopicViewModel>[] = tree.childTopics().filter(topic => topic.viewModel && topic.viewModel.attached)
|
||||
if (key === 'down') {
|
||||
debugger
|
||||
const selectedIndex = visibleTopics.indexOf(selectedTopic)
|
||||
const nextIndex = (visibleTopics.length - 1) % (selectedIndex + 1)
|
||||
return dispatch(selectTopic(visibleTopics[nextIndex]))
|
||||
}
|
||||
}
|
||||
|
||||
export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
|
||||
const visibleTree = getState().tree.tree
|
||||
const connectionTree = getState().connection.tree
|
||||
|
||||
@@ -24,6 +24,7 @@ const styles: StyleRulesCallback = theme => ({
|
||||
height: '224px',
|
||||
backgroundColor: 'rebeccapurple',
|
||||
marginBottom: 0,
|
||||
marginTop: 'auto',
|
||||
padding: '8px',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
import * as diff from 'diff'
|
||||
import * as Prism from 'prismjs'
|
||||
import * as React from 'react'
|
||||
import { Theme, withStyles } from '@material-ui/core'
|
||||
import 'prismjs/components/prism-json'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
|
||||
interface Props {
|
||||
previous: string
|
||||
current: string
|
||||
language?: 'json'
|
||||
classes: any
|
||||
}
|
||||
|
||||
class CodeDiff extends React.Component<Props, {}> {
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const changes = diff.diffLines(this.props.previous, this.props.current)
|
||||
|
||||
const styledLines = Prism.highlight(this.props.current, Prism.languages.json).split('\n')
|
||||
|
||||
let lineNumber = 0
|
||||
const code = changes.map((change, key) => {
|
||||
const hasStyledCode = change.removed !== true
|
||||
const changedLines = change.count || 0
|
||||
if (hasStyledCode && this.props.language === 'json') {
|
||||
const html = styledLines.slice(lineNumber, lineNumber + changedLines).join('\n')
|
||||
lineNumber += changedLines
|
||||
|
||||
return <div key={key}><span className={this.cssClassForChange(change)} dangerouslySetInnerHTML={{ __html: html }} /></div>
|
||||
}
|
||||
|
||||
return <div key={key}><span className={this.cssClassForChange(change)}>{change.value}</span></div>
|
||||
})
|
||||
|
||||
return (
|
||||
<pre className={`language-json ${this.props.classes.codeBlock}`}>
|
||||
{code}
|
||||
</pre>
|
||||
)
|
||||
}
|
||||
|
||||
private cssClassForChange(change: diff.Change) {
|
||||
if (change.added === true) {
|
||||
return this.props.classes.addition
|
||||
}
|
||||
|
||||
if (change.removed === true) {
|
||||
return this.props.classes.deletion
|
||||
}
|
||||
|
||||
return this.props.classes.noChange
|
||||
}
|
||||
}
|
||||
|
||||
const style = (theme: Theme) => {
|
||||
const baseStyle = {
|
||||
width: '100%',
|
||||
}
|
||||
return {
|
||||
codeBlock: {
|
||||
fontSize: '12px',
|
||||
maxHeight: '200px',
|
||||
},
|
||||
noChange: {
|
||||
...baseStyle,
|
||||
},
|
||||
deletion: {
|
||||
...baseStyle,
|
||||
backgroundColor: 'rgba(255, 10, 10, 0.3)',
|
||||
},
|
||||
addition: {
|
||||
...baseStyle,
|
||||
backgroundColor: 'rgba(10, 255, 10, 0.3)',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(style)(CodeDiff)
|
||||
@@ -1,54 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
|
||||
import { AppState } from '../reducers'
|
||||
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'
|
||||
|
||||
const styles: StyleRulesCallback = theme => ({
|
||||
offline: {
|
||||
color: red[700],
|
||||
},
|
||||
online: {
|
||||
color: green[500],
|
||||
},
|
||||
connecting: {
|
||||
color: orange[600],
|
||||
},
|
||||
})
|
||||
|
||||
interface Props {
|
||||
classes: any
|
||||
connected: boolean
|
||||
health?: ConnectionHealth
|
||||
}
|
||||
|
||||
class ConnectionHealthIndicator extends React.Component<Props, {}> {
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { classes, health, connected } = this.props
|
||||
if (!health || !connected) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip title={`Connection health "${health}"`}>
|
||||
<DeviceHubOutlined className={classes[health]} />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
health: state.connection.health,
|
||||
connected: state.connection.connected || state.connection.connecting,
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator))
|
||||
@@ -69,7 +69,7 @@ class ConnectionSettings extends React.Component<Props, State> {
|
||||
className={classes.topicList}
|
||||
component="nav"
|
||||
>
|
||||
<div className={classes.list}>
|
||||
<div className={this.props.classes.list}>
|
||||
{this.renderSubscriptions()}
|
||||
</div>
|
||||
</List>
|
||||
@@ -79,7 +79,6 @@ class ConnectionSettings extends React.Component<Props, State> {
|
||||
className={classes.fullWidth}
|
||||
label="MQTT Client ID"
|
||||
margin="normal"
|
||||
value={this.props.connection.clientId}
|
||||
onChange={this.handleChange('clientId')}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@@ -14,6 +14,7 @@ import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Grid,
|
||||
@@ -25,7 +26,6 @@ import {
|
||||
Switch,
|
||||
TextField,
|
||||
} from '@material-ui/core'
|
||||
import ConnectionHealthIndicator from '../ConnectionHealthIndicator'
|
||||
|
||||
interface Props {
|
||||
connection: ConnectionOptions
|
||||
@@ -284,7 +284,7 @@ class ConnectionSettings extends React.Component<Props, State> {
|
||||
if (this.props.connecting) {
|
||||
return (
|
||||
<Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
|
||||
<ConnectionHealthIndicator /> Abort
|
||||
<CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -71,17 +71,16 @@ class ConnectionSetup extends React.Component<Props, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
const connectionHeight = '440px'
|
||||
const styles = (theme: Theme) => ({
|
||||
title: {
|
||||
color: theme.palette.text.primary,
|
||||
whiteSpace: 'nowrap' as 'nowrap',
|
||||
},
|
||||
root: {
|
||||
margin: `calc((100vh - ${connectionHeight}) / 2) auto 0 auto`,
|
||||
margin: '13vw auto 0 auto',
|
||||
minWidth: '800px',
|
||||
maxWidth: '850px',
|
||||
height: connectionHeight,
|
||||
height: '440px',
|
||||
outline: 'none' as 'none',
|
||||
display: 'flex' as 'flex',
|
||||
},
|
||||
|
||||
+19
-28
@@ -1,10 +1,9 @@
|
||||
import * as React from 'react'
|
||||
import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
|
||||
import { Snackbar, SnackbarContent } from '@material-ui/core'
|
||||
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')
|
||||
|
||||
@@ -33,36 +32,28 @@ class Copy extends React.Component<Props, State> {
|
||||
|
||||
public render() {
|
||||
const icon = !this.state.didCopy
|
||||
? <FileCopy fontSize="inherit" />
|
||||
? <FileCopy fontSize="inherit" style={{ cursor: 'pointer' }} onClick={this.handleClick} />
|
||||
: <Check fontSize="inherit" style={{ cursor: 'default' }} />
|
||||
|
||||
return (
|
||||
return <span>
|
||||
<span style={{ fontSize: '16px' }}>{icon}</span>
|
||||
<span>
|
||||
<Tooltip placement="top" title="Copy to clipboard">
|
||||
<span style={{ fontSize: '16px' }}>
|
||||
<CustomIconButton onClick={this.handleClick} >
|
||||
{icon}
|
||||
</CustomIconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<span>
|
||||
<Snackbar
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={this.state.snackBarOpen}
|
||||
autoHideDuration={2000}
|
||||
onClose={() => { this.setState({ snackBarOpen: false }) }}
|
||||
>
|
||||
<SnackbarContent
|
||||
className={this.props.classes.snackbar}
|
||||
message="Copied to clipboard"
|
||||
/>
|
||||
</Snackbar>
|
||||
</span>
|
||||
<Snackbar
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={this.state.snackBarOpen}
|
||||
autoHideDuration={2000}
|
||||
onClose={() => { this.setState({ snackBarOpen: false }) }}
|
||||
>
|
||||
<SnackbarContent
|
||||
className={this.props.classes.snackbar}
|
||||
message="Copied to clipboard"
|
||||
/>
|
||||
</Snackbar>
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
}
|
||||
|
||||
private handleClick = (event: React.MouseEvent) => {
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
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)
|
||||
@@ -10,18 +10,15 @@ import {
|
||||
MenuItem,
|
||||
Select,
|
||||
Typography,
|
||||
Switch,
|
||||
Tooltip,
|
||||
} from '@material-ui/core'
|
||||
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 } from '../actions'
|
||||
import { settingsActions, treeActions } from '../actions'
|
||||
import { TopicOrder } from '../reducers/Settings'
|
||||
import BrokerStatistics from './BrokerStatistics'
|
||||
import { shell } from 'electron';
|
||||
|
||||
export const autoExpandLimitSet = [{
|
||||
limit: 0,
|
||||
@@ -57,16 +54,10 @@ const styles: StyleRulesCallback = theme => ({
|
||||
minWidth: '150px',
|
||||
margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
|
||||
},
|
||||
author: {
|
||||
margin: 'auto 8px 8px auto',
|
||||
color: theme.palette.text.hint,
|
||||
cursor: 'pointer' as 'pointer',
|
||||
},
|
||||
})
|
||||
|
||||
interface Props {
|
||||
autoExpandLimit: number
|
||||
highlightTopicUpdates: boolean
|
||||
visible: boolean
|
||||
store?: any
|
||||
topicOrder: TopicOrder
|
||||
@@ -105,38 +96,12 @@ class Settings extends React.Component<Props, {}> {
|
||||
|
||||
{this.renderAutoExpand()}
|
||||
{this.renderNodeOrder()}
|
||||
{this.renderhighlightTopicUpdates()}
|
||||
</div>
|
||||
<Tooltip placement="top" title="App Author">
|
||||
<Typography className={classes.author} onClick={this.openGithubPage}>
|
||||
by Thomas Nordquist
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<BrokerStatistics />
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
private openGithubPage = () => {
|
||||
shell.openExternal('https://github.com/thomasnordquist')
|
||||
}
|
||||
|
||||
private renderhighlightTopicUpdates() {
|
||||
const { highlightTopicUpdates, actions } = this.props
|
||||
|
||||
return (
|
||||
<div style={{ padding: '8px', display: 'flex' }}>
|
||||
<InputLabel htmlFor="toggle-highlight-activity" style={{ flex: '1', marginTop: '8px' }}>Show Activity</InputLabel>
|
||||
<Switch
|
||||
name="toggle-highlight-activity"
|
||||
checked={highlightTopicUpdates}
|
||||
onChange={actions.togglehighlightTopicUpdates}
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private renderAutoExpand() {
|
||||
const { classes, autoExpandLimit } = this.props
|
||||
|
||||
@@ -167,7 +132,7 @@ class Settings extends React.Component<Props, {}> {
|
||||
|
||||
return (
|
||||
<div style={{ padding: '8px', display: 'flex' }}>
|
||||
<InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic Order</InputLabel>
|
||||
<InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
|
||||
<Select
|
||||
value={topicOrder}
|
||||
onChange={this.onChangeSorting}
|
||||
@@ -195,7 +160,6 @@ const mapStateToProps = (state: AppState) => {
|
||||
autoExpandLimit: state.settings.autoExpandLimit,
|
||||
topicOrder: state.settings.topicOrder,
|
||||
visible: state.settings.visible,
|
||||
highlightTopicUpdates: state.settings.highlightTopicUpdates,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
interface HistoryItem {
|
||||
title: JSX.Element | string
|
||||
value: string | any
|
||||
selected?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -29,18 +28,18 @@ class MessageHistory extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
public renderHistory() {
|
||||
const style = (element: HistoryItem) => ({
|
||||
backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)',
|
||||
const style = {
|
||||
backgroundColor: 'rgba(80, 80, 80, 0.6)',
|
||||
margin: '8px',
|
||||
padding: '8px 8px 0 8px',
|
||||
cursor: this.props.onClick ? 'pointer' : 'inherit',
|
||||
})
|
||||
}
|
||||
|
||||
const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
|
||||
const elements = this.props.items.map((element, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={style(element)}
|
||||
style={style}
|
||||
onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
|
||||
>
|
||||
<div><i>{element.title}</i></div>
|
||||
|
||||
@@ -11,7 +11,6 @@ const throttle = require('lodash.throttle')
|
||||
|
||||
interface Props {
|
||||
node?: q.TreeNode<TopicViewModel>
|
||||
selected?: q.Message
|
||||
onSelect: (message: q.Message) => void
|
||||
}
|
||||
|
||||
@@ -53,7 +52,6 @@ class MessageHistory extends React.Component<Props, State> {
|
||||
const historyElements = history.reverse().map(message => ({
|
||||
title: <DateFormatter date={message.received} />,
|
||||
value: message.value,
|
||||
selected: message && message === this.props.selected,
|
||||
}))
|
||||
|
||||
const numericMessages = history.filter(message => !isNaN(parseFloat(message.value)))
|
||||
@@ -81,10 +79,8 @@ class MessageHistory extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
private displayMessage = (index: number, eventTarget: EventTarget) => {
|
||||
const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
|
||||
if (message) {
|
||||
this.props.onSelect(message)
|
||||
}
|
||||
const message = this.props.node && this.props.node.messageHistory.toArray()[index]
|
||||
this.props.onSelect(message)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,49 +1,43 @@
|
||||
import * as q from '../../../../backend/src/Model'
|
||||
import * as React from 'react'
|
||||
import Clear from '@material-ui/icons/Clear'
|
||||
import Code from '@material-ui/icons/Code'
|
||||
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 Reorder from '@material-ui/icons/Reorder'
|
||||
import ToggleButton from '@material-ui/lab/ToggleButton'
|
||||
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
|
||||
import Topic from './Topic'
|
||||
import { AppState } from '../../reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { settingsActions, sidebarActons } from '../../actions'
|
||||
import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
|
||||
import { TopicViewModel } from '../../TopicViewModel'
|
||||
import { ValueRendererDisplayMode } from '../../reducers/Settings'
|
||||
import * as q from '../../../../backend/src/Model'
|
||||
|
||||
import {
|
||||
Button,
|
||||
ExpansionPanel,
|
||||
ExpansionPanelDetails,
|
||||
ExpansionPanelSummary,
|
||||
Fade,
|
||||
Paper,
|
||||
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'))
|
||||
const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
|
||||
|
||||
interface Props {
|
||||
node?: q.TreeNode<TopicViewModel>
|
||||
actions: typeof sidebarActons
|
||||
settingsActions: typeof settingsActions
|
||||
valueRendererDisplayMode: ValueRendererDisplayMode
|
||||
classes: any
|
||||
connectionId?: string
|
||||
node?: q.TreeNode<TopicViewModel>,
|
||||
actions: typeof sidebarActons,
|
||||
classes: any,
|
||||
connectionId?: string,
|
||||
}
|
||||
|
||||
interface State {
|
||||
@@ -98,84 +92,17 @@ 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 renderActionButtons() {
|
||||
const handleValue = (_e: React.MouseEvent, value: any) => {
|
||||
this.props.settingsActions.setValueDisplayMode(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
|
||||
<ToggleButton value="diff">
|
||||
<Tooltip title="Show difference between the current and the last message">
|
||||
<Code />
|
||||
</Tooltip>
|
||||
</ToggleButton>
|
||||
<ToggleButton value="raw">
|
||||
<Tooltip title="Raw value">
|
||||
<Reorder />
|
||||
</Tooltip>
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
)
|
||||
}
|
||||
|
||||
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} {deleteTopic} {deleteRecursiveTopic}</Typography>
|
||||
<Typography className={classes.heading}>Topic {copyTopic}</Typography>
|
||||
</ExpansionPanelSummary>
|
||||
<ExpansionPanelDetails style={this.detailsStyle}>
|
||||
<Topic node={this.props.node} didSelectNode={this.updateNode} />
|
||||
@@ -188,11 +115,15 @@ class Sidebar extends React.Component<Props, State> {
|
||||
<ExpansionPanelDetails style={this.detailsStyle}>
|
||||
{this.messageMetaInfo()}
|
||||
<div ref={this.valueRef}>
|
||||
<React.Suspense fallback={<div>Loading...</div>}>
|
||||
{this.renderValue()}
|
||||
</React.Suspense>
|
||||
<React.Suspense fallback={<div>Loading...</div>}>
|
||||
<ReactResizeDetector handleWidth={true} onResize={this.valueRenderWidthChange} />
|
||||
<ValueRenderer message={this.props.node && this.props.node.message} />
|
||||
</React.Suspense>
|
||||
</div>
|
||||
<div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></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}>
|
||||
{this.showValueComparison}
|
||||
</Popper>
|
||||
</ExpansionPanelDetails>
|
||||
</ExpansionPanel>
|
||||
<ExpansionPanel defaultExpanded={true}>
|
||||
@@ -215,20 +146,18 @@ class Sidebar extends React.Component<Props, State> {
|
||||
)
|
||||
}
|
||||
|
||||
private renderValue() {
|
||||
const node = this.props.node
|
||||
if (!node || !node.message) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<ValueRenderer
|
||||
message={node.message}
|
||||
messageHistory={node.messageHistory}
|
||||
compareWith={this.state.compareMessage} />
|
||||
)
|
||||
private valueRenderWidthChange = (width: number) => {
|
||||
this.setState({ valueRenderWidth: width })
|
||||
}
|
||||
|
||||
private showValueComparison = (a: any) => (
|
||||
<Fade {...a.TransitionProps} timeout={350}>
|
||||
<Paper style={{ maxWidth: this.state.valueRenderWidth }}>
|
||||
<ValueRenderer message={this.state.compareMessage} />
|
||||
</Paper>
|
||||
</Fade>
|
||||
)
|
||||
|
||||
private messageMetaInfo() {
|
||||
if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
|
||||
return null
|
||||
@@ -249,9 +178,8 @@ class Sidebar extends React.Component<Props, State> {
|
||||
)
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
|
||||
<div style={{ width: '100%', display: 'flex' }}>
|
||||
<div style={{ flex: 6 }}><Typography>QoS: {this.props.node.mqttMessage.qos}</Typography></div>
|
||||
<span style={{ marginTop: '-8px' }}>{this.renderActionButtons()}</span>
|
||||
<div style={{ flex: 8, textAlign: 'center' }}>
|
||||
{this.props.node.mqttMessage.retain ? retainedButton : null}
|
||||
</div>
|
||||
@@ -284,14 +212,12 @@ class Sidebar extends React.Component<Props, State> {
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
node: state.tree.selectedTopic,
|
||||
valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
actions: bindActionCreators(sidebarActons, dispatch),
|
||||
settingsActions: bindActionCreators(settingsActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,107 +1,66 @@
|
||||
import * as q from '../../../../backend/src/Model'
|
||||
import * as React from 'react'
|
||||
import CodeDiff from '../CodeDiff'
|
||||
import { AppState } from '../../reducers'
|
||||
import { connect } from 'react-redux'
|
||||
import { default as ReactResizeDetector } from 'react-resize-detector'
|
||||
import { ValueRendererDisplayMode } from '../../reducers/Settings'
|
||||
import * as q from '../../../../backend/src/Model'
|
||||
|
||||
import { Theme, withTheme } from '@material-ui/core/styles'
|
||||
|
||||
import { default as ReactJson } from 'react-json-view'
|
||||
|
||||
interface Props {
|
||||
message: q.Message
|
||||
messageHistory: q.RingBuffer<q.Message>
|
||||
compareWith?: q.Message
|
||||
renderMode: ValueRendererDisplayMode
|
||||
message?: q.Message
|
||||
theme: Theme
|
||||
}
|
||||
|
||||
interface State {
|
||||
width: number
|
||||
}
|
||||
|
||||
class ValueRenderer extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = { width: 0 }
|
||||
}
|
||||
|
||||
class ValueRenderer extends React.Component<Props, {}> {
|
||||
public render() {
|
||||
return (
|
||||
<div style={{ padding: '8px 0px 8px 8px' }}>
|
||||
<ReactResizeDetector handleWidth={true} onResize={this.updateWidth} />
|
||||
{this.renderValue()}
|
||||
</div>
|
||||
)
|
||||
return <div style={{ padding: '8px 0px 8px 8px' }}>{this.renderValue()}</div>
|
||||
}
|
||||
|
||||
public renderValue() {
|
||||
const { message, messageHistory, compareWith, renderMode } = this.props
|
||||
|
||||
const previousMessages = messageHistory.toArray()
|
||||
const previousMessage = previousMessages[previousMessages.length - 2]
|
||||
let compareMessage = compareWith || previousMessage || message
|
||||
if (renderMode === 'raw') {
|
||||
compareMessage = message
|
||||
const { message } = this.props
|
||||
if (!message) {
|
||||
return null
|
||||
}
|
||||
|
||||
let json
|
||||
try {
|
||||
json = JSON.parse(message.value)
|
||||
} catch (error) {
|
||||
return this.renderRawValue(message.value, compareMessage.value)
|
||||
return this.renderRawValue(message.value)
|
||||
}
|
||||
|
||||
if (typeof json === 'string') {
|
||||
return this.renderRawValue(message.value, compareMessage.value)
|
||||
return this.renderRawValue(message.value)
|
||||
} else if (typeof json === 'number') {
|
||||
return this.renderRawValue(message.value, compareMessage.value)
|
||||
return this.renderRawValue(message.value)
|
||||
} else if (typeof json === 'boolean') {
|
||||
return this.renderRawValue(message.value, compareMessage.value)
|
||||
return this.renderRawValue(message.value)
|
||||
} else {
|
||||
const current = this.messageToPrettyJson(message) || message.value
|
||||
const compare = this.messageToPrettyJson(compareMessage) || compareMessage.value
|
||||
const language = current && compare ? 'json' : undefined
|
||||
|
||||
return this.renderDiff(current, compare, language)
|
||||
const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
|
||||
return (
|
||||
<ReactJson
|
||||
style={{ width: '100%', overflowY: 'scroll', wordBreak: 'break-all' }}
|
||||
src={json}
|
||||
name={null}
|
||||
theme={theme}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private renderDiff(current: string = '', previous: string = '', language?: 'json') {
|
||||
return (
|
||||
<CodeDiff
|
||||
previous={previous}
|
||||
current={current}
|
||||
language={language}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
private messageToPrettyJson(message?: q.Message): string | undefined {
|
||||
if (!message || !message.value) {
|
||||
return undefined
|
||||
private renderRawValue(value: string) {
|
||||
const style: React.CSSProperties = {
|
||||
padding: '8px 12px 8px 12px',
|
||||
backgroundColor: 'rgba(100, 100, 100, 0.55)',
|
||||
wordBreak: 'break-all',
|
||||
width: '100%',
|
||||
overflow: 'auto hidden',
|
||||
display: 'block',
|
||||
lineHeight: '1.2em',
|
||||
color: this.props.theme.palette.text.primary,
|
||||
}
|
||||
|
||||
try {
|
||||
const json = JSON.parse(message.value)
|
||||
return JSON.stringify(json, undefined, ' ')
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
private updateWidth = (width: number) => {
|
||||
if (width !== this.state.width) {
|
||||
this.setState({ width })
|
||||
}
|
||||
}
|
||||
|
||||
private renderRawValue(value: string, compare: string) {
|
||||
return this.renderDiff(value, compare)
|
||||
return <pre style={style}><code>{value}</code></pre>
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
renderMode: state.settings.valueRendererDisplayMode,
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(ValueRenderer)
|
||||
export default withTheme()(ValueRenderer)
|
||||
|
||||
@@ -17,7 +17,6 @@ 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: {
|
||||
@@ -95,12 +94,11 @@ class TitleBar extends React.Component<Props, {}> {
|
||||
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={actions.settings.toggleSettingsVisibility}>
|
||||
<Menu />
|
||||
</IconButton>
|
||||
<Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography>
|
||||
<Typography className={classes.title} variant="h6" color="inherit">MQTT-Explorer</Typography>
|
||||
{this.renderSearch()}
|
||||
<Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}>
|
||||
Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
|
||||
</Button>
|
||||
<ConnectionHealthIndicator />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
|
||||
@@ -8,6 +8,7 @@ import { TopicOrder } from '../../reducers/Settings'
|
||||
import { TopicViewModel } from '../../TopicViewModel'
|
||||
import { treeActions } from '../../actions'
|
||||
import { bindActionCreators } from 'redux'
|
||||
const ReactKeyboardEventHandler = require('react-keyboard-event-handler')
|
||||
|
||||
const MovingAverage = require('moving-average')
|
||||
|
||||
@@ -22,9 +23,9 @@ interface Props {
|
||||
tree?: q.Tree<TopicViewModel>
|
||||
filter: string
|
||||
host?: string
|
||||
|
||||
topicOrder: TopicOrder
|
||||
autoExpandLimit: number
|
||||
highlightTopicUpdates: boolean
|
||||
}
|
||||
|
||||
interface State {
|
||||
@@ -86,6 +87,12 @@ class Tree extends React.PureComponent<Props, State> {
|
||||
}, Math.max(0, timeUntilNextUpdate))
|
||||
}
|
||||
|
||||
private handleKeyEvent = (key: string, event: any) => {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
this.props.actions.handleKeyEvent(key)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { tree, filter } = this.props
|
||||
if (!tree) {
|
||||
@@ -99,6 +106,11 @@ class Tree extends React.PureComponent<Props, State> {
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<ReactKeyboardEventHandler
|
||||
isExclusive={true}
|
||||
handleKeys={['space', 'enter', 'delete', 'backspace', 'left', 'up', 'down', 'right']}
|
||||
onKeyEvent={this.handleKeyEvent}
|
||||
/>
|
||||
<TreeNode
|
||||
key={tree.hash()}
|
||||
animateChages={true}
|
||||
@@ -111,7 +123,6 @@ class Tree extends React.PureComponent<Props, State> {
|
||||
topicOrder={this.props.topicOrder}
|
||||
lastUpdate={tree.lastUpdate}
|
||||
didSelectTopic={this.props.actions.selectTopic}
|
||||
highlightTopicUpdates={this.props.highlightTopicUpdates}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@@ -129,7 +140,6 @@ const mapStateToProps = (state: AppState) => {
|
||||
host: state.connection.host,
|
||||
autoExpandLimit: state.settings.autoExpandLimit,
|
||||
topicOrder: state.settings.topicOrder,
|
||||
highlightTopicUpdates: state.settings.highlightTopicUpdates,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -29,11 +29,8 @@ const styles = (theme: Theme) => {
|
||||
cursor: 'pointer',
|
||||
marginTop: '-1px',
|
||||
},
|
||||
subnodes: {
|
||||
marginLeft: theme.spacing(1.5),
|
||||
},
|
||||
selected: {
|
||||
backgroundColor: 'rgba(170, 170, 170, 0.55)',
|
||||
backgroundColor: 'rgba(200, 200, 200, 0.55)',
|
||||
},
|
||||
hover: {
|
||||
backgroundColor: 'rgba(100, 100, 100, 0.55)',
|
||||
@@ -54,7 +51,6 @@ interface Props {
|
||||
autoExpandLimit: number
|
||||
lastUpdate: number
|
||||
didSelectTopic: any
|
||||
highlightTopicUpdates: boolean
|
||||
}
|
||||
|
||||
interface State {
|
||||
@@ -68,10 +64,12 @@ class TreeNode extends React.Component<Props, State> {
|
||||
private dirtyEdges: boolean = true
|
||||
private dirtyMessage: boolean = true
|
||||
private animationDirty: boolean = false
|
||||
private lastRenderTime = 0
|
||||
|
||||
private cssAnimationWasSetAt?: number
|
||||
|
||||
private willUpdateTime: number = performance.now()
|
||||
private titleRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
|
||||
private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
|
||||
|
||||
private subnodesDidchange = () => {
|
||||
@@ -131,6 +129,7 @@ class TreeNode extends React.Component<Props, State> {
|
||||
public componentWillUnmount() {
|
||||
const { treeNode } = this.props
|
||||
this.removeSubscriber(treeNode)
|
||||
this.titleRef = undefined
|
||||
this.nodeRef = undefined
|
||||
}
|
||||
|
||||
@@ -183,35 +182,30 @@ class TreeNode extends React.Component<Props, State> {
|
||||
const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
|
||||
this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
|
||||
|
||||
const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
|
||||
const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
|
||||
const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
|
||||
this.animationDirty = shouldStartAnimation
|
||||
|
||||
const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
key={this.props.treeNode.hash()}
|
||||
className={`${classes.node} ${this.props.className}`}
|
||||
onMouseOver={this.mouseOver}
|
||||
onMouseOut={this.mouseOut}
|
||||
onClick={this.didClickTitle}
|
||||
ref={this.nodeRef}
|
||||
>
|
||||
<TreeNodeTitle
|
||||
style={animation}
|
||||
toggleCollapsed={this.toggleCollapsed}
|
||||
didSelectNode={this.didSelectTopic}
|
||||
collapsed={this.collapsed()}
|
||||
treeNode={this.props.treeNode}
|
||||
name={this.props.name}
|
||||
className={highlightClass}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.subnodes}>
|
||||
{this.renderNodes()}
|
||||
</div>
|
||||
<div
|
||||
key={this.props.treeNode.hash()}
|
||||
className={`${classes.node} ${this.props.className}`}
|
||||
onClick={this.didClickNode}
|
||||
onMouseOver={this.mouseOver}
|
||||
onMouseOut={this.mouseOut}
|
||||
ref={this.nodeRef}
|
||||
>
|
||||
<TreeNodeTitle
|
||||
style={animation}
|
||||
collapsed={this.collapsed()}
|
||||
treeNode={this.props.treeNode}
|
||||
name={this.props.name}
|
||||
didSelectNode={this.didSelectTopic}
|
||||
className={highlightClass}
|
||||
/>
|
||||
{this.renderNodes()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -220,12 +214,6 @@ class TreeNode extends React.Component<Props, State> {
|
||||
this.props.didSelectTopic(this.props.treeNode)
|
||||
}
|
||||
|
||||
private didClickTitle = (event: React.MouseEvent) => {
|
||||
event.preventDefault()
|
||||
this.props.didSelectTopic(this.props.treeNode)
|
||||
this.toggle()
|
||||
}
|
||||
|
||||
private mouseOver = (event: React.MouseEvent) => {
|
||||
event.stopPropagation()
|
||||
this.setHover(true)
|
||||
@@ -240,16 +228,13 @@ class TreeNode extends React.Component<Props, State> {
|
||||
this.setState({ mouseOver: hover })
|
||||
}, 45)
|
||||
|
||||
private toggleCollapsed = (event: React.MouseEvent) => {
|
||||
private didClickNode = (event: React.MouseEvent) => {
|
||||
event.stopPropagation()
|
||||
this.toggle()
|
||||
this.didSelectTopic()
|
||||
}
|
||||
|
||||
private renderNodes() {
|
||||
if (this.collapsed()) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<TreeNodeSubnodes
|
||||
animateChanges={this.props.animateChages}
|
||||
@@ -259,7 +244,6 @@ class TreeNode extends React.Component<Props, State> {
|
||||
topicOrder={this.props.topicOrder}
|
||||
lastUpdate={this.props.treeNode.lastUpdate}
|
||||
didSelectTopic={this.props.didSelectTopic}
|
||||
highlightTopicUpdates={this.props.highlightTopicUpdates}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,12 +12,13 @@ export interface Props {
|
||||
filter?: string
|
||||
collapsed?: boolean | undefined
|
||||
classes: any
|
||||
|
||||
lastUpdate: number
|
||||
|
||||
topicOrder: TopicOrder
|
||||
selectedTopic?: q.TreeNode<TopicViewModel>
|
||||
autoExpandLimit: number
|
||||
didSelectTopic: any
|
||||
highlightTopicUpdates: boolean
|
||||
}
|
||||
|
||||
interface State {
|
||||
@@ -51,13 +52,13 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
private renderMore() {
|
||||
this.renderMoreAnimationFrame = (window as any).requestIdleCallback(() => {
|
||||
this.renderMoreAnimationFrame = window.requestIdleCallback(() => {
|
||||
this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
|
||||
}, { timeout: 500 })
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
(window as any).cancelIdleCallback(this.renderMoreAnimationFrame)
|
||||
window.cancelIdleCallback(this.renderMoreAnimationFrame)
|
||||
}
|
||||
|
||||
public render() {
|
||||
@@ -82,7 +83,6 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
|
||||
autoExpandLimit={this.props.autoExpandLimit}
|
||||
lastUpdate={node.lastUpdate}
|
||||
didSelectTopic={this.props.didSelectTopic}
|
||||
highlightTopicUpdates={this.props.highlightTopicUpdates}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -11,19 +11,29 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
|
||||
collapsed?: boolean | undefined
|
||||
classes: any
|
||||
didSelectNode: any
|
||||
toggleCollapsed: any
|
||||
}
|
||||
|
||||
class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
|
||||
private mouseOver = (event: React.MouseEvent) => {
|
||||
event.preventDefault()
|
||||
this.selectTopic()
|
||||
}
|
||||
|
||||
private selectTopic = debounce(() => {
|
||||
if (this.props.treeNode.message) {
|
||||
this.props.didSelectNode(this.props.treeNode)
|
||||
}
|
||||
}, 5)
|
||||
|
||||
public render() {
|
||||
const { classes, treeNode, style, className } = this.props
|
||||
return (
|
||||
<span
|
||||
className={`${classes.title} ${className}`}
|
||||
onMouseOver={treeNode.message ? this.mouseOver : undefined}
|
||||
style={style}
|
||||
>
|
||||
<span className={classes.expander} onClick={this.props.toggleCollapsed}>{this.renderExpander()}</span>
|
||||
{this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
|
||||
<span className={classes.expander}>{this.renderExpander()}</span> {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -71,8 +81,6 @@ const styles = (theme: Theme) => ({
|
||||
},
|
||||
expander: {
|
||||
color: theme.palette.type === 'light' ? '#222' : '#eee',
|
||||
cursor: 'pointer' as 'pointer',
|
||||
paddingRight: theme.spacing(0.25),
|
||||
},
|
||||
title: {
|
||||
borderRadius: '4px',
|
||||
@@ -80,7 +88,7 @@ const styles = (theme: Theme) => ({
|
||||
display: 'inline-block' as 'inline-block',
|
||||
whiteSpace: 'nowrap' as 'nowrap',
|
||||
padding: '1px 4px 0px 4px',
|
||||
height: '14px',
|
||||
height: '16px',
|
||||
margin: '1px 0px 2px 0px',
|
||||
},
|
||||
collapsedSubnodes: {
|
||||
|
||||
+2
-1
@@ -27,6 +27,7 @@ const theme = createMuiTheme({
|
||||
palette: {
|
||||
type: 'dark',
|
||||
},
|
||||
typography: { useNextVariants: true },
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -40,7 +41,7 @@ setTimeout(() => {
|
||||
ReactDOM.render(
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
<App name="" />
|
||||
</Provider>
|
||||
</MuiThemeProvider>,
|
||||
document.getElementById('app'),
|
||||
|
||||
@@ -4,7 +4,6 @@ import * as q from '../../../backend/src/Model'
|
||||
import { MqttOptions } from '../../../backend/src/DataSource'
|
||||
import { TopicViewModel } from '../TopicViewModel'
|
||||
|
||||
export type ConnectionHealth = 'offline' | 'online' | 'connecting'
|
||||
export interface ConnectionState {
|
||||
host?: string
|
||||
tree?: q.Tree<TopicViewModel>
|
||||
@@ -13,7 +12,6 @@ export interface ConnectionState {
|
||||
error?: string
|
||||
connected: boolean
|
||||
connecting: boolean
|
||||
health?: ConnectionHealth
|
||||
}
|
||||
|
||||
export type Action = SetConnecting | SetConnected | SetDisconnected | ShowError
|
||||
@@ -23,7 +21,6 @@ export enum ActionTypes {
|
||||
CONNECTION_SET_CONNECTED = 'CONNECTION_SET_CONNECTED',
|
||||
CONNECTION_SET_DISCONNECTED = 'CONNECTION_SET_DISCONNECTED',
|
||||
CONNECTION_SET_SHOW_ERROR = 'CONNECTION_SET_SHOW_ERROR',
|
||||
CONNECTION_SET_HEALTH = 'CONNECTION_SET_HEALTH',
|
||||
}
|
||||
|
||||
export interface SetConnecting {
|
||||
@@ -41,11 +38,6 @@ export interface SetDisconnected {
|
||||
type: ActionTypes.CONNECTION_SET_DISCONNECTED
|
||||
}
|
||||
|
||||
export interface SetHealth {
|
||||
health: ConnectionHealth
|
||||
type: ActionTypes.CONNECTION_SET_DISCONNECTED
|
||||
}
|
||||
|
||||
export interface ShowError {
|
||||
type: ActionTypes.CONNECTION_SET_SHOW_ERROR
|
||||
error?: Error
|
||||
@@ -54,7 +46,6 @@ export interface ShowError {
|
||||
const initialState: ConnectionState = {
|
||||
connected: false,
|
||||
connecting: false,
|
||||
health: undefined,
|
||||
}
|
||||
|
||||
export const connectionReducer = createReducer(initialState, {
|
||||
@@ -62,7 +53,6 @@ export const connectionReducer = createReducer(initialState, {
|
||||
CONNECTION_SET_CONNECTED: setConnected,
|
||||
CONNECTION_SET_DISCONNECTED: setDisconnected,
|
||||
CONNECTION_SET_SHOW_ERROR: showError,
|
||||
CONNECTION_SET_HEALTH: setHealth,
|
||||
})
|
||||
|
||||
function setConnecting(state: ConnectionState, action: SetConnecting): ConnectionState {
|
||||
@@ -74,13 +64,6 @@ function setConnecting(state: ConnectionState, action: SetConnecting): Connectio
|
||||
}
|
||||
}
|
||||
|
||||
function setHealth(state: ConnectionState, action: SetHealth): ConnectionState {
|
||||
return {
|
||||
...state,
|
||||
health: action.health,
|
||||
}
|
||||
}
|
||||
|
||||
function setConnected(state: ConnectionState, action: SetConnected): ConnectionState {
|
||||
return {
|
||||
...state,
|
||||
|
||||
@@ -8,39 +8,25 @@ export enum TopicOrder {
|
||||
topics = '#topics',
|
||||
}
|
||||
|
||||
export type ValueRendererDisplayMode = 'diff' | 'raw'
|
||||
|
||||
export interface SettingsState {
|
||||
autoExpandLimit: number
|
||||
visible: boolean
|
||||
topicOrder: TopicOrder
|
||||
topicFilter?: string
|
||||
highlightTopicUpdates: boolean
|
||||
valueRendererDisplayMode: ValueRendererDisplayMode
|
||||
selectTopicWithMouseOver: boolean
|
||||
}
|
||||
|
||||
export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode
|
||||
export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics
|
||||
|
||||
export enum ActionTypes {
|
||||
SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
|
||||
SETTINGS_TOGGLE_VISIBILITY = 'SETTINGS_TOGGLE_VISIBILITY',
|
||||
SETTINGS_SET_TOPIC_ORDER = 'SETTINGS_SET_TOPIC_ORDER',
|
||||
SETTINGS_FILTER_TOPICS = 'SETTINGS_FILTER_TOPICS',
|
||||
SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY = 'SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY',
|
||||
SETTINGS_DID_LOAD_SETTINGS = 'SETTINGS_DID_LOAD_SETTINGS',
|
||||
SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE = 'SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE',
|
||||
SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER = 'SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER',
|
||||
|
||||
}
|
||||
|
||||
const initialState: SettingsState = {
|
||||
autoExpandLimit: 0,
|
||||
topicOrder: TopicOrder.none,
|
||||
visible: false,
|
||||
highlightTopicUpdates: true,
|
||||
valueRendererDisplayMode: 'diff',
|
||||
selectTopicWithMouseOver: false,
|
||||
}
|
||||
|
||||
export const settingsReducer = createReducer(initialState, {
|
||||
@@ -48,53 +34,8 @@ export const settingsReducer = createReducer(initialState, {
|
||||
SETTINGS_TOGGLE_VISIBILITY: toggleVisibility,
|
||||
SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
|
||||
SETTINGS_FILTER_TOPICS: filterTopics,
|
||||
SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: togglehighlightTopicUpdates,
|
||||
SETTINGS_DID_LOAD_SETTINGS: didLoadSettings,
|
||||
SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE: setValueRendererDisplayMode,
|
||||
SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER: setSelectTopicWithMouseOver,
|
||||
})
|
||||
|
||||
export interface DidLoadSettings {
|
||||
type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS
|
||||
settings: Partial<SettingsState>
|
||||
}
|
||||
|
||||
function didLoadSettings(state: SettingsState, action: DidLoadSettings) {
|
||||
return {
|
||||
...state,
|
||||
...action.settings,
|
||||
}
|
||||
}
|
||||
|
||||
export interface SetSelectTopicWithMouseOver {
|
||||
type: ActionTypes.SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER
|
||||
selectTopicWithMouseOver: boolean
|
||||
}
|
||||
|
||||
export function setSelectTopicWithMouseOver(state: SettingsState, action: SetSelectTopicWithMouseOver) {
|
||||
return {
|
||||
...state,
|
||||
selectTopicWithMouseOver: action.selectTopicWithMouseOver,
|
||||
}
|
||||
}
|
||||
|
||||
export interface SetValueRendererDisplayMode {
|
||||
type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE
|
||||
valueRendererDisplayMode: ValueRendererDisplayMode
|
||||
}
|
||||
|
||||
export function setValueRendererDisplayMode(state: SettingsState, action: SetValueRendererDisplayMode) {
|
||||
return {
|
||||
...state,
|
||||
valueRendererDisplayMode: action.valueRendererDisplayMode,
|
||||
}
|
||||
}
|
||||
|
||||
export interface SetAutoExpandLimit {
|
||||
type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
|
||||
autoExpandLimit: number
|
||||
}
|
||||
|
||||
function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
|
||||
return {
|
||||
...state,
|
||||
@@ -102,19 +43,9 @@ function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
|
||||
}
|
||||
}
|
||||
|
||||
export interface TogglehighlightTopicUpdates {
|
||||
type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY
|
||||
}
|
||||
|
||||
function togglehighlightTopicUpdates(state: SettingsState, _action: TogglehighlightTopicUpdates) {
|
||||
return {
|
||||
...state,
|
||||
highlightTopicUpdates: !state.highlightTopicUpdates,
|
||||
}
|
||||
}
|
||||
|
||||
export interface ToggleVisibility {
|
||||
type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
|
||||
export interface SetAutoExpandLimit {
|
||||
type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
|
||||
autoExpandLimit: number
|
||||
}
|
||||
|
||||
function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
|
||||
@@ -124,6 +55,10 @@ function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
|
||||
}
|
||||
}
|
||||
|
||||
export interface ToggleVisibility {
|
||||
type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
|
||||
}
|
||||
|
||||
function setTopicOrder(state: SettingsState, action: SetTopicOrder) {
|
||||
return {
|
||||
...state,
|
||||
|
||||
+615
-556
File diff suppressed because it is too large
Load Diff
@@ -1,23 +0,0 @@
|
||||
image: Visual Studio 2017
|
||||
platform: x64
|
||||
|
||||
cache:
|
||||
- node_modules
|
||||
- '%LOCALAPPDATA%\electron\Cache'
|
||||
- '%LOCALAPPDATA%\electron-builder\cache'
|
||||
|
||||
install:
|
||||
- ps: Install-Product node 10
|
||||
|
||||
build_script:
|
||||
- yarn
|
||||
- yarn build
|
||||
- yarn prepare-release
|
||||
- yarn package appx
|
||||
|
||||
test_script:
|
||||
- yarn test
|
||||
|
||||
artifacts:
|
||||
- path: 'build\clean\build\MQTT-Explorer*.appx'
|
||||
|
||||
@@ -33,8 +33,8 @@ export default class ConfigStorage {
|
||||
await db.set(event.store, event.data).write()
|
||||
backendEvents.emit(ack, undefined)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
backendEvents.emit(ack, { error, transactionId: event.transactionId, store: event.store })
|
||||
throw error
|
||||
}
|
||||
})
|
||||
|
||||
@@ -45,8 +45,8 @@ export default class ConfigStorage {
|
||||
const data = await db.get(event.store).value()
|
||||
backendEvents.emit(responseEvent, { data, transactionId: event.transactionId, store: event.store })
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
backendEvents.emit(responseEvent, { error, transactionId: event.transactionId, store: event.store })
|
||||
throw error
|
||||
}
|
||||
})
|
||||
|
||||
@@ -60,8 +60,8 @@ export default class ConfigStorage {
|
||||
backendEvents.emit(makeStorageAcknoledgementEvent(event.transactionId), undefined)
|
||||
} catch (error) {
|
||||
backendEvents.emit(makeStorageAcknoledgementEvent(event.transactionId), { error, transactionId: event.transactionId })
|
||||
throw error
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,17 +25,16 @@ export class DataSourceStateMachine {
|
||||
|
||||
public setError(error: Error) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
error: error.message,
|
||||
// connected: false,
|
||||
// connecting: false,
|
||||
connected: false,
|
||||
connecting: false,
|
||||
}
|
||||
this.onUpdate.dispatch(this.state)
|
||||
}
|
||||
|
||||
public setConnecting() {
|
||||
this.state = {
|
||||
...this.state,
|
||||
error: undefined,
|
||||
connected: false,
|
||||
connecting: true,
|
||||
}
|
||||
|
||||
@@ -55,10 +55,6 @@ export class MqttSource implements DataSource<MqttOptions> {
|
||||
this.stateMachine.setConnected(false)
|
||||
})
|
||||
|
||||
client.on('end', () => {
|
||||
this.stateMachine.setConnected(false)
|
||||
})
|
||||
|
||||
client.on('reconnect', () => {
|
||||
this.stateMachine.setConnecting()
|
||||
})
|
||||
|
||||
@@ -6,7 +6,7 @@ export class RingBuffer<T extends Lengthwise> {
|
||||
private capacity: number
|
||||
private maxItems: number
|
||||
private usage: number = 0
|
||||
private items: T[] = []
|
||||
private items: (any)[] = []
|
||||
private start: number = 0
|
||||
private end: number = 0
|
||||
|
||||
|
||||
@@ -47,9 +47,6 @@ 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(() => {
|
||||
@@ -105,34 +102,6 @@ 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)
|
||||
@@ -140,10 +109,6 @@ export class TreeNode<ViewModel> {
|
||||
this.mqttMessage = node.mqttMessage
|
||||
}
|
||||
|
||||
if (this.isTopicEmptyLeaf()) {
|
||||
this.removeFromParent()
|
||||
}
|
||||
|
||||
this.mergeEdges(node)
|
||||
this.onMerge.dispatch()
|
||||
}
|
||||
|
||||
@@ -43,10 +43,10 @@ describe('TreeNode', () => {
|
||||
|
||||
it('updateWithNode should add nodes to the tree', () => {
|
||||
const topics1 = 'foo/bar'.split('/')
|
||||
const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, 'foo')
|
||||
const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined)
|
||||
|
||||
const topics2 = 'foo/bar/baz'.split('/')
|
||||
const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, 'bar')
|
||||
const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined)
|
||||
|
||||
leaf1.firstNode().updateWithNode(leaf2.firstNode())
|
||||
|
||||
|
||||
+6
-16
@@ -11,8 +11,8 @@ import {
|
||||
removeConnection,
|
||||
updateAvailable,
|
||||
} from '../../events'
|
||||
|
||||
import { DataSource, MqttSource } from './DataSource'
|
||||
import ConfigStorage from './ConfigStorage'
|
||||
import { UpdateInfo } from 'builder-util-runtime'
|
||||
|
||||
export class ConnectionManager {
|
||||
@@ -20,19 +20,11 @@ export class ConnectionManager {
|
||||
|
||||
public manageConnections() {
|
||||
backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
|
||||
backendEvents.subscribe(removeConnection, (connectionId: string) => {
|
||||
this.removeConnection(connectionId)
|
||||
})
|
||||
backendEvents.subscribe(removeConnection, (connectionId: string) => this.removeConnection(connectionId))
|
||||
}
|
||||
|
||||
private handleConnectionRequest = (event: AddMqttConnection) => {
|
||||
const connectionId = event.id
|
||||
|
||||
// Prevent double connections when reloading
|
||||
if (this.connections[connectionId]) {
|
||||
this.removeConnection(connectionId)
|
||||
}
|
||||
|
||||
const options = event.options
|
||||
const connection = new MqttSource()
|
||||
this.connections[connectionId] = connection
|
||||
@@ -61,19 +53,17 @@ export class ConnectionManager {
|
||||
})
|
||||
}
|
||||
|
||||
public removeConnection(conenctionId: string) {
|
||||
const connection = this.connections[conenctionId]
|
||||
public removeConnection(hash: string) {
|
||||
const connection = this.connections[hash]
|
||||
if (connection) {
|
||||
backendEvents.unsubscribeAll(makePublishEvent(conenctionId))
|
||||
connection.disconnect()
|
||||
delete this.connections[conenctionId]
|
||||
connection.stateMachine.onUpdate.removeAllListeners()
|
||||
delete this.connections[hash]
|
||||
}
|
||||
}
|
||||
|
||||
public closeAllConnections() {
|
||||
Object.keys(this.connections)
|
||||
.forEach(conenctionId => this.removeConnection(conenctionId))
|
||||
.forEach(hash => this.removeConnection(hash))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -30,7 +30,6 @@ class IpcMainEventBus implements EventBusInterface {
|
||||
}
|
||||
|
||||
public unsubscribeAll<MessageType>(event: Event<MessageType>) {
|
||||
console.log('unsubscribeAll', event.topic)
|
||||
this.ipc.removeAllListeners(event.topic)
|
||||
}
|
||||
|
||||
|
||||
+6
-15
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "MQTT-Explorer",
|
||||
"version": "0.2.0",
|
||||
"version": "0.1.3",
|
||||
"description": "Explore your message queues",
|
||||
"main": "dist/src/electron.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"test": "yarn run test-backend",
|
||||
"install": "cd app && yarn && cd ..",
|
||||
"install": "cd app; yarn; cd ..",
|
||||
"build": "tsc && cd app && yarn run build && cd ..",
|
||||
"test-backend": "cd backend && yarn run test && cd ..",
|
||||
"prepare-release": "ts-node scripts/prepare-release.ts",
|
||||
"prepare-release": "./scripts/prepare-release.sh",
|
||||
"package": "ts-node package.ts",
|
||||
"ui-test": "./scripts/uiTests.sh",
|
||||
"upload-video-artifacts": "./scripts/uploadVideoAsset.ts ui-test.mp4 ui-test.gif",
|
||||
@@ -32,13 +32,6 @@
|
||||
"category": "Development",
|
||||
"maintainer": "Thomas Nordquist"
|
||||
},
|
||||
"appx": {
|
||||
"applicationId": "mqttexplorer",
|
||||
"identityName": "51031thomas.nordquist.MQTT-Explorer",
|
||||
"publisherDisplayName": "Thomas Nordquist",
|
||||
"publisher": "CN=0A6DE643-4AA2-4FF2-9729-6935C9ED8C13",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
},
|
||||
"directories": {
|
||||
"app": "./",
|
||||
"buildResources": "res",
|
||||
@@ -51,7 +44,6 @@
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.1.7",
|
||||
"@types/fs-extra": "^5.0.5",
|
||||
"@types/lowdb": "^1.0.6",
|
||||
"@types/mime": "^2.0.0",
|
||||
"@types/mocha": "^5.2.5",
|
||||
@@ -61,9 +53,8 @@
|
||||
"@types/sha1": "^1.1.1",
|
||||
"axios": "^0.18.0",
|
||||
"chai": "^4.2.0",
|
||||
"electron": "^5.0.0-beta.4",
|
||||
"electron-builder": "^20.38.5",
|
||||
"fs-extra": "^7.0.1",
|
||||
"electron": "^4.0.2",
|
||||
"electron-builder": "^20.38.4",
|
||||
"mime": "^2.4.0",
|
||||
"mocha": "^5.2.0",
|
||||
"mustache": "^3.0.1",
|
||||
@@ -80,7 +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",
|
||||
"electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
|
||||
|
||||
+1
-13
@@ -30,16 +30,6 @@ const win: builder.CliOptions = {
|
||||
publish: 'always',
|
||||
}
|
||||
|
||||
const winAppx: builder.CliOptions = {
|
||||
x64: true,
|
||||
ia32: true,
|
||||
armv7l: false,
|
||||
arm64: false,
|
||||
win: ['appx'],
|
||||
projectDir: './build/clean',
|
||||
publish: 'never',
|
||||
}
|
||||
|
||||
const mac: builder.CliOptions = {
|
||||
x64: true,
|
||||
ia32: true,
|
||||
@@ -51,13 +41,11 @@ const mac: builder.CliOptions = {
|
||||
}
|
||||
|
||||
async function executeBuild() {
|
||||
console.log(process.argv[2])
|
||||
switch (process.argv[2]) {
|
||||
case 'win':
|
||||
await builder.build(win)
|
||||
break
|
||||
case 'appx':
|
||||
await builder.build(winAppx)
|
||||
break
|
||||
case 'linux':
|
||||
await builder.build(linux)
|
||||
break
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Executable
+26
@@ -0,0 +1,26 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
ORIGINAL_DIR=`pwd`
|
||||
DIR=build/clean
|
||||
|
||||
rm -rf "$DIR" || echo "Directory did not exist"
|
||||
mkdir -p "$DIR"
|
||||
|
||||
git clone .git "$DIR"
|
||||
cd $DIR
|
||||
|
||||
# App
|
||||
cd app
|
||||
yarn
|
||||
cd ..
|
||||
|
||||
# Build
|
||||
yarn
|
||||
yarn build
|
||||
rm -rf node_modules
|
||||
yarn install --production
|
||||
|
||||
rm -rf app/node_modules
|
||||
|
||||
cd "$ORIGINAL_DIR"
|
||||
@@ -1,66 +0,0 @@
|
||||
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())
|
||||
})
|
||||
}
|
||||
|
||||
const targetDir = path.join('build', 'clean')
|
||||
async function prepareRelease() {
|
||||
const originalDir = __dirname
|
||||
await fs.remove(targetDir)
|
||||
await fs.mkdirp(targetDir)
|
||||
|
||||
// Create fresh clone of the local git repo
|
||||
await exec('git', ['clone', '.git', targetDir])
|
||||
|
||||
// Enter git repo
|
||||
chdir(targetDir)
|
||||
|
||||
// Install app dependencies
|
||||
chdir('app')
|
||||
await exec('yarn')
|
||||
chdir('..')
|
||||
|
||||
// Install electron dependencies
|
||||
await exec('yarn')
|
||||
|
||||
// Build App and Electron backend
|
||||
await exec('yarn', ['build'])
|
||||
|
||||
// Clean up
|
||||
await fs.remove('node_modules')
|
||||
await exec('yarn', ['install', '--production'])
|
||||
await fs.remove(path.join('app', 'node_modules'))
|
||||
|
||||
chdir(originalDir)
|
||||
}
|
||||
|
||||
prepareRelease()
|
||||
+8
-13
@@ -1,26 +1,21 @@
|
||||
#!/bin/bash
|
||||
DIMENSIONS="1280x720"
|
||||
|
||||
ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
|
||||
|
||||
cp app.mp4 original.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
|
||||
ffprobe -f lavfi -i "movie=app.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 -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -ss $END_OF_BLACK app.mp4
|
||||
ffmpeg -ss $END_OF_BLACK -i app.mp4 app2.mp4
|
||||
mv app2.mp4 app.mp4
|
||||
|
||||
# Generate gif palette
|
||||
ffmpeg -y -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf fps=10,scale=1280:-1:flags=lanczos,palettegen palette1024.png
|
||||
ffmpeg -y -i app.mp4 -vf fps=10,scale=720:-1:flags=lanczos,palettegen palette.png
|
||||
|
||||
# Create gif
|
||||
ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=1280:-1:flags=lanczos[x];[x][1:v]paletteuse" app720.gif
|
||||
ffmpeg -i app.mp4 -i palette.png -filter_complex "fps=10,scale=720:-1:flags=lanczos[x];[x][1:v]paletteuse" app.gif
|
||||
|
||||
# Clean up
|
||||
rm ffmpeg_info palette*.png qrawvideorgb24.yuv
|
||||
rm ffmpeg_info palette.png
|
||||
|
||||
mv app.mp4 ui-test.mp4
|
||||
mv app720.gif ui-test.gif
|
||||
mv app.gif ui-test.gif
|
||||
|
||||
+3
-4
@@ -9,7 +9,7 @@ function finish {
|
||||
|
||||
trap finish EXIT
|
||||
|
||||
DIMENSIONS="1280x720"
|
||||
DIMENSIONS="1024x700"
|
||||
SCR=99
|
||||
# Start new window manager
|
||||
Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &
|
||||
@@ -17,7 +17,7 @@ export PID_XVFB=$!
|
||||
sleep 2
|
||||
|
||||
# Debug with VNC
|
||||
while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -localhost -passwd "bierbier" -display :$SCR; done &
|
||||
while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -passwd "bierbier" -display :$SCR; done &
|
||||
export PID_VNC=$!
|
||||
|
||||
# Start mqtt broker
|
||||
@@ -32,8 +32,7 @@ sleep 2
|
||||
rm ./app.mp4 || echo no need to delete ./app.mp4
|
||||
|
||||
# Start recoring in tmux
|
||||
#tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
|
||||
tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24.yuv
|
||||
tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
|
||||
|
||||
# Start tests
|
||||
node dist/src/spec/webdriverio.js
|
||||
|
||||
+13
-62
@@ -1,21 +1,11 @@
|
||||
import { Menu, app, BrowserWindow, webContents, MenuItemConstructorOptions, MenuItem } from 'electron'
|
||||
import openAboutWindow from 'about-window'
|
||||
import * as path from 'path'
|
||||
import { Menu, app, BrowserWindow, webContents } from 'electron'
|
||||
|
||||
const applicationMenu: MenuItemConstructorOptions = {
|
||||
const applicationMenu = {
|
||||
label: 'Application',
|
||||
submenu: [
|
||||
{
|
||||
label: 'About Application',
|
||||
click: () => {
|
||||
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',
|
||||
})
|
||||
},
|
||||
selector: 'orderFrontStandardAboutPanel:',
|
||||
},
|
||||
{
|
||||
type: 'separator' as 'separator',
|
||||
@@ -23,7 +13,7 @@ const applicationMenu: MenuItemConstructorOptions = {
|
||||
{
|
||||
label: 'Dev Tools',
|
||||
accelerator: 'CmdOrCtrl+Alt+I',
|
||||
role: 'toggledevtools' as 'toggledevtools',
|
||||
role: 'toggleDevTools',
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
@@ -35,87 +25,48 @@ const applicationMenu: MenuItemConstructorOptions = {
|
||||
],
|
||||
}
|
||||
|
||||
const editMenu: MenuItemConstructorOptions = {
|
||||
const editMenu = {
|
||||
label: 'Edit',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Undo',
|
||||
accelerator: 'CmdOrCtrl+Z',
|
||||
role: 'undo',
|
||||
selector: 'undo:',
|
||||
},
|
||||
{
|
||||
label: 'Redo',
|
||||
accelerator: 'Shift+CmdOrCtrl+Z',
|
||||
role: 'redo',
|
||||
selector: 'redo:',
|
||||
},
|
||||
{
|
||||
type: 'separator',
|
||||
type: 'separator' as 'separator',
|
||||
},
|
||||
{
|
||||
label: 'Cut',
|
||||
accelerator: 'CmdOrCtrl+X',
|
||||
role: 'cut',
|
||||
selector: 'cut:',
|
||||
},
|
||||
{
|
||||
label: 'Copy',
|
||||
accelerator: 'CmdOrCtrl+C',
|
||||
role: 'copy',
|
||||
selector: 'copy:',
|
||||
},
|
||||
{
|
||||
label: 'Paste',
|
||||
accelerator: 'CmdOrCtrl+V',
|
||||
role: 'paste',
|
||||
selector: 'paste:',
|
||||
},
|
||||
{
|
||||
label: 'Select All',
|
||||
accelerator: 'CmdOrCtrl+A',
|
||||
role: 'selectall',
|
||||
selector: 'selectAll:',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const viewMenu = {
|
||||
label: 'View',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Default size',
|
||||
accelerator: 'CmdOrCtrl+0',
|
||||
click: () => {
|
||||
const window = BrowserWindow.getFocusedWindow()
|
||||
if (window) {
|
||||
window.webContents.setZoomFactor(1)
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Increase size',
|
||||
accelerator: 'CmdOrCtrl+Plus',
|
||||
click: () => {
|
||||
const window = BrowserWindow.getFocusedWindow()
|
||||
if (window) {
|
||||
const zoom = window.webContents.getZoomFactor()
|
||||
window.webContents.setZoomFactor(Math.min(zoom + 0.1, 2.0))
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Reduce size',
|
||||
accelerator: 'CmdOrCtrl+-',
|
||||
click: () => {
|
||||
const window = BrowserWindow.getFocusedWindow()
|
||||
if (window) {
|
||||
const zoom = window.webContents.getZoomFactor()
|
||||
window.webContents.setZoomFactor(Math.max(zoom - 0.1, 0.5))
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const template: Array<(MenuItemConstructorOptions) | (MenuItem)> = [
|
||||
const template = [
|
||||
applicationMenu,
|
||||
editMenu,
|
||||
viewMenu,
|
||||
]
|
||||
|
||||
export const menuTemplate = Menu.buildFromTemplate(template)
|
||||
|
||||
+9
-6
@@ -9,12 +9,15 @@ import { menuTemplate } from './MenuTemplate'
|
||||
import { UpdateInfo } from '../events'
|
||||
const isDev = require('electron-is-dev')
|
||||
|
||||
let electronTelemetry: any
|
||||
if (!isDev) {
|
||||
const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')
|
||||
electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')
|
||||
}
|
||||
|
||||
// const isDebugEnabled = Boolean(process.argv.find(arg => arg === 'debug'))
|
||||
const runningUiTestOnCi = Boolean(process.argv.find(arg => arg === '--runningUiTestOnCi'))
|
||||
const isDebugEnabled = Boolean(process.argv.find(arg => arg === 'debug'))
|
||||
const isFullscreen = Boolean(process.argv.find(arg => arg === '--fullscreen'))
|
||||
|
||||
require('electron-debug')({ enabled: isDebugEnabled })
|
||||
|
||||
autoUpdater.logger = log
|
||||
log.info('App starting...')
|
||||
@@ -33,8 +36,8 @@ function createWindow() {
|
||||
const iconPath = path.join(__dirname, 'icon.png')
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({
|
||||
width: runningUiTestOnCi ? 1280 : 1024,
|
||||
height: runningUiTestOnCi ? 720 : 700,
|
||||
width: 1024,
|
||||
height: 700,
|
||||
show: false,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
@@ -45,7 +48,7 @@ function createWindow() {
|
||||
|
||||
mainWindow.once('ready-to-show', () => {
|
||||
if (mainWindow) {
|
||||
runningUiTestOnCi && mainWindow.setFullScreen(true)
|
||||
isFullscreen && mainWindow.setFullScreen(true)
|
||||
mainWindow.show()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -21,7 +21,7 @@ import { showMenu } from './scenarios/showMenu'
|
||||
import { createFakeMousePointer, sleep, showText, hideText, clickOnHistory } from './util'
|
||||
|
||||
const binary = os.platform() === 'darwin' ? 'Electron.app/Contents/MacOS/Electron' : 'electron'
|
||||
const runningUiTestOnCi = os.platform() === 'darwin' ? [] : ['--runningUiTestOnCi']
|
||||
const fullscreen = os.platform() === 'darwin' ? [] : ['--fullscreen']
|
||||
|
||||
const options = {
|
||||
host: 'localhost', // Use localhost as chrome driver server
|
||||
@@ -30,7 +30,7 @@ const options = {
|
||||
browserName: 'electron',
|
||||
chromeOptions: {
|
||||
binary: `${__dirname}/../../../node_modules/electron/dist/${binary}`,
|
||||
args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=1', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(runningUiTestOnCi),
|
||||
args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=1', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(fullscreen),
|
||||
},
|
||||
windowTypes: ['app', 'webview'],
|
||||
},
|
||||
@@ -45,12 +45,12 @@ async function doStuff() {
|
||||
await sleep(1000)
|
||||
|
||||
await sleep(1000)
|
||||
await showText('Topics overview', 2000, browser, 'top')
|
||||
await showText('Overview of topics', 2000, browser, 'top')
|
||||
await sleep(2000)
|
||||
await showText('Indicate topic updates', 2000, browser, 'bottom')
|
||||
await showText('Indicates which topics change', 2000, browser, 'bottom')
|
||||
await sleep(3000)
|
||||
|
||||
await showText('Plot topic history', 2000, browser)
|
||||
await showText('Plot topics', 2000, browser)
|
||||
await showNumericPlot(browser)
|
||||
await sleep(2000)
|
||||
|
||||
|
||||
@@ -119,13 +119,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.7.tgz#1b8e33b61a8c09cbe1f85133071baa0dbf9fa71a"
|
||||
integrity sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==
|
||||
|
||||
"@types/fs-extra@^5.0.5":
|
||||
version "5.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-5.0.5.tgz#080d90a792f3fa2c5559eb44bd8ef840aae9104b"
|
||||
integrity sha512-w7iqhDH9mN8eLClQOYTkhdYUOSpp25eXxfc6VbFOGtzxW34JcvctH2bKjj4jD4++z4R5iO5D+pg48W2e03I65A==
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/lodash@*":
|
||||
version "4.14.121"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.121.tgz#9327e20d49b95fc2bf983fc2f045b2c6effc80b9"
|
||||
@@ -196,11 +189,6 @@
|
||||
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"
|
||||
@@ -1068,7 +1056,7 @@ ejs@~2.5.6:
|
||||
resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.9.tgz#7ba254582a560d267437109a68354112475b0ce5"
|
||||
integrity sha512-GJCAeDBKfREgkBtgrYSf9hQy9kTb3helv0zGdzqhM7iAkW8FA/ZF97VQDbwFiwIT8MQLLOe5VlPZOEvZAqtUAQ==
|
||||
|
||||
electron-builder@^20.38.5:
|
||||
electron-builder@^20.38.4:
|
||||
version "20.38.5"
|
||||
resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.38.5.tgz#31b3913a68b4911afd4cfc7bcd2522c5808040cd"
|
||||
integrity sha512-p88IDHhH2J4hA6KwRBJY+OfVZuFtFIShY3Uh/TwYAfbX0v1RhKZytuGdO8sty2zcWxDYX74xDBv+X9oN6qEIRQ==
|
||||
@@ -1095,6 +1083,14 @@ electron-chromedriver@~3.0.0:
|
||||
electron-download "^4.1.0"
|
||||
extract-zip "^1.6.5"
|
||||
|
||||
electron-debug@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/electron-debug/-/electron-debug-2.0.0.tgz#3059a6557acbfb091f138d83875f57bac80cea6d"
|
||||
integrity sha512-orGlw9uErUztdD7cgdKz78txq3czpOnKG/zvvsINkUsugqL+dn77UFrbwRGVgPwuLJ7Ejbjjk9EcxIcgTivMbA==
|
||||
dependencies:
|
||||
electron-is-dev "^0.3.0"
|
||||
electron-localshortcut "^3.0.0"
|
||||
|
||||
electron-download@^4.1.0:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/electron-download/-/electron-download-4.1.1.tgz#02e69556705cc456e520f9e035556ed5a015ebe8"
|
||||
@@ -1110,11 +1106,31 @@ electron-download@^4.1.0:
|
||||
semver "^5.4.1"
|
||||
sumchecker "^2.0.2"
|
||||
|
||||
electron-is-accelerator@^0.1.0:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/electron-is-accelerator/-/electron-is-accelerator-0.1.2.tgz#509e510c26a56b55e17f863a4b04e111846ab27b"
|
||||
integrity sha1-UJ5RDCala1Xhf4Y6SwThEYRqsns=
|
||||
|
||||
electron-is-dev@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-0.3.0.tgz#14e6fda5c68e9e4ecbeff9ccf037cbd7c05c5afe"
|
||||
integrity sha1-FOb9pcaOnk7L7/nM8DfL18BcWv4=
|
||||
|
||||
electron-is-dev@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-1.0.1.tgz#6e0a184736fe7aea77d18210b0b0f6a02402c4bc"
|
||||
integrity sha512-iwM3EotA9HTXqMGpQRkR/kT8OZqBbdfHTnlwcxsjSLYqY8svvsq0MuujsWCn3/vtgRmDv/PC/gKUUpoZvi5C1w==
|
||||
|
||||
electron-localshortcut@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/electron-localshortcut/-/electron-localshortcut-3.1.0.tgz#10c1ffd537b8d39170aaf6e1551341f7780dd2ce"
|
||||
integrity sha512-MgL/j5jdjW7iA0R6cI7S045B0GlKXWM1FjjujVPjlrmyXRa6yH0bGSaIAfxXAF9tpJm3pLEiQzerYHkRh9JG/A==
|
||||
dependencies:
|
||||
debug "^2.6.8"
|
||||
electron-is-accelerator "^0.1.0"
|
||||
keyboardevent-from-electron-accelerator "^1.1.0"
|
||||
keyboardevents-areequal "^0.2.1"
|
||||
|
||||
electron-log@^2.2.17:
|
||||
version "2.2.17"
|
||||
resolved "https://registry.yarnpkg.com/electron-log/-/electron-log-2.2.17.tgz#e71e2ebb949fc96ded7cdb99eeee7202e48981d2"
|
||||
@@ -1168,10 +1184,10 @@ electron-updater@^4.0.6:
|
||||
semver "^5.6.0"
|
||||
source-map-support "^0.5.9"
|
||||
|
||||
electron@^5.0.0-beta.4:
|
||||
version "5.0.0-beta.4"
|
||||
resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.0-beta.4.tgz#436af638c20c7563e749d9d7599c4267b665759b"
|
||||
integrity sha512-8rBHuR04zcyJP1MfnhbbqExeIywxrbzR9FyKyrLc8O/ho4tEpKbxgGWoRStFDrv9YYL9BEjsaaExPseI7Rwu5A==
|
||||
electron@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/electron/-/electron-4.0.2.tgz#b5e074c149841490825d0785aa2bc4f5e29bbea4"
|
||||
integrity sha512-H0pmSvOVuC+Mq/+cYNXbCDBmqq5d1xYUVdBOjqGJuwuwJeP7qDHF35JA3cq+ARzq/CbwlXq98zdW6i6+x3U24g==
|
||||
dependencies:
|
||||
"@types/node" "^10.12.18"
|
||||
electron-download "^4.1.0"
|
||||
@@ -1439,7 +1455,7 @@ fs-extra@^4.0.1:
|
||||
jsonfile "^4.0.0"
|
||||
universalify "^0.1.0"
|
||||
|
||||
fs-extra@^7.0.0, fs-extra@^7.0.1:
|
||||
fs-extra@^7.0.0:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
|
||||
integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
|
||||
@@ -2062,6 +2078,16 @@ jsprim@^1.2.2:
|
||||
json-schema "0.2.3"
|
||||
verror "1.10.0"
|
||||
|
||||
keyboardevent-from-electron-accelerator@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/keyboardevent-from-electron-accelerator/-/keyboardevent-from-electron-accelerator-1.1.0.tgz#324614f6e33490c37ffc5be5876b3e85fe223c84"
|
||||
integrity sha512-VDC4vKWGrR3VgIKCE4CsXnvObGgP8C2idnTKEMUkuEuvDGE1GEBX9FtNdJzrD00iQlhI3xFxRaeItsUmlERVng==
|
||||
|
||||
keyboardevents-areequal@^0.2.1:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/keyboardevents-areequal/-/keyboardevents-areequal-0.2.2.tgz#88191ec738ce9f7591c25e9056de928b40277194"
|
||||
integrity sha512-Nv+Kr33T0mEjxR500q+I6IWisOQ0lK1GGOncV0kWE6n4KFmpcu7RUX5/2B0EUtX51Cb0HjZ9VJsSY3u4cBa0kw==
|
||||
|
||||
latest-version@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
|
||||
|
||||
Reference in New Issue
Block a user