\n Make as default \n \n \n Are you sure you want to make group as default?\n \n \n \n \n Yes\n \n \n Close\n \n \n \n );\n }\n}\n\nexport default withMobileDialog()(withStyles(styles)(ChangeDefaultGroupModal));\n","// @flow\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect';\n\nimport { wrapActionCreators } from '../../../../utils/container-util';\n\nimport { makeGroupAsDefault } from '../../../../actions/users-actions';\n\nimport ChangeDefaultGroupModal from '../../../../components/Devices/Groups/Default';\n\nconst ChangeDefaultGroupHOC = ({\n actions,\n group,\n close\n}: {\n actions: {\n makeGroupAsDefault: (_id: string) => void\n },\n group: any,\n close: () => void\n}) => \n
{name}
\n {!!onlineCount && (\n <>\n
{' '}\n
\n {onlineCount}\n \n \n )}\n {!!awayCount && (\n <>\n
{' '}\n
\n {awayCount}\n \n \n )}\n {!!offlineCount && (\n <>\n
{' '}\n
\n {offlineCount}\n \n \n )}\n
\n
\n );\n };\n\n C.displayName = `withDeviceDrop(${WrappedComponent.displayName ||\n WrappedComponent.name})`;\n C.WrappedComponent = WrappedComponent;\n C.propTypes = {\n connectDropTarget: PropTypes.func.isRequired,\n isOver: PropTypes.bool.isRequired,\n canDrop: PropTypes.bool.isRequired,\n ...WrappedComponent.propTypes\n };\n return DropTarget(DEVICE_TO_GROUP_MOVE, dropSpec, dropCollect)(C);\n};\n","// @flow\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport ArrowDropDown from '@material-ui/icons/ArrowDropDown';\nimport ArrowDropUp from '@material-ui/icons/ArrowDropUp';\n\nconst styles = () => ({\n sortableDeviceWrapper: {\n padding: '10px 05px 10px 15px',\n display: 'flex',\n marginBottom: '10px'\n },\n sortableDeviceName: {\n flex: '1',\n padding: '5px',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n arrowButton: {\n padding: 3,\n cursor: 'pointer'\n }\n});\n\nclass SortableDevice extends Component<{\n classes: {\n sortableDeviceWrapper: string,\n sortableDeviceName: string,\n arrowButton: string\n },\n index: number,\n name: string,\n moveDevice: (dragIndex: number, direction: string) => void,\n devicesLength: number\n}> {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n moveDevice: PropTypes.func.isRequired,\n devicesLength: PropTypes.number.isRequired\n };\n\n onArrowDownClick = () => {\n const { index, moveDevice } = this.props;\n const direction = 'down';\n moveDevice(index, direction);\n };\n\n onArrowUpClick = () => {\n const { index, moveDevice } = this.props;\n const direction = 'up';\n moveDevice(index, direction);\n };\n\n render() {\n const { classes, name, index, devicesLength } = this.props;\n return (\n \n {name}
\n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(SortableDevice);\n","// @flow\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\n\nimport SortableDevice from './SortableDevice';\n\nclass OrderDevice extends Component<\n {\n sortableDevices: any[],\n fullScreen: boolean,\n actions: {\n updateDevicesOrdering: (devices: any[]) => void\n },\n close: () => void\n },\n {\n sortableDevices: any[],\n canSave: boolean\n }\n> {\n static propTypes = {\n sortableDevices: PropTypes.array.isRequired,\n actions: PropTypes.shape({\n updateDevicesOrdering: PropTypes.func.isRequired\n }).isRequired,\n fullScreen: PropTypes.bool.isRequired,\n close: PropTypes.func.isRequired\n };\n\n constructor(props) {\n super(props);\n const { sortableDevices } = props;\n const canSave = false;\n this.state = {\n sortableDevices,\n canSave\n };\n }\n\n handleSave = () => {\n const {\n actions: { updateDevicesOrdering },\n close\n } = this.props;\n const { sortableDevices, canSave } = this.state;\n const orderedDevices = sortableDevices.map(({ _id, owner }, order) => ({\n deviceId: _id,\n userId: owner,\n order\n }));\n if (canSave) {\n updateDevicesOrdering(orderedDevices);\n close();\n }\n };\n\n updateCanSave = (newDevices: any[]) => {\n const { sortableDevices } = this.props;\n for (let i = 0; i < newDevices.length; i += 1) {\n if (newDevices[i] !== sortableDevices[i]) {\n this.setState({\n canSave: true\n });\n return;\n }\n }\n this.setState({\n canSave: false\n });\n };\n\n moveDevice = (dragIndex: number, direction: string) => {\n const dropIndex = direction === 'up' ? dragIndex - 1 : dragIndex + 1;\n const { sortableDevices } = this.state;\n const dragDevice = sortableDevices[dragIndex];\n const newDevices = sortableDevices.slice();\n newDevices.splice(dragIndex, 1); // removing what you are dragging.\n newDevices.splice(dropIndex, 0, dragDevice); // inserting it into hoverIndex.\n this.setState({ sortableDevices: newDevices });\n this.updateCanSave(newDevices);\n };\n\n renderSortableDevice = (device, i) => {\n const { name, _id } = device;\n const devicesLength = this.props.sortableDevices.length;\n return (\n \n \n Order devices by clicking on arrows \n \n {sortableDevices.map((device, i) =>\n this.renderSortableDevice(device, i)\n )}\n
\n \n \n \n Save\n \n \n Close\n \n \n \n );\n }\n}\n\nexport default withMobileDialog()(OrderDevice);\n","// @flow\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect';\nimport { updateDevicesOrdering } from '../../../actions/device-actions';\nimport { wrapActionCreators } from '../../../utils/container-util';\nimport OrderDevice from '../../../components/Devices/Order';\n\nconst OrderDevicesHOC = ({\n actions,\n close,\n devices\n}: {\n actions: {\n updateDevicesOrdering: (devices: any[]) => void\n },\n close: () => void,\n devices: any[]\n}) => \n {name}
\n \n \n \n );\n }\n}\n\nexport default withStyles(styles)(SortableGroup);\n","// @flow\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\n\nimport SortableGroup from './SortableGroups';\n\nconst styles = () => ({\n paper: {\n width: '600px'\n },\n formControl: {\n width: 180\n }\n});\n\nclass OrderGroups extends Component<\n {\n classes: {\n formControl: string\n },\n fullScreen: boolean,\n actions: {\n updateGroupsOrdering: (groups: any[]) => void\n },\n groups: any[],\n close: () => void\n },\n {\n groups: any[],\n canSave: boolean\n }\n> {\n static propTypes = {\n fullScreen: PropTypes.bool.isRequired,\n actions: PropTypes.shape({\n updateGroupsOrdering: PropTypes.func.isRequired\n }).isRequired,\n groups: PropTypes.array.isRequired,\n close: PropTypes.func.isRequired\n };\n\n constructor(props) {\n super(props);\n const { groups } = props;\n const canSave = false;\n this.state = {\n groups,\n canSave\n };\n }\n\n handleSave = () => {\n const {\n actions: { updateGroupsOrdering },\n close\n } = this.props;\n const { groups, canSave } = this.state;\n const orderedGroups = groups.map(({ _id }, order) => ({\n _id,\n order\n }));\n for (let i = 0; i < orderedGroups.length; i += 1) {\n if (orderedGroups[i]._id === '-1') {\n orderedGroups.splice(i, 1);\n break;\n }\n }\n if (canSave) {\n updateGroupsOrdering(orderedGroups);\n close();\n }\n };\n\n moveGroup = (dragIndex: number, direction: string) => {\n const dropIndex = direction === 'up' ? dragIndex - 1 : dragIndex + 1;\n const { groups } = this.state;\n const dragGroup = groups[dragIndex];\n const newGroups = groups.slice();\n newGroups.splice(dragIndex, 1); // removing what you are dragging.\n newGroups.splice(dropIndex, 0, dragGroup); // inserting it into hoverIndex.\n this.setState({ groups: newGroups });\n this.updateCanSave(newGroups);\n };\n\n updateCanSave = (newGroups: any[]) => {\n const { groups } = this.props;\n for (let i = 0; i < newGroups.length; i += 1) {\n if (newGroups[i] !== groups[i]) {\n this.setState({\n canSave: true\n });\n return;\n }\n }\n this.setState({\n canSave: false\n });\n };\n\n renderSortableGroup = (group, i) => {\n const { name, _id } = group;\n const groupsLength = this.props.groups.length;\n return (\n \n \n Order groups by clicking on arrows \n \n {groups.map((group, i) =>\n this.renderSortableGroup(group, i)\n )}\n
\n \n \n \n Save\n \n \n Close\n \n \n \n );\n }\n}\n\nexport default withMobileDialog()(withStyles(styles)(OrderGroups));\n","// @flow\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect';\nimport { updateGroupsOrdering } from '../../../../actions/group-actions';\nimport { wrapActionCreators } from '../../../../utils/container-util';\nimport OrderGroups from '../../../../components/Devices/Groups/Order';\n\nconst OrderGroupsHOC = ({\n actions,\n close,\n groups\n}: {\n actions: {\n updateGroupsOrdering: (groups: any[]) => void\n },\n close: () => void,\n groups: any[]\n}) => \n
\n );\n };\n\n renderGroup = group => {\n const { name, id } = group;\n return (\n \n {name}\n \n );\n };\n\n determineAvailability = d => {\n const newDate = Date.now();\n const { socketData: { lastSeen } = {} } = d;\n if (!lastSeen) {\n return 'offlineCount';\n }\n const diffMs = newDate - lastSeen;\n const diffMins = Math.round(diffMs / (1000 * 60));\n if (diffMins > 10) {\n return 'offlineCount';\n }\n if (diffMins > 3) {\n return 'awayCount';\n }\n return 'onlineCount';\n };\n\n renderGroupTab = group => {\n const { _id } = group;\n const { devices } = this.props;\n const statusesCountInGroup = {\n onlineCount: 0,\n awayCount: 0,\n offlineCount: 0\n };\n\n let currentGroupDevices = devices;\n\n if (_id) {\n currentGroupDevices = devices.filter(\n device =>\n (device.group && device.group._id) === _id ||\n device.group === _id\n );\n currentGroupDevices = sortBy(currentGroupDevices, 'order');\n }\n if (_id === '-1' && currentGroupDevices.length === 0) {\n return null;\n }\n currentGroupDevices.forEach(d => {\n const st = this.determineAvailability(d);\n statusesCountInGroup[st] += 1;\n });\n\n return (\n \n Device dashboard - here you can monitor and manage\n your devices, create groups and assign devices to the groups\n
\n ),\n stepInteraction: false,\n position: [350, 20], // position: 'top',\n style: {\n backgroundColor: '#9c27b0',\n color: '#FFFFFF'\n }\n },\n {\n selector: '[data-tut=\"reactour__devices__rdp__step\"]',\n content: () => (\n \n
\n For Windows PCs, the RDP option will be available {' '}\n - by clicking on the RDP button you can access your\n remote device directly in the browser or if you want to\n use the RDP client you are comfortable with you can get\n required configuration by clicking on the small arrow.\n
\n
\n {' '}\n Note: For RDP access you need to configure your device.\n {' '}\n \n See how to configure it here\n \n .\n
\n
\n
\n \n For Mac and Linux, SSH and VNC options will be\n available\n {' '}\n - by clicking on these buttons you can access your\n remote device directly in the browser or if you want to\n use the client you are comfortable with you can get\n required configuration by clicking on the small arrow.\n
\n
\n {' '}\n Note: You should enable and configure appropriate\n services for your devices.\n {' '}\n
\n
\n Here is how to configure VNC service for{' '}\n \n Mac OS\n {' '}\n and{' '}\n \n Linux Ubuntu\n \n .\n
\n\n
\n
HTTPS button you can securely expose\n your local webservers to the whole globe. This option also\n allows you to protect your sites with Tunnel In password\n page.\n \n ),\n style: {\n backgroundColor: '#9c27b0',\n color: '#FFFFFF'\n }\n },\n {\n selector:\n '[data-tut=\"reactour__devices__https__tunnels__modal__step\"]',\n content: `Here are URL of HTTPS tunnels you have already created.`,\n style: {\n backgroundColor: '#9c27b0',\n color: '#FFFFFF'\n }\n },\n {\n selector: '[data-tut=\"reactour__devices__add__device__step\"]',\n content: () => (\n <>\n To add more devices:\n \n Click on the '+' button \n Download appropriate version of the agent \n Install it on your device \n \n \n ),\n style: {\n backgroundColor: '#9c27b0',\n color: '#FFFFFF'\n }\n },\n {\n selector: '[data-tut=\"reactour__devices__goto__tunnels__step\"]',\n style: {\n backgroundColor: '#9c27b0',\n color: '#FFFFFF'\n },\n content: () => (\n \n Choose{' '}\n
\n )\n }\n ];\n\n render() {\n const {\n showOrderDevicesModal,\n selectedGroupValue,\n showAddGroupModal,\n showOrderGroupsModal,\n showUpdateGroupModal,\n showDeleteGroupModal,\n showChangeDefaultGroupModal,\n anchorEl,\n deviceForHTTPTunnels\n } = this.state;\n const {\n classes,\n devices,\n groups,\n loggedInUser,\n devicesTourDetails\n } = this.props;\n\n const selectedGroup = groups[selectedGroupValue] || {};\n const { name, _id } = selectedGroup;\n\n const { defaultGroup } = loggedInUser;\n\n const selectedGroupIsDefault = defaultGroup === _id;\n\n let filteredDevices = devices;\n\n if (_id) {\n filteredDevices = devices.filter(\n device =>\n (device.group && device.group._id) === _id ||\n device.group === _id\n );\n filteredDevices = sortBy(filteredDevices, 'order');\n }\n return (\n \n \n Next\n \n }\n nextButton={\n \n
\n }\n prevButton={\n \n Previous\n \n }\n />\n \n \n {groups.map(group => this.renderGroupTab(group))}\n \n \n \n \n {filteredDevices.map(device => this.renderDevice(device))}\n \n {showOrderDevicesModal && (\n \n setCopied(true)}\n className={linuxCommand}\n >\n {text} \n \n \n );\n};\nClipboardCopy.prototype = {\n text: PropTypes.string.isRequired,\n value: PropTypes.string,\n mobileText: PropTypes.string,\n classes: PropTypes.object.isRequired\n};\nexport default withStyles(styles)(ClipboardCopy);\n","// @flow\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\n\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport Tab from '@material-ui/core/Tab/Tab';\nimport Tabs from '@material-ui/core/Tabs/Tabs';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\n\nimport { PYTHON_CLIENT_URL } from '../../../constants/api-constants';\nimport {\n LinuxConsoleIcon,\n LinuxIcon,\n MacIcon,\n WindowsIcon,\n RaspberryPiIcon\n} from '../../../icons';\nimport ClipboardCopy from '../../ClipboardCopy';\n\nconst styles = theme => ({\n paper: {\n maxWidth: '910px',\n '@media (min-width: 1024px)': {\n minWidth: '900px'\n }\n },\n linuxCommand: {\n fontWeight: 'bold',\n cursor: 'pointer',\n color: theme.palette.primary['500']\n },\n tab: {\n paddingTop: 0\n },\n content: {\n height: 150,\n paddingTop: theme.spacing.unit * 2\n }\n});\n\nclass SetupInstructions extends Component<\n {\n classes: {\n paper: string,\n linuxCommand: string,\n tab: string,\n tabs: string,\n content: string\n },\n fullScreen: boolean,\n close: () => void\n },\n {\n copied: boolean,\n activeTab: Number\n }\n> {\n static propTypes = {\n fullScreen: PropTypes.bool.isRequired,\n classes: PropTypes.object.isRequired,\n close: PropTypes.func.isRequired\n };\n\n state = {\n activeTab: -1\n };\n\n componentDidMount() {\n let agent = navigator.userAgent;\n agent = agent && agent.toLocaleLowerCase();\n const activeTab =\n agent.indexOf('windows') !== -1\n ? 0\n : agent.indexOf('mac') !== -1\n ? 1\n : agent.indexOf('linux') !== -1\n ? 2\n : 3;\n this.setState({ activeTab });\n }\n\n setupLinuxCommand = `sudo sh -c \"$(curl -s ${PYTHON_CLIENT_URL})\"`;\n\n handleActiveTabChange = (event, value) => {\n this.setState({ activeTab: value });\n };\n\n render() {\n const {\n classes: { tabs, tab, content, linuxCommand, ...rest },\n fullScreen,\n close\n } = this.props;\n const { activeTab } = this.state;\n return (\n \n Add Device \n\n \n \n \n
\n \n To setup Tunnel In for Windows!\n
\n \n 1. Please download the application.\n
\n \n 2. Execute it, and follow the instructions.\n
\n \n
\n Download\n \n \n
\n \n To setup Tunnel In for mac OS!\n
\n \n 1. Please download the application.\n
\n \n 2. Execute it, and follow the instructions.\n
\n \n
\n Download\n \n \n
\n \n To setup Tunnel In for Linux!\n
\n \n 1. Please download the application.\n
\n \n 2. Make it executable by running{' '}\n
\n \n 3. Execute it, and follow the instructions.\n
\n \n
\n Download\n \n \n
\n \n To setup Tunnel In for Linux Console!\n
\n \n 1. Please download the application by\n running\n
\n \n 2. Make it executable by running{' '}\n
\n \n 3. Execute it, and follow the instructions\n by running {' '}\n
\n \n
\n
\n \n To setup Tunnel In for Raspberry Pi OS\n (Raspbian)!\n
\n \n 1. Please download the application by\n running\n
\n \n 2. Make it executable by running{' '}\n
\n \n 3. Execute it, and follow the instructions\n by running {' '}\n
\n \n
\n \n \n Close\n \n \n \n );\n }\n}\n\nexport default withMobileDialog()(withStyles(styles)(SetupInstructions));\n","// @flow\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport SetupInstructions from './SetupInstructions';\n\nconst AddDevice = ({ close }: { close: () => void }) => (\n \n \n );\n };\n\n render() {\n const { devicesError, classes } = this.props;\n const { showAddDeviceModal } = this.state;\n if (devicesError) {\n return null; // error page;\n }\n return (\n \n {this.renderContent()}\n
\n \n \n
\n \n \n {showAddDeviceModal && (\n
\n )}\n
\n
\n
\n
\n \n Name \n {nameError} }\n \n \n Device \n \n \n {devices.map(device => (\n \n \n {device.name}\n \n \n ))}\n \n \n {deviceIdError && (\n {deviceIdError} \n )}\n \n
\n
\n \n Type \n \n \n {ALL_TUNNEL_TYPES.map(t => (\n \n \n {t.toUpperCase()}\n \n \n ))}\n \n \n {typeError && {typeError} }\n \n \n \n Local Port\n \n {localPortError} \n )}\n \n
\n
\n
\n
\n {!type && (\n
\n First please select type. \n
\n )}\n {type === 'http' && (\n <>\n
\n
\n Scheme \n setHandleHTTP(e.target.value)}\n autoWidth={true}\n value={handleHTTP}\n >\n \n https://\n \n \n https:// + http://\n \n \n \n
\n
\n
\n
\n {name && !nameError ? (\n \n URL:
\n \n {`https://${name}-${\n loggedInUser.username\n }.p.tunnelin.com`}\n\n {// TODO:: this is temporary fix and should be removed\n false && (\n \n {`https://${\n loggedInUser.username\n }.p.tunnelin.com/${name}`}\n \n )}\n
\n \n ) : (\n
\n Please type a valid name to generate urls\n
\n )}\n
\n
\n \n \n setShowPassword(e.target.checked)\n }\n value=\"autoClose\"\n />\n }\n label=\"Set tunnel password\"\n />\n\n \n \n \n This is most secure configurations\n \n
\n )}\n \n )}\n {type && type !== 'http' && (\n <>\n \n
\n \n setConnectionsRateLimiting(\n e.target.checked\n )\n }\n value=\"connectionsRateLimiting\"\n />\n }\n label=\"Connections rate limiting\"\n />\n \n
\n
\n \n setInitializationTimeLimiting(\n e.target.checked\n )\n }\n value=\"initializationTimeLimiting\"\n />\n }\n label=\"Initialization time limiting\"\n />\n \n
\n
\n \n setAutoClose(e.target.checked)\n }\n value=\"autoClose\"\n />\n }\n label=\"Automatically close tunnel when not in use\"\n />\n
\n \n
\n \n Allow Connections From\n \n \n setAllowConnectionsFrom(e.target.value)\n }\n autoWidth={true}\n value={allowConnectionsFrom}\n >\n Anywhere \n My ip \n Custom \n \n \n
\n {allowConnectionsFrom === 'custom' && (\n <>\n {ipAddresses.map((ip, i) => (\n \n \n \n Source ip address\n \n \n onIpAddressesChange(\n e,\n i\n )\n }\n />\n \n \n \n onRemoveIpAddress(i)\n }\n disabled={\n ipAddresses.length === 1 &&\n i === 0\n }\n style={{\n margin: 0,\n padding: 0,\n width: 32,\n height: 32\n }}\n >\n \n \n This is most secure configurations\n \n
\n )}\n \n \n);\nAddOrEditTunnelForm.propTypes = {\n classes: PropTypes.object.isRequired,\n mode: PropTypes.string.isRequired,\n loggedInUser: PropTypes.object.isRequired,\n formData: PropTypes.shape({\n name: PropTypes.string,\n onNameChange: PropTypes.func.isRequired,\n devices: PropTypes.array,\n deviceId: PropTypes.string,\n onDeviceIdChange: PropTypes.func.isRequired,\n type: PropTypes.string,\n onTypeChange: PropTypes.func.isRequired,\n localPort: PropTypes.string,\n onLocalPortChange: PropTypes.func.isRequired,\n handleHTTP: PropTypes.bool,\n setHandleHTTP: PropTypes.func.isRequired,\n connectionsRateLimiting: PropTypes.bool,\n setConnectionsRateLimiting: PropTypes.func.isRequired,\n initializationTimeLimiting: PropTypes.bool,\n setInitializationTimeLimiting: PropTypes.func.isRequired,\n allowConnectionsFrom: PropTypes.string,\n setAllowConnectionsFrom: PropTypes.func.isRequired,\n ipAddresses: PropTypes.array,\n onIpAddressesChange: PropTypes.func.isRequired,\n autoClose: PropTypes.bool,\n setAutoClose: PropTypes.func.isRequired,\n nameError: PropTypes.string.isRequired,\n deviceIdError: PropTypes.string.isRequired,\n typeError: PropTypes.string.isRequired,\n localPortError: PropTypes.string.isRequired,\n ipAddressErrors: PropTypes.array.isRequired,\n onAddIpAddress: PropTypes.func.isRequired,\n onRemoveIpAddress: PropTypes.func.isRequired\n })\n};\n\nconst mapStateToProps = createStructuredSelector({\n loggedInUser: getLoggedInUser()\n});\n\nexport default withStyles(styles)(\n connect(mapStateToProps)(AddOrEditTunnelForm)\n);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport DialogTitle from '@material-ui/core/DialogTitle/DialogTitle';\nimport InfoIcon from '@material-ui/icons/InfoOutlined';\nimport { Hidden } from '@material-ui/core';\nimport { createStructuredSelector } from 'reselect';\nimport { connect } from 'react-redux';\nimport AddOrEditTunnelForm from './AddOrEditTunnelForm';\nimport { wrapActionCreators } from '../../../utils/container-util';\nimport { selectDevices } from '../../../selectors/devices-selectors';\nimport { getDevices } from '../../../actions/device-actions';\nimport {\n INFO_TEXT_ABOUT_TUNNEL_RELOAD,\n DEFAULT_LOCAL_PORTS\n} from '../../../constants/tunnels';\nimport {\n validateNameField,\n validateDeviceField,\n validateTypeField,\n validateLocalPortField,\n validateIpAddress\n} from '../../../utils/tunnel-validations';\nimport {\n parseErrorMessage,\n constructGlobalErrorMessage\n} from '../../../utils/global-message-util';\nimport { setGlobalMessageError } from '../../../actions/app-actions';\nimport { addTunnel, updateTunnel, getTunnels } from '../../../api/tunnel-api';\n\nconst styles = () => ({\n dialog: {\n '@media (min-width: 600px)': {\n minHeight: '550px',\n minWidth: '600px'\n // maxWidth: '550px'\n }\n // '@media (min-height: 450px)': {\n // height: '450px'\n // }\n },\n dialogContent: {\n // padding: '0',\n paddingTop: '0!important',\n padding: '0px 24px',\n minHeight: '215px',\n height: '215px',\n display: 'flex',\n flexDirection: 'column'\n },\n addOrEditTunnelForm: {\n padding: '0px 24px'\n },\n dialogActions: {\n padding: '13px 20px',\n margin: 0\n },\n addButton: {\n margin: '0 4px'\n },\n infoAboutReloadTunnelWrapper: {\n display: 'flex',\n alignItems: 'center'\n },\n infoAboutReloadTunnelText: {\n marginLeft: 5,\n fontSize: 14,\n width: 250\n },\n infoAboutReloadTunnelTextMobile: {\n marginLeft: 5,\n fontSize: 14\n }\n});\n\nconst AddOrEditTunnel = ({\n classes,\n fullScreen,\n close,\n onTunnelReady,\n tunnel,\n devices,\n handleStartClick,\n deviceAvailabilityStatus,\n actions: { getDevices, setGlobalMessageError }\n}) => {\n const withStartAction =\n tunnel &&\n tunnel.status === 'online' &&\n deviceAvailabilityStatus === 'started';\n\n const [allTunnels, setAllTunnels] = useState([]);\n useEffect(() => {\n let canceled = false;\n getTunnels().subscribe(\n data => {\n if (data && data.data && data.data.tunnels && !canceled) {\n setAllTunnels(data.data.tunnels);\n }\n },\n error => {\n setGlobalMessageError(\n constructGlobalErrorMessage(parseErrorMessage(error))\n );\n }\n );\n return () => {\n canceled = true;\n };\n }, []);\n\n useEffect(() => {\n if (!devices || devices.length === 0) {\n getDevices();\n }\n }, []);\n const firewall =\n (tunnel && tunnel.options && tunnel.options.firewall) || {};\n\n const [name, setName] = useState((tunnel && tunnel.name) || '');\n\n const [deviceId, setDeviceId] = useState((tunnel && tunnel.deviceId) || '');\n\n const [type, setType] = useState((tunnel && tunnel.type) || '');\n\n const [localPort, setLocalPort] = useState(\n (tunnel && tunnel.localPort && tunnel.localPort.toString()) || ''\n );\n\n const [handleHTTP, setHandleHTTP] = useState(\n (tunnel && tunnel.handleHTTP) || false\n );\n\n const [connectionsRateLimiting, setConnectionsRateLimiting] = useState(\n !!firewall.connectionsRateLimiting\n );\n const [\n initializationTimeLimiting,\n setInitializationTimeLimiting\n ] = useState(!!firewall.initializationTimeLimiting);\n const [allowConnectionsFrom, setAllowConnectionsFrom] = useState(\n Array.isArray(firewall.allowConnectionsFrom)\n ? 'custom'\n : firewall.allowConnectionsFrom || ''\n );\n const [ipAddresses, setIpAddresses] = useState(\n Array.isArray(firewall.allowConnectionsFrom)\n ? firewall.allowConnectionsFrom\n : ['']\n );\n const [autoClose, setAutoClose] = useState(!!firewall.autoClose);\n const [nameError, setNameError] = useState('');\n\n const [deviceIdError, setDeviceIdError] = useState('');\n\n const [typeError, setTypeError] = useState('');\n\n const [localPortError, setLocalPortError] = useState('');\n\n const [ipAddressErrors, setIpAddressErrors] = useState(\n Array.isArray(allowConnectionsFrom)\n ? new Array(allowConnectionsFrom.length).fill(null)\n : [null]\n );\n const val = (((tunnel || {}).options || {}).auth || {}).password || '';\n const [showPassword, setShowPassword] = useState(!!val);\n const [tunnelPassword, setTunnelPassword] = useState(val);\n const validateLocalPort = port => {\n let err = validateLocalPortField(port);\n if (!err && deviceId) {\n const tunnelsOnSelectedDevice = allTunnels.filter(\n t => t.deviceId === deviceId\n );\n const tunnelOnTheSamePort = tunnelsOnSelectedDevice.find(\n t =>\n String(t.localPort) === String(port) &&\n (tunnel ? t._id !== tunnel._id : true)\n );\n if (tunnelOnTheSamePort) {\n err = `Port \"${port}\" in use by \"${\n tunnelOnTheSamePort.name\n }\" tunnel`;\n }\n }\n return err;\n };\n\n const validateName = (name, t = type) => {\n let err = validateNameField(name);\n if (!err) {\n const httpTunnels = allTunnels.filter(t => t.type === 'http');\n const tunnelWithTheSameName = httpTunnels.find(\n t => t.name === name && (tunnel ? t._id !== tunnel._id : true)\n );\n if (tunnelWithTheSameName && t === 'http') {\n err = `This url already assigned to other tunnel.`;\n }\n }\n return err;\n };\n\n const validateForm = () => {\n let isValid = true;\n const nError = validateName(name);\n setNameError(nError);\n const dError = validateDeviceField(deviceId);\n setDeviceIdError(dError);\n const tError = validateTypeField(type);\n setTypeError(tError);\n const lError = validateLocalPort(localPort);\n setLocalPortError(lError);\n if (allowConnectionsFrom === 'custom' && ipAddressErrors.find(e => e)) {\n isValid = false;\n }\n return isValid && !nError && !dError && !tError && !lError;\n };\n\n const onAddClick = () => {\n if (validateForm()) {\n const { options } = tunnel || {};\n const allowConnectionsFromData =\n allowConnectionsFrom === 'custom'\n ? ipAddresses\n : allowConnectionsFrom || 'anywhere';\n const tunnelId = tunnel && tunnel.id;\n const favourite = Boolean(tunnel && tunnel.favourite);\n const data = {\n name,\n localPort,\n handleHTTP: type === 'http' ? handleHTTP : false,\n deviceId,\n type,\n options: {\n ...options,\n auth: { password: tunnelPassword },\n firewall: {\n allowConnectionsFrom: allowConnectionsFromData,\n connectionsRateLimiting,\n initializationTimeLimiting: initializationTimeLimiting\n ? 180\n : 0,\n autoClose\n }\n }\n };\n if (!tunnel) {\n addTunnel(data).subscribe(\n d => {\n onTunnelReady(d);\n close();\n },\n err => {\n let message = 'Something went wrong';\n if (err) message = parseErrorMessage(err);\n setGlobalMessageError(\n constructGlobalErrorMessage(message)\n );\n }\n );\n } else {\n updateTunnel(tunnelId, {\n ...data,\n tunnelId,\n favourite\n }).subscribe(\n d => {\n onTunnelReady(d);\n if (\n tunnel.status === 'started' &&\n deviceAvailabilityStatus === 'online'\n ) {\n handleStartClick();\n }\n close();\n },\n err => {\n let message = 'Something went wrong';\n if (err) message = parseErrorMessage(err);\n setGlobalMessageError(\n constructGlobalErrorMessage(message)\n );\n }\n );\n }\n }\n };\n\n const onNameChange = e => {\n const { value } = e.target;\n setName(value);\n setNameError(validateName(value));\n };\n\n const onDeviceIdChange = e => {\n const { value } = e.target;\n setDeviceId(value);\n setDeviceIdError(validateDeviceField(value));\n };\n\n const onTypeChange = e => {\n const { value } = e.target;\n setType(value);\n setTypeError(validateTypeField(value));\n if (value === 'http') {\n setConnectionsRateLimiting(false);\n setInitializationTimeLimiting(false);\n setAllowConnectionsFrom('anywhere');\n setHandleHTTP(false);\n setAutoClose(false);\n setLocalPort(DEFAULT_LOCAL_PORTS[value]);\n if (localPort) {\n setLocalPortError(\n validateLocalPort(DEFAULT_LOCAL_PORTS[value])\n );\n }\n } else if (\n value === 'rdp' ||\n value === 'ssh' ||\n value === 'vnc' ||\n value === 'proxy' ||\n value === 'custom'\n ) {\n setConnectionsRateLimiting(true);\n setInitializationTimeLimiting(true);\n setAllowConnectionsFrom('myIp');\n setHandleHTTP(false);\n setAutoClose(true);\n setLocalPort(DEFAULT_LOCAL_PORTS[value]);\n if (!(value === 'custom' && !localPort)) {\n setLocalPortError(\n validateLocalPort(DEFAULT_LOCAL_PORTS[value])\n );\n }\n }\n if ((type === 'http' || value === 'http') && name) {\n setNameError(validateName(name, value));\n }\n };\n\n const onLocalPortChange = e => {\n const { value } = e.target;\n setLocalPort(value);\n setLocalPortError(validateLocalPort(value));\n };\n\n const onIpAddressesChange = (e, index) => {\n const newIpAddresses = [...ipAddresses];\n const newIpAddressErrors = [...ipAddressErrors];\n const isValidIpAddress = validateIpAddress(e.target.value);\n newIpAddresses.splice(index, 1, e.target.value);\n newIpAddressErrors.splice(index, 1, !isValidIpAddress);\n setIpAddresses(newIpAddresses);\n setIpAddressErrors(newIpAddressErrors);\n };\n\n const onAddIpAddress = () => {\n const newIpAddresses = [...ipAddresses];\n const newIpAddressErrors = [...ipAddressErrors];\n newIpAddresses.push('');\n newIpAddressErrors.push(null);\n setIpAddresses(newIpAddresses);\n setIpAddressErrors(newIpAddressErrors);\n };\n const onRemoveIpAddress = i => {\n const newIpAddresses = [...ipAddresses];\n const newIpAddressErrors = [...ipAddressErrors];\n newIpAddresses.splice(i, 1);\n newIpAddressErrors.splice(i, 1);\n setIpAddresses(newIpAddresses);\n setIpAddressErrors(newIpAddressErrors);\n };\n\n const formData = {\n name,\n onNameChange,\n devices,\n deviceId,\n onDeviceIdChange,\n type,\n onTypeChange,\n localPort,\n onLocalPortChange,\n handleHTTP,\n setHandleHTTP,\n connectionsRateLimiting,\n setConnectionsRateLimiting,\n initializationTimeLimiting,\n setInitializationTimeLimiting,\n allowConnectionsFrom,\n setAllowConnectionsFrom,\n ipAddresses,\n onIpAddressesChange,\n autoClose,\n setAutoClose,\n nameError,\n deviceIdError,\n typeError,\n localPortError,\n ipAddressErrors,\n onAddIpAddress,\n onRemoveIpAddress,\n tunnelPassword,\n showPassword,\n setTunnelPassword,\n setShowPassword\n };\n\n return (\n \n \n {tunnel ? 'Edit Tunnel' : 'Create Tunnel'}\n \n \n \n {withStartAction && (\n \n <>\n
\n \n \n {INFO_TEXT_ABOUT_TUNNEL_RELOAD}\n \n \n \n \n )}\n \n \n {withStartAction && (\n \n \n
{' '}\n
\n {INFO_TEXT_ABOUT_TUNNEL_RELOAD}\n
\n
\n )}\n
\n \n {tunnel\n ? withStartAction\n ? 'Save and Reload'\n : 'Save'\n : 'Add'}\n \n \n Close\n \n \n \n );\n};\n\nAddOrEditTunnel.propTypes = {\n classes: PropTypes.object.isRequired,\n fullScreen: PropTypes.bool.isRequired,\n close: PropTypes.func.isRequired,\n onTunnelReady: PropTypes.func.isRequired,\n tunnel: PropTypes.object,\n devices: PropTypes.array,\n handleStartClick: PropTypes.func,\n deviceAvailabilityStatus: PropTypes.string,\n actions: PropTypes.shape({\n getDevices: PropTypes.func.isRequired,\n setGlobalMessageError: PropTypes.func.isRequired\n })\n};\n\nconst mapStateToProps = createStructuredSelector({\n devices: selectDevices()\n});\n\nconst mapDispatchToProps = wrapActionCreators({\n getDevices,\n setGlobalMessageError\n});\n\nexport default withMobileDialog()(\n withStyles(styles)(\n connect(\n mapStateToProps,\n mapDispatchToProps\n )(AddOrEditTunnel)\n )\n);\n","import { createSelector } from 'reselect';\nimport { ALL_TUNNEL_TYPES } from '../constants/tunnels';\n\nexport const selectLocalState = () => state => state.tunnels;\n\nexport const getSearchQuery = () =>\n createSelector(\n selectLocalState(),\n ({ searchQuery }) => searchQuery\n );\n\nexport const getFilters = () =>\n createSelector(\n selectLocalState(),\n ({ filters }) => filters\n );\n\nexport const getUiFilters = () =>\n createSelector(\n selectLocalState(),\n ({ uiFilters }) => uiFilters\n );\n\nexport const getNoFilters = () =>\n createSelector(\n selectLocalState(),\n tunnels => {\n const filters = tunnels.filters.find(f => f.property === 'type');\n const uiFilters = tunnels.uiFilters.find(f => f.value !== 'all');\n const searchFilter = tunnels.searchQuery;\n return !!(\n !searchFilter &&\n !uiFilters &&\n (filters.length === 0 ||\n filters.length === ALL_TUNNEL_TYPES.length)\n );\n }\n );\nexport const getTunnelStatuses = () =>\n createSelector(\n selectLocalState(),\n ({ statuses }) => statuses.data\n );\n","import { useEffect, useRef } from 'react';\n\nexport default function useUnmounted() {\n const unMounted = useRef(false);\n useEffect(\n () => () => {\n unMounted.current = true;\n },\n []\n );\n return unMounted;\n}\n","import React, { useState, useMemo, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport { withStyles } from '@material-ui/core/styles';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport StartIcon from '@material-ui/icons/PlayArrow';\nimport StopIcon from '@material-ui/icons/Stop';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Tooltip from '@material-ui/core/Tooltip/Tooltip';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport Button from '@material-ui/core/Button';\nimport DialogTitle from '@material-ui/core/DialogTitle/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions/DialogActions';\nimport Dialog from '@material-ui/core/Dialog/Dialog';\nimport { createStructuredSelector } from 'reselect';\nimport { connect } from 'react-redux';\nimport CircleIcon from '@material-ui/icons/FiberManualRecord';\nimport moment from 'moment';\nimport { IconButton } from '@material-ui/core';\nimport {\n subscribeToTopic,\n unsubscribeFromTopic,\n removeListener,\n addListener\n} from '../../utils/mqtt';\nimport { bytesToSize } from '../../utils/helpers';\nimport { getLoggedInUser } from '../../selectors/app-selectors';\nimport AddOrEditTunnel from '../Tunnels/Modal/AddOrEditTunnel';\nimport Star from './Star';\nimport store from '../../store/get-store';\nimport { setGlobalMessageError } from '../../actions/app-actions';\nimport { MQTT_ENV } from '../../constants/api-constants';\nimport { getTunnelStatuses } from '../../selectors/tunnels-selectors';\nimport Authorities from '../../containers/Authorities';\nimport {\n DELETE_TUNNEL_ACTION_AUTH,\n EDIT_TUNNEL_ACTION_AUTH\n} from '../../constants/authorities';\nimport { openTunnel, stopTunnel, updateTunnel } from '../../api/tunnel-api';\nimport useUnmounted from '../../hooks/use-unmount';\n\nconst { dispatch } = store;\n\nconst styles = () => ({\n tunnelItem: {\n borderBottom: '1px dashed #cccccc'\n },\n itemWrapper: {\n flexDirection: 'row',\n display: 'flex',\n margin: '5px 0',\n minWidth: '500px',\n alignItems: 'center'\n },\n tunnelItemLeftPart: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n flex: 1,\n height: 70\n },\n tunnelItemLeftPartTop: {\n flexDirection: 'row',\n display: 'flex',\n alignItems: 'center'\n },\n tunnelItemLeftPartBottom: {\n display: 'flex',\n paddingLeft: 5\n },\n tooltipText: {\n fontSize: '11px'\n },\n sshTunnelUrl: {\n display: 'flex',\n flexDirection: 'row',\n flex: 3,\n alignItems: 'center',\n margin: 0,\n overflow: 'hidden'\n },\n sshTunnelUrlInner: {\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n color: '#9c27b0',\n padding: 5,\n fontFamily: 'Roboto',\n fontWeight: 500,\n fontSize: '0.85em'\n },\n generatedNameWrapperItem: {\n display: 'flex',\n flexDirection: 'column',\n flex: 3,\n alignItems: 'baseline',\n margin: 0\n },\n generatedNameItem: {\n padding: '5px',\n textTransform: 'none'\n },\n tunnelName: {\n flex: 2,\n paddingLeft: 5,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n overflow: 'hidden'\n },\n tunnelNameInner: {\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n favouriteWrapper: {\n marginRight: 5\n },\n deviceName: {\n flex: 2,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n paddingLeft: 5,\n overflow: 'hidden'\n },\n deviceNameInner: {\n lineHeight: '24px',\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n sshTunnelUrlTooltip: {\n cursor: 'pointer'\n },\n tunnelActionButtonsWrapper: {\n width: 248,\n display: 'flex',\n flexDirection: 'row-reverse',\n paddingRight: 30,\n alignItems: 'center'\n },\n port: {\n paddingLeft: 5,\n width: 100,\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n tunnelActionIcon: {\n color: '#9c27b0'\n },\n disabledTunnelActionIcon: {\n color: '#ecb4f5'\n },\n circularWrapper: {\n padding: 8,\n width: 48,\n height: 32,\n textAlign: 'center'\n },\n colorGreen: {\n fill: '#61bd4f'\n },\n colorYellow: {\n fill: '#f2d600'\n },\n colorRed: {\n fill: '#eb5a46'\n },\n lastSeenIcon: {\n fontSize: 12,\n marginBottom: 2\n }\n});\n\nconst TunnelItem = ({\n classes,\n tunnel,\n tunnel: {\n _id,\n id,\n name,\n localPort,\n handleHTTP,\n deviceId,\n type,\n favourite,\n dashUrl,\n slashUrl,\n deviceName,\n clientPort,\n status,\n startTime,\n stopTime,\n engine: { address } = {},\n options\n } = {},\n tunnelDelete,\n onTunnelReady,\n loggedInUser,\n reloadingTunnelsInProcess,\n stoppingTunnelsInProcess,\n devicesStatuses,\n tunnelsStatuses\n}) => {\n const unMounted = useUnmounted();\n const [openDeleteConfirmDialog, setOpenDeleteConfirmDialog] = useState(\n false\n );\n const [editTunnel, setEditTunnel] = useState(false);\n const [\n changeTunnelStateInProcess,\n setChangeTunnelStateInProcess\n ] = useState(false);\n const [tooltipCopiedTime, setTooltipCopiedTime] = useState(null);\n const [tooltipTitle, setTooltipTitle] = useState(\n type === 'ssh' ? 'Copy ssh command' : 'Copy address'\n );\n const [tooltipOpenState, setTooltipOpenState] = useState(false);\n const [doRestartAfterEditing, setDoRestartAfterEditing] = useState(false);\n\n useEffect(\n () => () => {\n const topic = `user--${loggedInUser._id}/server`;\n unsubscribeFromTopic(topic);\n },\n [loggedInUser]\n );\n\n const determineAvailability = lastSeen => {\n const newDate = Date.now();\n\n if (!lastSeen) {\n return 'offline';\n }\n\n const diffMs = newDate - lastSeen;\n const diffMins = Math.round(diffMs / (1000 * 60));\n if (diffMins > 10) {\n return 'offline';\n }\n if (diffMins > 3) {\n return 'away';\n }\n return 'online';\n };\n const subscribeToTopicCallback = (editedTunnel, messageActionName) => {\n const fn = (t, message) => {\n const action = JSON.parse(message);\n if (action && action.type === 'NOTIFY_USER') {\n const { payload } = action;\n const { tunnelId, action: actionName } = payload;\n if (\n tunnelId === id &&\n actionName === messageActionName &&\n t === `${MQTT_ENV}/user--${loggedInUser._id}/server`\n ) {\n onTunnelReady({ data: { ...editedTunnel } });\n removeListener(fn);\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n }\n };\n addListener(fn);\n const topic = `user--${loggedInUser._id}/server`;\n subscribeToTopic(topic);\n };\n const lastSeen = useMemo(\n () => {\n let ls;\n try {\n const statuses = devicesStatuses[tunnel.deviceId];\n if (statuses) {\n const data = JSON.parse(statuses);\n ls = data ? data.lastSeen : undefined;\n }\n } catch {}\n return ls;\n },\n [devicesStatuses, tunnel.deviceId]\n );\n\n const availabilityStatus = useMemo(\n () => (lastSeen ? determineAvailability(lastSeen) : 'offline'),\n [lastSeen]\n );\n\n const lastSeenIndicatorClassName = useMemo(\n () => {\n switch (availabilityStatus) {\n case 'online':\n return classes.colorGreen;\n case 'away':\n return classes.colorYellow;\n default:\n return classes.colorRed;\n }\n },\n [availabilityStatus]\n );\n\n const lastSeenIndicatorTooltipMessage = useMemo(\n () => (lastSeen ? moment(lastSeen).fromNow() : 'offline'),\n [lastSeen]\n );\n\n const tunnelUsageData = useMemo(\n () => {\n let result = '';\n const currentTunnelStatus = tunnelsStatuses.find(\n ts => ts._id === _id\n );\n const { rx_bytes: rxBytes, tx_bytes: txBytes } =\n (currentTunnelStatus &&\n currentTunnelStatus.info &&\n currentTunnelStatus.info.networks &&\n currentTunnelStatus.info.networks.eth0) ||\n {};\n if (\n (Number(rxBytes) || rxBytes === 0) &&\n (Number(txBytes) || txBytes === 0)\n ) {\n result = bytesToSize(Number(rxBytes) + Number(txBytes));\n }\n return result;\n },\n [tunnelsStatuses]\n );\n\n const sshTunnelUrl = address\n ? `${address}:${clientPort}`\n : 'Tunnel not started';\n const sshTunnelUrlClipboardText =\n type === 'ssh'\n ? `ssh -p ${clientPort} username@${address}`\n : `${address}:${clientPort}`;\n\n const handleStartClick = () => {\n setChangeTunnelStateInProcess(true);\n openTunnel({\n tunnelId: id,\n options,\n deviceId\n }).subscribe(\n res => {\n if (res && res.data && res.data.tunnel) {\n subscribeToTopicCallback(res.data.tunnel, 'start_tunnel');\n } else {\n dispatch(setGlobalMessageError(\"Can't start tunnel\"));\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n },\n () => {\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n );\n };\n\n useEffect(\n () => {\n if (doRestartAfterEditing) {\n setDoRestartAfterEditing(false);\n handleStartClick();\n }\n },\n [doRestartAfterEditing]\n );\n\n const handleStopClick = () => {\n setChangeTunnelStateInProcess(true);\n stopTunnel(id, { deviceId, type }).subscribe(\n res => {\n if (res && res.data && res.data.tunnel) {\n subscribeToTopicCallback(res.data.tunnel, 'stop_tunnel');\n } else {\n dispatch(setGlobalMessageError(\"Can't stop tunnel\"));\n setChangeTunnelStateInProcess(false);\n }\n },\n () => {\n setChangeTunnelStateInProcess(false);\n }\n );\n };\n\n useEffect(\n () => {\n if (\n reloadingTunnelsInProcess &&\n status === 'started' &&\n availabilityStatus === 'online'\n ) {\n handleStartClick();\n }\n if (\n stoppingTunnelsInProcess &&\n status === 'started' &&\n availabilityStatus === 'online'\n ) {\n handleStopClick();\n }\n },\n [\n reloadingTunnelsInProcess,\n stoppingTunnelsInProcess,\n status,\n availabilityStatus\n ]\n );\n\n const handleEditClick = () => {\n setEditTunnel(true);\n };\n\n const handleFavouriteClick = () => {\n updateTunnel(id, {\n name,\n localPort,\n handleHTTP,\n deviceId,\n type,\n favourite: !favourite\n }).subscribe(\n tunnel => onTunnelReady(tunnel),\n () => {\n dispatch(setGlobalMessageError('Something went wrong.'));\n }\n );\n };\n\n const handleDeleteClick = () => {\n setOpenDeleteConfirmDialog(true);\n };\n\n const handleDelete = () => {\n tunnelDelete(tunnel.id);\n };\n\n const closeDeleteTunnelConfirmation = () => {\n setOpenDeleteConfirmDialog(false);\n };\n\n const closeEditTunnelModal = () => {\n setEditTunnel(false);\n };\n\n const onSshTunnelUrlCopyComplete = () => {\n setTooltipCopiedTime(Date.now());\n setTooltipTitle(\n type === 'ssh' ? 'Copied ssh command' : 'Copied address'\n );\n };\n\n const onTooltipClose = () => {\n setTooltipOpenState(false);\n };\n\n const onTooltipOpen = () => {\n let tooltipTitleData = tooltipTitle;\n if (Date.now() - tooltipCopiedTime > 3 * 1000) {\n tooltipTitleData =\n type === 'ssh' ? 'Copy ssh command' : 'Copy address';\n }\n setTooltipOpenState(true);\n setTooltipTitle(tooltipTitleData);\n };\n\n const restartTunnel = () => {\n setDoRestartAfterEditing(true);\n };\n\n return (\n \n
\n
\n
\n
\n
\n
\n
\n {name}\n
\n
\n {deviceName && (\n
\n
\n \n {deviceName}\n
\n \n )}\n {!deviceName && (\n
\n {type === 'proxy' ? (\n
\n Proxy settings are fixed for all\n devices. You can change this\n option from Settings page.\n \n }\n placement=\"right\"\n className={classes.deviceNameInner}\n >\n
\n All Devices\n \n \n ) : (\n
\n Not Specified\n
\n )}\n
\n )}\n {type !== 'http' && (\n
\n {address && type !== 'proxy' ? (\n
\n {tooltipTitle}\n \n }\n placement=\"right\"\n className={classNames(\n classes.sshTunnelUrlInner,\n classes.sshTunnelUrlTooltip\n )}\n >\n
\n \n {sshTunnelUrl}\n \n \n \n ) : (\n
\n {sshTunnelUrl}\n
\n )}\n
\n {dashUrl && (\n
\n Click to open the link\n {\n if (\n changeTunnelStateInProcess ||\n status === 'stopped'\n ) {\n return props.children;\n }\n return (\n \n {props.children}\n \n );\n }}\n >\n {`https://${dashUrl}`}\n \n \n )}\n {slashUrl && false && (\n \n Click to open the link\n \n }\n placement=\"right\"\n className={classNames(\n classes.sshTunnelUrlInner,\n classes.sshTunnelUrlTooltip\n )}\n >\n (\n \n {props.children}\n \n )}\n >\n {`https://${slashUrl}`}\n \n \n )}\n \n )}\n \n {!!(tunnelUsageData || startTime) && (\n \n {status === 'started' ? (\n <>\n {startTime && (\n
\n Started{' '}\n {moment(startTime).fromNow()}\n \n Last time started{' '}\n {moment(startTime).fromNow()}\n \n )}\n {stopTime && (\n \n Stopped {moment(stopTime).fromNow()}\n \n )}\n \n )}\n {tunnelUsageData && (\n \n Data transferred: {tunnelUsageData}\n \n )}\n \n )}\n \n {localPort}
\n \n \n \n \n \n \n \n {changeTunnelStateInProcess ? (\n \n
\n ) : (\n <>\n {(status === 'stopped' || !status) && (\n \n \n \n \n Delete tunnel \n \n \n Are you sure want to delete {name} {' '}\n tunnel?\n \n \n \n \n Delete\n \n \n Close\n \n \n \n )}\n \n );\n};\nconst mapStateToProps = createStructuredSelector({\n loggedInUser: getLoggedInUser(),\n tunnelsStatuses: getTunnelStatuses()\n});\n\nTunnelItem.propTypes = {\n classes: PropTypes.object.isRequired,\n tunnel: PropTypes.shape({\n id: PropTypes.string,\n _id: PropTypes.string,\n name: PropTypes.string,\n localPort: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n handleHTTP: PropTypes.bool,\n deviceId: PropTypes.string,\n type: PropTypes.string,\n favourite: PropTypes.bool,\n engine: PropTypes.shape({\n address: PropTypes.string\n }),\n dashUrl: PropTypes.string,\n slashUrl: PropTypes.string,\n deviceName: PropTypes.string,\n clientPort: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n status: PropTypes.string,\n startTime: PropTypes.number,\n stopTime: PropTypes.number,\n options: PropTypes.object\n }).isRequired,\n tunnelDelete: PropTypes.func.isRequired,\n onTunnelReady: PropTypes.func.isRequired,\n loggedInUser: PropTypes.object.isRequired,\n reloadingTunnelsInProcess: PropTypes.bool,\n stoppingTunnelsInProcess: PropTypes.bool,\n devicesStatuses: PropTypes.object.isRequired,\n tunnelsStatuses: PropTypes.array.isRequired\n};\n\nexport default connect(mapStateToProps)(\n withMobileDialog()(withStyles(styles)(TunnelItem))\n);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\nimport DialogTitle from '@material-ui/core/DialogTitle/DialogTitle';\n\nconst styles = () => ({\n dialog: {\n '@media (min-width: 600px)': {\n height: '375px',\n minWidth: '550px',\n maxWidth: '550px'\n },\n '@media (min-height: 450px)': {\n height: '450px'\n }\n },\n dialogContent: {\n // padding: '0',\n paddingTop: '0!important',\n padding: '0px 24px',\n minHeight: '215px',\n height: '215px',\n display: 'flex'\n },\n accessingInfoWrapper: {\n padding: '0px 24px'\n },\n dialogActions: {\n padding: '13px 20px',\n margin: 0\n },\n addButton: {\n margin: '0 4px'\n }\n});\n\nfunction ProxyTunnelInfo(props) {\n const { classes, close, fullScreen, message } = props;\n return (\n \n Proxy Tunnel Info \n \n {message || ''}\n \n \n \n Close\n \n \n \n );\n}\nProxyTunnelInfo.propTypes = {\n classes: PropTypes.object.isRequired,\n close: PropTypes.func.isRequired,\n fullScreen: PropTypes.bool.isRequired,\n message: PropTypes.string\n};\n\nexport default withMobileDialog()(withStyles(styles)(ProxyTunnelInfo));\n","import React, { useState, useMemo, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\n\nimport StartIcon from '@material-ui/icons/PlayArrow';\n\nimport LinkIcon from '@material-ui/icons/Link';\nimport StopIcon from '@material-ui/icons/Stop';\nimport HelpIcon from '@material-ui/icons/HelpOutline';\n\nimport withMobileDialog from '@material-ui/core/withMobileDialog';\n\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport IconButton from '@material-ui/core/IconButton';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport MenuItem from '@material-ui/core/MenuItem/MenuItem';\nimport Menu from '@material-ui/core/Menu/Menu';\nimport Dialog from '@material-ui/core/Dialog/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions/DialogActions';\nimport Button from '@material-ui/core/Button/Button';\nimport Tooltip from '@material-ui/core/Tooltip/Tooltip';\nimport { createStructuredSelector } from 'reselect';\nimport { connect } from 'react-redux';\nimport CircleIcon from '@material-ui/icons/FiberManualRecord';\nimport moment from 'moment';\nimport {\n subscribeToTopic,\n unsubscribeFromTopic,\n removeListener,\n addListener\n} from '../../utils/mqtt';\nimport { getLoggedInUser } from '../../selectors/app-selectors';\nimport AddOrEditTunnel from '../Tunnels/Modal/AddOrEditTunnel';\nimport Star from './Star';\nimport ProxyTunnelInfo from '../Tunnels/Modal/ProxyTunnelInfo';\nimport store from '../../store/get-store';\nimport { setGlobalMessageError } from '../../actions/app-actions';\nimport { MQTT_ENV } from '../../constants/api-constants';\nimport { bytesToSize } from '../../utils/helpers';\nimport { getTunnelStatuses } from '../../selectors/tunnels-selectors';\nimport Authorities from '../../containers/Authorities';\nimport {\n EDIT_TUNNEL_ACTION_AUTH,\n DELETE_TUNNEL_ACTION_AUTH\n} from '../../constants/authorities';\nimport { updateTunnel, openTunnel, stopTunnel } from '../../api/tunnel-api';\nimport useUnmounted from '../../hooks/use-unmount';\n\nconst { dispatch } = store;\n\nconst styles = () => ({\n tunnelItem: {\n borderBottom: '1px dashed #cccccc'\n },\n itemWrapper: {\n flexDirection: 'row',\n display: 'flex',\n marginTop: 2,\n fontSize: 14,\n alignItems: 'center'\n },\n tunnelItemLeftPartBottom: {\n display: 'flex',\n paddingLeft: 5,\n marginBottom: 2\n },\n tooltipText: {\n fontSize: '11px'\n },\n generatedNameItem: {\n padding: '5px',\n textTransform: 'none'\n },\n tunnelName: {\n flex: 2,\n padding: '5px 0 5px 5px',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n overflow: 'hidden'\n },\n tunnelNameInner: {\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n favouriteWrapper: {\n marginRight: 5\n },\n deviceName: {\n flex: 3,\n padding: '5px 0 5px 5px',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n overflow: 'hidden'\n },\n deviceNameInner: {\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n port: {\n padding: '5px 0 5px 5px',\n width: 50,\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n tunnelActionIcon: {\n cursor: 'pointer',\n color: '#9c27b0'\n },\n moreActionsButton: {\n padding: 5\n },\n circularIcon: {\n padding: '5px 5px 6px 6px',\n width: 34\n },\n colorGreen: {\n fill: '#61bd4f'\n },\n colorYellow: {\n fill: '#f2d600'\n },\n colorRed: {\n fill: '#eb5a46'\n },\n lastSeenIcon: {\n fontSize: 12\n }\n});\n\nconst TunnelItemMobile = ({\n classes,\n tunnel,\n tunnel: {\n _id,\n id,\n name,\n localPort,\n handleHTTP,\n deviceId,\n type,\n favourite,\n dashUrl,\n slashUrl,\n deviceName,\n status,\n startTime,\n stopTime,\n options\n } = {},\n tunnelDelete,\n onTunnelReady,\n loggedInUser,\n reloadingTunnelsInProcess,\n stoppingTunnelsInProcess,\n devicesStatuses,\n tunnelsStatuses\n}) => {\n const unMounted = useUnmounted();\n const [showProxyTunnelInfo, setShowProxyTunnelInfo] = useState(false);\n const [proxyTunnelInfoMessage, setProxyTunnelInfoMessage] = useState('');\n const [tunnelActionsAnchorEl, setTunnelActionsAnchorEl] = useState(null);\n const [openDeleteConfirmDialog, setOpenDeleteConfirmDialog] = useState(\n false\n );\n const [editTunnel, setEditTunnel] = useState(false);\n const [\n changeTunnelStateInProcess,\n setChangeTunnelStateInProcess\n ] = useState(false);\n const [doRestartAfterEditing, setDoRestartAfterEditing] = useState(false);\n const tunnelUsageData = useMemo(\n () => {\n let result = '';\n const currentTunnelStatus = tunnelsStatuses.find(\n ts => ts._id === _id\n );\n const { rx_bytes: rxBytes, tx_bytes: txBytes } =\n (currentTunnelStatus &&\n currentTunnelStatus.info &&\n currentTunnelStatus.info.networks &&\n currentTunnelStatus.info.networks.eth0) ||\n {};\n if (\n (Number(rxBytes) || rxBytes === 0) &&\n (Number(txBytes) || txBytes === 0)\n ) {\n result = bytesToSize(Number(rxBytes) + Number(txBytes));\n }\n return result;\n },\n [tunnelsStatuses]\n );\n const lastSeen = useMemo(\n () => {\n let ls;\n try {\n const statuses = devicesStatuses[tunnel.deviceId];\n if (statuses) {\n const data = JSON.parse(statuses);\n ls = data ? data.lastSeen : undefined;\n }\n } catch {}\n return ls;\n },\n [devicesStatuses, tunnel.deviceId]\n );\n\n const determineAvailability = lastSeen => {\n const newDate = Date.now();\n\n if (!lastSeen) {\n return 'offline';\n }\n\n const diffMs = newDate - lastSeen;\n const diffMins = Math.round(diffMs / (1000 * 60));\n if (diffMins > 10) {\n return 'offline';\n }\n if (diffMins > 3) {\n return 'away';\n }\n return 'online';\n };\n\n const availabilityStatus = useMemo(\n () => (lastSeen ? determineAvailability(lastSeen) : 'offline'),\n [lastSeen]\n );\n\n const lastSeenIndicatorClassName = useMemo(\n () => {\n switch (availabilityStatus) {\n case 'online':\n return classes.colorGreen;\n case 'away':\n return classes.colorYellow;\n default:\n return classes.colorRed;\n }\n },\n [availabilityStatus]\n );\n const lastSeenIndicatorTooltipMessage = useMemo(\n () => (lastSeen ? moment(lastSeen).fromNow() : 'offline'),\n [lastSeen]\n );\n\n useEffect(\n () => () => {\n const topic = `user--${loggedInUser._id}/server`;\n unsubscribeFromTopic(topic);\n },\n [loggedInUser]\n );\n\n const handleEditClick = () => {\n setEditTunnel(true);\n setTunnelActionsAnchorEl(null);\n };\n\n const handleFavouriteClick = () => {\n updateTunnel(id, {\n name,\n localPort,\n handleHTTP,\n deviceId,\n type,\n favourite: !favourite\n }).subscribe(\n tunnel => onTunnelReady(tunnel),\n () => {\n dispatch(setGlobalMessageError('Something went wrong.'));\n }\n );\n };\n\n const handleMenuClose = () => {\n setTunnelActionsAnchorEl(null);\n };\n\n const handleProxyTunnelConfigurationInfoClick = () => {\n setShowProxyTunnelInfo(true);\n setProxyTunnelInfoMessage(\n 'Proxy settings are fixed for all devices. You can change this option from Settings page.'\n );\n handleMenuClose();\n };\n\n const handleDeleteClick = () => {\n setOpenDeleteConfirmDialog(true);\n handleMenuClose();\n };\n\n const handleDelete = () => {\n tunnelDelete(tunnel.id);\n };\n\n const closeDeleteTunnelConfirmation = () => {\n setOpenDeleteConfirmDialog(false);\n };\n\n const closeEditTunnelModal = () => {\n setEditTunnel(false);\n };\n\n const closeProxyTunnelInfo = () => {\n setShowProxyTunnelInfo(false);\n setProxyTunnelInfoMessage('');\n handleMenuClose();\n };\n\n const subscribeToTopicCallback = (editedTunnel, messageActionName) => {\n const fn = (t, message) => {\n const action = JSON.parse(message);\n if (action && action.type === 'NOTIFY_USER') {\n const { payload } = action;\n const { tunnelId, action: actionName } = payload;\n if (\n tunnelId === id &&\n actionName === messageActionName &&\n t === `${MQTT_ENV}/user--${loggedInUser._id}/server`\n ) {\n onTunnelReady({ data: { ...editedTunnel } });\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n removeListener(fn);\n }\n }\n };\n addListener(fn);\n const topic = `user--${loggedInUser._id}/server`;\n subscribeToTopic(topic);\n };\n\n const handleStartClick = () => {\n setTunnelActionsAnchorEl(null);\n setChangeTunnelStateInProcess(true);\n openTunnel({\n tunnelId: id,\n options,\n deviceId\n }).subscribe(\n res => {\n if (res && res.data && res.data.tunnel) {\n subscribeToTopicCallback(res.data.tunnel, 'start_tunnel');\n } else {\n dispatch(setGlobalMessageError(\"Can't start tunnel\"));\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n },\n () => {\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n );\n };\n\n useEffect(\n () => {\n if (doRestartAfterEditing) {\n setDoRestartAfterEditing(false);\n handleStartClick();\n }\n },\n [doRestartAfterEditing]\n );\n\n const handleStopClick = () => {\n setTunnelActionsAnchorEl(null);\n setChangeTunnelStateInProcess(true);\n stopTunnel(id, { deviceId, type }).subscribe(\n res => {\n if (res && res.data && res.data.tunnel) {\n subscribeToTopicCallback(res.data.tunnel, 'stop_tunnel');\n } else {\n dispatch(setGlobalMessageError(\"Can't stop tunnel\"));\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n },\n () => {\n if (!unMounted.current) {\n setChangeTunnelStateInProcess(false);\n }\n }\n );\n };\n useEffect(\n () => {\n if (\n reloadingTunnelsInProcess &&\n status === 'started' &&\n availabilityStatus === 'online'\n ) {\n handleStartClick();\n }\n if (\n stoppingTunnelsInProcess &&\n status === 'started' &&\n availabilityStatus === 'online'\n ) {\n handleStopClick();\n }\n },\n [\n reloadingTunnelsInProcess,\n stoppingTunnelsInProcess,\n status,\n availabilityStatus\n ]\n );\n const handleMenuClick = event => {\n setTunnelActionsAnchorEl(event.currentTarget);\n };\n\n const restartTunnel = () => {\n setDoRestartAfterEditing(true);\n };\n\n return (\n \n
\n \n
\n {deviceName && (\n
\n
\n \n {deviceName}\n
\n \n )}\n {!deviceName && (\n
\n {type === 'proxy' ? (\n
\n Proxy settings are fixed for all\n devices. You can change this option\n from Settings page.\n \n }\n placement=\"right\"\n className={classes.deviceNameInner}\n >\n
\n All Devices\n
\n \n ) : (\n
\n Not Specified\n
\n )}\n
{localPort}
\n \n {!changeTunnelStateInProcess ? (\n
\n \n
\n )}\n \n Delete tunnel \n \n \n Are you sure want to delete{' '}\n {name} tunnel?\n \n \n \n \n Delete\n \n \n Close\n \n \n \n )}\n {!!(tunnelUsageData || startTime) && (\n \n {status === 'started' ? (\n <>\n {startTime && (\n
\n Started {moment(startTime).fromNow()}\n \n Last time started{' '}\n {moment(startTime).fromNow()}\n \n )}\n {stopTime && (\n \n Stopped {moment(stopTime).fromNow()}\n \n )}\n \n )}\n\n {tunnelUsageData && (\n \n Data: {tunnelUsageData}\n
\n )}\n \n )}\n \n \n );\n};\n\nTunnelItemMobile.propTypes = {\n classes: PropTypes.object.isRequired,\n tunnel: PropTypes.shape({\n id: PropTypes.string,\n _id: PropTypes.string,\n name: PropTypes.string,\n localPort: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n handleHTTP: PropTypes.bool,\n deviceId: PropTypes.string,\n type: PropTypes.string,\n favourite: PropTypes.bool,\n engine: PropTypes.shape({\n address: PropTypes.string\n }),\n dashUrl: PropTypes.string,\n slashUrl: PropTypes.string,\n deviceName: PropTypes.string,\n clientPort: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n status: PropTypes.string,\n startTime: PropTypes.number,\n stopTime: PropTypes.number,\n options: PropTypes.object\n }).isRequired,\n tunnelDelete: PropTypes.func.isRequired,\n onTunnelReady: PropTypes.func.isRequired,\n loggedInUser: PropTypes.object.isRequired,\n reloadingTunnelsInProcess: PropTypes.bool,\n stoppingTunnelsInProcess: PropTypes.bool,\n devicesStatuses: PropTypes.object.isRequired,\n tunnelsStatuses: PropTypes.array.isRequired\n};\n\nconst mapStateToProps = createStructuredSelector({\n loggedInUser: getLoggedInUser(),\n tunnelsStatuses: getTunnelStatuses()\n});\nexport default connect(mapStateToProps)(\n withMobileDialog()(withStyles(styles)(TunnelItemMobile))\n);\n","import React, { useEffect, useState } from 'react';\nimport Hidden from '@material-ui/core/Hidden';\nimport PropTypes from 'prop-types';\nimport connect from 'react-redux/es/connect/connect';\nimport { createStructuredSelector } from 'reselect';\nimport TunnelItem from '../../components/shared/tunnelItem';\nimport TunnelItemMobile from '../../components/shared/tunnelItemMobile';\n\nimport { selectDevicesStatusesData } from '../../selectors/devices-selectors';\n\nconst TunnelItemHOC = ({\n tunnel: tunnelFromProps,\n tunnelDelete,\n reloadingTunnelsInProcess,\n stoppingTunnelsInProcess,\n devicesStatuses\n}) => {\n const [tunnel, setTunnel] = useState(tunnelFromProps);\n\n useEffect(\n () => {\n setTunnel(tunnelFromProps);\n },\n [tunnelFromProps]\n );\n\n const onTunnelReady = tunnel => {\n setTunnel(tunnel.data);\n };\n\n return (\n \n \n \n \n \n
\n );\n};\n\nTunnelItemHOC.propTypes = {\n tunnel: PropTypes.object.isRequired,\n tunnelDelete: PropTypes.func,\n reloadingTunnelsInProcess: PropTypes.bool,\n stoppingTunnelsInProcess: PropTypes.bool,\n devicesStatuses: PropTypes.object.isRequired\n};\n// selectDevicesStatusesData\nconst mapStateToProps = createStructuredSelector({\n devicesStatuses: selectDevicesStatusesData()\n});\n\nexport default connect(\n mapStateToProps,\n null\n)(TunnelItemHOC);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\n// import { connect } from 'react-redux';\nimport { withStyles } from '@material-ui/core/styles';\nimport IconButton from '@material-ui/core/IconButton';\nimport AddIcon from '@material-ui/icons/Add';\nimport EmptyLists from '../../components/EmptyLists';\n\nimport image from '../../assets/images/tunnel.jpg';\n\nconst styles = () => ({\n root: {\n display: 'flex',\n height: `calc(100vh - 64px)`,\n justifyContent: 'center',\n alignItems: 'center',\n flex: 1\n },\n\n flexGrow: {\n flex: '1 1 auto'\n },\n\n addModalContent: {\n position: 'absolute',\n width: 500,\n top: '50%',\n left: '50%',\n transform: `translate(-50%, -50%)`,\n backgroundColor: '#fff'\n }\n});\n\nclass EmptyTunnels extends Component {\n handleAddClick = () => {\n const { onAddTunnel } = this.props;\n if (onAddTunnel) {\n onAddTunnel();\n }\n };\n\n render() {\n const { classes } = this.props;\n\n return (\n \n
,\n
\n \n
\n \n Search \n {\n updateTunnelSearch(e.target.value);\n }}\n />\n \n
\n
\n
\n Filters:{' '}\n {ALL_TUNNEL_TYPES.map(type => (\n -1}\n onChange={() =>\n updateTunnelFilter({\n property: 'type',\n value: type\n })\n }\n value={type}\n />\n }\n label={type}\n />\n ))}\n \n \n Devices \n f.property === 'deviceStatus'\n ).value\n }\n onChange={e =>\n updateTunnelUiFilters({\n property: 'deviceStatus',\n value: e.target.value\n })\n }\n >\n All \n Online \n Away \n Offline \n \n \n \n Tunnels \n f.property === 'tunnelStatus'\n ).value\n }\n onChange={e =>\n updateTunnelUiFilters({\n property: 'tunnelStatus',\n value: e.target.value\n })\n }\n >\n All \n Started \n Stopped \n \n \n
\n \n
\n \n \n -1\n }\n onChange={() => {\n updateTunnelFilter({\n property: 'type',\n value: type\n });\n }}\n value={type}\n />\n }\n label={type}\n />\n \n ))}\n \n \n \n \n f.property === 'deviceStatus'\n ).value\n }\n onChange={e =>\n updateTunnelUiFilters({\n property: 'deviceStatus',\n value: e.target.value\n })\n }\n >\n All devices \n \n Online devices\n \n Away devices \n \n Offline devices\n \n \n \n \n f.property === 'tunnelStatus'\n ).value\n }\n onChange={e =>\n updateTunnelUiFilters({\n property: 'tunnelStatus',\n value: e.target.value\n })\n }\n >\n All tunnels \n \n Started tunnels\n \n \n Stopped tunnels\n \n \n \n
\n \n
\n
\n
\n );\n };\n\n const handleShowAddTunnelModal = () => {\n setShowAddTunnelModal(true);\n };\n\n const stopAllRunningTunnelsClick = () => {\n setTunnelsHeaderActionsAnchorEl(null);\n setShowConfirmDialog(true);\n setDialogMode('stop');\n };\n\n const reloadAllRunningTunnelsClick = () => {\n setTunnelsHeaderActionsAnchorEl(null);\n setShowConfirmDialog(true);\n setDialogMode('reload');\n };\n\n const handleTunnelsHeaderMenuClick = event => {\n setTunnelsHeaderActionsAnchorEl(event.currentTarget);\n };\n\n const handleTunnelsHeaderMenuClose = () => {\n setTunnelsHeaderActionsAnchorEl(null);\n };\n\n const doDialogAction = () => {\n if (dialogMode === 'stop') {\n onStopAllRunningTunnels();\n setTimeout(() => {\n onStopAllRunningTunnelsDone();\n }, 0);\n } else if (dialogMode === 'reload') {\n onReloadAllRunningTunnels();\n setTimeout(() => {\n onReloadAllRunningTunnelsDone();\n }, 0);\n }\n setShowConfirmDialog(false);\n };\n\n const closeTour = () => {\n setTunnelsTourVisibility(false);\n };\n\n const getTourCurrentStep = currentStep => {\n if (tunnelsTourDetails.step !== currentStep)\n setTunnelsTourStep(currentStep);\n };\n\n const noResults = !getTunnelsLoading && tunnels.length === 0 && !noFilters;\n const showHeader = !(!getTunnelsLoading && !allTunnelsCount);\n const header = (\n \n
\n
\n \n \n Device Name\n \n Connection properties\n \n \n Local port\n \n \n Actions\n \n \n