Add topic publishing sidebar

app/package-lock.json

@@ -748,6 +748,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1451,6 +1456,11 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
     },
+    "diff-match-patch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+      "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -3300,6 +3310,16 @@
       "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
       "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -4183,6 +4203,18 @@
         "scheduler": "^0.12.0"
       }
     },
+    "react-ace": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-6.3.2.tgz",
+      "integrity": "sha512-eSk0fWvrBe2oqYIYX0njLddLG5H0hemWv5VVoQi5yDSPTjGlSSnzFwdgPyfuwRe8mSARZuRdprPQa5p61hKirw==",
+      "requires": {
+        "brace": "^0.11.1",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-base16-styling": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",

app/package.json

@@ -32,6 +32,7 @@
     "jquery": "^3.3.1",
     "lodash.throttle": "^4.1.1",
     "moving-average": "^1.0.0",
+    "react-ace": "^6.3.2",
     "react-json-view": "^1.19.1",
     "sha1": "^1.1.1",
     "socket.io-client": "^2.2.0",

app/src/App.tsx

@@ -91,7 +91,7 @@ class App extends React.Component<Props, State> {
               }} />
             </div>
             <div style={this.getStyles().right}>
-              <Sidebar />
+              <Sidebar connectionId={this.state.connectionId} />
             </div>
           </div>
       </div>

app/src/actions/Tree.ts

@@ -0,0 +1,9 @@
+import { ActionTypes } from '../reducers'
+import * as q from '../../../backend/src/Model'
+
+export const selectTopic = (topic: q.TreeNode) => {
+  return {
+    selectedTopic: topic,
+    type: ActionTypes.selectTopic,
+  }
+}

app/src/components/Sidebar/Publisher.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react'
+import * as q from '../../../../backend/src/Model'
+import { makePublishEvent, rendererEvents } from '../../../../events'
+import Navigation from '@material-ui/icons/Navigation'
+import {
+  Button, Fab, InputAdornment, FormControlLabel, Radio,
+  RadioGroup, TextField, Typography,
+} from '@material-ui/core'
+
+import * as brace from 'brace'
+import { default as AceEditor } from 'react-ace'
+// tslint:disable-next-line
+import 'react-ace'
+import 'brace/mode/java'
+import 'brace/mode/text'
+import 'brace/mode/xml'
+import 'brace/theme/monokai'
+
+interface Props {
+  node?: q.TreeNode
+  connectionId?: string
+}
+
+interface State {
+  customTopic?: string
+  payload?: string
+  mode: string
+}
+
+class Publisher extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = { mode: 'json' }
+  }
+
+  private updatePayload = (value: string, event?: any) => {
+    this.setState({ payload: value })
+  }
+
+  private updateTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ customTopic: e.target.value })
+  }
+
+  private updateMode = (e: React.ChangeEvent<{}>, value: string) => {
+    this.setState({ mode: value })
+  }
+
+  private publish = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!this.props.connectionId || !this.state.customTopic) {
+      return
+    }
+
+    rendererEvents.emit(makePublishEvent(this.props.connectionId), {
+      topic: this.state.customTopic,
+      payload: this.state.payload,
+    })
+  }
+
+  public render() {
+    return (
+      <div style={{ flexGrow: 1, marginLeft: '8px' }}>
+        {this.topic()}
+        {this.editor()}
+      </div>
+    )
+  }
+
+  private topic() {
+    const { node } = this.props
+    const topicStr = this.state.customTopic || (node ? node.path() : '')
+    return (
+      <div>
+        <Typography>Topic</Typography>
+        <TextField
+          placeholder="example/topic"
+          style={{ width: '100%' }}
+          margin="normal"
+          value={topicStr}
+          multiline={true}
+          onChange={this.updateTopic}
+        />
+      </div>
+    )
+  }
+
+  private editorOptions = {
+    enableBasicAutocompletion: true,
+    enableLiveAutocompletion: true,
+    enableSnippets: true,
+    showLineNumbers: false,
+    tabSize: 2,
+  }
+
+  private publishButton() {
+    return (
+      <Button variant="contained" size="small" color="primary">
+        <Navigation style={{ marginRight: '8px' }} /> Publish
+      </Button>
+    )
+  }
+
+  private editorMode() {
+    const labelStyle = { margin: '0 8px 0 8px' }
+    return (
+      <div style={{ marginTop: '16px' }}>
+        <Typography style={{ width: '100%', lineHeight: '64px' }}>
+          <RadioGroup
+            style={{ display: 'inline-block', float: 'left' }}
+            value={this.state.mode}
+            onChange={this.updateMode}
+            row={true}
+          >
+            <FormControlLabel
+              value="text"
+              style={labelStyle}
+              control={<Radio color="primary" />}
+              label="raw"
+              labelPlacement="top"
+            />
+            <FormControlLabel
+              value="xml"
+              style={labelStyle}
+              control={<Radio color="primary" />}
+              label="xml"
+              labelPlacement="top"
+            />
+            <FormControlLabel
+              value="json"
+              style={labelStyle}
+              control={<Radio color="primary" />}
+              label="json"
+              labelPlacement="top"
+            />
+          </RadioGroup>
+          <div style={{ float: 'right', marginRight: '16px' }}>
+            {this.publishButton()}
+          </div>
+        </Typography>
+      </div>
+    )
+  }
+
+  private editor() {
+    return (
+      <div style={{ width: '100%', display: 'block' }}>
+        {this.editorMode()}
+        <AceEditor
+          mode={this.state.mode}
+          theme="monokai"
+          name="UNIQUE_ID_OF_DIV"
+          width="100%"
+          height="200px"
+          showGutter={true}
+          value={this.state.payload}
+          onChange={this.updatePayload}
+          setOptions={this.editorOptions}
+          editorProps={{ $blockScrolling: true }}
+        />
+      </div>
+    )
+  }
+}
+
+export default Publisher

