Add client certificates

.cspell.json

@@ -1,8 +1,46 @@
 {
-    "language": "en",
-    "words": [
-        "subheader",
-        "basepath",
-	"webdriverio"
-    ]
+  "language": "en",
+  "words": [
+    "subheader",
+    "basepath",
+    "webdriverio",
+    "repo",
+    "hexagonalize",
+    "pixelize",
+    "Transistions",
+    "squashfs",
+    "squashfs",
+    "provisionprofile",
+    "Nsis",
+    "Appx",
+    "Hashable",
+    "clickaway",
+    "Resizer",
+    "Subnodes",
+    "Unmount",
+    "Monokai",
+    "plottable",
+    "snackbar",
+    "webdriverio",
+    "prismjs",
+    "Nordquist",
+    "debounced",
+    "mosquitto",
+    "snapcraft",
+    "unsquashfs",
+    "armv",
+    "livingroom",
+    "selectall",
+    "toggledevtools",
+    "Octo",
+    "zigbee",
+    "memoization",
+    "submenu",
+    "AGPL",
+    "Oooooops",
+    "DEVTOOLS",
+    "mixins",
+    "Explorerdmg",
+    "heapsnapshot"
+  ]
 }

app/index.html

@@ -114,15 +114,16 @@
       .Resizer.vertical {
         width: 2px;
         margin: 0px -8px 0px 0px;
-        border-left: 4px solid rgba(128, 128, 128, 0);
-        border-right: 4px solid rgba(128, 128, 128, 0);
+        border-left: 0px solid rgba(128, 128, 128, 0);
+        border-right: 8px solid rgba(128, 128, 128, 0);
         cursor: col-resize;
       }
 
       .Resizer.vertical::before {
         content: '•••';
-        margin-left: -6px;
-        height: 100%;
+        margin-left: -11px;
+        height: 3em;
+        margin-top: calc(50vh - 32px);
         display: inline-block;
         vertical-align: middle;
         text-align: center;
@@ -133,8 +134,8 @@
       }
 
       .Resizer.vertical:hover {
-        border-left: 4px solid rgba(130, 130, 130, 0.3);
-        border-right: 4px solid rgba(140, 140, 140, 0.3);
+        border-left: 0px solid rgba(130, 130, 130, 0.3);
+        border-right: 8px solid rgba(140, 140, 140, 0.3);
       }
 
       .Resizer.disabled {

app/src/actions/Charts.ts

@@ -2,7 +2,7 @@ import { Action, ActionTypes, ChartParameters } from '../reducers/Charts'
 import { AppState } from '../reducers'
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
-import { showError } from './Global'
+import { showError, showNotification } from './Global'
 
 interface ConnectionViewState {
   charts: Array<ChartParameters>
@@ -72,6 +72,7 @@ export const addChart = (chartParameters: ChartParameters) => async (
       .find(chart => chart.topic === chartParameters.topic && chart.dotPath === chartParameters.dotPath)
   )
   if (chartExists) {
+    dispatch(showNotification('Already added'))
     return
   }
 
@@ -80,6 +81,7 @@ export const addChart = (chartParameters: ChartParameters) => async (
     chart: chartParameters,
   })
   dispatch(saveCharts())
+  dispatch(showNotification('Added to chart panel'))
 }
 
 export const updateChart = (chartParameters: ChartParameters) => async (
@@ -106,6 +108,18 @@ export const removeChart = (chartParameters: ChartParameters) => async (
   dispatch(saveCharts())
 }
 
+export const moveChartUp = (parameters: { topic: string; dotPath?: string }) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    topic: parameters.topic,
+    dotPath: parameters.dotPath,
+    type: ActionTypes.CHARTS_MOVE_UP,
+  })
+  dispatch(saveCharts())
+}
+
 export const setCharts = (charts: Array<ChartParameters>): Action => {
   return {
     charts,

app/src/actions/ConnectionManager.ts

@@ -42,7 +42,8 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
   }
 }
 
