table for BE infos + fixed Bootstrap CSS

qvalentin · qvalentin · commit 928e585173ce · 2020-11-08T15:56:30.000+01:00
diff --git a/webapp_frontend/public/index.html b/webapp_frontend/public/index.html
@@ -25,10 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
-    <link rel="stylesheet"
-          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-          crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/webapp_frontend/src/api.ts b/webapp_frontend/src/api.ts
@@ -3,7 +3,8 @@ import Axios from "axios";
 const uri = "http://localhost:8080";
 
 interface BackendHealthData {
-    uptimeInSeconds: number
+    uptimeInSeconds: number;
+    userCount: number
 }
 
 function callBackendHealth():Promise<BackendHealthData>{
diff --git a/webapp_frontend/src/assets/images/logos/logo.png b/webapp_frontend/src/assets/images/logos/logo.png
diff --git a/webapp_frontend/src/components/App.tsx b/webapp_frontend/src/components/App.tsx
@@ -1,11 +1,12 @@
 import React, {ReactElement, useEffect, useState} from 'react';
-import logo from '../logo.svg';
+import logo from '../assets/images/logos/logo.png';
 import './App.css';
 import {callBackendHealth} from "../api";
-import {Button} from 'react-bootstrap';
+import {Button, Table, Container} from 'react-bootstrap';
 
 function App():ReactElement {
-    const [backendLiveTime, setBackendLiveTime] = useState<number | string>("Init");
+    const [backendLiveTime, setBackendLiveTime] = useState<number | string>("not reachable");
+    const [backendUserCount, setBackendUserCount] = useState<number | string>("not reachable");
 
     useEffect(() => {
         updateVariables()
@@ -14,34 +15,46 @@ function App():ReactElement {
     function updateVariables(): void {
         Promise.all([callBackendHealth()])
             .then(([backendHealthData]) => {
-                setBackendLiveTime(backendHealthData.uptimeInSeconds)
+                setBackendLiveTime(backendHealthData.uptimeInSeconds);
+                setBackendUserCount(backendHealthData.userCount)
             })
     }
 
     return (
         <div className="App">
-            <header className="App-header">
-                <p>
-                    Hello World
-                </p>
-
-
-                <img src={logo} className="App-logo" alt="logo"/>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to reload.
-                </p>
-                <a
-                    className="App-link"
-                    href="https://reactjs.org"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Learn React
-                </a>
-                <button style={{marginTop: "20px"}} onClick={() => updateVariables()}>Test</button>
-                <Button>Dieser Bootstrap-Button funktioniert</Button>
-                <p>{backendLiveTime}</p>
-            </header>
+            <header className=""> </header>
+                <Container>
+                <h1>
+                    FileFighter
+                </h1>
+
+
+                <img src={logo}  alt="logo"/>
+
+
+
+                <div>
+                    <Button  className={"mt-3 mb-2 float-right"} onClick={() => updateVariables()}>Refresh</Button>
+                    <Table striped bordered hover variant="dark" >
+                        <thead>
+                        <tr>
+                            <th>Backend information</th>
+
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>Uptime</td>
+                            <td>{backendLiveTime}</td>
+                        </tr>
+                        <tr>
+                            <td>Usercount</td>
+                            <td>{backendUserCount}</td>
+                        </tr>
+                        </tbody>
+                    </Table>
+                </div>
+                </Container>
         </div>
     );
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,8 @@ import Axios from "axios";`
`3`	`3`	`const uri = "http://localhost:8080";`
`4`	`4`
`5`	`5`	`interface BackendHealthData {`
`6`		`- uptimeInSeconds: number`
	`6`	`+ uptimeInSeconds: number;`
	`7`	`+ userCount: number`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`function callBackendHealth():Promise<BackendHealthData>{`