app/src/components/Sidebar/Sidebar.tsx

@@ -5,6 +5,7 @@ import * as q from '../../../../backend/src/Model'
 import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import ExpandMore from '@material-ui/icons/ExpandMore'
+import Publisher from './Publisher'
 
 import Copy from '../Copy'
 import ValueRenderer from './ValueRenderer'
@@ -15,10 +16,11 @@ interface Props {
   node?: q.TreeNode,
   classes: any,
   theme: Theme,
+  connectionId?: string,
 }
 
 interface State {
-  node: q.TreeNode
+  node: q.TreeNode,
 }
 
 class Sidebar extends React.Component<Props, State> {
@@ -77,30 +79,39 @@ class Sidebar extends React.Component<Props, State> {
 
     const copyTopic = node ? <Copy value={node.path()} /> : null
     const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
-
+    const summeryStyle = { minHeight: '0' }
+    const detailsStyle = { padding: '0px 8px 8px' }
     return (
       <div>
         <ExpansionPanel key="topic" defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
             <Typography className={classes.heading}>Topic {copyTopic}</Typography>
           </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          <ExpansionPanelDetails style={detailsStyle}>
             <Topic node={this.props.node} didSelectNode={this.updateNode} />
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel key="value" defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
             <Typography className={classes.heading}>Value {copyValue}</Typography>
           </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          <ExpansionPanelDetails style={detailsStyle}>
             <ValueRenderer node={this.props.node} />
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
+            <Typography className={classes.heading}>Publish</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails style={detailsStyle}>
+            <Publisher node={this.props.node} connectionId={this.props.connectionId} />
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+        <ExpansionPanel defaultExpanded={true}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
             <Typography className={classes.heading}>Stats</Typography>
           </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
+          <ExpansionPanelDetails style={detailsStyle}>
             {this.props.node ? <NodeStats node={this.props.node} /> : null}
           </ExpansionPanelDetails>
         </ExpansionPanel>

backend/src/DataSource/DataSource.ts

@@ -7,6 +7,7 @@ interface DataSource<DataSourceOptions> {
   connect(options: DataSourceOptions): DataSourceStateMachine
   disconnect(): void
   onMessage(messageCallback: MessageCallback): void
+  publish(topic: string, payload: any): void
   topicSeparator: string
   stateMachine: DataSourceStateMachine
 }

backend/src/DataSource/MqttSource.ts

@@ -69,6 +69,10 @@ export class MqttSource implements DataSource<MqttOptions> {
     return this.stateMachine
   }
 
+  public publish(topic: string, payload: any) {
+    this.client && this.client.publish(topic, payload)
+  }
+
   public disconnect() {
     this.client && this.client.end()
   }

backend/src/index.ts

@@ -1,7 +1,7 @@
 import {
   addMqttConnectionEvent, backendEvents,
   makeConnectionStateEvent, removeConnection,
-  makeConnectionMessageEvent, AddMqttConnection,
+  makeConnectionMessageEvent, makePublishEvent, AddMqttConnection, Message,
 } from '../../events'
 import { MqttSource, DataSource } from './DataSource'
 
@@ -26,6 +26,9 @@ class ConnectionManager {
 
     connection.connect(options)
     this.handleNewMessagesForConnection(connectionId, connection)
+    backendEvents.subscribe(makePublishEvent(connectionId), (msg: Message) => {
+      this.connections[connectionId].publish(msg.topic, msg.payload)
+    })
   }
 
   private handleNewMessagesForConnection(connectionId: string, connection: MqttSource) {

events/EventBus.ts

@@ -46,7 +46,6 @@ class IpcRendererEventBus implements EventBusInterface {
   }
 
   public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
-    console.log(event.topic, msg)
     this.ipc.send(event.topic, msg)
   }
 }

events/Events.ts

@@ -23,7 +23,7 @@ export function makeConnectionStateEvent(connectionId: string): Event<DataSource
   }
 }
 
