1.2.0 Websocket support - Display forward protocols

config.js

@@ -1,5 +1,5 @@
 const dev = {
-  REVERSE_PROXY_API_URL: "https://toodle.ddns.net/reverse-proxy-api",
+  REVERSE_PROXY_API_URL: "http://localhost:5050",
   CHATBOT_API_URL: "http://localhost:5061",
   REVERSE_PROXY_DOCS_URL: "https://toodle.ddns.net/docs/books/reverse-proxy"
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reverse-proxy-frontend",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1917,17 +1917,23 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "axios": {
-      "version": "0.19.2",
+      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
       "requires": {
-        "follow-redirects": "1.5.10"
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
       }
     },
     "babel-eslint": {
@@ -2646,6 +2652,14 @@
       "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -3220,14 +3234,6 @@
         "d3-time": "1"
       }
     },
-    "debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "requires": {
-        "ms": "2.0.0"
-      }
-    },
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -3415,6 +3421,11 @@
         }
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -4677,18 +4688,25 @@
       "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
     },
     "follow-redirects": {
-      "version": "1.5.10",
+      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
-      "requires": {
-        "debug": "=3.1.0"
-      }
     },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
       "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6234,14 +6252,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
-      "dev": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reverse-proxy-frontend",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "private": true,
   "description": "Reverse proxy frontend application",
   "scripts": {
@@ -14,7 +14,7 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
-    "axios": "^0.19.2",
+    "axios": "^0.27.2",
     "bootstrap": "4.3.1",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.1.1",

public/locales/en/translations.json

@@ -45,6 +45,7 @@
     "Subtitle": "from {{from}} to {{to}}",
     "From": "From",
     "To": "To",
+    "Protocols": "Protocols",
     "Options": {
       "Title": "Options",
       "Name": "Name",

public/locales/ro/translations.json

@@ -36,6 +36,7 @@
     "Subtitle": "de la {{from}} către {{to}}",
     "From": "De la",
     "To": "Către",
+    "Protocols": "Protocoale",
     "Options": {
       "Title": "Opțiuni",
       "Name": "Denumire",

src/components/common/ExpandableCard.js

@@ -40,7 +40,7 @@ const ExpandableCard = ({
           <Avatar
             aria-label="recipe"
             className={smallHeader ? classes.avatarSmall : classes.avatar}
-            variant={iconVariant || "circle"}
+            variant={iconVariant || "circular"}
           >
             {Icon}
           </Avatar>

src/components/common/styles/tableStyles.js

@@ -9,6 +9,9 @@ const styles = () => ({
     width: 20,
     height: 20,
     padding: 10
+  },
+  rowChip: {
+    maxHeight: 20
   }
 });
 

src/features/session/components/SessionForwardsComponent.js

@@ -12,7 +12,8 @@ import {
   Grid,
   Paper,
   IconButton,
-  Typography
+  Typography,
+  Chip
 } from "@material-ui/core";
 import Spinner from "../../../components/common/Spinner";
 import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
@@ -57,6 +58,7 @@ const SessionForwardsComponent = ({
                     <StyledTableCell />
                     <StyledTableCell>{t("Forward.From")}</StyledTableCell>
                     <StyledTableCell>{t("Forward.To")}</StyledTableCell>
+                    <StyledTableCell>{t("Forward.Protocols")}</StyledTableCell>
                     <StyledTableCell align="right">
                       {t("Forward.Options.Title")}
                     </StyledTableCell>
@@ -78,6 +80,24 @@ const SessionForwardsComponent = ({
                         )}
                       </StyledTableCell>
                       <StyledTableCell>{row.to}</StyledTableCell>
+                      <StyledTableCell>
+                        {row.protocols ? (
+                          <>
+                            {row.protocols.map(protocol => (
+                              <React.Fragment key={protocol}>
+                                <Chip
+                                  key={row.protocols.indexOf(protocol)}
+                                  size="small"
+                                  label={protocol}
+                                  className={classes.rowChip}
+                                />{" "}
+                              </React.Fragment>
+                            ))}
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </StyledTableCell>
                       <StyledTableCell align="right">
                         {row.optionId ? (
                           <Tooltip title={t("Forward.Options.Title")}>