Add connection profiles (#63)
* Add connection setup * Refactor * Fix lifecycle
This commit is contained in:
Thomas Nordquist
32
app/src/components/ConnectionSetup/AddButton.tsx
Normal file
32
app/src/components/ConnectionSetup/AddButton.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import * as React from 'react'
|
||||
import Add from '@material-ui/icons/Add'
|
||||
import { Fab } from '@material-ui/core'
|
||||
import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const styles = (theme: Theme) => ({
|
||||
addButton: {
|
||||
height: `${theme.spacing.unit * 4}px`,
|
||||
width: `${theme.spacing.unit * 4}px`,
|
||||
minHeight: '0',
|
||||
},
|
||||
addIcon: {
|
||||
height: `${theme.spacing.unit * 2}px`,
|
||||
},
|
||||
})
|
||||
|
||||
export const AddButton = withStyles(styles)((props: {
|
||||
classes: any,
|
||||
action: any,
|
||||
}) => {
|
||||
return (
|
||||
<Fab
|
||||
size="small"
|
||||
color="secondary"
|
||||
aria-label="Add"
|
||||
className={props.classes.addButton}
|
||||
onClick={props.action}
|
||||
>
|
||||
<Add className={props.classes.addIcon} />
|
||||
</Fab>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,154 @@
|
||||
import * as React from 'react'
|
||||
import Add from '@material-ui/icons/Add'
|
||||
import Delete from '@material-ui/icons/Delete'
|
||||
import Undo from '@material-ui/icons/Undo'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { connectionManagerActions } from '../../actions'
|
||||
import { ConnectionOptions } from '../../model/ConnectionOptions'
|
||||
import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import {
|
||||
Button,
|
||||
Grid,
|
||||
IconButton,
|
||||
TextField,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
} from '@material-ui/core'
|
||||
|
||||
interface Props {
|
||||
connection: ConnectionOptions
|
||||
classes: any
|
||||
managerActions: typeof connectionManagerActions
|
||||
}
|
||||
|
||||
interface State {
|
||||
subscription: string
|
||||
}
|
||||
|
||||
class ConnectionSettings 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,
|
||||
})
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<div>
|
||||
<form className={classes.container} noValidate={true} autoComplete="off">
|
||||
<Grid container={true} spacing={24}>
|
||||
<Grid item={true} xs={10} className={classes.gridPadding}>
|
||||
<TextField
|
||||
className={classes.fullWidth}
|
||||
label="Subscription"
|
||||
margin="normal"
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => this.setState({ subscription: event.target.value })}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={2} className={classes.gridPadding}>
|
||||
<Button
|
||||
className={classes.button}
|
||||
color="secondary"
|
||||
onClick={() => this.props.managerActions.addSubscription(this.state.subscription, this.props.connection.id)}
|
||||
variant="contained"
|
||||
>
|
||||
<Add /> Add
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item={true} xs={12} style={{ padding: 0 }}>
|
||||
<List
|
||||
className={classes.topicList}
|
||||
component="nav"
|
||||
>
|
||||
<div className={this.props.classes.list}>
|
||||
{this.renderSubscriptions()}
|
||||
</div>
|
||||
</List>
|
||||
</Grid>
|
||||
<Grid item={true} xs={9} className={classes.gridPadding}>
|
||||
<TextField
|
||||
className={classes.fullWidth}
|
||||
label="MQTT Client ID"
|
||||
margin="normal"
|
||||
onChange={this.handleChange('clientId')}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={3} className={classes.gridPadding}>
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.button}
|
||||
onClick={this.props.managerActions.toggleAdvancedSettings}
|
||||
>
|
||||
<Undo /> Back
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private renderSubscriptions() {
|
||||
const connection = this.props.connection
|
||||
return connection.subscriptions.map(subscription => (
|
||||
<Subscription
|
||||
deleteAction={() => this.props.managerActions.deleteSubscription(subscription, connection.id)}
|
||||
subscription={subscription}
|
||||
key={subscription}
|
||||
/>
|
||||
))
|
||||
}
|
||||
}
|
||||
|
||||
const Subscription = (props: {
|
||||
subscription: string,
|
||||
deleteAction: any,
|
||||
}) => {
|
||||
return (
|
||||
<ListItem style={{ padding: '0 0 0 8px' }}>
|
||||
<ListItemText>
|
||||
<IconButton onClick={props.deleteAction} style={{ padding: '6px' }}>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
{props.subscription}</ListItemText>
|
||||
</ListItem>
|
||||
)
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
managerActions: bindActionCreators(connectionManagerActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
const styles: StyleRulesCallback<string> = (theme: Theme) => {
|
||||
return {
|
||||
fullWidth: {
|
||||
width: '100%',
|
||||
},
|
||||
gridPadding: {
|
||||
padding: '0 12px !important',
|
||||
},
|
||||
topicList: {
|
||||
height: '180px',
|
||||
overflowY: 'scroll' as 'scroll',
|
||||
margin: '8px 16px',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
button: {
|
||||
marginTop: `${theme.spacing.unit * 3 + 2}px`,
|
||||
float: 'right',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
|
||||
@@ -1,395 +0,0 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Grid,
|
||||
IconButton,
|
||||
Input,
|
||||
InputAdornment,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Modal,
|
||||
Paper,
|
||||
Switch,
|
||||
TextField,
|
||||
Toolbar,
|
||||
Typography,
|
||||
} from '@material-ui/core'
|
||||
import { connect } from 'react-redux'
|
||||
import { MqttOptions } from '../../../../backend/src/DataSource'
|
||||
import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import Notification from './Notification'
|
||||
import Visibility from '@material-ui/icons/Visibility'
|
||||
import VisibilityOff from '@material-ui/icons/VisibilityOff'
|
||||
|
||||
const sha1 = require('sha1')
|
||||
import { AppState } from '../../reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connectionActions } from '../../actions'
|
||||
|
||||
interface Props {
|
||||
classes: {[s: string]: string}
|
||||
actions: typeof connectionActions,
|
||||
visible: boolean
|
||||
connected: boolean
|
||||
connecting: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
const protocols = [
|
||||
'mqtt://',
|
||||
'ws://',
|
||||
]
|
||||
|
||||
interface State {
|
||||
showPassword: boolean
|
||||
connectionSettings: ConnectionSettings
|
||||
}
|
||||
|
||||
interface ConnectionSettings {
|
||||
host: string
|
||||
protocol: string
|
||||
port: number
|
||||
tls: boolean
|
||||
certValidation: boolean
|
||||
clientId: string
|
||||
connectionId?: string
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
declare var window: any
|
||||
|
||||
class Connection extends React.Component<Props, State> {
|
||||
private randomClientId: string
|
||||
private defaultConnectionSettings: ConnectionSettings = {
|
||||
host: 'iot.eclipse.org',
|
||||
protocol: protocols[0],
|
||||
port: 1883,
|
||||
tls: false,
|
||||
certValidation: true,
|
||||
clientId: '',
|
||||
username: '',
|
||||
password: '',
|
||||
connectionId: undefined,
|
||||
}
|
||||
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
|
||||
const clientIdSha = sha1(`${Math.random()}`).slice(0, 8)
|
||||
this.randomClientId = `mqtt-explorer-${clientIdSha}`
|
||||
this.state = {
|
||||
connectionSettings: this.loadConnectionSettings(),
|
||||
showPassword: false,
|
||||
}
|
||||
}
|
||||
|
||||
private loadConnectionSettings(): ConnectionSettings {
|
||||
let storedSettings: ConnectionSettings | undefined
|
||||
|
||||
const storedSettingsString = window.localStorage.getItem('connectionSettings')
|
||||
try {
|
||||
storedSettings = storedSettingsString ? JSON.parse(storedSettingsString) : undefined
|
||||
} catch {
|
||||
window.localStorage.setItem('connectionSettings', undefined)
|
||||
}
|
||||
|
||||
return storedSettings || this.defaultConnectionSettings
|
||||
}
|
||||
|
||||
private saveConnectionSettings() {
|
||||
window.localStorage.setItem('connectionSettings', JSON.stringify(this.state.connectionSettings))
|
||||
}
|
||||
|
||||
private handleClickShowPassword = () => {
|
||||
this.setState({ showPassword: !this.state.showPassword })
|
||||
}
|
||||
|
||||
private optionsFromState(): MqttOptions {
|
||||
const protocol = this.state.connectionSettings.protocol === 'tcp://' ? 'mqtt://' : this.state.connectionSettings.protocol
|
||||
const url = `${protocol}${this.state.connectionSettings.host}:${this.state.connectionSettings.port}`
|
||||
|
||||
return {
|
||||
url,
|
||||
username: this.state.connectionSettings.username || undefined,
|
||||
password: this.state.connectionSettings.password || undefined,
|
||||
clientId: this.state.connectionSettings.clientId || this.randomClientId,
|
||||
tls: this.state.connectionSettings.tls,
|
||||
certValidation: this.state.connectionSettings.certValidation,
|
||||
}
|
||||
}
|
||||
|
||||
public static styles: StyleRulesCallback<string> = (theme: Theme) => {
|
||||
return {
|
||||
root: {
|
||||
minWidth: 550,
|
||||
maxWidth: 650,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
margin: '14vh auto auto auto',
|
||||
padding: `${2 * theme.spacing.unit}px`,
|
||||
outline: 'none',
|
||||
},
|
||||
title: {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing.unit * 2,
|
||||
textAlign: 'center',
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
textField: {
|
||||
width: '100%',
|
||||
},
|
||||
switch: {
|
||||
marginTop: `${1 * theme.spacing.unit}px`,
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
},
|
||||
inputFormControl: {
|
||||
marginTop: '16px',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
private handleChange = (name: string) => (event: any) => {
|
||||
this.setState({
|
||||
connectionSettings: {
|
||||
...this.state.connectionSettings,
|
||||
[name]: event.target.value,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { classes } = this.props
|
||||
|
||||
const passwordVisibilityButton = (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Toggle password visibility"
|
||||
onClick={this.handleClickShowPassword}
|
||||
>
|
||||
{this.state.showPassword ? <Visibility /> : <VisibilityOff />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
|
||||
let renderError = null
|
||||
if (this.props.error) {
|
||||
renderError = (
|
||||
<Notification
|
||||
message={this.props.error}
|
||||
onClose={() => { this.props.actions.showError(undefined) }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderError}
|
||||
<Modal open={this.props.visible} disableAutoFocus={true}>
|
||||
<Paper className={classes.root}>
|
||||
<Toolbar>
|
||||
<Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
|
||||
</Toolbar>
|
||||
<form className={classes.container} noValidate={true} autoComplete="off">
|
||||
<Grid container={true} spacing={24}>
|
||||
<Grid item={true} xs={2}>
|
||||
{this.renderProtocols()}
|
||||
</Grid>
|
||||
<Grid item={true} xs={7}>
|
||||
<TextField
|
||||
label="Host"
|
||||
className={classes.textField}
|
||||
value={this.state.connectionSettings.host}
|
||||
onChange={this.handleChange('host')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={3}>
|
||||
<TextField
|
||||
label="Port"
|
||||
className={classes.textField}
|
||||
value={this.state.connectionSettings.port}
|
||||
onChange={this.handleChange('port')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={5}>
|
||||
<TextField
|
||||
label="Username"
|
||||
className={classes.textField}
|
||||
value={this.state.connectionSettings.username}
|
||||
onChange={this.handleChange('username')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={5}>
|
||||
<FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
|
||||
<InputLabel htmlFor="adornment-password">Password</InputLabel>
|
||||
<Input
|
||||
id="adornment-password"
|
||||
type={this.state.showPassword ? 'text' : 'password'}
|
||||
value={this.state.connectionSettings.password}
|
||||
onChange={this.handleChange('password')}
|
||||
endAdornment={passwordVisibilityButton}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item={true} xs={5}>
|
||||
<FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
|
||||
<InputLabel htmlFor="client-id">Client ID</InputLabel>
|
||||
<Input
|
||||
placeholder={this.randomClientId}
|
||||
className={classes.textField}
|
||||
value={this.state.connectionSettings.clientId || ''}
|
||||
onChange={this.handleChange('clientId')}
|
||||
startAdornment={<span />}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item={true} xs={4}>
|
||||
{this.renderCertValidationSwitch()}
|
||||
</Grid>
|
||||
<Grid item={true} xs={3}>
|
||||
{this.renderTlsSwitch()}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<br />
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={() => this.saveConnectionSettings()}>
|
||||
Save
|
||||
</Button>
|
||||
{this.renderConnectButton()}
|
||||
</div>
|
||||
</form>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private renderProtocols() {
|
||||
const { classes } = this.props
|
||||
const protocolItems = protocols.map((value: string) => (
|
||||
<MenuItem key={value} value={value}>
|
||||
{value}
|
||||
</MenuItem>
|
||||
))
|
||||
|
||||
return (
|
||||
<TextField
|
||||
select={true}
|
||||
label="Protocol"
|
||||
className={classes.textField}
|
||||
value={this.state.connectionSettings.protocol}
|
||||
onChange={this.handleChange('protocol')}
|
||||
margin="normal"
|
||||
>
|
||||
{protocolItems}
|
||||
</TextField>
|
||||
)
|
||||
}
|
||||
|
||||
private renderCertValidationSwitch() {
|
||||
const { classes } = this.props
|
||||
const certSwitch = (
|
||||
<Switch
|
||||
checked={this.state.connectionSettings.certValidation}
|
||||
onChange={this.toggleCertValidation}
|
||||
color="primary"
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={classes.switch}>
|
||||
<FormControlLabel
|
||||
control={certSwitch}
|
||||
label="Validate certificate"
|
||||
labelPlacement="bottom"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private toggleCertValidation = () => this.setState({
|
||||
connectionSettings: {
|
||||
...this.state.connectionSettings,
|
||||
certValidation: !this.state.connectionSettings.certValidation,
|
||||
},
|
||||
})
|
||||
|
||||
private renderTlsSwitch() {
|
||||
const { classes } = this.props
|
||||
const tlsSwitch = (
|
||||
<Switch
|
||||
checked={this.state.connectionSettings.tls}
|
||||
onChange={this.toggleTls}
|
||||
color="primary"
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={classes.switch}>
|
||||
<FormControlLabel
|
||||
control={tlsSwitch}
|
||||
label="Encryption (tls)"
|
||||
labelPlacement="bottom"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private toggleTls = () => this.setState({
|
||||
connectionSettings: {
|
||||
...this.state.connectionSettings,
|
||||
tls: !this.state.connectionSettings.tls,
|
||||
},
|
||||
})
|
||||
|
||||
private renderConnectButton() {
|
||||
const { classes, actions } = this.props
|
||||
|
||||
if (this.props.connecting) {
|
||||
return (
|
||||
<Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
|
||||
<CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
|
||||
Connect
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
private onClickConnect = () => {
|
||||
const connectionId = String(sha1(String(Math.random())).slice(0, 8))
|
||||
const options = this.optionsFromState()
|
||||
this.props.actions.connect(options, connectionId)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
visible: !state.connection.connected,
|
||||
connected: state.connection.connected,
|
||||
connecting: state.connection.connecting,
|
||||
error: state.connection.error,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
actions: bindActionCreators(connectionActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles)(Connection))
|
||||
356
app/src/components/ConnectionSetup/ConnectionSettings.tsx
Normal file
356
app/src/components/ConnectionSetup/ConnectionSettings.tsx
Normal file
@@ -0,0 +1,356 @@
|
||||
import * as React from 'react'
|
||||
import Delete from '@material-ui/icons/Delete'
|
||||
import Settings from '@material-ui/icons/Settings'
|
||||
import Notification from './Notification'
|
||||
import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
|
||||
import Save from '@material-ui/icons/Save'
|
||||
import Visibility from '@material-ui/icons/Visibility'
|
||||
import VisibilityOff from '@material-ui/icons/VisibilityOff'
|
||||
import { AppState } from '../../reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { connectionActions, connectionManagerActions } from '../../actions'
|
||||
import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
|
||||
import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Grid,
|
||||
IconButton,
|
||||
Input,
|
||||
InputAdornment,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Switch,
|
||||
TextField,
|
||||
} from '@material-ui/core'
|
||||
|
||||
interface Props {
|
||||
connection: ConnectionOptions
|
||||
classes: {[s: string]: string}
|
||||
actions: typeof connectionActions,
|
||||
managerActions: typeof connectionManagerActions
|
||||
connected: boolean
|
||||
connecting: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
const protocols = [
|
||||
'mqtt',
|
||||
'ws',
|
||||
]
|
||||
|
||||
interface State {
|
||||
showPassword: boolean
|
||||
}
|
||||
|
||||
class ConnectionSettings extends React.Component<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
showPassword: false,
|
||||
}
|
||||
}
|
||||
|
||||
private handleClickShowPassword = () => {
|
||||
this.setState({ showPassword: !this.state.showPassword })
|
||||
}
|
||||
|
||||
private requiresBasePath() {
|
||||
return this.props.connection.protocol !== 'mqtt'
|
||||
}
|
||||
|
||||
private renderBasePathInput() {
|
||||
return (
|
||||
<Grid item={true} xs={4}>
|
||||
<TextField
|
||||
label="Basepath"
|
||||
className={this.props.classes.textField}
|
||||
value={this.props.connection.basePath}
|
||||
onChange={this.handleChange('basePath')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
private handleChange = (name: string) => (event: any) => {
|
||||
if (!this.props.connection) {
|
||||
return
|
||||
}
|
||||
|
||||
this.updateConnection(name, event.target.value)
|
||||
}
|
||||
|
||||
private updateConnection(name: string, value: any) {
|
||||
this.props.managerActions.updateConnection(this.props.connection.id, {
|
||||
[name]: value,
|
||||
})
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { classes, connection } = this.props
|
||||
|
||||
const passwordVisibilityButton = (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Toggle password visibility"
|
||||
onClick={this.handleClickShowPassword}
|
||||
>
|
||||
{this.state.showPassword ? <Visibility /> : <VisibilityOff />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
|
||||
let renderError = null
|
||||
if (this.props.error) {
|
||||
renderError = (
|
||||
<Notification
|
||||
message={this.props.error}
|
||||
onClose={() => { this.props.actions.showError(undefined) }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderError}
|
||||
<form className={classes.container} noValidate={true} autoComplete="off">
|
||||
<Grid container={true} spacing={24}>
|
||||
<Grid item={true} xs={5}>
|
||||
<TextField
|
||||
label="Name"
|
||||
className={classes.textField}
|
||||
value={connection.name}
|
||||
onChange={this.handleChange('name')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={4}>
|
||||
{this.renderCertValidationSwitch()}
|
||||
</Grid>
|
||||
<Grid item={true} xs={3}>
|
||||
{this.renderTlsSwitch()}
|
||||
</Grid>
|
||||
<Grid item={true} xs={2}>
|
||||
{this.renderProtocols()}
|
||||
</Grid>
|
||||
<Grid item={true} xs={7}>
|
||||
<TextField
|
||||
label="Host"
|
||||
className={classes.textField}
|
||||
value={connection.host}
|
||||
onChange={this.handleChange('host')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={3}>
|
||||
<TextField
|
||||
label="Port"
|
||||
className={classes.textField}
|
||||
value={connection.port}
|
||||
onChange={this.handleChange('port')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
{this.requiresBasePath() ? this.renderBasePathInput() : null}
|
||||
<Grid item={true} xs={this.requiresBasePath() ? 4 : 6}>
|
||||
<TextField
|
||||
label="Username"
|
||||
className={classes.textField}
|
||||
value={connection.username}
|
||||
onChange={this.handleChange('username')}
|
||||
margin="normal"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item={true} xs={this.requiresBasePath() ? 4 : 6}>
|
||||
<FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
|
||||
<InputLabel htmlFor="adornment-password">Password</InputLabel>
|
||||
<Input
|
||||
id="adornment-password"
|
||||
type={this.state.showPassword ? 'text' : 'password'}
|
||||
value={connection.password}
|
||||
onChange={this.handleChange('password')}
|
||||
endAdornment={passwordVisibilityButton}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<br />
|
||||
<div>
|
||||
<div style={{ float: 'left' }}>
|
||||
<Button variant="contained" className={classes.button} onClick={() => this.props.managerActions.deleteConnection(this.props.connection.id)}>
|
||||
Delete <Delete />
|
||||
</Button>
|
||||
<Button variant="contained" className={classes.button} onClick={this.props.managerActions.toggleAdvancedSettings}>
|
||||
<Settings /> Advanced
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ float : 'right' }}>
|
||||
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.managerActions.saveConnectionSettings}>
|
||||
<Save /> Save
|
||||
</Button>
|
||||
{this.renderConnectButton()}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private renderProtocols() {
|
||||
const { classes, connection } = this.props
|
||||
|
||||
const protocolItems = protocols.map((value: string) => (
|
||||
<MenuItem key={value} value={value}>
|
||||
{value}://
|
||||
</MenuItem>
|
||||
))
|
||||
|
||||
return (
|
||||
<TextField
|
||||
select={true}
|
||||
label="Protocol"
|
||||
className={classes.textField}
|
||||
value={connection.protocol}
|
||||
onChange={this.updateProtocol}
|
||||
margin="normal"
|
||||
>
|
||||
{protocolItems}
|
||||
</TextField>
|
||||
)
|
||||
}
|
||||
|
||||
private updateProtocol = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.target.value
|
||||
this.updateConnection('protocol', value)
|
||||
if (event.target.value === 'mqtt') {
|
||||
this.updateConnection('basePath', undefined)
|
||||
} else {
|
||||
this.updateConnection('basePath', 'ws')
|
||||
}
|
||||
}
|
||||
|
||||
private renderCertValidationSwitch() {
|
||||
const { classes, connection } = this.props
|
||||
|
||||
const certSwitch = (
|
||||
<Switch
|
||||
checked={connection.certValidation}
|
||||
onChange={this.toggleCertValidation}
|
||||
color="primary"
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={classes.switch}>
|
||||
<FormControlLabel
|
||||
control={certSwitch}
|
||||
label="Validate certificate"
|
||||
labelPlacement="bottom"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private toggleCertValidation = () => {
|
||||
this.props.managerActions.updateConnection(this.props.connection.id, {
|
||||
certValidation: !this.props.connection.certValidation,
|
||||
})
|
||||
}
|
||||
|
||||
private renderTlsSwitch() {
|
||||
const { classes, connection } = this.props
|
||||
|
||||
const tlsSwitch = (
|
||||
<Switch
|
||||
checked={connection.encryption}
|
||||
onChange={this.toggleTls}
|
||||
color="primary"
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={classes.switch}>
|
||||
<FormControlLabel
|
||||
control={tlsSwitch}
|
||||
label="Encryption (tls)"
|
||||
labelPlacement="bottom"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private toggleTls = () => {
|
||||
this.props.managerActions.updateConnection(this.props.connection.id, {
|
||||
encryption: !this.props.connection.encryption,
|
||||
})
|
||||
}
|
||||
|
||||
private renderConnectButton() {
|
||||
const { classes, actions } = this.props
|
||||
|
||||
if (this.props.connecting) {
|
||||
return (
|
||||
<Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
|
||||
<CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
|
||||
<PowerSettingsNew /> Connect
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
private onClickConnect = () => {
|
||||
if (!this.props.connection) {
|
||||
return
|
||||
}
|
||||
|
||||
const mqttOptions = toMqttConnection(this.props.connection)
|
||||
if (mqttOptions) {
|
||||
console.log(mqttOptions)
|
||||
this.props.actions.connect(mqttOptions, this.props.connection.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
connected: state.connection.connected,
|
||||
connecting: state.connection.connecting,
|
||||
error: state.connection.error,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
actions: bindActionCreators(connectionActions, dispatch),
|
||||
managerActions: bindActionCreators(connectionManagerActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
const styles: StyleRulesCallback<string> = (theme: Theme) => {
|
||||
return {
|
||||
textField: {
|
||||
width: '100%',
|
||||
},
|
||||
switch: {
|
||||
marginTop: 0,
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
},
|
||||
inputFormControl: {
|
||||
marginTop: '16px',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
|
||||
111
app/src/components/ConnectionSetup/ConnectionSetup.tsx
Normal file
111
app/src/components/ConnectionSetup/ConnectionSetup.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import * as React from 'react'
|
||||
import ConnectionSettings from './ConnectionSettings'
|
||||
import ProfileList from './ProfileList'
|
||||
import { AppState } from '../../reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { connectionManagerActions } from '../../actions'
|
||||
import { ConnectionOptions } from '../../model/ConnectionOptions'
|
||||
import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
Modal,
|
||||
Paper,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Collapse,
|
||||
} from '@material-ui/core'
|
||||
import AdvancedConnectionSettings from './AdvancedConnectionSettings'
|
||||
|
||||
interface Props {
|
||||
actions: any
|
||||
classes: any
|
||||
connection?: ConnectionOptions
|
||||
visible: boolean
|
||||
showAdvancedSettings: boolean
|
||||
}
|
||||
|
||||
class ConnectionSetup extends React.Component<Props, {}> {
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.props.actions.loadConnectionSettings()
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { classes, visible } = this.props
|
||||
return (
|
||||
<div>
|
||||
<Modal open={visible} disableAutoFocus={true}>
|
||||
<Paper className={classes.root}>
|
||||
<div className={classes.left}><ProfileList /></div>
|
||||
<div className={classes.right}>
|
||||
<Toolbar>
|
||||
<Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
|
||||
</Toolbar>
|
||||
{this.renderSettings()}
|
||||
</div>
|
||||
</Paper>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private renderSettings() {
|
||||
const { connection, showAdvancedSettings } = this.props
|
||||
if (!connection) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Collapse in={!showAdvancedSettings}><ConnectionSettings connection={connection} /></Collapse>
|
||||
<Collapse in={showAdvancedSettings}><AdvancedConnectionSettings connection={connection} /></Collapse>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) => ({
|
||||
title: {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
root: {
|
||||
margin: '13vw 10vw 0 10vw',
|
||||
minWidth: '550px',
|
||||
height: '440px',
|
||||
outline: 'none' as 'none',
|
||||
display: 'flex' as 'flex',
|
||||
},
|
||||
left: {
|
||||
borderRightStyle: 'dotted' as 'dotted',
|
||||
borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
|
||||
paddingTop: `${2 * theme.spacing.unit}px`,
|
||||
flex: 3,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
right: {
|
||||
borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
padding: `${2 * theme.spacing.unit}px`,
|
||||
flex: 10,
|
||||
},
|
||||
})
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
visible: !state.connection.connected,
|
||||
showAdvancedSettings: state.connectionManager.showAdvancedSettings,
|
||||
connection: state.connectionManager.selected ? state.connectionManager.connections[state.connectionManager.selected] : undefined,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
actions: bindActionCreators(connectionManagerActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
|
||||
88
app/src/components/ConnectionSetup/ProfileList.tsx
Normal file
88
app/src/components/ConnectionSetup/ProfileList.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import * as React from 'react'
|
||||
import { AddButton } from './AddButton'
|
||||
import { AppState } from '../../reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { connectionManagerActions } from '../../actions'
|
||||
import { ConnectionOptions } from '../../model/ConnectionOptions'
|
||||
import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
ListSubheader,
|
||||
} from '@material-ui/core'
|
||||
|
||||
interface Props {
|
||||
classes: any
|
||||
selected?: string
|
||||
connections: {[s: string]: ConnectionOptions}
|
||||
actions: any
|
||||
}
|
||||
|
||||
class ProfileList extends React.Component<Props, {}> {
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
private addConnectionButton() {
|
||||
return <AddButton action={this.props.actions.createConnection} />
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<List
|
||||
style={{ height: '100%' }}
|
||||
component="nav"
|
||||
subheader={<ListSubheader component="div">{this.addConnectionButton()} Connections</ListSubheader>}
|
||||
>
|
||||
<div className={this.props.classes.list}>
|
||||
{Object.values(this.props.connections).map(connection => <ConnectionItem connection={connection} key={connection.id} selected={this.props.selected === connection.id} />)}
|
||||
</div>
|
||||
</List>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) => ({
|
||||
list: {
|
||||
marginTop: `${theme.spacing.unit}px`,
|
||||
height: `calc(100% - ${theme.spacing.unit * 6}px)`,
|
||||
overflowY: 'auto' as 'auto',
|
||||
},
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
actions: bindActionCreators(connectionManagerActions, dispatch),
|
||||
}
|
||||
}
|
||||
|
||||
interface ConnectionItemProps {
|
||||
connection: ConnectionOptions,
|
||||
actions: any,
|
||||
selected: boolean,
|
||||
}
|
||||
|
||||
const connectionItemRenderer = (props: ConnectionItemProps) => {
|
||||
return (
|
||||
<ListItem
|
||||
button={true}
|
||||
selected={props.selected}
|
||||
onClick={() => props.actions.selectConnection(props.connection.id)}
|
||||
>
|
||||
<ListItemText primary={props.connection.name} />
|
||||
</ListItem>
|
||||
)
|
||||
}
|
||||
|
||||
const ConnectionItem = connect(null, mapDispatchToProps)(connectionItemRenderer)
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
connections: state.connectionManager.connections,
|
||||
selected: state.connectionManager.selected,
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
|
||||
Reference in New Issue
Block a user