Preview connection URI

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -5,7 +5,7 @@ import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import {
   Modal,
@@ -34,7 +34,8 @@ class ConnectionSetup extends React.Component<Props, {}> {
   }
 
   public render() {
-    const { classes, visible } = this.props
+    const { classes, visible, connection } = this.props
+    const mqttConnection = connection && toMqttConnection(connection)
     return (
       <div>
         <Modal open={visible} disableAutoFocus={true}>
@@ -43,6 +44,9 @@ class ConnectionSetup extends React.Component<Props, {}> {
             <div className={classes.right}>
               <Toolbar>
                 <Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
+                <Typography className={classes.connectionUri}>
+                  {mqttConnection && mqttConnection.url}
+                </Typography>
               </Toolbar>
               {this.renderSettings()}
             </div>
@@ -70,6 +74,7 @@ class ConnectionSetup extends React.Component<Props, {}> {
 const styles = (theme: Theme) => ({
   title: {
     color: theme.palette.text.primary,
+    whiteSpace: 'nowrap' as 'nowrap',
   },
   root: {
     margin: '13vw auto 0 auto',
@@ -94,6 +99,15 @@ const styles = (theme: Theme) => ({
     padding: `${2 * theme.spacing.unit}px`,
     flex: 10,
   },
+  connectionUri: {
+    width: '27em',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    color: theme.palette.text.hint,
+    fontSize: '0.9em',
+    marginLeft: '24px',
+  },
 })
 
 const mapStateToProps = (state: AppState) => {

app/src/components/ConnectionSetup/ProfileList.tsx

@@ -4,12 +4,11 @@ import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import {
   List,
   ListItem,
-  ListItemText,
   ListSubheader,
   Typography,
 } from '@material-ui/core'
@@ -63,21 +62,44 @@ interface ConnectionItemProps {
   connection: ConnectionOptions,
   actions: any,
   selected: boolean,
+  classes: any
 }
 
-const connectionItemRenderer = (props: ConnectionItemProps) => {
+const connectionItemStyle = (theme: Theme) => ({
+  name: {
+    width: '100%',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+  },
+  details: {
+    width: '100%',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    color: theme.palette.text.hint,
+    fontSize: '0.7em',
+  },
+})
+
+const connectionItemRenderer = withStyles(connectionItemStyle)((props: ConnectionItemProps) => {
+  const connection = props.connection.host && toMqttConnection(props.connection)
   return (
     <ListItem
       button={true}
       selected={props.selected}
+      style={{ display: 'block' }}
       onClick={() => props.actions.selectConnection(props.connection.id)}
     >
-      <Typography style={{ width: '100%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden'}}>
+      <Typography className={props.classes.name}>
         {props.connection.name || 'mqtt broker'}
       </Typography>
+      <Typography className={props.classes.details}>
+        { connection && connection.url }
+      </Typography>
     </ListItem>
   )
-}
+})
 
 const ConnectionItem = connect(null, mapDispatchToProps)(connectionItemRenderer)
 

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { AppState } from '../../reducers'
-
 import TreeNode from './TreeNode'
-import { connect } from 'react-redux'
 import { TopicOrder } from '../../reducers/Settings'
 import { Theme, withStyles } from '@material-ui/core'
 import { TopicViewModel } from '../../TopicViewModel'

app/src/model/ConnectionOptions.ts

@@ -6,7 +6,7 @@ export interface ConnectionOptions {
   type: 'mqtt'
   id: string
   host: string
-  protocol: 'mqtt' | 'ws' | 'wss'
+  protocol: 'mqtt' | 'ws'
   basePath?: string
   port: number
   name: string