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

Refactor

Browse Source
This commit is contained in:
Thomas Nordquist
2019-04-04 19:51:44 +02:00
parent c20c075bcf
commit 09dcce97b7
55 changed files with 775 additions and 1415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/components/Sidebar/History.tsx
View File

@@ -29,6 +29,10 @@ class MessageHistory extends React.Component<Props, State> {
}
}
private toggle = () => {
this.setState({ collapsed: !this.state.collapsed })
}
public renderHistory() {
const style = (element: HistoryItem) => ({
backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
@@ -87,10 +91,6 @@ class MessageHistory extends React.Component<Props, State> {
</div>
)
}
private toggle = () => {
this.setState({ collapsed: !this.state.collapsed })
}
}
const styles = (theme: Theme) => ({
@@ -98,7 +98,7 @@ const styles = (theme: Theme) => ({
backgroundColor: 'rgba(170, 170, 170, 0.2)',
marginTop: '16px',
},
badge: { right:'-25px' },
badge: { right: '-25px' },
})
export default withStyles(styles, { withTheme: true })(MessageHistory)

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

@@ -56,6 +56,11 @@ interface State {
}
class Publish extends React.Component<Props, State> {
private editorOptions = {
showLineNumbers: false,
tabSize: 2,
}
constructor(props: any) {
super(props)
this.state = { history: [] }
@@ -88,7 +93,7 @@ class Publish extends React.Component<Props, State> {
}
}
private addMessageToHistory(topic: string, payload?: string) {
private addMessageToHistory(topic: string, payload?: string) {
// Remove duplicates
let filteredHistory = this.state.history.filter(e => e.payload !== payload || e.topic !== topic)
filteredHistory = filteredHistory.slice(-7)
@@ -96,16 +101,6 @@ class Publish extends React.Component<Props, State> {
this.setState({ history })
}
public render() {
return (
<div style={{ flexGrow: 1, marginLeft: '8px' }}>
{this.topic()}
{this.editor()}
{this.history()}
</div>
)
}
private clearTopic = () => {
this.props.actions.setTopic('')
}
@@ -138,11 +133,6 @@ class Publish extends React.Component<Props, State> {
}
}
private editorOptions = {
showLineNumbers: false,
tabSize: 2,
}
private publishButton() {
return (
<Button
@@ -232,7 +222,7 @@ class Publish extends React.Component<Props, State> {
private onChangeQoS = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(event.target.value, 10)
if (value !== 0 && value !== 1 && value !== 2) {
if (value !== 0 && value !== 1 && value !== 2) {
return
}
@@ -326,6 +316,16 @@ class Publish extends React.Component<Props, State> {
/>
)
}
public render() {
return (
<div style={{ flexGrow: 1, marginLeft: '8px' }}>
{this.topic()}
{this.editor()}
{this.history()}
</div>
)
}
}
const mapDispatchToProps = (dispatch: any) => {

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

@@ -46,26 +46,14 @@ class Sidebar extends React.Component<Props, State> {
this.setState(this.state)
}, 300)
private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
constructor(props: any) {
super(props)
console.error('Find and fix me #state')
this.state = { node: new q.Tree(), valueRenderWidth: 300 }
}
public componentWillReceiveProps(nextProps: Props) {
this.props.node && this.removeUpdateListener(this.props.node)
nextProps.node && this.registerUpdateListener(nextProps.node)
this.props.node && this.setState({ node: this.props.node })
if (this.props.node !== nextProps.node) {
this.setState({ compareMessage: undefined })
}
}
public componentWillUnmount() {
this.props.node && this.removeUpdateListener(this.props.node)
}
private registerUpdateListener(node: q.TreeNode<TopicViewModel>) {
node.onMerge.subscribe(this.updateNode)
node.onMessage.subscribe(this.updateNode)
@@ -76,18 +64,8 @@ class Sidebar extends React.Component<Props, State> {
node.onMessage.unsubscribe(this.updateNode)
}
public render() {
return (
<div id="Sidebar" className={this.props.classes.drawer}>
{this.renderNode()}
</div>
)
}
private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
private renderTopicDeleteButton() {
if (!this.props.node || (!this.props.node.message || !this.props.node.message.value)) {
if (!this.props.node || (!this.props.node.message || !this.props.node.message.value)) {
return null
}
@@ -179,6 +157,28 @@ class Sidebar extends React.Component<Props, State> {
</ExpansionPanelDetails>
)
}
public componentWillReceiveProps(nextProps: Props) {
this.props.node && this.removeUpdateListener(this.props.node)
nextProps.node && this.registerUpdateListener(nextProps.node)
this.props.node && this.setState({ node: this.props.node })
if (this.props.node !== nextProps.node) {
this.setState({ compareMessage: undefined })
}
}
public componentWillUnmount() {
this.props.node && this.removeUpdateListener(this.props.node)
}
public render() {
return (
<div id="Sidebar" className={this.props.classes.drawer}>
{this.renderNode()}
</div>
)
}
}
const mapStateToProps = (state: AppState) => {

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

@@ -46,7 +46,7 @@ class Topic extends React.Component<Props, {}> {
>
{edge!.name}
</Button>
)],
)]
)
if (breadCrumps.length === 0) {
@@ -54,7 +54,7 @@ class Topic extends React.Component<Props, {}> {
}
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>

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

@@ -22,14 +22,21 @@ interface State {
}
class MessageHistory extends React.Component<Props, State> {
private updateNode = throttle(() => {
this.setState(this.state)
}, 300)
constructor(props: any) {
super(props)
this.state = { }
}
private updateNode = throttle(() => {
this.setState(this.state)
}, 300)
private displayMessage = (index: number, eventTarget: EventTarget) => {
const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
if (message) {
this.props.onSelect(message)
}
}
public componentWillReceiveProps(nextProps: Props) {
this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
@@ -82,20 +89,13 @@ class MessageHistory extends React.Component<Props, State> {
)
}
public renderPlot(data: {x: number, y: number}[]) {
public renderPlot(data: Array<{x: number, y: number}>) {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<PlotHistory data={data} />
</React.Suspense>
)
}
private displayMessage = (index: number, eventTarget: EventTarget) => {
const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
if (message) {
this.props.onSelect(message)
}
}
}
export default MessageHistory

36
app/src/components/Sidebar/ValueRenderer/PlotHistory.tsx
View File

@@ -8,7 +8,7 @@ const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('re
const abbreviate = require('number-abbreviate')
interface Props {
data: {x: number, y: number}[]
data: Array<{x: number, y: number}>
}
interface Stats {
@@ -26,6 +26,23 @@ class PlotHistory extends React.Component<Props, Stats> {
this.setState({ width: width - 12 })
}
private hintFormatter = (point: any) => {
return [
{ title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
{ title: <b>Value</b>, value: point.y },
]
}
private _forgetValue = () => {
this.setState({
value: undefined,
})
}
private _rememberValue = (value: any) => {
this.setState({ value })
}
public render() {
const data = this.props.data
@@ -50,23 +67,6 @@ class PlotHistory extends React.Component<Props, Stats> {
</div>
)
}
private hintFormatter = (point: any) => {
return [
{ title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
{ title: <b>Value</b>, value: point.y },
]
}
private _forgetValue = () => {
this.setState({
value: undefined,
})
}
private _rememberValue = (value: any) => {
this.setState({ value })
}
}
export default PlotHistory

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

@@ -47,30 +47,6 @@ class ValuePanel extends React.Component<Props, State> {
this.state = { }
}
public render() {
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
return (
<ExpansionPanel key="value" defaultExpanded={true}>
<ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
<Typography className={classes.heading}>Value {copyValue}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={detailsStyle}>
{this.messageMetaInfo()}
<div>
<React.Suspense fallback={<div>Loading...</div>}>
{this.renderValue()}
</React.Suspense>
</div>
<div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
</ExpansionPanelDetails>
</ExpansionPanel>
)
}
private renderValue() {
const node = this.props.node
if (!node || !node.message) {
@@ -87,7 +63,7 @@ class ValuePanel extends React.Component<Props, State> {
}
private messageMetaInfo() {
if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
return null
}
@@ -152,6 +128,30 @@ class ValuePanel extends React.Component<Props, State> {
this.setState({ compareMessage: undefined })
}
}
public render() {
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
return (
<ExpansionPanel key="value" defaultExpanded={true}>
<ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
<Typography className={classes.heading}>Value {copyValue}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={detailsStyle}>
{this.messageMetaInfo()}
<div>
<React.Suspense fallback={<div>Loading...</div>}>
{this.renderValue()}
</React.Suspense>
</div>
<div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
</ExpansionPanelDetails>
</ExpansionPanel>
)
}
}
const mapDispatchToProps = (dispatch: any) => {

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

@@ -24,6 +24,36 @@ class ValueRenderer extends React.Component<Props, State> {
this.state = { width: 0 }
}
private renderDiff(current: string = '', previous: string = '', language?: 'json') {
return (
<CodeDiff
previous={previous}
current={current}
language={language}
nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
/>
)
}
private messageToPrettyJson(str: string): string | undefined {
try {
const json = JSON.parse(str)
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)
}
public render() {
return (
<div style={{ padding: '8px 0px 8px 8px' }}>
@@ -38,7 +68,7 @@ class ValueRenderer extends React.Component<Props, State> {
const previousMessages = messageHistory.toArray()
const previousMessage = previousMessages[previousMessages.length - 2]
let compareMessage = compareWith || previousMessage || message
let compareMessage = compareWith || previousMessage || message
if (renderMode === 'raw') {
compareMessage = message
}
@@ -71,36 +101,6 @@ class ValueRenderer extends React.Component<Props, State> {
return this.renderDiff(current, compare, language)
}
}
private renderDiff(current: string = '', previous: string = '', language?: 'json') {
return (
<CodeDiff
previous={previous}
current={current}
language={language}
nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
/>
)
}
private messageToPrettyJson(str: string): string | undefined {
try {
const json = JSON.parse(str)
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)
}
}
const mapStateToProps = (state: AppState) => {