Merge master into TMSS-266

.gitlab-ci.yml

@@ -107,9 +107,9 @@ build_MCU_MAC:
     - cd build/gnucxx11_opt
     - cmake -DBUILD_PACKAGES=$PACKAGE -DWINCC_ROOT_DIR=/opt/WinCC_OA/3.16/ -DBLITZ_ROOT_DIR=/opt/blitz/ -DCASACORE_ROOT_DIR=/opt/casacore/ -DCMAKE_INSTALL_PREFIX=/opt/lofar ../..
     - make -j 12
-    - make DESTDIR=${CI_BUILDS_DIR}/install install
-    - cd ${CI_BUILDS_DIR}/install/opt/lofar
-    - tar --ignore-failed-read --exclude=include -czf MCU_MAC_${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHORT_SHA}.ztar *
+    - make DESTDIR=${CI_BUILDS_DIR}/${CI_COMMIT_SHORT_SHA}/install install
+    - cd ${CI_BUILDS_DIR}/${CI_COMMIT_SHORT_SHA}/install/opt/lofar
+    - tar --ignore-failed-read --exclude=include --exclude="*.ztar" -czf MCU_MAC_${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHORT_SHA}.ztar *
     - curl --insecure --upload-file MCU_MAC_${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHORT_SHA}.ztar -u upload:upload https://support.astron.nl/nexus/content/repositories/branches/nl/astron/lofar/${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHORT_SHA}/MCU_MAC_${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHORT_SHA}.x86_64.ztar
 
   dependencies:

Docker/lofar-ci/Dockerfile_ci_sas

@@ -18,7 +18,6 @@ ENV PATH /usr/pgsql-9.6/bin:$PATH
 
 RUN pip3 install cython kombu lxml requests pygcn xmljson mysql-connector-python python-dateutil Django==3.0.9 djangorestframework djangorestframework-xml ldap==1.0.2 flask fabric coverage python-qpid-proton PyGreSQL numpy h5py psycopg2 testing.postgresql Flask-Testing scipy Markdown django-filter python-ldap python-ldap-test ldap3 djangorestframework django-jsonforms django-json-widget django-jsoneditor drf-yasg flex swagger-spec-validator django-auth-ldap mozilla-django-oidc jsonschema comet
 
-
 # Note: nodejs now comes with npm, do not install the npm package separately, since that will be taken from the epel repo and is conflicting.
 RUN echo "Installing Nodejs packages..." && \
     curl -sL https://rpm.nodesource.com/setup_14.x | bash - && \

SAS/TMSS/CMakeLists.txt

 
 
-lofar_package(TMSS 0.1 DEPENDS PyCommon pyparameterset PyMessaging ResourceAssigner)
+lofar_package(TMSS 0.1 DEPENDS PyCommon pyparameterset PyMessaging ResourceAssigner TaskPrescheduler)
 lofar_add_package(TMSSClient client)
 
 add_subdirectory(src)

SAS/TMSS/frontend/CMakeLists.txt

-add_subdirectory(frontend_poc)
+# add_subdirectory(frontend_poc)
\ No newline at end of file
+add_subdirectory(tmss_webapp)

SAS/TMSS/frontend/tmss_webapp/CMakeLists.txt

+include(NPMInstall)
+npm_install(package.json PUBLIC public SOURCE src DESTINATION ${PYTHON_INSTALL_DIR}/lofar/sas/frontend/tmss_webapp/build)

SAS/TMSS/frontend/tmss_webapp/package.json

@@ -3,17 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.1",
     "@json-editor/json-editor": "^2.3.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
+    "cleave.js": "^1.6.0",
+    "flatpickr": "^4.6.3",
     "font-awesome": "^4.7.0",
     "history": "^5.0.0",
+    "lodash": "^4.17.19",
+    "match-sorter": "^4.1.0",
+    "moment": "^2.27.0",
     "node-sass": "^4.12.0",
     "primeflex": "^1.3.0",
     "primeicons": "^4.0.0",
     "primereact": "^4.2.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-bootstrap": "^1.0.1",
@@ -21,9 +29,13 @@
     "react-dom": "^16.13.1",
     "react-frame-component": "^4.1.2",
     "react-json-view": "^1.19.1",
+    "react-loader-spinner": "^3.1.14",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-transition-group": "^1.2.1",
+    "react-table": "^7.2.1",
+    "react-transition-group": "^2.5.1",
+    "reactstrap": "^8.5.1",
+    "styled-components": "^5.1.1",
     "typescript": "^3.9.5",
     "yup": "^0.29.1"
   },