-interface Message {
+export interface Message {
   topic: string,
   payload: any
 }
@@ -33,3 +33,9 @@ export function makeConnectionMessageEvent(connectionId: string): Event<Message>
     topic: `conn/${connectionId}`,
   }
 }
+
+export function makePublishEvent(connectionId: string): Event<Message> {
+  return {
+    topic: `conn/publish/${connectionId}`,
+  }
+}

package-lock.json

@@ -621,6 +621,11 @@
         }
       }
     },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1083,6 +1088,11 @@
       "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
       "dev": true
     },
+    "diff-match-patch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+      "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+    },
     "dmg-builder": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-6.5.3.tgz",
@@ -2160,8 +2170,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
-      "dev": true
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -2277,11 +2286,24 @@
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -4078,6 +4100,15 @@
         "through2": "~0.2.3"
       }
     },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -4140,6 +4171,18 @@
         "strip-json-comments": "~2.0.1"
       }
     },
+    "react-ace": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-6.3.2.tgz",
+      "integrity": "sha512-eSk0fWvrBe2oqYIYX0njLddLG5H0hemWv5VVoQi5yDSPTjGlSSnzFwdgPyfuwRe8mSARZuRdprPQa5p61hKirw==",
+      "requires": {
+        "brace": "^0.11.1",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-config-file": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-3.2.0.tgz",

package.json

@@ -18,7 +18,9 @@
     "appId": "mqtt-explorer",
     "mac": {
       "category": "de.t7n.apps.mq-explorer",
-      "publish": ["github"]
+      "publish": [
+        "github"
+      ]
     },
     "linux": {
       "category": "Development",
@@ -59,6 +61,7 @@
     "electron-log": "^2.2.17",
     "electron-updater": "^4.0.6",
     "mqtt": "^2.18.8",
+    "react-ace": "^6.3.2",
     "sha1": "^1.1.1",
     "socket.io": "^2.2.0"
   }