initial COMP-2 draft

compendium_v2/__init__.py

@@ -35,6 +35,9 @@ def create_app():
     from compendium_v2.routes import api
     app.register_blueprint(api.routes, url_prefix='/api')
 
+    from compendium_v2.routes import service_matrix
+    app.register_blueprint(service_matrix.routes, url_prefix='/service-matrix')
+
     logging.info('Flask app initialized')
 
     environment.setup_logging()

compendium_v2/config-example.json

+{
+  "str-param": "some string",
+  "int-param": -1234
+}

compendium_v2/routes/api.py

@@ -5,6 +5,7 @@ API Endpoints
 .. contents:: :local:
 
 /api/things
+/api/service-matrix
 ---------------------
 
 .. autofunction:: compendium_v2.routes.api.things

compendium_v2/routes/service_matrix.py

+"""
+Service Matrix Endpoints
+=========================
+
+These endpoints are intended for getting service matrix.
+
+.. contents:: :local:
+
+/service-matrix
+---------------------
+
+.. autofunction:: compendium_v2.routes.service_matrix
+
+"""
+import json
+import logging
+import os
+from flask import Blueprint
+# from compendium_v2.routes import common
+
+DUMMY_DATA_FILENAME = os.path.abspath(os.path.join(
+    os.path.dirname(__file__),
+    '..',
+    'datasources',
+    'dummy-service-matrix.json'
+))
+routes = Blueprint("compendium-v2-service-matrix", __name__)
+logger = logging.getLogger(__name__)
+
+file_name = open(DUMMY_DATA_FILENAME)
+
+service_matrix_response = json.loads(file_name.read())
+
+
+@routes.route("/", methods=['GET'])
+def get_service_matrix():
+    return service_matrix_response

tox.ini

 [tox]
-envlist = py36
+envlist = py39
 
 
 [flake8]

webapp/package.json

@@ -22,12 +22,15 @@
     "eslint": "^7.22.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.1.1",
+    "image-webpack-loader": "^8.1.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.3",
+    "url-loader": "^4.1.1",
     "webpack": "^5.25.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
@@ -39,10 +42,13 @@
   "dependencies": {
     "@types/react-bootstrap-table-next": "^4.0.16",
     "bootstrap": "^4.6.0",
+    "chart.js": "^3.9.1",
+    "file-loader": "^6.2.0",
     "install": "^0.13.0",
     "npm": "^7.6.3",
     "react-bootstrap": "^2.0.2",
-    "react-bootstrap-table-next": "^4.0.3"
+    "react-bootstrap-table-next": "^4.0.3",
+    "react-chartjs-2": "^4.3.1"
   },
   "description": "## development environment",
   "main": "index.js",

webapp/src/App.tsx

+import React from 'react';
+import ServiceMatrix from './ServiceMatrix';
+
+const api_url = window.location.origin+'/';
+
+// console.log(api_url)
+
+function App(): JSX.Element {
+
+  return (
+    <div className="app">
+        <header>
+            <table className="header-table">
+                <tr className="title-background">
+                <td className="px">
+                    <img src="./images/compendium_header.png" className="logo"/>
+                </td>
+                </tr>
+            </table>
+        </header>
+        <div>
+            < ServiceMatrix
+            api_url={api_url}
+            />
+        </div>
+        <footer className="footer">
+            <table className="">
+                <tr className="title-background">
+                    <td className="px">
+                        <img src="./images/eu_flag.png" className="footer-img"/>
+                    </td>
+                    <td className="footer-text">
+                        European Commision As part of the GEANT 2020 Framework Partnership Agreement (FPA, the GN4-3 and GN4-3N projects<br/>
+                        receive funding from the European Union&apos;s Horizon 2020 research and innovation programme under Grant Agreement No.<br/>
+                        856726 (GN4-3) and Grant Agreement 856728 (GN4-3N)
+                    </td>
+                </tr>
+            </table>
+        </footer>
+    </div>
+  );
+}
+
+export default App;
\ No newline at end of file

webapp/src/ServiceMatrix.tsx

+import React, {ReactElement, useEffect, useState} from 'react';
+
+
+ 
+export interface IAppProps {
+    api_url?: string;
+}
+
+const ServiceMatrix: React.FC<IAppProps> = (props) => {
+
+    // const [rows, setRows] = React.useState<ServiceMatrix[]>([]);
+    
+    console.log('re-rendering ServiceMatrix')
+
+    useEffect(() => {
+        async function loadData() {
+//           const response = await fetch(props.api_url+'/service-matrix');
+          const response = await fetch('http://[::1]:33333:5000/service-matrix');
+          const rsp_json = await response.json();
+            console.log('got response');
+  
+        }
+        loadData();
+      }, []);
+     return <React.Fragment>
+     <div>
+          ${props.api_url}
+     </div>
+    </React.Fragment>
+};
+
+ServiceMatrix.defaultProps = {
+    api_url: window.location.origin + '/service-matrix'
+};
+
+
+
+export default ServiceMatrix;

webapp/src/index.tsx

 import React from "react";
 import ReactDOM from "react-dom";
 import Things from "./Things"
+import App from './App';
+
 
 const query = new URLSearchParams(window.location.search);
 
 if (query.has('test'))
   ReactDOM.render(
     <Things
-      refresh_frequency_ms={50000}
-      api_url={'http://127.0.0.1:5000/api/things'} />,
+      refresh_frequency_ms={500000}
+      api_url={'http://[::1]:33333/api/things'} />,
     document.getElementById("root") as HTMLElement);
 else
-  ReactDOM.render(
-    <Things />,
-    document.getElementById("root") as HTMLElement);
\ No newline at end of file
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
\ No newline at end of file