Merge pull request #2 from clightning4j/metrics_view

Start to work on the metrics view.

Author: vincenzopalazzo

.env.local

@@ -0,0 +1 @@
+NEXT_PUBLIC_REST_URL=http://localhost:7001

.github/workflows/build.yml

@@ -0,0 +1,15 @@
+name: Check build in production mode
+on: [push, pull_request]
+
+jobs:
+  build:
+    name: Build app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        run: |
+          npm install
+          npm build

.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+*.idea
 # dependencies
 /node_modules
 /.pnp

.idea/vcs.xml

@@ -0,0 +1,49 @@
+# CONTRIBUTING
+
+Contributions are very welcome. When contributing code, please follow these
+simple guidelines.
+
+* Make happy Github actions.
+* Write properly formatted git commits (see below).
+* If you don't know where to start, look to the good first issue, or [open a discussion](https://github.com/clightning4j/JRPClightning/discussions)
+
+Git commits
+-----------
+A properly formed git commit subject line should always be able to complete the
+following sentence:
+
+     If applied, this commit will _____
+
+For example, the following message is well formed:
+
+     Add support for .gif files
+
+In addition, it should be capitalized and *must not* include a period.
+
+When it comes to formatting, here's a model git commit message[1]:
+
+     Capitalized, short (50 chars or less) summary
+
+     More detailed explanatory text, if necessary.  Wrap it to about 72
+     characters or so.  In some contexts, the first line is treated as the
+     subject of an email and the rest of the text as the body.  The blank
+     line separating the summary from the body is critical (unless you omit
+     the body entirely); tools like rebase can get confused if you run the
+     two together.
+
+     Write your commit message in the imperative: "Fix bug" and not "Fixed bug"
+     or "Fixes bug."  This convention matches up with commit messages generated
+     by commands like git merge and git revert.
+
+     Further paragraphs come after blank lines.
+
+     - Bullet points are okay, too.
+
+     - Typically a hyphen or asterisk is used for the bullet, followed by a
+       single space, with blank lines in between, but conventions vary here.
+
+     - Use a hanging indent.
+
+---
+
+[1]: http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html

.idea/workspace.xml

@@ -6,11 +6,20 @@ import {
     Container,
     IconButton,
     Toolbar,
-    Typography
 } from "@material-ui/core"
 import {Menu, Home, PieChart} from "@material-ui/icons"
 import theme from '../../theme/DarkTheme'
 import Loading from "../genericView/Loading.component"
+import Chip from "@material-ui/core/Chip";
+import Grid from "@material-ui/core/Grid";
+import {ViewName} from "../../pages";
+
+const colorByNetwork = {
+    "bitcoin": "f2a900",
+    "testnet": "4d4d4e",
+    "liquid": "009688",
+    "litecoin": "",
+}
 
 class BasicAppBar extends React.Component {
     constructor(props, context) {
@@ -35,26 +44,44 @@ class BasicAppBar extends React.Component {
     }
 
     render() {
-        const {child, value, nameNode, changeValue} = this.props
+        const {child, value, mappingButton, network, changeValue} = this.props
+        console.log(mappingButton);
         return (
             <Container maxWidth="xl">
                 <AppBar position="sticky" style={{
                     backgroundColor: theme.palette.background.paper
                 }}>
                     <Toolbar>
-                        <IconButton onClick={()=> console.log("Click on menu icon")} disabled={true} edge="start" color="inherit" aria-label="menu">
-                            <Menu />
-                        </IconButton>
-                        <Typography color="textSecondary" variant="h6">
-                            {nameNode}
-                        </Typography>
+                        <Grid justifyContent="space-between"
+                              alignItems="center"
+                              container
+                        >
+                            <Grid item>
+                                <IconButton onClick={() => console.log("Click on menu icon")} disabled={true}
+                                            edge="start"
+                                            color="inherit" aria-label="menu">
+                                    <Menu/>
+                                </IconButton>
+                            </Grid>
+                            <Grid item>
+                                <Chip
+                                    label={network}
+                                    style={{
+                                        background: "#" + colorByNetwork[network],
+                                    }}
+                                />
+                            </Grid>
+                        </Grid>
                     </Toolbar>
                 </AppBar>
-                {this.state.ready ? child : <Loading />}
-                <Box mb={theme.spacing(2)} />
+                <Box m={theme.spacing(1)} mb={theme.spacing(2)}>
+                    {this.state.ready ? child : <Loading/>}
+                </Box>
                 <AppBar position="fixed" className="navigation-style"
-                        style={{ backgroundColor: theme.palette.background.paper,
-                            top: "auto", bottom: 0}}>
+                        style={{
+                            backgroundColor: theme.palette.background.paper,
+                            top: "auto", bottom: 0
+                        }}>
                     <BottomNavigation
                         value={value}
                         onChange={(event, newValue) => {
@@ -63,8 +90,8 @@ class BasicAppBar extends React.Component {
                             this.loadDom()
                         }}
                     >
-                        <BottomNavigationAction label="Home" value="home" icon={<Home/>} />
-                        <BottomNavigationAction disabled={true} label="Metrics" value="metrics" icon={<PieChart/>} />
+                        <BottomNavigationAction label="Home" value={ViewName.HOME} disabled={mappingButton[ViewName.HOME] === false} icon={<Home/>}/>
+                        <BottomNavigationAction label="Metrics" value={ViewName.METRICS} disabled={mappingButton[ViewName.METRICS] === false} icon={<PieChart/>}/>
                     </BottomNavigation>
                 </AppBar>
             </Container>

CONTRIBUTING.md

@@ -10,7 +10,7 @@ export default function Loading({ size = 75 }) {
             spacing={0}
             direction="column"
             alignItems="center"
-            justify="center"
+            justifyContent="center"
         >
             <Grid item xs={3}>
                 <ReactLoading  type="bars"/>

components/appbar/BasicAppBar.component.jsx

@@ -7,7 +7,7 @@ export default function Offline({ size = 90 }: { size?: number }) {
             spacing={0}
             direction="column"
             alignItems="center"
-            justify="center"
+            justifyContent="center"
         >
             <Grid item xs={3}>
                 <Typography variant="h6" style={{ flex: 1 }}>

components/genericView/Loading.component.jsx

@@ -56,21 +56,18 @@ export default function HomeView({nodeInfo, show}: ParentProps) {
         mapAddress.set(addr.type, addr);
     }
 
-
-
     return <Grid
         container
-        style={{marginTop: "5em"}}
         direction="row"
-        justify="center"
+        justifyContent="center"
         alignItems="center"
     >
         <Card>
             <CardContent>
                 <Grid
                     container
                     direction="row"
-                    justify="center"
+                    justifyContent="center"
                     alignItems="center"
                 >
                     <Box component="span" m={1}>
@@ -91,7 +88,7 @@ export default function HomeView({nodeInfo, show}: ParentProps) {
                 </Grid>
                 <Grid container
                       direction="row"
-                      justify="center"
+                      justifyContent="center"
                       alignItems="center">
                     <FormControl variant="outlined" style={{
                         margin: theme.spacing(2),
@@ -121,7 +118,7 @@ export default function HomeView({nodeInfo, show}: ParentProps) {
         <Grid
             container
             direction="row"
-            justify="center"
+            justifyContent="center"
             alignItems="center"
         >
             <NodeTable show={show}/>