luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expose message Ids to the user

Browse Source
This commit is contained in:
Thomas Nordquist
2020-04-20 18:23:15 +02:00
parent 6fc0d3f28d
commit 07458cd712
25 changed files with 145 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/index.html
View File

@@ -160,7 +160,7 @@
</style>
</head>
<body>
<div id="app" style="font:-webkit-control"></div>
<div id="app" style="font: -webkit-control;"></div>
<script>
function loadScript(path) {
var script = document.createElement('script')
@@ -174,7 +174,8 @@
// loadScript("<%= JSON.stringify(htmlWebpackPlugin) %>")
}
</script>
<% _.forEach(htmlWebpackPlugin.files.js, function(file) { %><script src="<%- file %>"></script
><% }); %>
<% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
<script src="<%- file %>"></script>
<% }); %>
</body>
</html>

4
app/src/actions/Settings.ts
View File

@@ -112,8 +112,8 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
const messageMatches =
node.message &&
node.message.value &&
Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
node.message.payload &&
Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1
return Boolean(messageMatches)
}

1
app/src/actions/clearTopic.ts
View File

@@ -48,6 +48,7 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async
payload: null,
retain: true,
qos: 0 as 0,
messageId: undefined,
}
// Rate limit deletion
setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)

4
app/src/components/SettingsDrawer/BrokerStatistics.tsx
View File