-export const selectCertificate = (connectionId: string) => async (
+export type CertificateTypes = 'selfSignedCertificate' | 'clientCertificate' | 'clientKey'
+export const selectCertificate = (type: CertificateTypes, connectionId: string) => async (
   dispatch: Dispatch<any>,
   getState: () => AppState
 ) => {
@@ -50,7 +51,7 @@ export const selectCertificate = (connectionId: string) => async (
     const certificate = await openCertificate()
     dispatch(
       updateConnection(connectionId, {
-        selfSignedCertificate: certificate,
+        [type]: certificate,
       })
     )
   } catch (error) {
@@ -147,6 +148,10 @@ export const toggleAdvancedSettings = (): Action => ({
   type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS,
 })
 
+export const toggleCertificateSettings = (): Action => ({
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS,
+})
+
 export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const connectionIds = Object.keys(getState().connectionManager.connections)
   const connectionIdLocation = connectionIds.indexOf(connectionId)

app/src/actions/Tree.ts

@@ -104,7 +104,7 @@ export const togglePause = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatc
   setTimeout(() => {
     tree && tree.applyUnmergedChanges()
     if (paused && changes > 0) {
-      dispatch(globalActions.showNotification(`Sucessfully applied ${changes} changes.`))
+      dispatch(globalActions.showNotification(`Successfully applied ${changes} changes.`))
     }
   }, 50)
 

app/src/components/ChartPanel/Chart.tsx

@@ -1,61 +1,79 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import Clear from '@material-ui/icons/Clear'
-import CustomIconButton from '../helper/CustomIconButton'
 import TopicPlot from '../TopicPlot'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Paper, Theme, Typography, withStyles } from '@material-ui/core'
-import { SettingsButton } from './ChartSettings/SettingsButton'
+import { Paper } from '@material-ui/core'
+import ChartTitle from './ChartTitle'
+import { ChartActions } from './ChartActions'
 const throttle = require('lodash.throttle')
 
 interface Props {
   parameters: ChartParameters
-  tree?: q.Tree<any>
-  classes: any
+  treeNode?: q.TreeNode<any>
   actions: {
     chart: typeof chartActions
   }
 }
 
-function Chart(props: Props) {
-  if (!props.tree) {
-    return null
-  }
+/**
+ * Subscribes to onMessage of treeNode
+ */
+function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
+  const [lastUpdated, setLastUpdate] = React.useState(0)
+  function subscribeToMessageUpdates() {
+    const onUpdateCallback = throttle(() => setLastUpdate(treeNode ? treeNode.lastUpdate : 0), 300)
+    treeNode && treeNode.onMessage.subscribe(onUpdateCallback)
 
-  const { tree, parameters } = props
-  const initialTreeNode = tree.findNode(parameters.topic)
-  const [treeNode, setTreeNode] = React.useState<q.TreeNode<any> | undefined>(initialTreeNode)
-  usePollingToFetchTreeNode(treeNode, tree, parameters, setTreeNode)
+    return function cleanup() {
+      treeNode && treeNode.onMessage.unsubscribe(onUpdateCallback)
+    }
+  }
+  React.useEffect(subscribeToMessageUpdates, [treeNode])
+}
+
+function Chart(props: Props) {
+  const { parameters, treeNode } = props
+  const [freezedHistory, setHistory] = React.useState<q.MessageHistory | undefined>()
+  useMessageSubscriptionToUpdate(treeNode)
+
+  const togglePause = React.useCallback(() => {
+    if (!props.treeNode) {
+      return
+    }
+    setHistory(freezedHistory ? undefined : props.treeNode.messageHistory.clone())
+  }, [props.treeNode, freezedHistory])
 
   const onRemove = React.useCallback(() => {
     props.actions.chart.removeChart(props.parameters)
   }, [props.parameters])
 
   return (
-    <Paper style={{ padding: '8px' }}>
-      <div style={{ float: 'right' }}>
-        <SettingsButton parameters={parameters} />
-        <CustomIconButton tooltip="Remove chart" onClick={onRemove}>
-          <Clear />
-        </CustomIconButton>
+    <Paper
+      style={{ padding: '8px' }}
+      data-test-type="ChartPaper"
+      data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+    >
+      <div style={{ display: 'flex' }}>
+        <div style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
+          <ChartTitle parameters={parameters} />
+          <ChartActions
+            parameters={parameters}
+            onRemove={onRemove}
+            paused={Boolean(freezedHistory)}
+            togglePause={togglePause}
+          />
+        </div>
       </div>
-      <Typography variant="caption" className={props.classes.topic}>
-        {parameters.dotPath ? parameters.dotPath : ''}
-      </Typography>
-      <br />
-      <Typography variant="caption" className={props.classes.topic}>
-        {parameters.topic}
-      </Typography>
-      <br />
-      {treeNode ? (
+      {props.treeNode ? (
         <TopicPlot
+          color={props.parameters.color}
           interpolation={props.parameters.interpolation}
           range={props.parameters.range ? [props.parameters.range.from, props.parameters.range.to] : undefined}
-          history={treeNode.messageHistory}
+          history={freezedHistory ? freezedHistory : props.treeNode.messageHistory}
           dotPath={parameters.dotPath}
         />
       ) : (
@@ -65,12 +83,6 @@ function Chart(props: Props) {
   )
 }
 
-const mapStateToProps = (state: AppState) => {
-  return {
-    tree: state.connection.tree,
-  }
-}
-
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: {
@@ -79,50 +91,7 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-const styles = (theme: Theme) => ({
-  topic: {
-    wordBreak: 'break-all' as 'break-all',
-    whiteSpace: 'nowrap' as 'nowrap',
-    overflow: 'hidden' as 'hidden',
-    textOverflow: 'ellipsis' as 'ellipsis',
-  },
-})
-
 export default connect(
-  mapStateToProps,
+  undefined,
   mapDispatchToProps
-)(withStyles(styles)(Chart))
-
-/**
- * If a node is not available when the plot is shown, keep polling until it has been created
- */
-function usePollingToFetchTreeNode(
-  treeNode: q.TreeNode<any> | undefined,
-  tree: q.Tree<any>,
-  parameters: ChartParameters,
-  setTreeNode: React.Dispatch<React.SetStateAction<q.TreeNode<any> | undefined>>
-) {
-  const [lastUpdate, setLastUpdate] = React.useState(0)
-
-  function pollForTreeNode() {
-    const onUpdateCallback = throttle(() => setLastUpdate(treeNode ? treeNode.lastUpdate : 0), 300)
-    let intervalTimer: any
-    if (!treeNode) {
-      intervalTimer = setInterval(() => {
-        const node = tree.findNode(parameters.topic)
-        if (node) {
-          setTreeNode(node)
-          node.onMessage.subscribe(onUpdateCallback)
-          clearInterval(intervalTimer)
-        }
-      }, 500)
-    } else {
-      treeNode.onMessage.subscribe(onUpdateCallback)
-    }
-    return function cleanup() {
-      treeNode && treeNode.onMessage.unsubscribe(onUpdateCallback)
-      intervalTimer && clearInterval(intervalTimer)
-    }
-  }
-  React.useEffect(pollForTreeNode)
-}
+)(Chart)

app/src/components/ChartPanel/ChartActions.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import Play from '@material-ui/icons/PlayArrow'
+import Pause from '@material-ui/icons/PauseCircleFilled'
+import Clear from '@material-ui/icons/Clear'
+import CustomIconButton from '../helper/CustomIconButton'
+import { ChartParameters } from '../../reducers/Charts'
+import { SettingsButton } from './ChartSettings/SettingsButton'
+
+export function ChartActions(props: {
+  paused: boolean
+  togglePause: () => void
+  parameters: ChartParameters
+  onRemove: () => void
+}) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <CustomIconButton tooltip={props.paused ? 'Resume chart' : 'Pause chart'} onClick={props.togglePause}>
+        {props.paused ? <Play /> : <Pause />}
+      </CustomIconButton>
+      <SettingsButton parameters={props.parameters} />
+      <CustomIconButton tooltip="Remove chart" onClick={props.onRemove}>
+        <Clear data-test-type="RemoveChart" data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`} />
+      </CustomIconButton>
+    </div>
+  )
+}

app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { ChartParameters } from '../../../reducers/Charts'
+import { connect } from 'react-redux'
+import { Menu, MenuItem } from '@material-ui/core'
+import { colors as createColors } from './colors'
+
+function chartParametersForColor(chart: ChartParameters, color?: string) {
+  return {
+    color,
+    topic: chart.topic,
+    dotPath: chart.dotPath,
+  }
+}
+
+const colors: Array<string> = createColors()
+
+function ColorSettings(props: {
+  chart: ChartParameters
+  actions: {
+    chart: typeof chartActions
+  }
+  anchorEl?: Element
+  open: boolean
+  close: () => void
+}) {
+  const setColor = React.useCallback(
+    (color?: string) => props.actions.chart.updateChart(chartParametersForColor(props.chart, color)),
+    [props.chart]
+  )
+
+  const menuItems = React.useMemo(() => {
+    return colors.map(color => (
+      <MenuItem
+        style={{ minWidth: '8em', minHeight: '36px', backgroundColor: color, textAlign: 'center' }}
+        key={color}
+        onClick={() => setColor(color)}
+      >
+        {props.chart.color === color ? 'X' : ''}
+      </MenuItem>
+    ))
+  }, [colors, props.chart])
+
+  return (
+    <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
+      <MenuItem
+        style={{ minWidth: '8em', minHeight: '36px', textAlign: 'center' }}
+        key="none"
+        onClick={() => setColor()}
+        selected={props.chart.color === undefined}
+      >
+        default
+      </MenuItem>
+      {menuItems}
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(ColorSettings)

app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx

@@ -23,7 +23,7 @@ function InterpolationSettings(props: {
   }
   anchorEl?: Element
   open: boolean
-  onClose: () => void
+  close: () => void
 }) {
   const callbacks = React.useMemo(() => {
     const createCurveCallback = (curve: PlotCurveTypes) => () => {
@@ -46,7 +46,7 @@ function InterpolationSettings(props: {
   }, [curves, props.chart])
 
   return (
-    <Menu id="long-menu" anchorEl={props.anchorEl} open={props.open} onClose={props.onClose}>
+    <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
       {menuItems}
     </Menu>
   )

app/src/components/ChartPanel/ChartSettings/MoveUp.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+
+function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
+  const moveUp = React.useCallback(() => {
+    props.actions.chart.moveChartUp({
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+    })
+    props.close()
+  }, [props.chart])
+
+  return (
+    <MenuItem key="size" onClick={moveUp}>
+      Move up
+    </MenuItem>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(MoveUp)

app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx

@@ -34,13 +34,7 @@ function RangeSettings(props: {
   const setFromHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
   const setToHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
   return (
-    <Menu
-      style={{ textAlign: 'center' }}
-      id="long-menu"
-      anchorEl={props.anchorEl}
-      open={props.open}
-      onClose={props.onClose}
-    >
+    <Menu style={{ textAlign: 'center' }} anchorEl={props.anchorEl} open={props.open} onClose={props.onClose}>
       <Typography>Define custom ranges for the Y-Axis</Typography>
       <div style={{ padding: '0 16px' }}>
         <TextField

app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx

@@ -19,7 +19,11 @@ export function SettingsButton(props: { parameters: ChartParameters }) {
     <span>
       <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
       <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
-        <MoreVertIcon ref={settingsRef as any} />
+        <MoreVertIcon
+          ref={settingsRef as any}
+          data-test-type="ChartSettings"
+          data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+        />
       </CustomIconButton>
     </span>
   )

app/src/components/ChartPanel/ChartSettings/Size.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+
+function Size(props: {
+  actions: { chart: typeof chartActions }
+  chart: ChartParameters
+  anchorEl?: Element
+  open: boolean
+  close: () => void
+}) {
+  const setChartWidth = (width?: 'big' | 'medium' | 'small') => () => {
+    props.actions.chart.updateChart({
+      width,
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+    })
+    props.close()
+  }
+
+  return (
+    <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
+      <MenuItem selected={props.chart.width === undefined} onClick={setChartWidth()}>
+        auto
+      </MenuItem>
+      <MenuItem selected={props.chart.width === 'big'} onClick={setChartWidth('big')}>
+        100% width
+      </MenuItem>
+      <MenuItem selected={props.chart.width === 'medium'} onClick={setChartWidth('medium')}>
+        50% width
+      </MenuItem>
+      <MenuItem selected={props.chart.width === 'small'} onClick={setChartWidth('small')}>
+        33% width
+      </MenuItem>
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(Size)

app/src/components/ChartPanel/ChartSettings/colors.ts

@@ -0,0 +1,46 @@
+import {
+  amber,
+  orange,
+  pink,
+  purple,
+  deepPurple,
+  teal,
+  red,
+  green,
+  lime,
+  indigo,
+  yellow,
+  brown,
+  blueGrey,
+} from '@material-ui/core/colors'
+
+export function colors() {
+  function colorToInt(color: string): [number, number, number] {
+    const str = color.replace('#', '')
+    return [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)]
+  }
+  function colorCompare(colorA: string, colorB: string) {
+    const a = colorToInt(colorA)
+    const b = colorToInt(colorB)
+    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2))
+  }
+  const colors: Array<string> = [
+    brown,
+    blueGrey,
+    amber,
+    orange,
+    pink,
+    purple,
+    deepPurple,
+    teal,
+    red,
+    green,
+    lime,
+    indigo,
+    yellow,
+  ]
+    .map(color => [color[200], color[500], color[700]])
+    .reduce((a, b) => a.concat(b), [])
+    .sort((a, b) => colorCompare(a, b))
+  return colors
+}

app/src/components/ChartPanel/ChartSettings/index.tsx

@@ -3,6 +3,9 @@ import InterpolationSettings from './InterpolationSettings'
 import { ChartParameters } from '../../../reducers/Charts'
 import { Menu, MenuItem } from '@material-ui/core'
 import RangeSettings from './RangeSettings'
+import Size from './Size'
+import MoveUp from './MoveUp'
+import ColorSettings from './ColorSettings'
 
 function ChartSettings(props: {
   open: boolean
@@ -12,21 +15,37 @@ function ChartSettings(props: {
 }) {
   const [rangeVisible, setRangeVisible] = React.useState(false)
   const [interpolationVisible, setInterpolationVisible] = React.useState(false)
+  const [sizeVisible, setSizeVisible] = React.useState(false)
+  const [colorVisible, setColorVisible] = React.useState(false)
 
   const toggleRange = React.useCallback(() => {
-    if (!rangeVisible && open) {
+    if (open) {
       props.close()
     }
     setRangeVisible(!rangeVisible)
   }, [rangeVisible, open])
 
   const toggleInterpolation = React.useCallback(() => {
-    if (!interpolationVisible && open) {
+    if (open) {
       props.close()
     }
     setInterpolationVisible(!interpolationVisible)
   }, [interpolationVisible, open])
 
+  const toggleSize = React.useCallback(() => {
+    if (open) {
+      props.close()
+    }
+    setSizeVisible(!sizeVisible)
+  }, [sizeVisible, open])
+
+  const toggleColor = React.useCallback(() => {
+    if (open) {
+      props.close()
+    }
+    setColorVisible(!colorVisible)
+  }, [colorVisible, open])
+
   return (
     <span>
       <Menu id="long-menu" anchorEl={props.anchorEl.current} open={props.open} onClose={props.close}>
@@ -36,14 +55,23 @@ function ChartSettings(props: {
         <MenuItem key="interpolation" onClick={toggleInterpolation}>
           Curve interpolation
         </MenuItem>
+        <MenuItem key="size" onClick={toggleSize}>
+          Size
+        </MenuItem>
+        <MenuItem key="color" onClick={toggleColor}>
+          Color
+        </MenuItem>
+        <MoveUp chart={props.chart} close={props.close} />
       </Menu>
       <RangeSettings chart={props.chart} anchorEl={props.anchorEl.current} open={rangeVisible} onClose={toggleRange} />
       <InterpolationSettings
         chart={props.chart}
         anchorEl={props.anchorEl.current}
         open={interpolationVisible}
-        onClose={toggleInterpolation}
+        close={toggleInterpolation}
       />
+      <Size chart={props.chart} anchorEl={props.anchorEl.current} open={sizeVisible} close={toggleSize} />
+      <ColorSettings chart={props.chart} anchorEl={props.anchorEl.current} open={colorVisible} close={toggleColor} />
     </span>
   )
 }

app/src/components/ChartPanel/ChartTitle.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { ChartParameters } from '../../reducers/Charts'
+import { Typography, Theme, withStyles } from '@material-ui/core'
+
+function ChartTitle(props: { parameters: ChartParameters; classes: any }) {
+  const { classes, parameters } = props
+  return (
+    <div style={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+      <Typography variant="caption" className={classes.topic}>
+        {parameters.dotPath ? parameters.dotPath : parameters.topic}
+      </Typography>
+      <br />
+      <Typography variant="caption" className={classes.topic}>
+        {parameters.dotPath ? parameters.topic : <span dangerouslySetInnerHTML={{ __html: '&nbsp;' }}></span>}
+      </Typography>
+    </div>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  topic: {
+    wordBreak: 'break-all' as 'break-all',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    textOverflow: 'ellipsis' as 'ellipsis',
+  },
+})
+
+export default withStyles(styles)(ChartTitle)

app/src/components/ChartPanel/ChartWithTreeNode.tsx

@@ -0,0 +1,50 @@
+import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import Chart from './Chart'
+import { ChartParameters } from '../../reducers/Charts'
+
+interface Props {
+  tree?: q.Tree<any>
+  parameters: ChartParameters
+}
+
+export function ChartWithTreeNode(props: Props) {
+  const { tree, parameters } = props
+  if (!tree) {
+    return null
+  }
+
+  const initialTreeNode = tree.findNode(parameters.topic)
+  const [treeNode, setTreeNode] = React.useState<q.TreeNode<any> | undefined>(initialTreeNode)
+
+  usePollingToFetchTreeNode(treeNode, tree, parameters.topic, setTreeNode)
+  return <Chart treeNode={treeNode} parameters={parameters} />
+}
+
+/**
+ * If a node is not available when the plot is shown, keep polling until it has been created
+ */
+function usePollingToFetchTreeNode(
+  treeNode: q.TreeNode<any> | undefined,
+  tree: q.Tree<any>,
+  path: string,
+  setTreeNode: React.Dispatch<React.SetStateAction<q.TreeNode<any> | undefined>>
+) {
+  function pollUntilTreeNodeHasBeenFound() {
+    let intervalTimer: any
+    if (!treeNode) {
+      intervalTimer = setInterval(() => {
+        const node = tree.findNode(path)
+        if (node) {
+          setTreeNode(node)
+          clearInterval(intervalTimer)
+        }
+      }, 500)
+    }
+    return function cleanup() {
+      intervalTimer && clearInterval(intervalTimer)
+    }
+  }
+
+  React.useEffect(pollUntilTreeNodeHasBeenFound, [])
+}

app/src/components/ChartPanel/index.tsx

@@ -1,10 +1,11 @@
+import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import Chart from './Chart'
 import ShowChart from '@material-ui/icons/ShowChart'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
+import { ChartWithTreeNode } from './ChartWithTreeNode'
 import { connect } from 'react-redux'
 import { Grid, Theme, Typography, withStyles } from '@material-ui/core'
 import { List } from 'immutable'
@@ -13,9 +14,11 @@ const { TransitionGroup, CSSTransition } = require('react-transition-group/esm')
 interface Props {
   charts: List<ChartParameters>
   connectionId?: string
+  tree?: q.Tree<any>
   actions: {
     chart: typeof chartActions
   }
+  classes: any
 }
 
 function spacingForChartCount(count: number): 4 | 6 | 12 {
@@ -28,6 +31,19 @@ function spacingForChartCount(count: number): 4 | 6 | 12 {
   }
 }
 
+function mapWidth(width: 'big' | 'medium' | 'small' | undefined, calculatedSpacing: 4 | 6 | 12): 4 | 6 | 12 {
+  switch (width) {
+    case 'big':
+      return 12
+    case 'medium':
+      return 6
+    case 'small':
+      return 4
+    default:
+      return calculatedSpacing
+  }
+}
+
 function ChartPanel(props: Props) {
   const chartsInView = props.charts.count()
 
@@ -53,14 +69,14 @@ function ChartPanel(props: Props) {
       timeout={{ enter: 500, exit: 500 }}
       classNames="example"
     >
-      <Grid item xs={spacing}>
-        <Chart parameters={chartParameters} />
+      <Grid item xs={mapWidth(chartParameters.width, spacing)}>
+        <ChartWithTreeNode tree={props.tree} parameters={chartParameters} />
       </Grid>
     </CSSTransition>
   ))
 
   return (
-    <div style={{ width: '100%', height: '100%', padding: '8px' }}>
+    <div className={props.classes.container}>
       <Grid container spacing={1}>
         <TransitionGroup component={null} className="example">
           {charts}
@@ -87,6 +103,7 @@ const mapStateToProps = (state: AppState) => {
   return {
     charts: state.charts.get('charts'),
     connectionId: state.connection.connectionId,
+    tree: state.connection.tree,
   }
 }
 
@@ -98,7 +115,16 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-const styles = (theme: Theme) => ({})
+const styles = (theme: Theme) => ({
+  container: {
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    height: '100%',
+    padding: '8px',
+    flex: 1,
+    overflow: 'hidden scroll',
+  },
+})
 
 export default connect(
   mapStateToProps,

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -44,29 +44,6 @@ class ConnectionSettings extends React.Component<Props, State> {
     })
   }
 
-  private renderCertificateInfo() {
-    if (!this.props.connection.selfSignedCertificate) {
-      return null
-    }
-
-    return (
-      <span>
-        <Tooltip title={this.props.connection.selfSignedCertificate.name}>
-          <Typography className={this.props.classes.certificateName}>
-            <ClearAdornment action={this.clearCertificate} value={this.props.connection.selfSignedCertificate.name} />
-            {this.props.connection.selfSignedCertificate.name}
-          </Typography>
-        </Tooltip>
-      </span>
-    )
-  }
-
-  private clearCertificate = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      selfSignedCertificate: undefined,
-    })
-  }
-
   private renderSubscriptions() {
     const connection = this.props.connection
     return connection.subscriptions.map(subscription => (
@@ -122,16 +99,15 @@ class ConnectionSettings extends React.Component<Props, State> {
             </Grid>
             <Grid item={true} xs={3} className={classes.gridPadding}>
               <div>
-                <Tooltip title="Select certificate to verify authenticity of a self-signed certificate" placement="top">
+                <Tooltip title="Manage tls connection certificates" placement="top">
                   <Button
                     variant="contained"
                     className={classes.button}
-                    onClick={() => this.props.managerActions.selectCertificate(this.props.connection.id)}
+                    onClick={() => this.props.managerActions.toggleCertificateSettings()}
                   >
-                    <Lock /> Certificate
+                    <Lock /> Certificates
                   </Button>
                 </Tooltip>
-                {this.renderCertificateInfo()}
               </div>
             </Grid>
             <Grid item={true} xs={2} className={classes.gridPadding}>

app/src/components/ConnectionSetup/CertificateFileSelection.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import Add from '@material-ui/icons/Add'
+import ClearAdornment from '../helper/ClearAdornment'
+import Delete from '@material-ui/icons/Delete'
+import Lock from '@material-ui/icons/Lock'
+import { bindActionCreators } from 'redux'
+import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
+import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
+import { CertificateTypes } from '../../actions/ConnectionManager'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { withStyles } from '@material-ui/styles'
+
+function CertificateFileSelection(props: {
+  certificateType: CertificateTypes
+  title: string
+  certificate?: CertificateParameters
+  classes: any
+  actions: {
+    connectionManager: typeof connectionManagerActions
+  }
+  connection: ConnectionOptions
+}) {
+  const clearCertificate = React.useCallback(() => {
+    props.actions.connectionManager.updateConnection(props.connection.id, {
+      [props.certificateType]: undefined,
+    })
+  }, [props.connection, props.certificateType])
+
+  return (
+    <span>
+      <Tooltip title="Select certificate" placement="top">
+        <Button
+          variant="contained"
+          className={props.classes.button}
+          onClick={() => props.actions.connectionManager.selectCertificate(props.certificateType, props.connection.id)}
+        >
+          <Lock /> {props.title}
+        </Button>
+      </Tooltip>
+      <ClearCertificate classes={props.classes} certificate={props.certificate} action={clearCertificate} />
+    </span>
+  )
+}
+
+function ClearCertificate(props: { classes: any; certificate?: CertificateParameters; action: () => void }) {
+  if (!props.certificate) {
+    return null
+  }
+
+  return (
+    <Tooltip title={props.certificate.name}>
+      <Typography className={props.classes.certificateName}>
+        <ClearAdornment action={props.action} value={props.certificate.name} />
+        {props.certificate.name}
+      </Typography>
+    </Tooltip>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      connectionManager: bindActionCreators(connectionManagerActions, dispatch),
+    },
+  }
+}
+
+const styles = (theme: Theme) => ({
+  certificateName: {
+    width: '100%',
+    height: 'calc(1em + 4px)',
+    overflow: 'hidden' as 'hidden',
+    whiteSpace: 'nowrap' as 'nowrap',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    color: theme.palette.text.hint,
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginRight: theme.spacing(2),
+  },
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(CertificateFileSelection))

app/src/components/ConnectionSetup/Certificates.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import CertificateFileSelection from './CertificateFileSelection'
+import Undo from '@material-ui/icons/Undo'
+import { bindActionCreators } from 'redux'
+import { Button, Grid } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { Theme, withStyles } from '@material-ui/core/styles'
+
+interface Props {
+  connection: ConnectionOptions
+  classes: any
+  managerActions: typeof connectionManagerActions
+}
+
+interface State {
+  subscription: string
+}
+
+class Certificates extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = { subscription: '' }
+  }
+
+  private handleChange = (name: string) => (event: any) => {
+    this.props.managerActions.updateConnection(this.props.connection.id, {
+      [name]: event.target.value,
+    })
+  }
+
+  private renderCertificateInfo() {
+    if (!this.props.connection.selfSignedCertificate) {
+      return null
+    }
+
+    return <span />
+  }
+
+  public render() {
+    const { classes } = this.props
+    return (
+      <div>
+        <form noValidate={true} autoComplete="off">
+          <Grid container={true} spacing={3}>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.selfSignedCertificate}
+                title="Server Certificate (CA)"
+                certificateType="selfSignedCertificate"
+              />
+            </Grid>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.clientCertificate}
+                title="Client Certificate"
+                certificateType="clientCertificate"
+              />
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.clientKey}
+                title="Client Key"
+                certificateType="clientKey"
+              />
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
+              <Button
+                variant="contained"
+                className={classes.button}
+                onClick={this.props.managerActions.toggleCertificateSettings}
+              >
+                <Undo /> Back
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    managerActions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const styles = (theme: Theme) => ({
+  fullWidth: {
+    width: '100%',
+  },
+  gridPadding: {
+    padding: '0 12px !important',
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginRight: theme.spacing(2),
+  },
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(Certificates))

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -9,6 +9,7 @@ import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptio
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core'
 import AdvancedConnectionSettings from './AdvancedConnectionSettings'
+import Certificates from './Certificates'
 
 interface Props {
   actions: any
@@ -16,6 +17,7 @@ interface Props {
   connection?: ConnectionOptions
   visible: boolean
   showAdvancedSettings: boolean
+  showCertificateSettings: boolean
 }
 
 class ConnectionSetup extends React.Component<Props, {}> {
@@ -24,19 +26,22 @@ class ConnectionSetup extends React.Component<Props, {}> {
   }
 
   private renderSettings() {
-    const { connection, showAdvancedSettings } = this.props
+    const { connection, showAdvancedSettings, showCertificateSettings } = this.props
     if (!connection) {
       return null
     }
 
     return (
       <div>
-        <Collapse in={!showAdvancedSettings}>
+        <Collapse in={!showAdvancedSettings && !showCertificateSettings}>
           <ConnectionSettings connection={connection} />
         </Collapse>
-        <Collapse in={showAdvancedSettings}>
+        <Collapse in={showAdvancedSettings && !showCertificateSettings}>
           <AdvancedConnectionSettings connection={connection} />
         </Collapse>
+        <Collapse in={showCertificateSettings}>
+          <Certificates connection={connection} />
+        </Collapse>
       </div>
     )
   }
@@ -115,6 +120,7 @@ const mapStateToProps = (state: AppState) => {
   return {
     visible: !state.connection.connected,
     showAdvancedSettings: state.connectionManager.showAdvancedSettings,
+    showCertificateSettings: state.connectionManager.showCertificateSettings,
     connection: state.connectionManager.selected
       ? state.connectionManager.connections[state.connectionManager.selected]
       : undefined,

app/src/components/ErrorBoundary.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PersistentStorage from '../utils/PersistentStorage'
 import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
 import Warning from '@material-ui/icons/Warning'
-import { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core'
 
@@ -33,7 +33,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   }
 
   public componentDidCatch(error: Error, errorInfo: any) {
-    electronRendererTelementry.trackError(error)
+    electronRendererTelemetry.trackError(error)
     console.log('did catch', error)
   }
 

app/src/components/Layout/ContentView.tsx

@@ -18,11 +18,29 @@ interface Props {
 
 function ContentView(props: Props) {
   const [height, setHeight] = React.useState<string | number>('100%')
+  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>('40%')
   const [detectedHeight, setDetectedHeight] = React.useState(0)
+  const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
   const detectSize = React.useCallback((width, newHeight) => {
     setDetectedHeight(newHeight)
   }, [])
 
+  const detectSidebarSize = React.useCallback(width => {
+    setDetectedSidebarWidth(width)
+  }, [])
+
+  const closeDrawerCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
+    if (detectedHeight < 30) {
+      setHeight('100%')
+    }
+  }, [detectedHeight])
+
+  const closeSidebarCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
+    if (detectedSidebarWidth < 30) {
+      setSidebarWidth('0%')
+    }
+  }, [detectedSidebarWidth])
+
   // Open chart panel on start and when a new chart is added but the panel is closed
   React.useEffect(() => {
     const almostClosed = !isNaN(height as any) && detectedHeight < 30
@@ -37,42 +55,54 @@ function ContentView(props: Props) {
 
   return (
     <div className={props.paneDefaults}>
-      <ReactSplitPane
-        step={10}
-        split="horizontal"
-        minSize={0}
-        size={height}
-        defaultSize={'100%'}
-        allowResize={true}
-        style={{ height: 'calc(100vh - 64px)' }}
-        pane1Style={{ maxHeight: '100%' }}
-        pane2Style={{ borderTop: '1px solid #999', overflow: 'hidden scroll' }}
-        onChange={setHeight}
-      >
-        <span>
-          <ReactSplitPane
-            step={20}
-            primary="second"
-            className={props.heightProperty}
-            split="vertical"
-            minSize={250}
-            defaultSize={500}
-            allowResize={true}
-            style={{ height: '100%' }}
-            pane1Style={{ overflowX: 'hidden' }}
-            resizerStyle={{ height: '100%' }}
-          >
-            <Tree />
-            <div className={props.paneDefaults} style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
+      <span>
+        <ReactSplitPane
+          step={20}
+          primary="second"
+          className={props.heightProperty}
+          split="vertical"
+          minSize={0}
+          size={sidebarWidth}
+          onChange={setSidebarWidth}
+          onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
+          allowResize={true}
+          style={{ height: '100%' }}
+          pane1Style={{ overflowX: 'hidden' }}
+          resizerStyle={{ height: '100%' }}
+        >
+          <span>
+            <ReactSplitPane
+              step={10}
+              split="horizontal"
+              minSize={0}
+              size={height}
+              allowResize={true}
+              style={{ height: 'calc(100vh - 64px)' }}
+              pane1Style={{ maxHeight: '100%' }}
+              pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
+              onChange={setHeight}
+              onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
+            >
+              <Tree />
+              {/** Passing height constraints via flex options down */}
+              <div style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
+                {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
+                <ReactResizeDetector handleHeight={true} onResize={detectSize} />
+                <ChartPanel />
+              </div>
+            </ReactSplitPane>
+          </span>
+          <div style={{ height: '100%' }}>
+            <ReactResizeDetector handleWidth={true} onResize={detectSidebarSize} />
+            <div
+              className={props.paneDefaults}
+              style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
+            >
               <Sidebar connectionId={props.connectionId} />
             </div>
-          </ReactSplitPane>
-        </span>
-        <div>
-          <ReactResizeDetector handleHeight={true} onResize={detectSize} />
-          <ChartPanel />
-        </div>
-      </ReactSplitPane>
+          </div>
+        </ReactSplitPane>
+      </span>
     </div>
   )
 }

app/src/components/Layout/PauseButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import CustomIconButton from '../helper/CustomIconButton'
 import Pause from '@material-ui/icons/PauseCircleFilled'
-import Resume from '@material-ui/icons/PlayCircleFilled'
+import Resume from '@material-ui/icons/PlayArrow'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'

app/src/components/Sidebar/CodeDiff/ChartPreview.tsx

@@ -24,7 +24,7 @@ function ChartPreview(props: Props) {
   const onClick = React.useCallback(() => {
     props.actions.chart.addChart({
       topic: props.treeNode.path(),
-      dotPath: props.literal.path,
+      dotPath: props.literal.path !== '' ? props.literal.path : undefined,
     })
     setOpen(false)
   }, [props.literal.path, props.treeNode])
@@ -40,18 +40,26 @@ function ChartPreview(props: Props) {
   const hasEnoughDataToDisplayDiagrams = props.treeNode.messageHistory.count() > 1
 
   const addChartToPanelButton = hasEnoughDataToDisplayDiagrams ? (
-    <Tooltip title="Click to add to chart panel">
+    <Tooltip title="Add to chart panel">
       <ShowChart
         ref={chartIconRef}
         className={props.classes.icon}
         onMouseEnter={mouseOver}
         onMouseLeave={mouseOut}
         onClick={onClick}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
       />
     </Tooltip>
   ) : (
-    <Tooltip title="Click to add to chart panel, not enough data for preview">
-      <ShowChart onClick={onClick} className={props.classes.icon} style={{ color: '#aaa' }} />
+    <Tooltip title="Add to chart panel, not enough data for preview">
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
     </Tooltip>
   )
 

app/src/components/Sidebar/PlotHistory.tsx

@@ -12,6 +12,7 @@ interface Props {
   theme: Theme
   interpolation?: PlotCurveTypes
   range?: [number?, number?]
+  color?: string
 }
 
 function mapCurveType(type: PlotCurveTypes | undefined) {
@@ -58,6 +59,12 @@ export default withTheme((props: Props) => {
       ? [props.range[0] || calculatedDomain[0], props.range[1] || calculatedDomain[1]]
       : calculatedDomain
 
+    let color: string =
+      props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light
+    if (props.color) {
+      color = props.color
+    }
+
     return (
       <div style={{ height: '150px', overflow: 'hidden' }}>
         <XYPlot width={width} height={180} yDomain={yDomain}>
@@ -65,11 +72,7 @@ export default withTheme((props: Props) => {
           <XAxis />
           <YAxis width={45} tickFormat={(num: number) => abbreviate(num)} />
           <LineMarkSeries
-            color={
-              props.theme.palette.type === 'light'
-                ? props.theme.palette.secondary.dark
-                : props.theme.palette.primary.light
-            }
+            color={color}
             onValueMouseOver={showTooltip}
             onValueMouseOut={hideTooltip}
             size={3}
@@ -81,7 +84,7 @@ export default withTheme((props: Props) => {
         <ReactResizeDetector handleWidth={true} onResize={detectResize} />
       </div>
     )
-  }, [width, props.data, tooltip, props.interpolation, props.range])
+  }, [width, props.data, tooltip, props.interpolation, props.range, props.color, props.theme])
 })
 
 function domainForData(data: Array<{ x: number; y: number }>): [number, number] {

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -11,6 +11,7 @@ import { TopicViewModel } from '../../../model/TopicViewModel'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
+import CustomIconButton from '../../helper/CustomIconButton'
 
 const throttle = require('lodash.throttle')
 
@@ -109,7 +110,19 @@ class MessageHistory extends React.Component<Props, State> {
       <div>
         <History
           items={historyElements}
-          contentTypeIndicator={isMessagePlottable ? <ShowChart onClick={this.addNodeToCharts} /> : undefined}
+          contentTypeIndicator={
+            isMessagePlottable ? (
+              <CustomIconButton
+                style={{ height: '22px', width: '22px' }}
+                onClick={this.addNodeToCharts}
+                tooltip="Add to chart panel"
+              >
+                <ShowChart style={{ marginTop: '-5px' }} />
+              </CustomIconButton>
+            ) : (
+              undefined
+            )
+          }
           onClick={this.displayMessage}
         >
           {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}

app/src/components/TopicPlot.tsx

@@ -11,6 +11,7 @@ interface Props {
   dotPath?: string
   interpolation?: PlotCurveTypes
   range?: [number?, number?]
+  color?: string
 }
 
 function nodeToHistory(history: q.MessageHistory) {
@@ -41,7 +42,7 @@ function nodeDotPathToHistory(history: q.MessageHistory, dotPath: string) {
 
 function render(props: Props) {
   const data = props.dotPath ? nodeDotPathToHistory(props.history, props.dotPath) : nodeToHistory(props.history)
-  return <PlotHistory range={props.range} interpolation={props.interpolation} data={data} />
+  return <PlotHistory color={props.color} range={props.range} interpolation={props.interpolation} data={data} />
 }
 
 export default render

app/src/components/Tree/Tree.tsx

@@ -110,6 +110,7 @@ class TreeComponent extends React.PureComponent<Props, State> {
       overflowY: 'scroll',
       overflowX: 'hidden',
       height: '100%',
+      width: '100%',
       paddingBottom: '16px', // avoid conflict with chart panel Resizer
     }
 

app/src/components/helper/CustomIconButton.tsx

@@ -6,6 +6,7 @@ interface Props {
   onClick: any
   tooltip: string
   classes: any
+  style?: React.CSSProperties
 }
 
 const styles = (theme: Theme) => ({
@@ -32,7 +33,7 @@ class CustomIconButton extends React.Component<Props, {}> {
 
   public render() {
     return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>
+      <IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
         <Tooltip title={this.props.tooltip} className={this.props.classes.label}>
           <span>{this.props.children}</span>
         </Tooltip>

app/src/model/ConnectionOptions.ts

@@ -20,6 +20,8 @@ export interface ConnectionOptions {
   encryption: boolean
   certValidation: boolean
   selfSignedCertificate?: CertificateParameters
+  clientCertificate?: CertificateParameters
+  clientKey?: CertificateParameters
   clientId?: string
   subscriptions: Array<string>
 }
@@ -38,6 +40,8 @@ export function toMqttConnection(options: ConnectionOptions): MqttOptions | unde
     certValidation: options.certValidation,
     subscriptions: options.subscriptions,
     certificateAuthority: options.selfSignedCertificate ? options.selfSignedCertificate.data : undefined,
+    clientCertificate: options.clientCertificate ? options.clientCertificate.data : undefined,
+    clientKey: options.clientKey ? options.clientKey.data : undefined,
   }
 }
 

app/src/reducers/Charts.ts

@@ -1,6 +1,7 @@
 import { Action } from 'redux'
 import { createReducer } from './lib'
 import { Record, List } from 'immutable'
+import MoveUp from '../components/ChartPanel/ChartSettings/MoveUp'
 
 export type PlotCurveTypes = 'curve' | 'linear' | 'cubic_basis_spline' | 'step_after' | 'step_before'
 
@@ -12,6 +13,8 @@ export interface ChartParameters {
     from?: number
     to?: number
   }
+  width?: 'big' | 'medium' | 'small'
+  color?: string
 }
 
 export interface ChartsStateModel {
@@ -20,13 +23,14 @@ export interface ChartsStateModel {
 
 export type ChartsState = Record<ChartsStateModel>
 
-export type Action = AddChart | RemoveChart | SetCharts | UpdateChart
+export type Action = AddChart | RemoveChart | SetCharts | UpdateChart | MoveUp
 
 export enum ActionTypes {
   CHARTS_ADD = 'CHARTS_ADD',
   CHARTS_REMOVE = 'CHARTS_REMOVE',
   CHARTS_SET = 'CHARTS_SET',
   CHARTS_UPDATE = 'CHARTS_UPDATE',
+  CHARTS_MOVE_UP = 'CHARTS_MOVE_UP',
 }
 
 export interface AddChart {
@@ -34,6 +38,12 @@ export interface AddChart {
   chart: ChartParameters
 }
 
+export interface MoveUp {
+  type: ActionTypes.CHARTS_ADD
+  topic: string
+  dotPath?: string
+}
+
 export interface UpdateChart {
   type: ActionTypes.CHARTS_ADD
   topic: string
@@ -60,12 +70,26 @@ export const chartsReducer = createReducer(initialState(), {
   CHARTS_REMOVE: removeChart,
   CHARTS_SET: setCharts,
   CHARTS_UPDATE: updateChart,
+  CHARTS_MOVE_UP: moveUp,
 })
 
 function addChart(state: ChartsState, action: AddChart) {
   return state.set('charts', state.get('charts').push(action.chart))
 }
 
+function moveUp(state: ChartsState, action: MoveUp) {
+  const charts = state.get('charts')
+  const idx = charts.findIndex(chart => chart.topic === action.topic && chart.dotPath === action.dotPath)
+  const item = charts.get(idx)
+  const previousItem = charts.get(idx - 1)
+
+  if (idx === 0 || !item || !previousItem) {
+    return
+  }
+  const newlyOrderedCharts = charts.set(idx - 1, item).set(idx, previousItem)
+  return state.set('charts', newlyOrderedCharts)
+}
+
 function updateChart(state: ChartsState, action: UpdateChart) {
   const charts = state.get('charts')
   const chartIdx = charts.findIndex(chart => chart.topic === action.topic && chart.dotPath === action.dotPath)

app/src/reducers/ConnectionManager.ts

@@ -6,12 +6,14 @@ export interface ConnectionManagerState {
   connections: { [s: string]: ConnectionOptions }
   selected?: string
   showAdvancedSettings: boolean
+  showCertificateSettings: boolean
 }
 
 const initialState: ConnectionManagerState = {
   connections: {},
   selected: undefined,
   showAdvancedSettings: false,
+  showCertificateSettings: false,
 }
 
 export type Action =
@@ -21,6 +23,7 @@ export type Action =
   | AddConnection
   | DeleteConnection
   | ToggleAdvancedSettings
+  | ToggleCertificateSettings
   | DeleteSubscription
   | AddSubscription
 
@@ -31,6 +34,7 @@ export enum ActionTypes {
   CONNECTION_MANAGER_ADD_CONNECTION = 'CONNECTION_MANAGER_ADD_CONNECTION',
   CONNECTION_MANAGER_DELETE_CONNECTION = 'CONNECTION_MANAGER_DELETE_CONNECTION',
   CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS = 'CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS',
+  CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS = 'CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS',
   CONNECTION_MANAGER_ADD_SUBSCRIPTION = 'CONNECTION_MANAGER_ADD_SUBSCRIPTION',
   CONNECTION_MANAGER_DELETE_SUBSCRIPTION = 'CONNECTION_MANAGER_DELETE_SUBSCRIPTION',
 }
@@ -77,6 +81,10 @@ export interface ToggleAdvancedSettings {
   type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS
 }
 
+export interface ToggleCertificateSettings {
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS
+}
+
 export const connectionManagerReducer = createReducer(initialState, {
   CONNECTION_MANAGER_SET_CONNECTIONS: setConnections,
   CONNECTION_MANAGER_SELECT_CONNECTION: selectConnection,
@@ -84,6 +92,7 @@ export const connectionManagerReducer = createReducer(initialState, {
   CONNECTION_MANAGER_ADD_CONNECTION: addConnection,
   CONNECTION_MANAGER_DELETE_CONNECTION: deleteConnection,
   CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS: toggleAdvancedSettings,
+  CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS: toggleCertificateSettings,
   CONNECTION_MANAGER_DELETE_SUBSCRIPTION: deleteSubscription,
   CONNECTION_MANAGER_ADD_SUBSCRIPTION: addSubscription,
 })
@@ -109,6 +118,16 @@ function toggleAdvancedSettings(state: ConnectionManagerState, action: ToggleAdv
   }
 }
 
+function toggleCertificateSettings(
+  state: ConnectionManagerState,
+  action: ToggleCertificateSettings
+): ConnectionManagerState {
+  return {
+    ...state,
+    showCertificateSettings: !state.showCertificateSettings,
+  }
+}
+
 function addConnection(state: ConnectionManagerState, action: AddConnection): ConnectionManagerState {
   return {
     ...state,

app/src/utils/bugtracking.ts

@@ -1,4 +1,4 @@
-import { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 
-const telemetry = electronRendererTelementry
-electronRendererTelementry.registerErrorHandler()
+const telemetry = electronRendererTelemetry
+electronRendererTelemetry.registerErrorHandler()

app/src/utils/tracking.ts

@@ -1,18 +1,18 @@
-import { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 
 // Used to determine long-time-stability and memory leaks
 function trackProcessStatistics() {
   setInterval(() => {
     try {
-      electronRendererTelementry.trackCustomEvent({
+      electronRendererTelemetry.trackCustomEvent({
         name: 'heapStatistics',
         payload: process.getHeapStatistics(),
       })
-      electronRendererTelementry.trackCustomEvent({
+      electronRendererTelemetry.trackCustomEvent({
         name: 'cpuUsage',
         payload: process.getCPUUsage(),
       })
-      electronRendererTelementry.trackCustomEvent({
+      electronRendererTelemetry.trackCustomEvent({
         name: 'runningSince',
         payload: performance.now(),
       })
@@ -30,6 +30,6 @@ export function trackEvent(name: string) {
   }
   const blacklist = ['CONNECTION_SET_HEALTH']
   if (blacklist.indexOf(name) === -1) {
-    electronRendererTelementry.trackEvent(name)
+    electronRendererTelemetry.trackEvent(name)
   }
 }

app/yarn.lock

@@ -2130,7 +2130,7 @@ ejs@^2.6.1:
 
 "electron-telemetry@git+https://github.com/thomasnordquist/electron-telemetry.git#dist":
   version "1.0.0"
-  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#3d6c0c5e3fd9d8101dcb7a0435256572ed58b2b6"
+  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#78b140426a31fe6fec75c7fe36daa130445af191"
   dependencies:
     axios "^0.18.0"
     pako "^1.0.8"

backend/src/DataSource/MqttSource.ts

@@ -14,6 +14,8 @@ export interface MqttOptions {
   clientId?: string
   subscriptions: Array<string>
   certificateAuthority?: string
+  clientCertificate?: string
+  clientKey?: string
 }
 
 export class MqttSource implements DataSource<MqttOptions> {
@@ -44,8 +46,11 @@ export class MqttSource implements DataSource<MqttOptions> {
       username: options.username,
       password: options.password,
       clientId: options.clientId,
+      servername: options.tls ? url.hostname : undefined,
       ca: options.certificateAuthority ? Buffer.from(options.certificateAuthority, 'base64') : undefined,
-    })
+      cert: options.clientCertificate ? Buffer.from(options.clientCertificate, 'base64') : undefined,
+      key: options.clientKey ? Buffer.from(options.clientKey, 'base64') : undefined,
+    } as any)
 
     this.client = client
 

backend/src/Model/spec/Edge.spec.ts

@@ -1,8 +1,6 @@
-import 'mocha'
-
-import { Edge, TreeNode, TreeNodeFactory } from '../'
-
+import { Edge, TreeNodeFactory } from '../'
 import { expect } from 'chai'
+import 'mocha'
 
 describe('Edge', () => {
   it('should contain a name', () => {
@@ -10,7 +8,7 @@ describe('Edge', () => {
     expect(e.name).to.equal('foo')
   })
 
-  it('firstEdge should retireve the first edge', () => {
+  it('firstEdge should retrieve the first edge', () => {
     const topics = 'foo/bar/baz'.split('/')
     const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
     const bazEdge = leaf.sourceEdge

backend/src/Model/spec/EventDispatcher.spec.ts

@@ -20,9 +20,9 @@ describe('EventDispatcher', async () => {
   it('should unsubscribe', async function() {
     const dispatcher = new EventDispatcher<string, string>()
     this.timeout(300)
-    let incrementee = 0
+    let callbackCounter = 0
     const callback = (msg: any) => {
-      incrementee += 1
+      callbackCounter += 1
     }
 
     dispatcher.subscribe(callback)
@@ -36,6 +36,6 @@ describe('EventDispatcher', async () => {
     // should not cause any increment
     dispatcher.dispatch('hello')
 
-    expect(incrementee).to.eq(1)
+    expect(callbackCounter).to.eq(1)
   })
 })

backend/src/index.ts

@@ -62,17 +62,17 @@ export class ConnectionManager {
     })
   }
 
-  public removeConnection(conenctionId: string) {
-    const connection = this.connections[conenctionId]
+  public removeConnection(connectionId: string) {
+    const connection = this.connections[connectionId]
     if (connection) {
-      backendEvents.unsubscribeAll(makePublishEvent(conenctionId))
+      backendEvents.unsubscribeAll(makePublishEvent(connectionId))
       connection.disconnect()
-      delete this.connections[conenctionId]
+      delete this.connections[connectionId]
       connection.stateMachine.onUpdate.removeAllListeners()
     }
   }
 
   public closeAllConnections() {
-    Object.keys(this.connections).forEach(conenctionId => this.removeConnection(conenctionId))
+    Object.keys(this.connections).forEach(connectionId => this.removeConnection(connectionId))
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.3.0-alpha",
+  "version": "0.3.1-alpha-sni",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -10,9 +10,10 @@
     "dev": "npm-run-all --parallel dev:*",
     "dev:app": "cd app && npm run dev",
     "dev:electron": "tsc && electron . --development",
-    "lint": "yarn run lint:prettier && yarn run lint:tslint",
+    "lint": "npm-run-all --parallel lint:prettier lint:tslint lint:spellcheck",
     "lint:prettier": "prettier --check \"**/*.ts{x,}\"",
-    "lint:tslint": "node_modules/.bin/tslint -p ./",
+    "lint:tslint": "tslint -p ./",
+    "lint:spellcheck": "cspell -e ./build -e \"node_modules\" \"**/*.ts{x,}\"",
     "build": "tsc && cd app && yarn run build && cd ..",
     "test-backend": "cd backend && yarn run test && cd ..",
     "prepare-release": "ts-node scripts/prepare-release.ts",
@@ -46,14 +47,14 @@
       "identityName": "51031thomas.nordquist.MQTT-Explorer",
       "publisherDisplayName": "Thomas Nordquist",
       "publisher": "CN=0A6DE643-4AA2-4FF2-9729-6935C9ED8C13",
-      "backgroundColor": "transparent"
+      "backgroundColor": "transparent",
+      "showNameOnTiles": true
     },
     "directories": {
       "app": "./",
       "buildResources": "res",
       "output": "build"
     },
-    "afterAllArtifactBuild": "./dist/scripts/afterAllArtifactBuild.js",
     "afterPack": "./dist/scripts/afterPack.js"
   },
   "author": "Thomas Nordquist",
@@ -73,12 +74,13 @@
     "builder-util-runtime": "^8.2.5",
     "chai": "^4.2.0",
     "cspell": "^4.0.23",
-    "electron": "5",
-    "electron-builder": "^20.38.5",
+    "electron": "5.0.4",
+    "electron-builder": "20.44.1",
     "fs-extra": "^8.0.1",
     "mime": "^2.4.0",
     "mocha": "^6.1.4",
     "mustache": "^3.0.1",
+    "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
     "prettier": "1.18.2",
     "redux-thunk": "^2.3.0",

scripts/afterAllArtifactBuild.ts

@@ -1,24 +0,0 @@
-import * as fs from 'fs-extra'
-import * as path from 'path'
-import { chdir } from 'process'
-import { exec } from './util'
-
-export default async function(info: any) {
-  for (const snapFile of info.artifactPaths) {
-    if (/\.snap$/.test(snapFile)) {
-      const originalDir = __dirname
-      const dirname = path.dirname(snapFile)
-      chdir(dirname)
-
-      await exec('sudo', ['unsquashfs', snapFile])
-      await exec('sudo', ['rm', snapFile])
-      await exec('sudo', ['chmod', '-R', 'g-s', 'squashfs-root'])
-
-      // Add command line argument to disable the sandbox
-      await exec('sudo', ['snap', 'run', 'snapcraft', 'pack', 'squashfs-root', '--output', snapFile])
-      await exec('sudo', ['rm', '-rf', 'squashfs-root'])
-
-      chdir(originalDir)
-    }
-  }
-}

src/spec/demoVideo.ts

@@ -12,7 +12,6 @@ import { disconnect } from './scenarios/disconnect'
 import { publishTopic } from './scenarios/publishTopic'
 import { SceneBuilder } from './SceneBuilder'
 import { showAdvancedConnectionSettings } from './scenarios/showAdvancedConnectionSettings'
-import { showJsonFormatting } from './scenarios/showJsonFormatting'
 import { showJsonPreview } from './scenarios/showJsonPreview'
 import { showMenu } from './scenarios/showMenu'
 import { showNumericPlot } from './scenarios/showNumericPlot'
@@ -59,18 +58,11 @@ async function doStuff() {
   const scenes = new SceneBuilder()
   await scenes.record('connect', async () => {
     await connectTo('127.0.0.1', browser)
-    await sleep(2000)
-  })
-
-  await scenes.record('topic_updates', async () => {
-    await showText('Topic overview', 1000, browser, 'top')
-    await sleep(1000)
-    await showText('Indicate topic updates', 1000, browser, 'middle')
     await sleep(1000)
   })
 
   await scenes.record('numeric_plots', async () => {
-    await showText('Plot topic history', 2000, browser)
+    await showText('Plot topic history', 1500, browser)
     await showNumericPlot(browser)
     await sleep(2000)
   })
@@ -87,20 +79,14 @@ async function doStuff() {
   })
 
   await scenes.record('publish_topic', async () => {
-    await showText('Publish topics', 2000, browser, 'top')
+    await showText('Publish topics', 1500, browser, 'top')
     await clickOnHistory(browser)
     await publishTopic(browser)
     await sleep(1000)
   })
 
-  await scenes.record('json_formatting_publish', async () => {
-    await showText('Write JSON with ease', 2000, browser, 'top')
-    await showJsonFormatting(browser)
-    await sleep(1000)
-  })
-
   await scenes.record('clipboard', async () => {
-    await showText('Copy to Clipboard', 2000, browser)
+    await showText('Copy to Clipboard', 1500, browser)
     await copyTopicToClipboard(browser)
     await hideText(browser)
     await copyValueToClipboard(browser)
@@ -119,25 +105,25 @@ async function doStuff() {
 
   await scenes.record('delete_retained_topics', async () => {
     await hideText(browser)
-    await showText('Delete retained topics', 0, browser)
+    await showText('Delete retained topics', 5000, browser)
     await clearOldTopics(browser)
     await hideText(browser)
   })
 
   await scenes.record('settings', async () => {
-    await showText('Display Options', 2000, browser)
+    await showText('Settings', 1500, browser)
     await showMenu(browser)
   })
 
   await scenes.record('customize_subscriptions', async () => {
     await sleep(2000)
     await disconnect(browser)
-    await showText('Customize Subscriptions', 1000, browser, 'top')
+    await showText('Customize Subscriptions', 1500, browser, 'top')
     await showAdvancedConnectionSettings(browser)
   })
 
   await scenes.record('keyboard_shortcuts', async () => {
-    await showText('Keyboard shortcuts', 1750, browser, 'middle')
+    await showText('Keyboard shortcuts', 1500, browser, 'middle')
     await sleep(1750)
     await showZoomLevel(browser)
   })

src/spec/mock-mqtt.ts

@@ -12,8 +12,8 @@ function startServer(): Promise<mqtt.MqttClient> {
 function connectMqtt(): Promise<mqtt.MqttClient> {
   return new Promise(resolve => {
     const client = mqtt.connect('mqtt://127.0.0.1:1883', {
-      username: 'thomas',
-      password: 'bierbier',
+      username: '',
+      password: '',
     })
     client.once('connect', () => {
       resolve(client)
@@ -21,8 +21,8 @@ function connectMqtt(): Promise<mqtt.MqttClient> {
   })
 }
 
-function temperature(base = 18, sineCoefficient = 2, offset = 0) {
-  const temp = base + Math.sin(Date.now() / 1000 / 5 + offset) * sineCoefficient + Math.random()
+function temperature(base = 18, sineCoefficient = 2, offset = 0, speed = 1) {
+  const temp = base + Math.sin((Date.now() * speed) / 1000 / 5 + offset) * sineCoefficient + Math.random()
 
   return String(Math.round(temp * 100) / 100)
 }
@@ -52,7 +52,9 @@ function generateData(client: mqtt.MqttClient) {
     retain: true,
     qos: 0,
   })
-  intervals.push(setInterval(() => client.publish('livingroom/temperature', temperature()), 1000))
+  intervals.push(
+    setInterval(() => client.publish('livingroom/temperature', temperature(), { retain: true, qos: 0 }), 1000)
+  )
   intervals.push(setInterval(() => client.publish('livingroom/humidity', temperature(60, -2, 0)), 1000))
 
   client.publish('livingroom/lamp-1/state', 'on', { retain: true, qos: 0 })
@@ -70,19 +72,40 @@ function generateData(client: mqtt.MqttClient) {
   client.subscribe('kitchen/lamp/set')
   client.on('message', (topic, payload) => {
     if (topic === 'kitchen/lamp/set') {
-      setTimeout(
-        () =>
-          client.publish('kitchen/lamp/state', payload, {
+      setTimeout(() => {
+        try {
+          client.publish('kitchen/lamp/state', JSON.parse(payload.toString()).state, {
             retain: true,
             qos: 0,
-          }),
-        500
-      )
+          })
+        } catch (error) {
+          console.error(error)
+        }
+      }, 500)
     }
   })
 
-  intervals.push(setInterval(() => client.publish('kitchen/temperature', temperature()), 1500))
-  intervals.push(setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0)), 1800))
+  const coffeeMaker = {
+    heater: 'on',
+    temperature: 92.5,
+    waterLevel: 0.5,
+    update: new Date(),
+  }
+  intervals.push(
+    setInterval(() => {
+      const newTemp = parseFloat(temperature(90.3, -5, 0, 3))
+      coffeeMaker.heater = newTemp > coffeeMaker.temperature ? 'on' : 'off'
+      coffeeMaker.temperature = newTemp
+      client.publish('kitchen/coffee_maker', JSON.stringify(coffeeMaker), { retain: true, qos: 2 })
+    }, 1500)
+  )
+
+  intervals.push(
+    setInterval(() => client.publish('kitchen/temperature', temperature(), { retain: true, qos: 0 }), 1500)
+  )
+  intervals.push(
+    setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0), { retain: true, qos: 0 }), 1800)
+  )
 
   client.publish('garden/pump/state', 'off', { retain: true, qos: 0 })
   client.publish('garden/water/level', '70%', { retain: true, qos: 0 })

src/spec/scenarios/connect.ts

@@ -1,10 +1,8 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, writeTextToInput } from '../util'
+import { clickOn, setTextInInput } from '../util'
 
 export async function connectTo(host: string, browser: Browser) {
-  await writeTextToInput('Host', host, browser)
-  await writeTextToInput('Username', 'thomas', browser, false)
-  await writeTextToInput('Password', 'bierbier', browser, false)
+  await setTextInInput('Host', host, browser)
 
   await browser.saveScreenshot('screen1.png')
 

src/spec/scenarios/publishTopic.ts

@@ -3,7 +3,7 @@ import {
   clickOn,
   sleep,
   writeText,
-  delteTextWithBackspaces,
+  deleteTextWithBackspaces,
   expandTopic,
   moveToCenterOfElement,
   showText,
@@ -13,14 +13,15 @@ export async function publishTopic(browser: Browser) {
   await expandTopic('kitchen/lamp/state', browser)
   const topicInput = await browser.$('//textarea[contains(text(),"kitchen/lamp/state")][1]')
   await clickOn(topicInput, browser)
-  await delteTextWithBackspaces(topicInput, browser, 120, 5)
+  await deleteTextWithBackspaces(topicInput, browser, 120, 5)
   await writeText('set', browser, 300)
 
   const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
-  await payloadInput.setValue('o')
-  await sleep(300)
-  await payloadInput.setValue('n')
-  await sleep(700)
+  await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
+
+  await sleep(500)
+  const formatJsonButton = await browser.$('#sidebar-publish-format-json')
+  await clickOn(formatJsonButton, browser)
 
   const publishButton = await browser.$('#publish-button')
   await moveToCenterOfElement(publishButton, browser)
@@ -28,4 +29,15 @@ export async function publishTopic(browser: Browser) {
   await sleep(500)
 
   await clickOn(publishButton, browser)
+
+  const sidebarDrawer = await browser.$('#Sidebar')
+  await sidebarDrawer.scrollIntoView()
+}
+
+async function writeTextPayload(payloadInput: any, text: string) {
+  const chars = text.split('')
+  for (const char of chars) {
+    await payloadInput.setValue(char)
+    await sleep(10)
+  }
 }

src/spec/scenarios/searchTree.ts

@@ -1,5 +1,5 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, delteTextWithBackspaces, showText, sleep, writeText } from '../util'
+import { clickOn, deleteTextWithBackspaces, showText, sleep, writeText } from '../util'
 
 export async function searchTree(text: string, browser: Browser) {
   const searchField = await browser.$('//input[contains(@placeholder, "Search")]')
@@ -11,5 +11,5 @@ export async function searchTree(text: string, browser: Browser) {
 export async function clearSearch(browser: Browser) {
   const searchField = await browser.$('//input[contains(@placeholder, "Search")]')
   await clickOn(searchField, browser, 1)
-  await delteTextWithBackspaces(searchField, browser, 100)
+  await deleteTextWithBackspaces(searchField, browser, 100)
 }

src/spec/scenarios/showAdvancedConnectionSettings.ts

@@ -1,15 +1,15 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, sleep, writeTextToInput } from '../util'
+import { clickOn, sleep, setTextInInput } from '../util'
 
 export async function showAdvancedConnectionSettings(browser: Browser) {
   const advancedSettingsButton = await browser.$('//button/span[contains(text(),"Advanced")]')
   const addButton = await browser.$('//button/span[contains(text(),"Add")]')
 
   await clickOn(advancedSettingsButton, browser)
-  await writeTextToInput('Subscription', 'garden/#', browser, false)
+  await setTextInInput('Subscription', 'garden/#', browser)
   await clickOn(addButton, browser)
 
-  await writeTextToInput('Subscription', 'livingroom/#', browser, false)
+  await setTextInInput('Subscription', 'livingroom/#', browser)
   await clickOn(addButton, browser)
 
   await deleteFirstSubscribedTopic(browser)

src/spec/scenarios/showJsonFormatting.ts

@@ -1,30 +0,0 @@
-import { Browser, Element } from 'webdriverio'
-import { clickOn, sleep } from '../util'
-
-export async function showJsonFormatting(browser: Browser) {
-  const editor = await browser.$('//*[contains(@class, "ace_editor")]')
-  const formatJsonButton = await browser.$('#sidebar-publish-format-json')
-  const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
-  await clickOn(editor, browser)
-  await browser.keys(['\uE009', 'A']) // Ctrl + A
-  await sleep(200)
-  await browser.keys(['\uE000']) // End keyboard modifier
-  await sleep(200)
-  await browser.keys(['\uE003']) // Backspace
-  await sleep(200)
-  await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
-  await sleep(300)
-  await clickOn(formatJsonButton, browser)
-  await sleep(1200)
-
-  const sidebarDrawer = await browser.$('#Sidebar')
-  await sidebarDrawer.scrollIntoView()
-}
-
-async function writeTextPayload(payloadInput: any, text: string) {
-  const chars = text.split('')
-  for (const char of chars) {
-    await payloadInput.setValue(char)
-    await sleep(10)
-  }
-}

src/spec/scenarios/showNumericPlot.ts

@@ -1,7 +1,39 @@
 import { Browser, Element } from 'webdriverio'
-import { clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
+import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
 
 export async function showNumericPlot(browser: Browser) {
+  await expandTopic('kitchen/coffee_maker', browser)
+  let heater = await valuePreviewGuttersShowChartIcon('heater', browser)
+  await moveToCenterOfElement(heater, browser)
+  await sleep(1000)
+  // Refocus
+  heater = await valuePreviewGuttersShowChartIcon('heater', browser)
+  await heater.click()
+
+  let temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
+  await moveToCenterOfElement(temperature, browser)
+  temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
+  await temperature.click()
+
+  await sleep(1000)
+  await chartSettings('heater', browser)
+  await clickOnMenuPoint('Curve interpolation', browser)
+  await clickOnMenuPoint('step after', browser)
+  await clickAway('heater', browser)
+
+  await chartSettings('temperature', browser)
+  await clickOnMenuPoint('Curve interpolation', browser)
+  await clickOnMenuPoint('cubic basis spline', browser)
+  await clickAway('temperature', browser)
+  await sleep(2500)
+
+  await browser.saveScreenshot('screen_chart_panel.png')
+
+  await removeChart('heater', browser)
+  await sleep(750)
+  await removeChart('temperature', browser)
+  await sleep(750)
+
   await expandTopic('livingroom/temperature', browser)
 
   await clickOnHistory(browser)
@@ -9,3 +41,36 @@ export async function showNumericPlot(browser: Browser) {
   await sleep(1000)
   await expandTopic('livingroom/humidity', browser)
 }
+
+async function valuePreviewGuttersShowChartIcon(name: string, browser: Browser) {
+  for (let retries = 0; retries < 2; retries += 1) {
+    try {
+      return await browser.$(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
+    } catch {
+      // ignore
+    }
+  }
+  return browser.$(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
+}
+
+async function chartSettings(name: string, browser: Browser) {
+  const settings = await browser.$(`//*[contains(@data-test-type, "ChartSettings")][contains(@data-test, "${name}")]`)
+  return clickOn(settings, browser)
+}
+
+async function clickAway(name: string, browser: Browser) {
+  const settings = await browser.$(`//*[contains(@data-test-type, "ChartPaper")][contains(@data-test, "${name}")]`)
+  await moveToCenterOfElement(settings, browser)
+  const awayClickElement = await browser.$('//div[contains(@role, "presentation")]')
+  return awayClickElement.click()
+}
+
+async function removeChart(name: string, browser: Browser) {
+  const remove = await browser.$(`//*[contains(@data-test-type, "RemoveChart")][contains(@data-test, "${name}")]`)
+  return clickOn(remove, browser)
+}
+
+async function clickOnMenuPoint(name: string, browser: Browser) {
+  const item = await browser.$(`//li[contains(text(), "${name}")]`)
+  return clickOn(item, browser)
+}

src/spec/util/index.ts

@@ -29,7 +29,7 @@ export async function writeText(text: string, browser: Browser, delay = 0) {
   }
 }
 
-export async function delteTextWithBackspaces(element: Element, browser: Browser, delay = 0, count = 0) {
+export async function deleteTextWithBackspaces(element: Element, browser: Browser, delay = 0, count = 0) {
   const length = count > 0 ? count : (await element.getValue()).length
   for (let i = 0; i < length; i += 1) {
     await browser.keys(['Backspace'])
@@ -37,13 +37,11 @@ export async function delteTextWithBackspaces(element: Element, browser: Browser
   }
 }
 
-export async function writeTextToInput(name: string, text: string, browser: Browser, wait: boolean = true) {
+export async function setTextInInput(name: string, text: string, browser: Browser) {
   const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
   await clickOn(input, browser, 1)
-  wait && (await sleep(500))
-  input.clearValue()
-  wait && (await sleep(300))
-  await writeText(text, browser)
+  await input.clearValue()
+  await browser.keys(text)
 }
 
 export async function moveToCenterOfElement(element: Element, browser: Browser) {