@@ -33,6 +45,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "proxy": "http://127.0.0.1:8008/",
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -47,5 +60,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "customize-cra": "^0.9.1",
+    "react-app-rewired": "^1.6.2"
   }
 }

SAS/TMSS/frontend/tmss_webapp/public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

SAS/TMSS/frontend/tmss_webapp/src/App.css

@@ -29,6 +29,177 @@
   color: #61dafb;
 }
 
+label {
+  font-size: 14px;
+  font-weight: 600;
+  align-items: flex-start !important;
+  color: #004B93;
+  margin-bottom: 10px;
+}
+
+h2, .h2 {
+  font-size: 1.5rem;
+}
+
+h3, .h3 {
+  font-size: 1.25rem;
+}
+
+h5, .h5 {
+  font-size: 15px !important;
+}
+
+a{
+  margin-bottom: 10px;
+}
+
+.main-content span,a{
+  font-size: 14px;
+}
+
+#editor_holder {
+  padding: 0px 10px;
+}
+
+.chips-readonly > ul {
+  border: none;
+}
+
+p {
+  font-size: 14px;
+}
+
+.card {
+  border: none;
+}
+
+.card-title {
+  margin-bottom: 0.5rem;
+}
+
+.card-body {
+  padding: 0.25rem;
+  margin-bottom: 5px !important;
+}
+
+.form-group {
+  margin-bottom: 5px !important;
+}
+
+.btn-group {
+  margin-bottom: 5px;
+}
+
+.p-field {
+  margin-bottom: 0.5rem;
+}
+
+.p-inputtext {
+  padding-top: 0.25em !important;
+  padding-bottom: 0.25em !important;
+  padding-left: 0.25em !important;
+}
+
+.act-btn-grp {
+  margin-top: 20px;
+}
+
+.task-list {
+  padding-inline-start: 0px;
+}
+
+.task-list > li {
+  list-style: none;
+}
+
+.col-filter-btn {
+  margin-left: 15px;
+  padding-top: 5px;
+  cursor: pointer;
+}
+
+#editor_holder label {
+  text-transform: capitalize;
+  color: #28289b;
+}
+
+.p-multiselect-label {
+  margin-bottom: 0px;
+}
+
+.resource-input-grid div {
+  margin-bottom: 1rem;
+}
+
+.layout-main .fa {
+  color: #005b9f;
+  font-size: 20px;
+}
+
+thead {
+  background-color: #ebeaea;
+}
+
+.error {
+  color: #dc3545;
+  font-size: 80%;
+  font-weight: 400;
+}
+
+.info {
+  color: #b4b2b2;
+  font-size: 80%;
+  font-weight: 400;
+}
+
+.input-error {
+  border-color: #dc3545 !important;
+}
+
+.p-tooltip-custom .p-tooltip-text {
+  /* background-color: #49b0ff !important; */
+}
+
+.p-link:focus {
+  box-shadow: none !important;
+}
+
+.pi-primary {
+  color: #007ad9;
+}
+
+.pi-warning {
+  color: #ffba01;
+}
+
+.pi-success {
+  color: #34A835;
+}
+
+.pi-info {
+  color: #008fba;
+}
+
+.pi-error {
+  color: #e91224;
+}
+
+.pi-small {
+  font-size: rem !important;
+}
+
+.pi-medium {
+  font-size: 1.5rem !important;
+}
+
+.pi-large {
+  font-size: 2rem !important;
+}
+
+.pi-x-large {
+  font-size: 3rem !important;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

SAS/TMSS/frontend/tmss_webapp/src/App.js

 import React, {Component} from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-
+import classNames from 'classnames';
 import {AppTopbar} from './layout/components/AppTopbar';
 import {AppMenu} from './layout/components/AppMenu';
-import { AppFooter } from './layout/components/AppFooter';
+import {AppFooter } from './layout/components/AppFooter';
 import {RoutedContent} from './routes';
+import {AppBreadcrumb } from "./layout/components/AppBreadcrumb";
+import {withRouter } from 'react-router';
 
-// import {Dashboard} from './routes/dashboard/dashboard';
-
+import 'primeicons/primeicons.css';
+import 'primereact/resources/themes/nova-light/theme.css';
+import 'primereact/resources/primereact.css';
 import './layout/layout.scss';
-// import './App.css';
-
+import 'primeflex/primeflex.css';
+import './App.scss';
+import './App.css';
 
 class App extends Component {
-
-  constructor() {
+    constructor() {
     super();
     this.state = {
+	  layoutMode: 'static',
       currentMenu: '',
-      currentPath: '/'
-    }
-    this.onMenuItemClick = this.onMenuItemClick.bind(this)
-    this.menu = [
+      currentPath: '/',
+	  staticMenuInactive: false,
+            overlayMenuActive: false,
+            mobileMenuActive: false,
+    };
+	    this.onWrapperClick = this.onWrapperClick.bind(this);
+        this.onToggleMenu = this.onToggleMenu.bind(this);
+        this.onSidebarClick = this.onSidebarClick.bind(this);
+        this.onMenuItemClick = this.onMenuItemClick.bind(this);
+  
+      this.menu = [
       {label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard'},
-      {label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/scheduling'}
+      {label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/schedulingunit'},
+      {label: 'Tasks', icon: 'pi pi-fw pi-check-square', to:'/task'},
+      {label: 'Project', icon: 'fa fa-fw fa-binoculars', to:'/project'}
     ];
 
     // this.menuComponent = {'Dashboard': Dashboard}
   }
+    
+	onWrapperClick(event) {
+        if (!this.menuClick) {
+            this.setState({
+                overlayMenuActive: false,
+                mobileMenuActive: false
+            });
+        }
 
-  onMenuItemClick(event) {
-    console.log(event);
-    this.setState({currentMenu:event.item.label, currentPath: event.item.path});
-  }
+        this.menuClick = false;
+    }
 
+    onToggleMenu(event) {
+        this.menuClick = true;
+        if (this.isDesktop()) {
+            if (this.state.layoutMode === 'overlay') {
+                this.setState({
+                    overlayMenuActive: !this.state.overlayMenuActive
+                });
+            }
+            else if (this.state.layoutMode === 'static') {
+                this.setState({
+                    staticMenuInactive: !this.state.staticMenuInactive
+                });
+            }
+        }
+        else {
+            const mobileMenuActive = this.state.mobileMenuActive;
+            this.setState({
+                mobileMenuActive: !mobileMenuActive
+            });
+        }
+       event.preventDefault();
+    }
+
+    onSidebarClick(event) {
+        this.menuClick = true;
+    }
+
+   onMenuItemClick(event) {
+	this.setState({currentMenu:event.item.label, currentPath: event.item.path});
+   }
+		
+	isDesktop() {
+        return window.innerWidth > 1024;
+    }
+	
   render() {
-    return (
+			const wrapperClass = classNames('layout-wrapper', {
+            'layout-overlay': this.state.layoutMode === 'overlay',
+            'layout-static': this.state.layoutMode === 'static',
+            'layout-static-sidebar-inactive': this.state.staticMenuInactive && this.state.layoutMode === 'static',
+            'layout-overlay-sidebar-active': this.state.overlayMenuActive && this.state.layoutMode === 'overlay',
+            'layout-mobile-sidebar-active': this.state.mobileMenuActive			
+		});
+		const AppBreadCrumbWithRouter = withRouter(AppBreadcrumb);
+		
+     return (
       <React.Fragment>
-      <div className="App">
-          
-          <AppTopbar></AppTopbar>
-          <Router basename={ this.state.currentPath }>
-          <AppMenu model={this.menu} onMenuItemClick={this.onMenuItemClick} />
-            <div className="layout-wrapper layout-static layout-static-sidebar-active">
+           <div className="App">
+           {/* <div className={wrapperClass} onClick={this.onWrapperClick}> */}
+           <div className={wrapperClass}>
+            <AppTopbar onToggleMenu={this.onToggleMenu}></AppTopbar>
+            <Router basename={ this.state.currentPath }>
+			  <AppMenu model={this.menu} onMenuItemClick={this.onMenuItemClick} />
               <div className="layout-main">
-                
-                  <RoutedContent />
-                
+			  <AppBreadCrumbWithRouter/>
+			  <RoutedContent />
               </div>
+            </Router>
+            <AppFooter></AppFooter>
+            </div>
             </div>
-          </Router>
-          <AppFooter></AppFooter>
-          
-        
-      </div>
-      </React.Fragment>
+	   </React.Fragment>
     );
   }
 }

SAS/TMSS/frontend/tmss_webapp/src/App.scss

+@import "~bootstrap/scss/bootstrap";
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/__mocks__/project.service.data.js

+
+const ProjectServiceMock= {
+    project_categories: [{url: "Regular", value: 'Regular'}, {url: "User Shared Support", value: 'User Shared Support'}],
+    period_categories: [{url: "Single Cycle", value: 'Single Cycle'}, {url: "Long Term", value: 'Long Term'}],
+    resources: [{
+        "name": "LOFAR Observing Time",
+        "url": "http://localhost:3000/api/resource_type/LOFAR%20Observing%20Time/",
+        "created_at": "2020-07-29T07:31:21.708296",
+        "description": "LOFAR Observing Time",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:21.708316",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    },
+    {
+        "name": "LOFAR Observing Time prio A",
+        "url": "http://localhost:3000/api/resource_type/LOFAR%20Observing%20Time%20prio%20A/",
+        "created_at": "2020-07-29T07:31:21.827537",
+        "description": "LOFAR Observing Time prio A",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:21.827675",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    },
+    {
+        "name": "LOFAR Observing Time prio B",
+        "url": "http://localhost:3000/api/resource_type/LOFAR%20Observing%20Time%20prio%20B/",
+        "created_at": "2020-07-29T07:31:21.950948",
+        "description": "LOFAR Observing Time prio B",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:21.950968",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    },
+    {
+        "name": "CEP Processing Time",
+        "url": "http://localhost:3000/api/resource_type/CEP%20Processing%20Time/",
+        "created_at": "2020-07-29T07:31:22.097916",
+        "description": "CEP Processing Time",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:22.097941",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    },
+    {
+        "name": "LTA Storage",
+        "url": "http://localhost:3000/api/resource_type/LTA%20Storage/",
+        "created_at": "2020-07-29T07:31:22.210071",
+        "description": "LTA Storage",
+        "resource_unit": "http://localhost:3000/api/resource_unit/byte/",
+        "resource_unit_id": "byte",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:22.210091",
+        "resourceUnit": {
+            "name": "byte",
+            "url": "http://localhost:3000/api/resource_unit/byte/",
+            "created_at": "2020-07-29T07:31:21.500997",
+            "description": "Unit of data storage",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.501028"
+        }
+    },
+    {
+        "name": "Number of triggers",
+        "url": "http://localhost:3000/api/resource_type/Number%20of%20triggers/",
+        "created_at": "2020-07-29T07:31:22.317313",
+        "description": "Number of triggers",
+        "resource_unit": "http://localhost:3000/api/resource_unit/number/",
+        "resource_unit_id": "number",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:22.317341",
+        "resourceUnit": {
+            "name": "number",
+            "url": "http://localhost:3000/api/resource_unit/number/",
+            "created_at": "2020-07-29T07:31:21.596364",
+            "description": "Unit of count",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.596385"
+        }
+    },
+    {
+        "name": "LOFAR Support Time",
+        "url": "http://localhost:3000/api/resource_type/LOFAR%20Support%20Time/",
+        "created_at": "2020-07-29T07:31:22.437945",
+        "description": "LOFAR Support Time",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:22.437964",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    },
+    {
+        "name": "LOFAR Support hours",
+        "url": "http://localhost:3000/api/resource_type/LOFAR%20Support%20hours/",
+        "created_at": "2020-07-29T07:31:22.571850",
+        "description": "LOFAR Support hours",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:22.571869",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    },
+    {
+        "name": "Support hours",
+        "url": "http://localhost:3000/api/resource_type/Support%20hours/",
+        "created_at": "2020-07-29T07:31:22.694438",
+        "description": "Support hours",
+        "resource_unit": "http://localhost:3000/api/resource_unit/second/",
+        "resource_unit_id": "second",
+        "tags": [
+        ],
+        "updated_at": "2020-07-29T07:31:22.694514",
+        "resourceUnit": {
+            "name": "second",
+            "url": "http://localhost:3000/api/resource_unit/second/",
+            "created_at": "2020-07-29T07:31:21.070088",
+            "description": "Unit of time or duration",
+            "tags": [
+            ],
+            "updated_at": "2020-07-29T07:31:21.070114"
+        }
+    }
+    ],
+    projectResourceDefaults: {
+        'LOFAR Observing Time': 3600, 
+        'LOFAR Observing Time prio A': 3600, 
+        'LOFAR Observing Time prio B': 3600,
+        'CEP Processing Time': 3600,
+        'LTA Storage': 1024*1024*1024*1024,
+        'Number of triggers': 1,
+        'LOFAR Support Time': 3600
+    },
+    project: [{
+        "name": "OSR-11",
+        "url": "http://192.168.99.100:8008/api/project/OSR-11/",
+        "can_trigger": true,
+        "created_at": "2020-07-29T18:20:06.187276",
+        "cycles": [
+          "http://192.168.99.100:8008/api/cycle/Cycle%200/"
+        ],
+        "cycles_ids": [
+          "Cycle 0"
+        ],
+        "description": "OSR-11",
+        "expert": false,
+        "filler": false,
+        "period_category": "Single Cycle",
+        "period_category_value": "Single Cycle",
+        "priority_rank": 5,
+        "private_data": true,
+        "project_category": "Regular",
+        "project_category_value": "Regular",
+        "project_quota": [
+          "http://192.168.99.100:8008/api/project_quota/70/",
+          "http://192.168.99.100:8008/api/project_quota/71/",
+          "http://192.168.99.100:8008/api/project_quota/72/",
+          "http://192.168.99.100:8008/api/project_quota/73/",
+          "http://192.168.99.100:8008/api/project_quota/74/",
+          "http://192.168.99.100:8008/api/project_quota/75/",
+          "http://192.168.99.100:8008/api/project_quota/76/",
+          "http://192.168.99.100:8008/api/project_quota/77/"
+        ],
+        "project_quota_ids": [
+          70,
+          71,
+          72,
+          73,
+          74,
+          75,
+          76,
+          77
+        ],
+        "tags": [],
+        "trigger_priority": 990,
+        "updated_at": "2020-07-29T18:20:06.187342"
+    }],
+    projectQuota: [
+        {
+          "id": 70,
+          "url": "http://192.168.99.100:8008/api/project_quota/70/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/CEP%20Processing%20Time/",
+          "resource_type_id": "CEP Processing Time",
+          "value": 36000
+        },
+        {
+          "id": 71,
+          "url": "http://192.168.99.100:8008/api/project_quota/71/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/LOFAR%20Observing%20Time/",
+          "resource_type_id": "LOFAR Observing Time",
+          "value": 72000
+        },
+        {
+          "id": 72,
+          "url": "http://192.168.99.100:8008/api/project_quota/72/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/LOFAR%20Observing%20Time%20prio%20A/",
+          "resource_type_id": "LOFAR Observing Time prio A",
+          "value": 108000
+        },
+        {
+          "id": 73,
+          "url": "http://192.168.99.100:8008/api/project_quota/73/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/LOFAR%20Observing%20Time%20prio%20B/",
+          "resource_type_id": "LOFAR Observing Time prio B",
+          "value": 144000
+        },
+        {
+          "id": 74,
+          "url": "http://192.168.99.100:8008/api/project_quota/74/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/LOFAR%20Support%20Time/",
+          "resource_type_id": "LOFAR Support Time",
+          "value": 180000
+        },
+        {
+          "id": 75,
+          "url": "http://192.168.99.100:8008/api/project_quota/75/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/LTA%20Storage/",
+          "resource_type_id": "LTA Storage",
+          "value": 6597069766656
+        },
+        {
+          "id": 76,
+          "url": "http://192.168.99.100:8008/api/project_quota/76/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/Number%20of%20triggers/",
+          "resource_type_id": "Number of triggers",
+          "value": 7
+        },
+        {
+          "id": 77,
+          "url": "http://192.168.99.100:8008/api/project_quota/77/",
+          "project": "http://192.168.99.100:8008/api/project/OSR-11/",
+          "project_id": "OSR-11",
+          "resource_type": "http://192.168.99.100:8008/api/resource_type/Support%20hours/",
+          "resource_type_id": "Support hours",
+          "value": 8
+        }
+      ]
+}
+
+export default ProjectServiceMock;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/components/ActionComponents.js

+export {
+    Alert,
+    Badge,
+    Breadcrumb,
+    BreadcrumbItem,
+    Button,
+    ButtonDropdown,
+    ButtonGroup,
+    ButtonToolbar,
+    CardBody,
+    CardColumns,
+    CardDeck,
+    CardFooter,
+    CardGroup,
+    CardImg,
+    CardImgOverlay,
+    CardLink,
+    CardSubtitle,
+    CardText,
+    CardTitle,
+    Carousel,
+    CarouselCaption,
+    CarouselControl,
+    CarouselIndicators,
+    CarouselItem,
+    Col,
+    Collapse,
+    Container,
+    Dropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Fade,
+    Form,
+    FormFeedback,
+    FormGroup,
+    FormText,
+    Input,
+    InputGroup,
+    InputGroupButtonDropdown,
+    InputGroupText,
+    Jumbotron,
+    Label,
+    ListGroup,
+    ListGroupItem,
+    ListGroupItemHeading,
+    ListGroupItemText,
+    Media,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
+    NavbarBrand,
+    NavbarToggler,
+    NavItem,
+    NavLink,
+    Pagination,
+    PaginationItem,
+    PaginationLink,
+    Popover,
+    PopoverBody,
+    PopoverHeader,
+    Row,
+    TabContent,
+    Table,
+    TabPane,
+    Tooltip,
+    UncontrolledAlert,
+    UncontrolledButtonDropdown,
+    UncontrolledDropdown,
+    UncontrolledCollapse,
+    UncontrolledTooltip
+} from 'reactstrap';

SAS/TMSS/frontend/tmss_webapp/src/components/JSONEditor/JViewer.js

+/**
+ * Component to view the JSON data using 'react-json-view' package
+ */
+import React, {Component} from 'react';
+import ReactJson from 'react-json-view';
+
+export default class JViewer extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            outputJSON: props.outputJSON
+        }
+        this.updateOutput = this.updateOutput.bind(this);
+    }
+    
+    /**
+     * Function to be called by the parent to update the JSON content of the viewer
+     * @param {JSON} outputJSON 
+     */
+    updateOutput(outputJSON) {
+        this.state.outputJSON = outputJSON;
+    }
+    
+    render() {
+        return (
+            <React.Fragment>
+                <ReactJson src={this.state.outputJSON} />
+            </React.Fragment>
+        );
+    }
+}
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/components/JSONEditor/index.js

+import { JSONEditor } from './jsonEditor';
+
+export default JSONEditor; 
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/components/UncontrolledModal/UncontrolledModal.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { Modal } from 'reactstrap';
+
+import { Provider } from './context';
+
+class UncontrolledModal extends React.Component {
+    static propTypes = {
+        target: PropTypes.string.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isOpen: false
+        };
+
+        this.boundClickEventHandler = this.clickEventHandler.bind(this);
+    }
+
+    componentDidMount() {
+        if (typeof document !== 'undefined') {
+            this.triggerElement = document.querySelector(`#${this.props.target}`);
+
+            if (!this.triggerElement) {
+                // eslint-disable-next-line no-console
+                console.error('UncontrolledModal: \'target\' element has not been found in the DOM via querySelector');
+                return;
+            }
+
+            this.triggerElement.addEventListener('click', this.boundClickEventHandler);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('click', this.boundClickEventHandler);
+        }
+    }
+
+    clickEventHandler() {
+        this.setState({ isOpen: true });
+    }
+
+    render() {
+        const modalProps = _.omit(this.props, ['target']);
+        const toggleModal = () => { this.setState({ isOpen: !this.state.isOpen }) };
+
+        return (
+            <Provider value={{ toggleModal }}>
+                <Modal
+                    { ...modalProps }
+                    isOpen={ this.state.isOpen }
+                    toggle={ toggleModal }
+                />
+            </Provider>
+        );
+    }
+}
+
+export { UncontrolledModal };

SAS/TMSS/frontend/tmss_webapp/src/components/UncontrolledModal/UncontrolledModalClose.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+
+import { Consumer } from './context';
+
+const UncontrolledModalClose = (props) => {
+    const { tag, ...otherProps } = props;
+    const Tag = tag;
+
+    return (
+        <Consumer>
+        {
+            (value) => (
+                <Tag
+                    { ...otherProps }
+                    onClick={ () => value.toggleModal() }
+                />
+            )
+        }
+        </Consumer>
+    )
+};
+UncontrolledModalClose.propTypes = {
+    tag: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string
+    ])
+};
+UncontrolledModalClose.defaultProps = {
+    tag: Button
+};
+
+export { UncontrolledModalClose };

SAS/TMSS/frontend/tmss_webapp/src/components/UncontrolledModal/context.js

+import React from 'react';
+
+const { Provider, Consumer } = React.createContext();
+
+export {
+    Provider,
+    Consumer
+}

SAS/TMSS/frontend/tmss_webapp/src/components/UncontrolledModal/index.js

+import { UncontrolledModal } from './UncontrolledModal';
+import { UncontrolledModalClose } from './UncontrolledModalClose';
+
+UncontrolledModal.Close = UncontrolledModalClose;
+
+export default UncontrolledModal;
\ No newline at end of file