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

Update code formatting

Browse Source
This commit is contained in:
Thomas Nordquist
2019-06-15 14:56:57 +02:00
parent 6176859c7c
commit 92e045297e
115 changed files with 2988 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/components/Sidebar/CodeDiff/DiffCount.tsx
View File

@@ -1,16 +1,18 @@
import * as React from 'react'
import { Theme } from '@material-ui/core';
import { Theme } from '@material-ui/core'
import { withStyles } from '@material-ui/styles'
interface Props {
changes: Array<Diff.Change>
classes: {[s: string]: any}
classes: { [s: string]: any }
nameOfCompareMessage: string
}
function changeAmount(props: Props) {
const additions = props.changes.map(change => (change.added === true) ? (change.count || 0) : 0).reduce((a, b) => a + b)
const deletions = props.changes.map(change => (change.removed === true) ? (change.count || 0) : 0).reduce((a, b) => a + b)
const additions = props.changes.map(change => (change.added === true ? change.count || 0 : 0)).reduce((a, b) => a + b)
const deletions = props.changes
.map(change => (change.removed === true ? change.count || 0 : 0))
.reduce((a, b) => a + b)
if (additions === 0 && deletions === 0) {
return null
}
@@ -19,9 +21,13 @@ function changeAmount(props: Props) {
<span style={{ display: 'block', marginBottom: '8px', float: 'right' }}>
<span>
Comparing with <b>{props.nameOfCompareMessage}</b> message:&nbsp;
<span className={props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
, <span className={props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
<span className={props.classes.additions}>
+ {additions} line{additions === 1 ? '' : 's'}
</span>
,{' '}
<span className={props.classes.deletions}>
- {deletions} line{deletions === 1 ? '' : 's'}
</span>
</span>
</span>
)

101
app/src/components/Sidebar/CodeDiff/Gutters.tsx
View File

@@ -5,19 +5,13 @@ import Add from '@material-ui/icons/Add'
import Remove from '@material-ui/icons/Remove'
import ShowChart from '@material-ui/icons/ShowChart'
import TopicPlot from '../TopicPlot'
import {
Fade,
Paper,
Popper,
Theme,
Tooltip
} from '@material-ui/core'
import { Fade, Paper, Popper, Theme, Tooltip } from '@material-ui/core'
import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
import { lineChangeStyle, trimNewlineRight } from './util'
import { withStyles } from '@material-ui/styles'
interface Props {
changes: Array<diff.Change>,
changes: Array<diff.Change>
literalPositions: Array<JsonPropertyLocation>
classes: any
className: string
@@ -58,32 +52,32 @@ const style = (theme: Theme) => {
}
}
function ChartIcon(props: { messageHistory: q.MessageHistory, classes: any, literal: JsonPropertyLocation }) {
function ChartIcon(props: { messageHistory: q.MessageHistory; classes: any; literal: JsonPropertyLocation }) {
const chartIconRef = React.useRef(null)
const [open, setOpen] = React.useState(false)
const mouseOver = React.useCallback((event: React.MouseEvent<Element>) => {
setOpen(true)
}, [props.literal.path])
const mouseOver = React.useCallback(
(event: React.MouseEvent<Element>) => {
setOpen(true)
},
[props.literal.path]
)
const mouseOut = React.useCallback(() => {
setOpen(false)
}, [])
return (<span>
<ShowChart ref={chartIconRef} className={props.classes.icon} onMouseEnter={mouseOver} onMouseLeave={mouseOut} />
<Popper
open={open}
anchorEl={chartIconRef.current}
placement="left-end"
>
<Fade in={open} timeout={300}>
<Paper style={{ width: '300px' }}>
{open ? <TopicPlot history={props.messageHistory} dotPath={props.literal.path} /> : <span/>}
</Paper>
</Fade>
</Popper>
</span>
return (
<span>
<ShowChart ref={chartIconRef} className={props.classes.icon} onMouseEnter={mouseOver} onMouseLeave={mouseOut} />
<Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
<Fade in={open} timeout={300}>
<Paper style={{ width: '300px' }}>
{open ? <TopicPlot history={props.messageHistory} dotPath={props.literal.path} /> : <span />}
</Paper>
</Fade>
</Popper>
</span>
)
}
@@ -95,9 +89,19 @@ function tokensForLine(change: diff.Change, line: number, props: Props) {
let chartIcon = null
if (literal) {
if (hasEnoughDataToDisplayDiagrams) {
chartIcon = <ChartIcon messageHistory={props.messageHistory} classes={{ icon: props.classes.iconButton }} literal={literal} />
chartIcon = (
<ChartIcon
messageHistory={props.messageHistory}
classes={{ icon: props.classes.iconButton }}
literal={literal}
/>
)
} else {
chartIcon = <Tooltip title="Not enough data"><ShowChart className={props.classes.iconDisabled} style={{ color: '#aaa' }} /></Tooltip>
chartIcon = (
<Tooltip title="Not enough data">
<ShowChart className={props.classes.iconDisabled} style={{ color: '#aaa' }} />
</Tooltip>
)
}
}
@@ -106,28 +110,39 @@ function tokensForLine(change: diff.Change, line: number, props: Props) {
} else if (change.removed) {
return [<Remove key="remove" className={classes.icon} />]
} else {
return [chartIcon, <div key="placeholder" style={{ width: '12px', display: 'inline-block' }} dangerouslySetInnerHTML={{ __html: '&nbsp;' }} />]
return [
chartIcon,
<div
key="placeholder"
style={{ width: '12px', display: 'inline-block' }}
dangerouslySetInnerHTML={{ __html: '&nbsp;' }}
/>,
]
}
}
function Gutters(props: Props) {
let currentLine = -1
const gutters = props.changes.map((change, key) => {
return trimNewlineRight(change.value)
.split('\n')
.map((_, idx) => {
currentLine = !change.removed ? currentLine + 1 : currentLine
return (
<div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={props.classes.gutterLine}>
{tokensForLine(change, currentLine, props)}
</div>
)
const gutters = props.changes
.map((change, key) => {
return trimNewlineRight(change.value)
.split('\n')
.map((_, idx) => {
currentLine = !change.removed ? currentLine + 1 : currentLine
return (
<div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={props.classes.gutterLine}>
{tokensForLine(change, currentLine, props)}
</div>
)
})
})
}).reduce((a, b) => a.concat(b), [])
.reduce((a, b) => a.concat(b), [])
return <span>
<pre className={props.className}>{gutters}</pre>
</span>
return (
<span>
<pre className={props.className}>{gutters}</pre>
</span>
)
}
export default withStyles(style)(Gutters)

54
app/src/components/Sidebar/CodeDiff/index.tsx
View File

@@ -40,35 +40,46 @@ class CodeDiff extends React.Component<Props, State> {
}
private plottableLiteralsIndexedWithLineNumbers() {
const allLiterals = this.isValidJson(this.props.current) ? (literalsMappedByLines(this.props.current) || []) : []
const allLiterals = this.isValidJson(this.props.current) ? literalsMappedByLines(this.props.current) || [] : []
return allLiterals
.map((l: JsonPropertyLocation) => isPlottable(l.value) ? l : undefined) as Array<JsonPropertyLocation>
return allLiterals.map((l: JsonPropertyLocation) => (isPlottable(l.value) ? l : undefined)) as Array<
JsonPropertyLocation
>
}
private renderStyledCodeLines(changes: Array<Diff.Change>) {
const styledLines = Prism.highlight(this.props.current, Prism.languages.json, 'json').split('\n')
let lineNumber = 0
return changes.map((change, key) => {
const hasStyledCode = change.removed !== true
const changedLines = change.count || 0
if (hasStyledCode && this.props.language === 'json') {
const currentLines = styledLines.slice(lineNumber, lineNumber + changedLines)
const lines = currentLines.map((html: string, idx: number) => {
return <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}><span dangerouslySetInnerHTML={{ __html: html }} /></div>
})
lineNumber += changedLines
return changes
.map((change, key) => {
const hasStyledCode = change.removed !== true
const changedLines = change.count || 0
if (hasStyledCode && this.props.language === 'json') {
const currentLines = styledLines.slice(lineNumber, lineNumber + changedLines)
const lines = currentLines.map((html: string, idx: number) => {
return (
<div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}>
<span dangerouslySetInnerHTML={{ __html: html }} />
</div>
)
})
lineNumber += changedLines
return [<div key={key}>{lines}</div>]
}
return [<div key={key}>{lines}</div>]
}
return trimNewlineRight(change.value)
.split('\n')
.map((line, idx) => {
return <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}><span>{line}</span></div>
})
}).reduce((a, b) => a.concat(b), [])
return trimNewlineRight(change.value)
.split('\n')
.map((line, idx) => {
return (
<div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}>
<span>{line}</span>
</div>
)
})
})
.reduce((a, b) => a.concat(b), [])
}
public render() {
@@ -83,7 +94,8 @@ class CodeDiff extends React.Component<Props, State> {
className={this.props.classes.gutters}
changes={changes}
messageHistory={this.props.messageHistory}
literalPositions={literalPositions} />
literalPositions={literalPositions}
/>
<pre className={this.props.classes.codeBlock}>{code}</pre>
</div>
<DiffCount changes={changes} nameOfCompareMessage={this.props.nameOfCompareMessage} />

31
app/src/components/Sidebar/HistoryDrawer.tsx
View File

@@ -38,7 +38,9 @@ class HistoryDrawer extends React.Component<Props, State> {
public renderHistory() {
const style = (element: HistoryItem) => ({
backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
backgroundColor: element.selected
? this.props.theme.palette.action.selected
: this.props.theme.palette.action.hover,
margin: '8px',
padding: '8px 8px 0 8px',
cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -50,11 +52,16 @@ class HistoryDrawer extends React.Component<Props, State> {
key={element.key}
style={style(element)}
onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
tabIndex={0} onKeyDown={this.handleCtrlA}
tabIndex={0}
onKeyDown={this.handleCtrlA}
>
<div><i>{element.title}</i></div>
<div>
<i>{element.title}</i>
</div>
<div style={messageStyle}>
<span><pre>{element.value}</pre></span>
<span>
<pre>{element.value}</pre>
</span>
</div>
</div>
))
@@ -63,11 +70,7 @@ class HistoryDrawer extends React.Component<Props, State> {
return (
<div className={this.props.classes.main}>
<Typography
component={'span'}
onClick={this.toggle}
style={{ cursor: 'pointer' }}
>
<Typography component={'span'} onClick={this.toggle} style={{ cursor: 'pointer' }}>
<Badge
classes={{ badge: this.props.classes.badge }}
invisible={!visible}
@@ -78,7 +81,7 @@ class HistoryDrawer extends React.Component<Props, State> {
</Badge>
<div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
</Typography>
<div style={{ maxHeight: '230px', overflowY: 'scroll' }}>
<div style={{ maxHeight: '230px', overflowY: 'scroll' }}>
{this.state.collapsed ? null : this.props.children}
{this.state.collapsed ? null : elements}
</div>
@@ -87,13 +90,7 @@ class HistoryDrawer extends React.Component<Props, State> {
}
public render() {
return (
<div
style={{ display: 'block', width: '100%' }}
>
{this.renderHistory()}
</div>
)
return <div style={{ display: 'block', width: '100%' }}>{this.renderHistory()}</div>
}
}

7
app/src/components/Sidebar/PlotHistory.tsx
View File

@@ -7,7 +7,7 @@ const { XYPlot, LineMarkSeries, Hint, XAxis, YAxis, HorizontalGridLines } = requ
const abbreviate = require('number-abbreviate')
interface Props {
data: Array<{x: number, y: number}>
data: Array<{ x: number; y: number }>
}
// const configuredCurve = d3Shape.curveBundle.beta(1)
@@ -51,10 +51,7 @@ class PlotHistory extends React.Component<Props, Stats> {
<XYPlot width={this.state.width} height={180}>
<HorizontalGridLines />
<XAxis />
<YAxis
width={45}
tickFormat={(num: number) => abbreviate(num)}
/>
<YAxis width={45} tickFormat={(num: number) => abbreviate(num)} />
<LineMarkSeries
onValueMouseOver={this._rememberValue}
onValueMouseOut={this._forgetValue}

76
app/src/components/Sidebar/Publish/Publish.tsx
View File

@@ -53,7 +53,6 @@ interface State {
}
class Publish extends React.Component<Props, State> {
private editorOptions = {
showLineNumbers: false,
tabSize: 2,
@@ -108,18 +107,18 @@ class Publish extends React.Component<Props, State> {
return (
<div>
<FormControl style={{ width: '100%' }}>
<InputLabel htmlFor="publish-topic">Topic</InputLabel>
<Input
id="publish-topic"
value={topicStr}
startAdornment={<span/>}
endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
onBlur={this.onTopicBlur}
onChange={this.updateTopic}
multiline={true}
placeholder="example/topic"
/>
</FormControl>
<InputLabel htmlFor="publish-topic">Topic</InputLabel>
<Input
id="publish-topic"
value={topicStr}
startAdornment={<span />}
endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
onBlur={this.onTopicBlur}
onChange={this.updateTopic}
multiline={true}
placeholder="example/topic"
/>
</FormControl>
</div>
)
}
@@ -132,13 +131,7 @@ class Publish extends React.Component<Props, State> {
private publishButton() {
return (
<Button
variant="contained"
size="small"
color="primary"
onClick={this.publish}
id="publish-button"
>
<Button variant="contained" size="small" color="primary" onClick={this.publish} id="publish-button">
<Navigation style={{ marginRight: '8px' }} /> Publish
</Button>
)
@@ -162,7 +155,11 @@ class Publish extends React.Component<Props, State> {
return (
<Tooltip title="Format JSON">
<Fab style={{ width: '36px', height: '36px', marginLeft: '8px' }} onClick={this.formatJson} id="sidebar-publish-format-json">
<Fab
style={{ width: '36px', height: '36px', marginLeft: '8px' }}
onClick={this.formatJson}
id="sidebar-publish-format-json"
>
<FormatAlignLeft style={{ fontSize: '20px' }} />
</Fab>
</Tooltip>
@@ -175,9 +172,7 @@ class Publish extends React.Component<Props, State> {
<div style={{ width: '100%', lineHeight: '64px' }}>
{this.renderEditorModeSelection()}
{this.renderFormatJson()}
<div style={{ float: 'right', marginRight: '16px' }}>
{this.publishButton()}
</div>
<div style={{ float: 'right', marginRight: '16px' }}>{this.publishButton()}</div>
</div>
</div>
)
@@ -239,30 +234,36 @@ class Publish extends React.Component<Props, State> {
onChange={this.onChangeQoS}
>
<MenuItem key={0} value={0} style={itemStyle}>
<Tooltip title="At most once"><div style={tooltipStyle}>0</div></Tooltip>
<Tooltip title="At most once">
<div style={tooltipStyle}>0</div>
</Tooltip>
</MenuItem>
<MenuItem key={1} value={1} style={itemStyle}>
<Tooltip title="At least once"><div style={tooltipStyle}>1</div></Tooltip>
<Tooltip title="At least once">
<div style={tooltipStyle}>1</div>
</Tooltip>
</MenuItem>
<MenuItem key={2} value={2} style={itemStyle}>
<Tooltip title="Exactly once"><div style={tooltipStyle}>2</div></Tooltip>
<Tooltip title="Exactly once">
<div style={tooltipStyle}>2</div>
</Tooltip>
</MenuItem>
</TextField>
)
return (
<div style={{ marginTop: '8px', clear: 'both' }}>
<div style={{ width: '100%', textAlign: 'right' }}>
<FormControlLabel
style={labelStyle}
control={qosSelect}
label="QoS"
labelPlacement="start"
/>
<Tooltip title="Retained messages only appear to be retained, when client subscribes after the initial publish." placement="top">
<FormControlLabel style={labelStyle} control={qosSelect} label="QoS" labelPlacement="start" />
<Tooltip
title="Retained messages only appear to be retained, when client subscribes after the initial publish."
placement="top"
>
<FormControlLabel
value="retain"
style={labelStyle}
control={<Checkbox color="primary" checked={this.props.retain} onChange={this.props.actions.toggleRetain} />}
control={
<Checkbox color="primary" checked={this.props.retain} onChange={this.props.actions.toggleRetain} />
}
label="retain"
labelPlacement="end"
/>
@@ -343,4 +344,7 @@ const mapStateToProps = (state: AppState) => {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))
export default connect(
mapStateToProps,
mapDispatchToProps
)(withTheme(Publish))

26
app/src/components/Sidebar/Sidebar.tsx
View File

@@ -14,13 +14,7 @@ import { settingsActions, sidebarActions } from '../../actions'
import { Theme, withStyles } from '@material-ui/core/styles'
import { TopicViewModel } from '../../model/TopicViewModel'
import {
ExpansionPanel,
ExpansionPanelDetails,
ExpansionPanelSummary,
Typography,
Badge,
} from '@material-ui/core'
import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography, Badge } from '@material-ui/core'
const throttle = require('lodash.throttle')
@@ -76,7 +70,7 @@ class Sidebar extends React.Component<Props, State> {
private renderRecursiveTopicDeleteButton() {
const deleteLimit = 50
const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
if ((!this.props.node || topicCount === 0) || (this.props.node.message && topicCount === 1)) {
if (!this.props.node || topicCount === 0 || (this.props.node.message && topicCount === 1)) {
return null
}
@@ -86,7 +80,10 @@ class Sidebar extends React.Component<Props, State> {
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
color="secondary"
>
<CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
<CustomIconButton
onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}
tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}
>
<Delete style={{ marginTop: '-3px' }} color="action" />
</CustomIconButton>
</Badge>
@@ -112,7 +109,9 @@ class Sidebar extends React.Component<Props, State> {
<div>
<ExpansionPanel key="topic" defaultExpanded={true} disabled={!Boolean(this.props.node)}>
<ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
<Typography className={classes.heading}>Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic}</Typography>
<Typography className={classes.heading}>
Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic}
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={this.detailsStyle}>
<Topic node={this.props.node} didSelectNode={this.updateNode} />
@@ -204,4 +203,9 @@ const styles = (theme: Theme) => ({
},
})
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
export default withStyles(styles)(
connect(
mapStateToProps,
mapDispatchToProps
)(Sidebar)
)

36
app/src/components/Sidebar/Topic.tsx
View File

@@ -32,30 +32,29 @@ class Topic extends React.Component<Props, {}> {
}
let key = 0
const breadCrumps = node.branch()
const breadCrumps = node
.branch()
.map(node => node.sourceEdge)
.filter(edge => Boolean(edge))
.map(edge =>
[(
<Button
onClick={() => this.props.actions.selectTopic(edge!.target)}
size="small"
variant={theme.palette.type === 'light' ? 'contained' : undefined}
color={theme.palette.type === 'light' ? 'primary' : 'secondary'}
className={this.props.classes.button}
key={edge!.hash()}
>
{edge!.name}
</Button>
)]
)
.map(edge => [
<Button
onClick={() => this.props.actions.selectTopic(edge!.target)}
size="small"
variant={theme.palette.type === 'light' ? 'contained' : undefined}
color={theme.palette.type === 'light' ? 'primary' : 'secondary'}
className={this.props.classes.button}
key={edge!.hash()}
>
{edge!.name}
</Button>,
])
if (breadCrumps.length === 0) {
return null
}
const joinedBreadCrumps = breadCrumps.reduce((prev, current) =>
prev.concat([<span key={key += 1}> / </span>]).concat(current)
prev.concat([<span key={(key += 1)}> / </span>]).concat(current)
)
return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
@@ -68,4 +67,7 @@ const mapDispatchToProps = (dispatch: any) => {
}
}
export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic))
export default connect(
null,
mapDispatchToProps
)(withStyles(styles, { withTheme: true })(Topic))

6
app/src/components/Sidebar/TopicPlot.tsx
View File

@@ -16,7 +16,8 @@ function nodeToHistory(history: q.MessageHistory) {
.map((message: q.Message) => {
const value = message.value ? toPlottableValue(Base64Message.toUnicodeString(message.value)) : NaN
return { x: message.received.getTime(), y: toPlottableValue(value) }
}).filter(data => !isNaN(data.y as any)) as any
})
.filter(data => !isNaN(data.y as any)) as any
}
function nodeDotPathToHistory(history: q.MessageHistory, dotPath: string) {
@@ -31,7 +32,8 @@ function nodeDotPathToHistory(history: q.MessageHistory, dotPath: string) {
let value = dotProp.get(json, dotPath)
return { x: message.received.getTime(), y: toPlottableValue(value) }
}).filter(data => !isNaN(data.y as any)) as any
})
.filter(data => !isNaN(data.y as any)) as any
}
function render(props: Props) {

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

@@ -18,7 +18,7 @@ interface Props {
}
interface State {
displayMessage?: q.Message,
displayMessage?: q.Message
anchorEl?: HTMLElement
}
@@ -65,18 +65,28 @@ class MessageHistory extends React.Component<Props, State> {
const element = {
value,
key: `${message.messageNumber}-${message.received}`,
title: (<span>
<DateFormatter date={message.received} />
{previousMessage ? <i>(-<DateFormatter date={message.received} intervalSince={previousMessage.received} />)</i> : null}
<div style={{ float: 'right' }}><Copy value={value} /></div>
</span>),
title: (
<span>
<DateFormatter date={message.received} />
{previousMessage ? (
<i>
(-
<DateFormatter date={message.received} intervalSince={previousMessage.received} />)
</i>
) : null}
<div style={{ float: 'right' }}>
<Copy value={value} />
</div>
</span>
),
selected: message && message === this.props.selected,
}
previousMessage = message
return element
})
const isMessagePlottable = node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
const isMessagePlottable =
node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
return (
<div>
<History

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

@@ -44,7 +44,7 @@ interface State {}
class ValuePanel extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { }
this.state = {}
}
private renderValue() {
@@ -84,9 +84,7 @@ class ValuePanel extends React.Component<Props, State> {
return (
<div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
<span style={{ marginTop: '2px', flexGrow: 1 }}>{this.renderActionButtons()}</span>
<div style={{ flex: 6, textAlign: 'right' }}>
{this.props.node.mqttMessage.retain ? retainedButton : null}
</div>
<div style={{ flex: 6, textAlign: 'right' }}>{this.props.node.mqttMessage.retain ? retainedButton : null}</div>
{this.messageMetaInfo()}
</div>
)
@@ -100,7 +98,11 @@ class ValuePanel extends React.Component<Props, State> {
return (
<span style={{ width: '100%', paddingLeft: '8px', flex: 6 }}>
<Typography style={{ textAlign: 'right' }}>QoS: {this.props.node.mqttMessage.qos}</Typography>
<Typography style={{ textAlign: 'right' }}><i><DateFormatter date={this.props.node.message.received} /></i></Typography>
<Typography style={{ textAlign: 'right' }}>
<i>
<DateFormatter date={this.props.node.message.received} />
</i>
</Typography>
</span>
)
}
@@ -114,15 +116,24 @@ class ValuePanel extends React.Component<Props, State> {
}
return (
<ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
<ToggleButtonGroup
id="valueRendererDisplayMode"
value={this.props.valueRendererDisplayMode}
exclusive={true}
onChange={handleValue}
>
<ToggleButton className={this.props.classes.toggleButton} value="diff" id="valueRendererDisplayMode-diff">
<Tooltip title="Show difference between the current and the last message">
<span><Code className={this.props.classes.toggleButtonIcon} /></span>
<span>
<Code className={this.props.classes.toggleButtonIcon} />
</span>
</Tooltip>
</ToggleButton>
<ToggleButton className={this.props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
<Tooltip title="Raw value">
<span><Reorder className={this.props.classes.toggleButtonIcon} /></span>
<span>
<Reorder className={this.props.classes.toggleButtonIcon} />
</span>
</Tooltip>
</ToggleButton>
</ToggleButtonGroup>
@@ -148,7 +159,10 @@ class ValuePanel extends React.Component<Props, State> {
const { node, classes } = this.props
const { detailsStyle, summaryStyle } = this.panelStyle()
const copyValue = (node && node.message && node.message.value) ? <Copy value={Base64Message.toUnicodeString(node.message.value)} /> : null
const copyValue =
node && node.message && node.message.value ? (
<Copy value={Base64Message.toUnicodeString(node.message.value)} />
) : null
return (
<ExpansionPanel key="value" defaultExpanded={true}>
@@ -158,11 +172,15 @@ class ValuePanel extends React.Component<Props, State> {
<ExpansionPanelDetails style={detailsStyle}>
{this.renderViewOptions()}
<div>
<React.Suspense fallback={<div>Loading...</div>}>
{this.renderValue()}
</React.Suspense>
<React.Suspense fallback={<div>Loading...</div>}>{this.renderValue()}</React.Suspense>
</div>
<div>
<MessageHistory
onSelect={this.handleMessageHistorySelect}
selected={this.props.compareMessage}
node={this.props.node}
/>
</div>
<div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.props.compareMessage} node={this.props.node} /></div>
</ExpansionPanelDetails>
</ExpansionPanel>
)
@@ -197,4 +215,7 @@ const styles = (theme: Theme) => ({
},
})
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
export default connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(ValuePanel))