Add quality of service option to subscriptions

Fixes #323, #14, #334 Fixes #132
2020-04-20 12:18:24 +02:00
parent e87a7115c5
commit b72fc48bdb
19 changed files with 904 additions and 215 deletions
--- a/app/src/components/ConnectionSetup/Subscriptions.tsx
+++ b/app/src/components/ConnectionSetup/Subscriptions.tsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from 'react'
+import Delete from '@material-ui/icons/Delete'
+import { connectionManagerActions } from '../../actions'
+import { ConnectionOptions } from '../../model/ConnectionOptions'
+import {
+  IconButton,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  Paper,
+  Theme,
+} from '@material-ui/core'
+import { bindActionCreators } from 'redux'
+import { withStyles } from '@material-ui/styles'
+import { connect } from 'react-redux'
+
+function Subscriptions(props: {
+  classes: any
+  connection: ConnectionOptions
+  managerActions: typeof connectionManagerActions
+}) {
+  const { classes, connection, managerActions } = props
+
+  return (
+    <TableContainer component={Paper} className={`${classes.topicList} advanced-connection-settings-topic-list`}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell align="left" padding="checkbox" className={classes.tableTitleCell}></TableCell>
+            <TableCell className={classes.tableTitleCell}>Topic</TableCell>
+            <TableCell align="right" className={classes.tableTitleCell}>
+              QoS
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {connection.subscriptions.map(subscription => (
+            <TableRow key={subscription.topic + '_qos_' + subscription.qos}>
+              <TableCell align="right" className={classes.tableCell}>
+                <IconButton
+                  onClick={() => managerActions.deleteSubscription(subscription, connection.id)}
+                  style={{ padding: '6px' }}
+                >
+                  <Delete />
+                </IconButton>
+              </TableCell>
+
+              <TableCell component="th" scope="row" className={classes.tableCell}>
+                {subscription.topic}
+              </TableCell>
+              <TableCell align="right" className={classes.tableCell}>
+                {subscription.qos}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    managerActions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const styles = (theme: Theme) => ({
+  tableCell: {
+    paddingTop: 0,
+    paddingBottom: 0,
+    wordBbreak: 'break-word',
+  },
+  tableTitleCell: {
+    paddingTop: `${theme.spacing(0.5)}px`,
+    paddingBottom: `${theme.spacing(0.5)}px`,
+  },
+  topicList: {
+    height: '196px',
+    overflowY: 'scroll' as 'scroll',
+    margin: `${theme.spacing(1)}px ${theme.spacing(1)}px 0 ${theme.spacing(1)}px`,
+    backgroundColor: theme.palette.background.default,
+    width: 'auto',
+  },
+})
+
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions))