Add router and Detail page

75b4454a · Chif Gergő · 9ec117c0 · 75b4454a · 75b4454a · 75b4454a
Commit 75b4454a authored May 13, 2019 by Chif Gergő
Showing with 173 additions and 22 deletions

package-lock.json
+93 -0

package.json
+2 -0

src/views/App.js
+6 -20

src/views/Home.js
+27 -0

src/views/InstanceDetail.js
+25 -0

src/views/InstanceView.js
+4 -2

src/views/Main.js
+16 -0

No files found.
--- a/package-lock.json
+++ b/package-lock.json
@@ -3647,6 +3647,15 @@
        "sha.js": "^2.4.8"
      }
    },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
    "cross-spawn": {
      "version": "6.0.5",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5682,6 +5691,11 @@
      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
    },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
    "gzip-size": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -5856,6 +5870,19 @@
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
+    "history": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
+      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^0.4.0"
+      }
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -10292,6 +10319,52 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "react-router": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz",
+      "integrity": "sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "^0.2.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz",
+      "integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
    "react-scripts": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.0.tgz",
@@ -10696,6 +10769,11 @@
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
    },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -11826,6 +11904,16 @@
      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
    },
+    "tiny-invariant": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
+      "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+    },
+    "tiny-warning": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+      "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+    },
    "tmp": {
      "version": "0.0.33",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12268,6 +12356,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
    "grommet-controls": "^1.1.19",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "styled-components": "^4.2.0",
    "typeface-roboto": "0.0.54"

--- a/src/views/App.js
+++ b/src/views/App.js
 import React, { useState } from "react";
-import { Grommet, Box, ResponsiveContext, Grid } from "grommet";
+import { Grommet, Box, ResponsiveContext } from "grommet";
 import theme from "../style/Theme";
 import PageHeader from "./PageHeader";
 import SideMenu from "./SideMenu";
-import InstanceView from "./InstanceView";
+import Main from "./Main";
-import TemplateView from "./TemplateView";
+import { BrowserRouter as Router} from "react-router-dom";
 function App() {
  const [showSideBar, setShowSideBar] = useState(false);
  return (
+    <Router>
      <Grommet theme={theme} full>
        <ResponsiveContext.Consumer>
          {size => (
@@ -23,28 +24,13 @@ function App() {
                  showSideBar={showSideBar}
                  setShowSideBar={setShowSideBar}
                />
-              <Grid
+              <Main size={size}/>
-                areas={[
-                  { name: "instances", start: [0, 0], end: [0, 0] },
-                  { name: "templates", start: [1, 0], end: [1, 0] }
-                ]}
-                columns={["flex", "flex"]}
-                rows={["flex"]}
-                gap="small"
-                margin="small"
-              >
-                <Box gridArea="instances">
-                  <InstanceView size={size} />
-                </Box>
-                <Box gridArea="templates">
-                  <TemplateView size={size} />
-                </Box>
-              </Grid>
              </Box>
            </Box>
          )}
        </ResponsiveContext.Consumer>
      </Grommet>
+    </Router>
  );
 }

--- a/src/views/Home.js
+++ b/src/views/Home.js
+import React from 'react'
+import { Grid, Box } from 'grommet'
+import InstanceView from './InstanceView'
+import TemplateView from './TemplateView'
+const Main = (props) => {
+   return(<Grid
+            areas={[
+            { name: "instances", start: [0, 0], end: [0, 0] },
+            { name: "templates", start: [1, 0], end: [1, 0] }
+            ]}
+            columns={["flex", "flex"]}
+            rows={["flex"]}
+            gap="small"
+            margin="small"
+            >
+            <Box gridArea="instances">
+                <InstanceView size={props.size} />
+            </Box>
+            <Box gridArea="templates">
+                <TemplateView size={props.size} />
+            </Box>
+        </Grid>);
+    }
+export default Main;
\ No newline at end of file
--- a/src/views/InstanceDetail.js
+++ b/src/views/InstanceDetail.js
+import React, { useState, useEffect } from 'react'
+import { Heading } from 'grommet'
+export const InstanceDetail = ({match}) => {
+    const [instance, setInstance] = useState({})
+    useEffect(() => {
+        console.log(match.params.instanceid)
+        fetch("http://vm.niif.cloud.bme.hu:20778/api/v1/instances/"+match.params.instanceid)
+        .then((data) => data.json())
+        .then((data) => setInstance(data))
+    }, [])
+    return(
+        <div>
+            <Heading >Name: {instance.name}</Heading>
+            <Heading >Description: {instance.description}</Heading>
+            <Heading >Access method:{instance.access_method}</Heading>
+            <Heading >System: {instance.system}</Heading>
+            <Heading >Suspend at: {instance.time_of_suspend}</Heading>
+            <Heading >Delete at: {instance.time_of_delete}</Heading>
+        </div>
+    );
+}
+export default InstanceDetail;
--- a/src/views/InstanceView.js
+++ b/src/views/InstanceView.js
@@ -3,8 +3,9 @@ import { Box, Heading, Button } from "grommet";
 import { Card } from "grommet-controls";
 import LoadingWrapper from "./LoadingWrapper";
 import { ChapterAdd } from "grommet-icons";
+import { withRouter } from "react-router"
-const InstanceView = () => {
+const InstanceView = ({history}) => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
@@ -38,6 +39,7 @@ const InstanceView = () => {
            elevation="medium"
            pad="medium"
            border={{ size: "none" }}
+            onClick= {() =>  history.push('/instance/' + e.id)}
          >
            <Card.CardTitle>{e.name}</Card.CardTitle>
            <Card.CardContent>{e.name}</Card.CardContent>
@@ -48,4 +50,4 @@ const InstanceView = () => {
  );
 };
-export default InstanceView;
+export default withRouter(InstanceView);
--- a/src/views/Main.js
+++ b/src/views/Main.js
+import React from 'react'
+import { Switch, Route } from 'react-router-dom'
+import Home from './Home'
+import InstanceDetail from "./InstanceDetail"
+const Main = (props) => {
+    return(
+    <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/instance/:instanceid" component={InstanceDetail} />
+    </Switch>
+    );
+}
+export default Main;
\ No newline at end of file