Add connection profiles (#63)
* Add connection setup * Refactor * Fix lifecycle
This commit is contained in:
Thomas Nordquist
@@ -1,19 +1,17 @@
|
||||
import * as React from 'react'
|
||||
import * as q from '../../backend/src/Model'
|
||||
|
||||
import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import { AppState } from './reducers'
|
||||
import Connection from './components/ConnectionSetup/Connection'
|
||||
import ConnectionSetup from './components/ConnectionSetup/ConnectionSetup'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
const Settings = React.lazy(() => import('./components/Settings'))
|
||||
import ErrorBoundary from './ErrorBoundary'
|
||||
import Sidebar from './components/Sidebar/Sidebar'
|
||||
import TitleBar from './components/TitleBar'
|
||||
import Tree from './components/Tree/Tree'
|
||||
import UpdateNotifier from './UpdateNotifier'
|
||||
import { AppState } from './reducers'
|
||||
import { connect } from 'react-redux'
|
||||
import ErrorBoundary from './ErrorBoundary'
|
||||
import { default as SplitPane } from 'react-split-pane'
|
||||
import { Theme, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const Settings = React.lazy(() => import('./components/Settings'))
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
@@ -66,7 +64,7 @@ class App extends React.PureComponent<Props, {}> {
|
||||
</div>
|
||||
</div>
|
||||
<UpdateNotifier />
|
||||
<Connection />
|
||||
<ConnectionSetup />
|
||||
</ErrorBoundary>
|
||||
</div >
|
||||
)
|
||||
|
||||
21
app/src/PersistantStorage.ts
Normal file
21
app/src/PersistantStorage.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
export interface StorageIdentifier<Model> {
|
||||
id: string
|
||||
}
|
||||
|
||||
export interface PersistantStorage {
|
||||
store<Model>(identifier: StorageIdentifier<Model>, data: Model): void
|
||||
load<Model>(identifier: StorageIdentifier<Model>): Model | undefined
|
||||
}
|
||||
|
||||
class LocalStorage implements PersistantStorage {
|
||||
public store<Model>(identifier: StorageIdentifier<Model>, data: Model) {
|
||||
localStorage.setItem(identifier.id, JSON.stringify(data))
|
||||
}
|
||||
|
||||
public load<Model>(identifier: StorageIdentifier<Model>): Model | undefined {
|
||||
const data = localStorage.getItem(identifier.id)
|
||||
return data && JSON.parse(data)
|
||||
}
|
||||
}
|
||||
|
||||
export default new LocalStorage()
|
||||
@@ -1,11 +1,16 @@
|
||||
import { ActionTypes, Action, ConnectionState } from '../reducers/Connection'
|
||||
import { MqttOptions } from '../../../backend/src/DataSource'
|
||||
import { Dispatch } from 'redux'
|
||||
import { rendererEvents, addMqttConnectionEvent, makeConnectionStateEvent, removeConnection } from '../../../events'
|
||||
import { AppState } from '../reducers'
|
||||
import * as q from '../../../backend/src/Model'
|
||||
import { showTree } from './Tree'
|
||||
import * as url from 'url'
|
||||
import { Action, ActionTypes } from '../reducers/Connection'
|
||||
import {
|
||||
addMqttConnectionEvent,
|
||||
makeConnectionStateEvent,
|
||||
removeConnection,
|
||||
rendererEvents,
|
||||
} from '../../../events'
|
||||
import { AppState } from '../reducers'
|
||||
import { Dispatch } from 'redux'
|
||||
import { MqttOptions } from '../../../backend/src/DataSource'
|
||||
import { showTree } from './Tree'
|
||||
import { TopicViewModel } from '../TopicViewModel'
|
||||
|
||||
export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
@@ -15,6 +20,7 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
|
||||
const host = url.parse(options.url).hostname
|
||||
|
||||
rendererEvents.subscribe(event, (dataSourceState) => {
|
||||
console.log(dataSourceState)
|
||||
if (dataSourceState.connected) {
|
||||
const tree = new q.Tree<TopicViewModel>()
|
||||
tree.updateWithConnection(rendererEvents, connectionId)
|
||||
|
||||
108
app/src/actions/ConnectionManager.ts
Normal file
108
app/src/actions/ConnectionManager.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { AppState } from '../reducers'
|
||||
import { ConnectionOptions, createEmptyConnection, defaultConnections } from '../model/ConnectionOptions'
|
||||
import { default as persistantStorage, StorageIdentifier } from '../PersistantStorage'
|
||||
import { Dispatch } from 'redux'
|
||||
import { loadLegacyConnectionSettings } from '../model/LegacyConnectionSettings'
|
||||
import {
|
||||
ActionTypes,
|
||||
Action,
|
||||
} from '../reducers/ConnectionManager'
|
||||
|
||||
const storedConnectionsIdentifier: StorageIdentifier<{[s: string]: ConnectionOptions}> = {
|
||||
id: 'ConnectionManager_connections',
|
||||
}
|
||||
|
||||
export const loadConnectionSettings = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
const connections = persistantStorage.load(storedConnectionsIdentifier)
|
||||
if (!connections) {
|
||||
return
|
||||
}
|
||||
|
||||
dispatch(setConnections(connections))
|
||||
const firstKey = Object.keys(connections)[0]
|
||||
if (firstKey) {
|
||||
dispatch(selectConnection(firstKey))
|
||||
}
|
||||
}
|
||||
|
||||
export const saveConnectionSettings = () => (_dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
persistantStorage.store(storedConnectionsIdentifier, getState().connectionManager.connections)
|
||||
}
|
||||
|
||||
export const updateConnection = (connectionId: string, changeSet: any): Action => ({
|
||||
connectionId,
|
||||
changeSet,
|
||||
type: ActionTypes.CONNECTION_MANAGER_UPDATE_CONNECTION,
|
||||
})
|
||||
|
||||
export const addSubscription = (subscription: string, connectionId: string): Action => ({
|
||||
connectionId,
|
||||
subscription,
|
||||
type: ActionTypes.CONNECTION_MANAGER_ADD_SUBSCRIPTION,
|
||||
})
|
||||
|
||||
export const deleteSubscription = (subscription: string, connectionId: string): Action => ({
|
||||
connectionId,
|
||||
subscription,
|
||||
type: ActionTypes.CONNECTION_MANAGER_DELETE_SUBSCRIPTION,
|
||||
})
|
||||
|
||||
export const createConnection = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
const newConnection = createEmptyConnection()
|
||||
dispatch(addConnection(newConnection))
|
||||
dispatch(selectConnection(newConnection.id))
|
||||
}
|
||||
|
||||
export const setConnections = (connections: {[s: string]: ConnectionOptions}): Action => ({
|
||||
connections,
|
||||
type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS,
|
||||
})
|
||||
|
||||
export const selectConnection = (connectionId: string): Action => ({
|
||||
selected: connectionId,
|
||||
type: ActionTypes.CONNECTION_MANAGER_SELECT_CONNECTION,
|
||||
})
|
||||
|
||||
export const addConnection = (connection: ConnectionOptions): Action => ({
|
||||
connection,
|
||||
type: ActionTypes.CONNECTION_MANAGER_ADD_CONNECTION,
|
||||
})
|
||||
|
||||
export const toggleAdvancedSettings = (): Action => ({
|
||||
type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS,
|
||||
})
|
||||
|
||||
export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
|
||||
const connectionIds = Object.keys(getState().connectionManager.connections)
|
||||
const connectionIdLocation = connectionIds.indexOf(connectionId)
|
||||
|
||||
const remainingIds = connectionIds.filter(id => id !== connectionId)
|
||||
const nextSelectedConnectionIndex = Math.min(remainingIds.length - 1, connectionIdLocation)
|
||||
const nextSelectedConnection = remainingIds[nextSelectedConnectionIndex]
|
||||
|
||||
dispatch({
|
||||
connectionId,
|
||||
type: ActionTypes.CONNECTION_MANAGER_DELETE_CONNECTION,
|
||||
})
|
||||
|
||||
if (nextSelectedConnection) {
|
||||
dispatch(selectConnection(nextSelectedConnection))
|
||||
}
|
||||
}
|
||||
|
||||
export function migrateLegacyConfiguration() {
|
||||
const storage = persistantStorage.load(storedConnectionsIdentifier)
|
||||
if (storage) {
|
||||
return
|
||||
}
|
||||
const connections = loadLegacyConnectionSettings()
|
||||
defaultConnections()
|
||||
}
|
||||
|
||||
export function addDefaultConnections() {
|
||||
const storage = persistantStorage.load(storedConnectionsIdentifier)
|
||||
if (storage) {
|
||||
return
|
||||
}
|
||||
defaultConnections()
|
||||
}
|
||||
@@ -4,5 +4,6 @@ import * as treeActions from './Tree'
|
||||
import * as updateNotifierActions from './UpdateNotifier'
|
||||
import * as connectionActions from './Connection'
|
||||
import * as sidebarActons from './Sidebar'
|
||||
import * as connectionManagerActions from './ConnectionManager'
|
||||
|
||||
export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons }
|
||||
export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons, connectionManagerActions }
|
||||
|
||||
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))
|
||||
@@ -1,17 +1,22 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
|
||||
import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
import ClearAdornment from './helper/ClearAdornment'
|
||||
import CloudOff from '@material-ui/icons/CloudOff'
|
||||
import Menu from '@material-ui/icons/Menu'
|
||||
import Search from '@material-ui/icons/Search'
|
||||
import {
|
||||
AppBar,
|
||||
Button,
|
||||
IconButton,
|
||||
InputBase,
|
||||
Toolbar,
|
||||
Typography,
|
||||
} from '@material-ui/core'
|
||||
import { AppState } from '../reducers'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import { connectionActions, settingsActions } from '../actions'
|
||||
import { fade } from '@material-ui/core/styles/colorManipulator'
|
||||
import { settingsActions, connectionActions } from '../actions'
|
||||
import { AppState } from '../reducers'
|
||||
import ClearAdornment from './helper/ClearAdornment'
|
||||
import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
|
||||
|
||||
const styles: StyleRulesCallback = theme => ({
|
||||
title: {
|
||||
|
||||
@@ -8,6 +8,9 @@ interface Props {
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear button for text input fields
|
||||
*/
|
||||
class ClearAdornment extends React.Component<Props, {}> {
|
||||
public render() {
|
||||
if (this.props.value) {
|
||||
|
||||
82
app/src/model/ConnectionOptions.ts
Normal file
82
app/src/model/ConnectionOptions.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { MqttOptions } from '../../../backend/src/DataSource'
|
||||
import { v4 } from 'uuid'
|
||||
const sha1 = require('sha1')
|
||||
|
||||
export interface ConnectionOptions {
|
||||
type: 'mqtt'
|
||||
id: string
|
||||
host: string
|
||||
protocol: 'mqtt' | 'ws' | 'wss'
|
||||
basePath?: string
|
||||
port: number
|
||||
name: string
|
||||
username?: string
|
||||
password?: string
|
||||
encryption: boolean
|
||||
certValidation: boolean
|
||||
clientId?: string
|
||||
subscriptions: string[]
|
||||
}
|
||||
|
||||
export function toMqttConnection(options: ConnectionOptions): MqttOptions | undefined {
|
||||
if (options.type !== 'mqtt') {
|
||||
return
|
||||
}
|
||||
|
||||
return {
|
||||
url: `${options.protocol}://${options.host}:${options.port}/${options.basePath || ''}`,
|
||||
username: options.username,
|
||||
password: options.password,
|
||||
tls: options.encryption,
|
||||
certValidation: options.certValidation,
|
||||
}
|
||||
}
|
||||
|
||||
export function generateClienId() {
|
||||
const clientIdSha = sha1(`${Math.random()}`).slice(0, 8)
|
||||
return `mqtt-explorer-${clientIdSha}`
|
||||
}
|
||||
|
||||
export function createEmptyConnection(): ConnectionOptions {
|
||||
return {
|
||||
certValidation: true,
|
||||
clientId: generateClienId(),
|
||||
id: v4() as string,
|
||||
name: 'new connection',
|
||||
encryption: false,
|
||||
password: undefined,
|
||||
username: undefined,
|
||||
subscriptions: ['#', '$SYS'],
|
||||
type: 'mqtt',
|
||||
host: '',
|
||||
port: 1883,
|
||||
protocol: 'mqtt',
|
||||
}
|
||||
}
|
||||
|
||||
export function defaultConnections() {
|
||||
return [
|
||||
{
|
||||
...createEmptyConnection(),
|
||||
id: 'iot.eclipse.org',
|
||||
name: 'iot.eclipse.org',
|
||||
host: 'iot.eclipse.org',
|
||||
},
|
||||
{
|
||||
...createEmptyConnection(),
|
||||
id: 'test.mosquitto.org',
|
||||
name: 'test.mosquitto.org',
|
||||
host: 'test.mosquitto.org',
|
||||
},
|
||||
{
|
||||
...createEmptyConnection(),
|
||||
id: 'wss://broker.hivemq.com:8000/mqtt',
|
||||
name: 'broker.hivemq.com',
|
||||
host: 'broker.hivemq.com',
|
||||
basePath: 'mqtt',
|
||||
encryption: true,
|
||||
protocol: 'ws',
|
||||
port: 8000,
|
||||
},
|
||||
]
|
||||
}
|
||||
51
app/src/model/LegacyConnectionSettings.ts
Normal file
51
app/src/model/LegacyConnectionSettings.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import { ConnectionOptions, createEmptyConnection } from './ConnectionOptions'
|
||||
import { v4 } from 'uuid'
|
||||
|
||||
interface LegacyConnectionSettings {
|
||||
host: string
|
||||
protocol: string
|
||||
port: number
|
||||
tls: boolean
|
||||
certValidation: boolean
|
||||
clientId: string
|
||||
connectionId?: string
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export function loadLegacyConnectionSettings(): ConnectionOptions | undefined {
|
||||
const legacySettingsString = window.localStorage.getItem('connectionSettings')
|
||||
if (!legacySettingsString) {
|
||||
return
|
||||
}
|
||||
|
||||
let legacyConnection
|
||||
try {
|
||||
legacyConnection = JSON.parse(legacySettingsString) as LegacyConnectionSettings
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
const protocolMap: {[s: string]: string} = {
|
||||
'tcp://': 'mqtt',
|
||||
'ws://': 'ws',
|
||||
'mqtt://': 'mqtt',
|
||||
}
|
||||
|
||||
const migratedOptions: Partial<ConnectionOptions> = {
|
||||
certValidation: legacyConnection.certValidation,
|
||||
host: legacyConnection.host,
|
||||
name: legacyConnection.host,
|
||||
protocol: protocolMap[legacyConnection.protocol] as any,
|
||||
port: legacyConnection.port,
|
||||
username: legacyConnection.username,
|
||||
password: legacyConnection.password,
|
||||
clientId: legacyConnection.clientId,
|
||||
encryption: legacyConnection.tls,
|
||||
}
|
||||
|
||||
return {
|
||||
...createEmptyConnection(),
|
||||
...migratedOptions,
|
||||
}
|
||||
}
|
||||
174
app/src/reducers/ConnectionManager.ts
Normal file
174
app/src/reducers/ConnectionManager.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
import { Action } from 'redux'
|
||||
import { ConnectionOptions } from '../model/ConnectionOptions'
|
||||
import { createReducer } from './lib'
|
||||
|
||||
export interface ConnectionManagerState {
|
||||
connections: {[s:string]: ConnectionOptions},
|
||||
selected?: string
|
||||
showAdvancedSettings: boolean
|
||||
}
|
||||
|
||||
const initialState: ConnectionManagerState = {
|
||||
connections: {},
|
||||
selected: undefined,
|
||||
showAdvancedSettings: false,
|
||||
}
|
||||
|
||||
export type Action = SetConnections | SelectConnection | UpdateConnection | AddConnection | DeleteConnection | ToggleAdvancedSettings | DeleteSubscription | AddSubscription
|
||||
|
||||
export enum ActionTypes {
|
||||
CONNECTION_MANAGER_SET_CONNECTIONS = 'CONNECTION_MANAGER_SET_CONNECTIONS',
|
||||
CONNECTION_MANAGER_SELECT_CONNECTION = 'CONNECTION_MANAGER_SELECT_CONNECTION',
|
||||
CONNECTION_MANAGER_UPDATE_CONNECTION = 'CONNECTION_MANAGER_UPDATE_CONNECTION',
|
||||
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_ADD_SUBSCRIPTION = 'CONNECTION_MANAGER_ADD_SUBSCRIPTION',
|
||||
CONNECTION_MANAGER_DELETE_SUBSCRIPTION = 'CONNECTION_MANAGER_DELETE_SUBSCRIPTION',
|
||||
}
|
||||
|
||||
export interface SetConnections {
|
||||
type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS
|
||||
connections: {[s:string]: ConnectionOptions}
|
||||
}
|
||||
|
||||
export interface SelectConnection {
|
||||
type: ActionTypes.CONNECTION_MANAGER_SELECT_CONNECTION
|
||||
selected: string
|
||||
}
|
||||
|
||||
export interface AddSubscription {
|
||||
type: ActionTypes.CONNECTION_MANAGER_ADD_SUBSCRIPTION
|
||||
subscription: string
|
||||
connectionId: string
|
||||
}
|
||||
|
||||
export interface DeleteSubscription {
|
||||
type: ActionTypes.CONNECTION_MANAGER_DELETE_SUBSCRIPTION
|
||||
subscription: string
|
||||
connectionId: string
|
||||
}
|
||||
|
||||
export interface UpdateConnection {
|
||||
type: ActionTypes.CONNECTION_MANAGER_UPDATE_CONNECTION
|
||||
connectionId: string
|
||||
changeSet: any
|
||||
}
|
||||
|
||||
export interface AddConnection {
|
||||
type: ActionTypes.CONNECTION_MANAGER_ADD_CONNECTION
|
||||
connection: ConnectionOptions
|
||||
}
|
||||
|
||||
export interface DeleteConnection {
|
||||
type: ActionTypes.CONNECTION_MANAGER_DELETE_CONNECTION
|
||||
connectionId: string
|
||||
}
|
||||
|
||||
export interface ToggleAdvancedSettings {
|
||||
type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS
|
||||
}
|
||||
|
||||
export const connectionManagerReducer = createReducer(initialState, {
|
||||
CONNECTION_MANAGER_SET_CONNECTIONS: setConnections,
|
||||
CONNECTION_MANAGER_SELECT_CONNECTION: selectConnection,
|
||||
CONNECTION_MANAGER_UPDATE_CONNECTION: updateConnection,
|
||||
CONNECTION_MANAGER_ADD_CONNECTION: addConnection,
|
||||
CONNECTION_MANAGER_DELETE_CONNECTION: deleteConnection,
|
||||
CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS: toggleAdvancedSettings,
|
||||
CONNECTION_MANAGER_DELETE_SUBSCRIPTION: deleteSubscription,
|
||||
CONNECTION_MANAGER_ADD_SUBSCRIPTION: addSubscription,
|
||||
})
|
||||
|
||||
function setConnections(state: ConnectionManagerState, action: SetConnections): ConnectionManagerState {
|
||||
return {
|
||||
...state,
|
||||
connections: action.connections,
|
||||
}
|
||||
}
|
||||
|
||||
function selectConnection(state: ConnectionManagerState, action: SelectConnection): ConnectionManagerState {
|
||||
return {
|
||||
...state,
|
||||
selected: action.selected,
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAdvancedSettings(state: ConnectionManagerState, action: ToggleAdvancedSettings): ConnectionManagerState {
|
||||
return {
|
||||
...state,
|
||||
showAdvancedSettings: !state.showAdvancedSettings,
|
||||
}
|
||||
}
|
||||
|
||||
function addConnection(state: ConnectionManagerState, action: AddConnection): ConnectionManagerState {
|
||||
return {
|
||||
...state,
|
||||
connections: {
|
||||
...state.connections,
|
||||
[action.connection.id]: action.connection,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function addSubscription(state: ConnectionManagerState, action: AddSubscription): ConnectionManagerState {
|
||||
const connection = state.connections[action.connectionId]
|
||||
const alreadyExists = connection.subscriptions.indexOf(action.subscription) !== -1
|
||||
if (alreadyExists) {
|
||||
return state
|
||||
}
|
||||
|
||||
const newSubscriptions = connection.subscriptions.slice()
|
||||
newSubscriptions.push(action.subscription)
|
||||
return {
|
||||
...state,
|
||||
connections: {
|
||||
...state.connections,
|
||||
[action.connectionId]: {
|
||||
...connection,
|
||||
subscriptions: newSubscriptions,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function deleteSubscription(state: ConnectionManagerState, action: AddSubscription): ConnectionManagerState {
|
||||
const connection = state.connections[action.connectionId]
|
||||
const newSubscriptions = connection.subscriptions.filter(s => s !== action.subscription)
|
||||
|
||||
return {
|
||||
...state,
|
||||
connections: {
|
||||
...state.connections,
|
||||
[action.connectionId]: {
|
||||
...connection,
|
||||
subscriptions: newSubscriptions,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function deleteConnection(state: ConnectionManagerState, action: DeleteConnection): ConnectionManagerState {
|
||||
const connections = { ...state.connections }
|
||||
delete connections[action.connectionId]
|
||||
|
||||
return {
|
||||
...state,
|
||||
connections,
|
||||
}
|
||||
}
|
||||
|
||||
function updateConnection(state: ConnectionManagerState, action: UpdateConnection): ConnectionManagerState {
|
||||
let connection = state.connections[action.connectionId]
|
||||
connection = {
|
||||
...connection,
|
||||
...action.changeSet,
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
connections: {
|
||||
...state.connections,
|
||||
[action.connectionId]: connection,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { PublishState, publishReducer } from './Publish'
|
||||
import { ConnectionState, connectionReducer } from './Connection'
|
||||
import { SettingsState, settingsReducer } from './Settings'
|
||||
import { TreeState, treeReducer } from './Tree'
|
||||
import { ConnectionManagerState, connectionManagerReducer } from './ConnectionManager'
|
||||
|
||||
export enum ActionTypes {
|
||||
showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
|
||||
@@ -23,6 +24,7 @@ export interface AppState {
|
||||
settings: SettingsState,
|
||||
publish: PublishState
|
||||
connection: ConnectionState
|
||||
connectionManager: ConnectionManagerState
|
||||
}
|
||||
|
||||
export interface TooBigOfState {
|
||||
@@ -67,6 +69,7 @@ const reducer = combineReducers({
|
||||
connection: connectionReducer,
|
||||
settings: settingsReducer,
|
||||
tree: treeReducer,
|
||||
connectionManager: connectionManagerReducer,
|
||||
})
|
||||
|
||||
export default reducer
|
||||
|
||||
Reference in New Issue
Block a user