@@ -123,8 +123,8 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
return null
}
const str = node.message.value ? Base64Message.toUnicodeString(node.message.value) : ''
let value = node.message && node.message.value ? parseFloat(str) : NaN
const str = node.message.payload ? Base64Message.toUnicodeString(node.message.payload) : ''
let value = node.message && node.message.payload ? parseFloat(str) : NaN
value = !isNaN(value) ? abbreviate(value) : str
return (

20
app/src/components/Sidebar/MessageId.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React, { memo } from 'react'
import { Message } from '../../../../backend/src/Model'
import { Tooltip } from '@material-ui/core'
export const MessageId = memo(function MessageId(props: { message: Message; addComma?: boolean }) {
const { message, addComma } = props
if (!message.messageId) {
return null
}
return (
<Tooltip title="MessageIds are used to signal a successful transmission of a message.">
<span>
#msg: {message.messageId}
{addComma ? ', ' : ''}
</span>
</Tooltip>
)
})

2
app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
View File

@@ -8,7 +8,7 @@ export const TopicDeleteButton = (props: {
deleteTopicAction: (node: q.TreeNode<any>) => void
}) => {
const { node } = props
if (!node || !node.message || !node.message.value) {
if (!node || !node.message || !node.message.payload) {
return null
}
return (

25
app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
View File

@@ -12,6 +12,7 @@ import { bindActionCreators } from 'redux'
import { chartActions } from '../../../actions'
import { connect } from 'react-redux'
import CustomIconButton from '../../helper/CustomIconButton'
import { MessageId } from '../MessageId'
const throttle = require('lodash.throttle')
@@ -81,19 +82,25 @@ class MessageHistory extends React.PureComponent<Props, State> {
const history = node.messageHistory.toArray()
let previousMessage: q.Message | undefined = node.message
const historyElements = [...history].reverse().map((message, idx) => {
const value = message.value ? Base64Message.toUnicodeString(message.value) : ''
const value = message.payload ? Base64Message.toUnicodeString(message.payload) : ''
const element = {
value,
key: `${message.messageNumber}-${message.received}`,
title: (
<span>
<DateFormatter date={message.received} />
{previousMessage && previousMessage !== message ? (
<i>
(-
<DateFormatter date={message.received} intervalSince={previousMessage.received} />)
</i>
) : null}
<div style={{ float: 'left' }}>
<DateFormatter date={message.received} />
{previousMessage && previousMessage !== message ? (
<i>
(-
<DateFormatter date={message.received} intervalSince={previousMessage.received} />)
</i>
) : null}
</div>
<span>
&nbsp;
<MessageId message={message} />
</span>
<div style={{ float: 'right' }}>
<Copy value={value} />
</div>
@@ -106,7 +113,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
})
const isMessagePlottable =
node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
node.message && node.message.payload && isPlottable(Base64Message.toUnicodeString(node.message.payload))
return (
<div>
<History

16
app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
View File

@@ -13,6 +13,7 @@ import { Theme, Typography, withStyles } from '@material-ui/core'
import { connect } from 'react-redux'
import { sidebarActions } from '../../../actions'
import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
import { MessageId } from '../MessageId'
interface Props {
node?: q.TreeNode<any>
@@ -36,7 +37,7 @@ function ValuePanel(props: Props) {
const { node, compareMessage } = props
function renderViewOptions() {
if (!props.node || !props.node.message || !props.node.mqttMessage) {
if (!props.node || !props.node.message) {
return null
}
@@ -46,7 +47,7 @@ function ValuePanel(props: Props) {
<ActionButtons />
</span>
<span style={{ flex: 6, textAlign: 'right' }}>
{props.node.mqttMessage.retain ? <DeleteSelectedTopicButton /> : null}
{props.node.message.retain ? <DeleteSelectedTopicButton /> : null}
</span>
{messageMetaInfo()}
</div>
@@ -54,13 +55,16 @@ function ValuePanel(props: Props) {
}
function messageMetaInfo() {
if (!props.node || !props.node.message || !props.node.mqttMessage) {
if (!props.node || !props.node.message) {
return null
}
return (
<span style={{ width: '100%', paddingLeft: '8px', flex: 6 }}>
<Typography style={{ textAlign: 'right' }}>QoS: {props.node.mqttMessage.qos}</Typography>
<Typography style={{ textAlign: 'right' }}>
<MessageId message={props.node.message} addComma={true} />
{`QoS: ${props.node.message.qos}`}
</Typography>
<Typography style={{ textAlign: 'right' }}>
<i>
<DateFormatter date={props.node.message.received} />
@@ -82,8 +86,8 @@ function ValuePanel(props: Props) {
)
const copyValue =
node && node.message && node.message.value ? (
<Copy value={Base64Message.toUnicodeString(node.message.value)} />
node && node.message && node.message.payload ? (
<Copy value={Base64Message.toUnicodeString(node.message.payload)} />
) : null
return (

12
app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
View File

@@ -63,12 +63,12 @@ class ValueRenderer extends React.Component<Props, State> {
}
private renderRawMode(message: q.Message, compare?: q.Message) {
if (!message.value) {
if (!message.payload) {
return
}
const [value, valueLanguage] = this.convertMessage(message.value)
const [value, valueLanguage] = this.convertMessage(message.payload)
const [compareStr, compareStrLanguage] =
compare && compare.value ? this.convertMessage(compare.value) : [undefined, undefined]
compare && compare.payload ? this.convertMessage(compare.payload) : [undefined, undefined]
return (
<div>
@@ -95,12 +95,12 @@ class ValueRenderer extends React.Component<Props, State> {
if (renderMode === 'raw') {
return this.renderRawMode(message, compareWith)
}
if (!message.value) {
if (!message.payload) {
return null
}
const compareValue = compareMessage.value || message.value
const [current, currentLanguage] = this.convertMessage(message.value)
const compareValue = compareMessage.payload || message.payload
const [current, currentLanguage] = this.convertMessage(message.payload)
const [compare, compareLanguage] = this.convertMessage(compareValue)
const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined

4
app/src/components/TopicPlot.tsx
View File

@@ -28,7 +28,7 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
function nodeToHistory(startTime: number | undefined, history: q.MessageHistory) {
return filterUsingTimeRange(startTime, history.toArray())
.map((message: q.Message) => {
const value = message.value ? toPlottableValue(Base64Message.toUnicodeString(message.value)) : NaN
const value = message.payload ? toPlottableValue(Base64Message.toUnicodeString(message.payload)) : NaN
return { x: message.received.getTime(), y: toPlottableValue(value) }
})
.filter(data => !isNaN(data.y as any)) as any
@@ -39,7 +39,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
.map((message: q.Message) => {
let json = {}
try {
json = message.value ? JSON.parse(Base64Message.toUnicodeString(message.value)) : {}
json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
} catch (ignore) {}
const value = dotProp.get(json, dotPath)

6
app/src/components/Tree/TreeNode/TreeNodeTitle.tsx
View File

@@ -27,17 +27,17 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
private truncatedMessage() {
const limit = 400
if (!this.props.treeNode.message || !this.props.treeNode.message.value) {
if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
return ''
}
const str = Base64Message.toUnicodeString(this.props.treeNode.message.value)
const str = Base64Message.toUnicodeString(this.props.treeNode.message.payload)
return str.length > limit ? `${str.slice(0, limit)}…` : str
}
private renderValue() {
return this.props.treeNode.message &&
this.props.treeNode.message.value &&
this.props.treeNode.message.payload &&
this.props.treeNode.message.length > 0 ? (
<span key="value" className={this.props.classes.value}>
{' '}

2
app/src/components/Tree/TreeNode/index.tsx
View File

@@ -81,7 +81,7 @@ function TreeNodeComponent(props: Props) {
const mouseOver = useCallback(
(event: React.MouseEvent) => {
event.stopPropagation()
if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.value) {
if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.payload) {
didSelectTopic()
}
},