Add subscription page and go to it from click on subscription row in table (#195)

docker/docker-compose.yml

@@ -51,6 +51,8 @@ services:
       - shared:/rpc
       - lnd_dir:/root/.lnd
       - ./config.ini:/app/config.ini
+    ports:
+      - 8774:8774
     links:
       - "btcd:btcd"
       - "lnd:lnd"

frontend/squeak-node-frontend/src/components/Layout/Layout.js

@@ -27,6 +27,7 @@ import Profiles from "../../pages/profiles";
 import Icons from "../../pages/icons";
 import Charts from "../../pages/charts";
 import Subscriptions from "../../pages/subscriptions";
+import Subscription from "../../pages/subscription";
 
 // context
 import { useLayoutState } from "../../context/LayoutContext";
@@ -57,6 +58,7 @@ function Layout(props) {
               <Route path="/app/profiles" component={Profiles} />
               <Route path="/app/lightning" component={Lightning} />
               <Route path="/app/subscriptions" component={Subscriptions} />
+              <Route path="/app/subscription/:id" component={Subscription} />
               <Route path="/app/notifications" component={Notifications} />
               <Route
                 exact

frontend/squeak-node-frontend/src/pages/subscription/Subscription.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import {
+  Grid,
+  FormLabel,
+  FormControl,
+  FormGroup,
+  FormControlLabel,
+  FormHelperText,
+  Switch,
+} from "@material-ui/core";
+
+// styles
+import useStyles from "./styles";
+
+// components
+import PageTitle from "../../components/PageTitle";
+import Widget from "../../components/Widget";
+
+import {
+  GetSubscriptionRequest,
+} from "../../proto/squeak_admin_pb"
+import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+
+var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
+
+export default function SubscriptionPage() {
+  var classes = useStyles();
+  const { id } = useParams();
+  const [subscription, setSubscription] = useState(null);
+
+  const getSubscription = (id) => {
+        console.log("called getSubscription with subscriptionId: " + id);
+        var getSubscriptionRequest = new GetSubscriptionRequest()
+        getSubscriptionRequest.setSubscriptionId(id);
+        console.log(getSubscriptionRequest);
+        client.getSubscription(getSubscriptionRequest, {}, (err, response) => {
+          console.log(response);
+          setSubscription(response.getSqueakSubscription())
+        });
+  };
+
+
+  useEffect(()=>{
+    getSubscription(id)
+  },[id]);
+
+
+  function NoSubscriptionContent() {
+    return (
+      <p>
+        No subscription loaded
+      </p>
+    )
+  }
+
+  function SubscriptionContent() {
+    return (
+      <>
+        <p>
+          Subscription name: {subscription.getSubscriptionName()}
+        </p>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <PageTitle title={'Subscription: ' + (subscription ? subscription.getSubscriptionName() : null)} />
+      <div>
+      {subscription
+        ? SubscriptionContent()
+        : NoSubscriptionContent()
+      }
+      </div>
+    </>
+  );
+}

frontend/squeak-node-frontend/src/pages/subscription/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Subscription",
+  "version": "0.0.0",
+  "main": "Subscription.js",
+  "private": true
+}

frontend/squeak-node-frontend/src/pages/subscription/styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  dashedBorder: {
+    border: "1px dashed",
+    borderColor: theme.palette.primary.main,
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+    marginTop: theme.spacing(1),
+  },
+  text: {
+    marginBottom: theme.spacing(2),
+  },
+}));

frontend/squeak-node-frontend/src/pages/subscriptions/Subscriptions.js

@@ -67,6 +67,10 @@ export default function Subscriptions() {
     });
   };
 
+  const goToSubscriptionPage = (id) => {
+    history.push("/app/Subscription/" + id);
+  };
+
   const handleClickOpenCreateSubscriptionDialog = () => {
     setCreateSubscriptionDialogOpen(true);
   };
@@ -106,21 +110,33 @@ export default function Subscriptions() {
            title="Subscriptions"
            data={subscriptions.map(s =>
               [
+                s.getSubscriptionId(),
                 s.getSubscriptionName(),
                 s.getHost(),
                 s.getPort(),
               ]
             )}
-           columns={["Name", "Host", "Port"]}
+           columns={[
+             {
+               name: "Id",
+               options: {
+                 display: false,
+               }
+             },
+             "Name",
+             "Host",
+             "Port",
+           ]}
            options={{
              filter: false,
              print: false,
              viewColumns: false,
              selectableRows: "none",
              onRowClick: rowData => {
-               var host = rowData[1];
-               console.log("clicked on host" + host);
-             }
+               var id = rowData[0];
+               console.log("clicked on id" + id);
+               goToSubscriptionPage(id);
+             },
            }}/>
        </Grid>
      </Grid>