Clean up & Add connection setup

2019-01-06 13:30:35 +01:00
parent ad7794b30d
commit 32c3079821
26 changed files with 809 additions and 356 deletions
--- a/app/src/components/ConnectionSetup/Connection.tsx
+++ b/app/src/components/ConnectionSetup/Connection.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react'
-
 import { Typography, Toolbar, Modal, MenuItem, Button, Grid, Paper, TextField, Switch, FormControlLabel } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import { MqttOptions, DataSourceState } from '../../../../backend/src/DataSource'
+import { addMqttConnectionEvent, makeConnectionStateEvent, rendererEvents } from '../../../../events'
+import sha1 = require('sha1')

 interface Props {
  classes: {[s: string]: string}
  theme: Theme
-  onAbort: () => void
+  onAbort: () => void,
+  onConnection: (connectionId: string) => void
 }

 const protocols = [
@@ -16,7 +19,6 @@ const protocols = [

 interface State {
  visible: boolean
-  name: string
  host: string
  protocol: string
  port: number
@@ -27,13 +29,22 @@ interface State {
  password: string
 }

+declare var window: any
+
 class Connection extends React.Component<Props, State> {
  constructor(props: any) {
    super(props)
-    this.state = {
+    const storedSettingsString = window.localStorage.getItem('connectionSettings')
+    let storedSettings
+    try {
+      storedSettings = storedSettingsString ? JSON.parse(storedSettingsString) : undefined
+    } catch {
+      window.localStorage.setItem('connectionSettings', undefined)
+    }
+
+    const defaultState = {
      visible: true,
-      name: '',
-      host: '',
+      host: 'nodered',
      protocol: protocols[0],
      port: 1883,
      ssl: false,
@@ -42,6 +53,38 @@ class Connection extends React.Component<Props, State> {
      username: '',
      password: '',
    }
+
+    this.state = Object.assign({}, defaultState, storedSettings)
+  }
+
+  private saveConnectionSettings() {
+    window.localStorage.setItem('connectionSettings', JSON.stringify(this.state))
+  }
+
+  private optionsFromState(): MqttOptions {
+    const protocol = this.state.protocol === 'tcp://' ? 'mqtt://' : this.state.protocol
+    const url = `${protocol}${this.state.host}:${this.state.port}`
+
+    return {
+      url,
+      username: this.state.username || undefined,
+      password: this.state.username || undefined,
+      ssl: this.state.ssl,
+      sslValidation: this.state.sslValidation,
+    }
+  }
+
+  private connect() {
+    const options = this.optionsFromState()
+    const connectionId = (sha1(Math.random() + JSON.stringify(options)).slice(0, 8)) as string
+    rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
+    rendererEvents.subscribe(makeConnectionStateEvent(connectionId), (state: DataSourceState) => {
+      console.log(state)
+      if (state.connected) {
+        this.props.onConnection(connectionId)
+        this.setState({ visible: false })
+      }
+    })
  }

  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
@@ -91,46 +134,6 @@ class Connection extends React.Component<Props, State> {
          <form className={classes.container} noValidate autoComplete="off">

            <Grid container spacing={24}>
-              <Grid item xs={5}>
-                <TextField
-                  label="Name"
-                  className={classes.textField}
-                  value={this.state.name}
-                  onChange={this.handleChange('name')}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid item xs={1}></Grid>
-              <Grid item xs={3}>
-                <div className={classes.switch}>
-                  <FormControlLabel
-                    control={(
-                      <Switch
-                        checked={this.state.sslValidation}
-                        onChange={() => this.setState({ sslValidation: !this.state.sslValidation })}
-                        color="primary"
-                      />
-                    )}
-                    label="Validate certificate"
-                    labelPlacement="bottom"
-                  />
-                </div>
-              </Grid>
-              <Grid item xs={3}>
-                <div className={classes.switch}>
-                  <FormControlLabel
-                    control={(
-                      <Switch
-                        checked={this.state.ssl}
-                        onChange={() => this.setState({ ssl: !this.state.ssl })}
-                        color="primary"
-                      />
-                    )}
-                    label="Encryption"
-                    labelPlacement="bottom"
-                  />
-                </div>
-              </Grid>
              <Grid item xs={2}>
                <TextField
                  select
@@ -184,19 +187,49 @@ class Connection extends React.Component<Props, State> {
                  margin="normal"
                />
              </Grid>
-              <Grid item xs={4}></Grid>
+              <Grid item xs={3}>
+                <div className={classes.switch}>
+                  <FormControlLabel
+                    control={(
+                      <Switch
+                        checked={this.state.sslValidation}
+                        onChange={() => this.setState({ sslValidation: !this.state.sslValidation })}
+                        color="primary"
+                      />
+                    )}
+                    label="Validate certificate"
+                    labelPlacement="bottom"
+                  />
+                </div>
+              </Grid>
+              <Grid item xs={3}>
+                <div className={classes.switch}>
+                  <FormControlLabel
+                    control={(
+                      <Switch
+                        checked={this.state.ssl}
+                        onChange={() => this.setState({ ssl: !this.state.ssl })}
+                        color="primary"
+                      />
+                    )}
+                    label="Encryption"
+                    labelPlacement="bottom"
+                  />
+                </div>
+              </Grid>
+              <Grid item xs={6}></Grid>
            </Grid>
            <br />
            <div style={{ textAlign: 'right' }}>
              <Button variant="contained" className={classes.button}>
                Test Connection
              </Button>
-              <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.setState({ visible: false })}>
-                Cancel
-              </Button>
-              <Button variant="contained" color="primary" className={classes.button}>
+              <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.saveConnectionSettings()}>
                Save
              </Button>
+              <Button variant="contained" color="primary" className={classes.button} onClick={() => this.connect()}>
+                Connect
+              </Button>
            </div>
          </form>
        </Paper>
--- a/app/src/components/Sidebar/ValueRenderer.tsx
+++ b/app/src/components/Sidebar/ValueRenderer.tsx
@@ -53,6 +53,8 @@ class ValueRenderer extends React.Component<Props, State> {
      return this.renderRawValue(node.message.value)
    } else if (typeof json === 'number') {
      return this.renderRawValue(node.message.value)
+    } else if (typeof json === 'boolean') {
+      return this.renderRawValue(node.message.value)
    } else {
      const theme = this.props.theme.palette.type === 'dark' ? 'monokai' : 'bright:inverted'
      return <ReactJson
--- a/app/src/components/Tree/Tree.tsx
+++ b/app/src/components/Tree/Tree.tsx
@@ -1,25 +1,22 @@
 import * as React from 'react'
-import * as io from 'socket.io-client'
 import * as q from '../../../../backend/src/Model'
 import TreeNode from './TreeNode'
 import List from '@material-ui/core/List'
-
-class TreeState {
-  public tree: q.Tree
-  public msg: any
-  constructor(tree: q.Tree, msg: any) {
-    this.tree = tree
-    this.msg = msg
-  }
-}
-
-export interface TreeNodeProps {
-  didSelectNode?: (node: q.TreeNode) => void
-}
+import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
+import {  } from '../../../../events/Events'
 declare const performance: any

-export class Tree extends React.Component<TreeNodeProps, TreeState> {
-  private socket: SocketIOClient.Socket
+interface Props{
+  didSelectNode?: (node: q.TreeNode) => void
+  connectionId?: string
+}
+
+interface TreeState {
+  tree: q.Tree
+  msg: any
+}
+
+export class Tree extends React.Component<Props, TreeState> {
  private renderDuration: number = 300
  private updateTimer?: any
  private lastUpdate: number = 0
@@ -28,8 +25,7 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
  constructor(props: any) {
    super(props)
    const tree = new q.Tree()
-    this.state = new TreeState(tree, {})
-    this.socket = io('http://localhost:3000')
+    this.state = { tree, msg: {} }
  }

  public time(): number {
@@ -55,18 +51,37 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
    }, Math.max(0, timeUntilNextUpdate))
  }

-  public componentDidMount() {
-    this.socket.on('message', (msg: any) => {
-      const edges = msg.topic.split('/')
-      const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
-      this.state.tree.updateWithNode(node.firstNode())
+  public componentWillReceiveProps(nextProps: Props) {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.unsubscribeAll(event)
+    }
+    if (nextProps.connectionId) {
+      const event = makeConnectionMessageEvent(nextProps.connectionId)
+      rendererEvents.subscribe(event, this.handleNewData)
+    }
+  }

-      this.throttledStateUpdate({ msg, tree: this.state.tree })
-    })
+  public componentDidMount() {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.subscribe(event, this.handleNewData)
+    }
  }

  public componentWillUnmount() {
-    this.socket.removeAllListeners()
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.unsubscribeAll(event)
+    }
+  }
+
+  private handleNewData = (msg: any) => {
+    const edges = msg.topic.split('/')
+    const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
+    this.state.tree.updateWithNode(node.firstNode())
+
+    this.throttledStateUpdate({ msg, tree: this.state.tree })
  }

  public render() {
@@ -74,7 +89,7 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
      <List>
        <TreeNode
          animateChages={true}
-          autoExpandLimit={3}
+          autoExpandLimit={0}
          isRoot={true}
          didSelectNode={this.props.didSelectNode}
          treeNode={this.state.tree}
--- a/app/src/components/Tree/TreeNode.tsx
+++ b/app/src/components/Tree/TreeNode.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withTheme, Theme } from '@material-ui/core/styles'
-const throttle = require('lodash.throttle')
 import { isElementInViewport } from '../helper/isElementInViewport'
 import TreeNodeTitle from './TreeNodeTitle'
 import TreeNodeSubnodes from './TreeNodeSubnodes'

 declare var performance: any
-declare var window: any

 export interface TreeNodeProps {
  animateChages: boolean
@@ -37,7 +35,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
  private cssAnimationWasSetAt?: number

  private willUpdateTime: number = performance.now()
-  private titleRef = React.createRef<HTMLElement>()
+  private titleRef = React.createRef<HTMLDivElement>()

  private subnodesDidchange = () => {
    this.dirtySubnodes = true
@@ -139,7 +137,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
    this.dirtyState = this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false

    return <div key={this.props.treeNode.hash()} style={ displayBlock }>
-      <div style={animationStyle} ref={this.titleRef}>
+      <div style={animationStyle} ref={this.titleRef} onClick={() => this.toggle()}>
        <TreeNodeTitle
          edgeCount={this.state.edgeCount}
          collapsed={this.collapsed()}
--- a/app/src/components/Tree/TreeNodeSubnodes.tsx
+++ b/app/src/components/Tree/TreeNodeSubnodes.tsx
@@ -29,7 +29,11 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
      const listItems = edges
        .map(edge => edge.target)
        .map(node => (
-          <ListItem key={node.hash()} style={listItemStyle} button>
+          <ListItem
+            key={node.hash()}
+            style={listItemStyle}
+            button
+          >
            <TreeNode
              animateChages={this.props.animateChanges}
              treeNode={node}