first commit

tornjak-frontend/.env

@@ -1 +1,2 @@
-NODE_PATH=src/
+NODE_PATH=src/
+REACT_APP_DEBUG_TORNJAK=true

tornjak-frontend/package.json

@@ -17,14 +17,16 @@
     "carbon-icons": "^7.0.7",
     "d3": "^7.0.1",
     "dotenv": "^8.2.0",
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.1",
+    "path-browserify": "^1.0.1",
     "query-string": "^7.0.1",
     "react": "^16.6.3",
     "react-chartjs-2": "^3.0.4",
     "react-dom": "^16.6.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
+    "react-toastify": "^8.1.1",
     "recharts": "^2.0.9",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.9",

tornjak-frontend/src/App.css

@@ -51,4 +51,31 @@
   position: fixed;
   bottom: 0;
   z-index: 2;
-}
+}
+
+
+
+  .carbon-toast .Toastify__toast {
+    padding: 0 !important;
+    /* background: $inverse-02 !important; */
+  }
+
+  .carbon-toast .Toastify__toast > svg {
+    margin-top: 1.375rem;
+    margin-right: 1rem;
+    /* fill: $inverse-01; */
+  }
+
+  .carbon-toast .Toastify__toast-body {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .carbon-toast .Toastify__toast-container {
+    width: auto !important;
+    height: auto !important;
+  }
+
+  .carbon-toast .bx--toast-notification{
+    margin: 0;
+  }

tornjak-frontend/src/App.js

@@ -16,7 +16,9 @@ import ServerManagement from "./components/server-management";
 import TornjakServerInfo from "./components/tornjak-server-info";
 import TornjakDashBoard from "./components/dashboard/tornjak-dashboard";
 import DashboardDetailsRender from 'components/dashboard/dashboard-details-render';
+import { ToastContainer } from 'react-toastify';
 import './App.css';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
     return (
@@ -26,6 +28,11 @@ function App() {
                     <div className="nav-comp">
                         <NavigationBar />
                     </div>
+                    <ToastContainer 
+                        xclassName="carbon-toast"
+                        containerId="notifications"
+                        draggable={false}
+                    />
                     <div className="rest-body">
                         <SelectServer />
                         <br />

tornjak-frontend/src/components/agent-list.js

@@ -4,6 +4,8 @@ import IsManager from './is_manager';
 import Table from "tables/agents-list-table";
 import { selectors, workloadSelectors, clusterType } from '../data/data';
 import TornjakApi from './tornjak-api-helpers';
+import {toast} from 'react-toastify';
+import {InlineNotification} from "carbon-components-react";
 import {
   serverSelectedFunc,
   agentsListUpdateFunc,
@@ -77,6 +79,13 @@ class AgentList extends Component {
           this.TornjakApi.refreshLocalSelectorsState(this.props.agentworkloadSelectorInfoFunc);
         }
     }
+    if (this.props.globalErrorMessage !== "OK"){
+      toast.error(this.props.globalErrorMessage);
+      toast.warn(this.props.globalErrorMessage);
+      toast.success(this.props.globalErrorMessage);
+      toast.info(this.props.globalErrorMessage);
+      // toast(<ToastNotification title="Error" caption={this.props.globalErrorMessage} />, {autoClose:false, closeButton:false});
+    }
   }
 
   agentList() {
@@ -97,11 +106,12 @@ class AgentList extends Component {
       <div>
         <h3>Agents List</h3>
         {this.props.globalErrorMessage !== "OK" &&
-          <div className="alert-primary" role="alert">
-            <pre>
-              {this.props.globalErrorMessage}
-            </pre>
-          </div>
+          <InlineNotification kind="error" title="Error" subtitle={this.props.globalErrorMessage} />
+          // <div className="alert-primary" role="alert">
+          //   <pre>
+          //     {this.props.globalErrorMessage}
+          //   </pre>
+          // </div>
         }
         <br /><br />
         <div className="indvidual-list-table">

tornjak-frontend/src/components/dashboard/render-cell-expand.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/styles';
 import PropTypes from 'prop-types';
 import { Popper, Typography, Paper } from '@material-ui/core';
-import { isOverflown } from '@material-ui/data-grid';
+// import { isOverflown } from '@material-ui/data-grid';
 
 const useStyles = makeStyles(() => ({
     root: {
@@ -31,7 +31,8 @@ const GridCellExpand = React.memo(function GridCellExpand(props) {
     const [showPopper, setShowPopper] = React.useState(false);
 
     const handleMouseEnter = () => {
-        const isCurrentlyOverflown = isOverflown(cellValue.current);
+        // const isCurrentlyOverflown = isOverflown(cellValue.current);
+        const isCurrentlyOverflown = cellValue.current.scrollHeight > cellValue.current.clientHeight || cellValue.current.scrollWidth > cellValue.current.clientWidht;
         setShowPopper(isCurrentlyOverflown);
         setAnchorEl(cellDiv.current);
         setShowFullCell(true);

tornjak-frontend/src/components/helpers.js

@@ -1,20 +1,37 @@
 require('dotenv').config();
 var urljoin = require('url-join');
 
-
 // API_SERVER_URL
-//console.log(process.env.API_SERVER_URI);
-const ApiServerUri = process.env["REACT_APP_API_SERVER_URI"]
-
-function GetApiServerUri (uri) {
+export default function GetApiServerUri (uri) {
+    const ApiServerUri = process.env["REACT_APP_API_SERVER_URI"];
     if (ApiServerUri) {
         return urljoin(ApiServerUri, uri)
     } else {
         return urljoin("/", uri)
     }
 }
 
-module.exports = GetApiServerUri;
+// const IS_DUBUG = process.env["REACT_APP_DEBUG_TORNJAK"] || window.DEBUG_TORNJAK;
+// console.log(process.env["REACT_APP_DEBUG_TORNJAK"]);
+// console.log(window.DEBUG_TORNJAK);
+
+export const logDebug = function (...args){
+    if (process.env["REACT_APP_DEBUG_TORNJAK"] || window.DEBUG_TORNJAK){ // real time variable
+        console.log(...args);
+    }
+};
+
+export const logError = function (...args){
+    if (process.env["REACT_APP_DEBUG_TORNJAK"] || window.DEBUG_TORNJAK){ // real time variable
+        console.error(...args);
+    }
+};
+
+export const logWarn = function (...args){
+    if (process.env["REACT_APP_DEBUG_TORNJAK"] || window.DEBUG_TORNJAK){ // real time variable
+        console.warn(...args);
+    }
+};
 
 
 // IS_MANAGER

tornjak-frontend/src/components/tornjak-api-helpers.js

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import axios from 'axios';
 import GetApiServerUri from './helpers';
+import {logError, logDebug} from './helpers';
 
 class TornjakApi extends Component {
   constructor(props) {
@@ -27,7 +28,7 @@ class TornjakApi extends Component {
       }
       )
       .catch((error) => {
-        console.log(error);
+        logError(error);
       })
   }
 
@@ -40,7 +41,7 @@ class TornjakApi extends Component {
       }
       )
       .catch((error) => {
-        console.log(error);
+        logError(error);
       })
   }
   // refreshSelectorsState returns the list agent's with their workload plugin info for the selected server in manager mode
@@ -67,7 +68,7 @@ class TornjakApi extends Component {
         agentworkloadSelectorInfoFunc(response.data["agents"]);
       })
       .catch((error) => {
-        console.log(error);
+        logError(error);
       })
   }
   // refreshLocalSelectorsState returns the list agent's with their workload plugin info for the local server
@@ -94,7 +95,7 @@ class TornjakApi extends Component {
         agentworkloadSelectorInfoFunc(response.data["agents"]);
       })
       .catch((error) => {
-        console.log(error);
+        logError(error);
       })
   }
 
@@ -107,7 +108,7 @@ class TornjakApi extends Component {
         agentworkloadSelectorInfoFunc(response.data["agents"]);
       })
       .catch((error) => {
-        console.log(error);
+        logError(error);
       })
   }
 
@@ -120,7 +121,7 @@ class TornjakApi extends Component {
         agentworkloadSelectorInfoFunc(response.data["agents"])
       })
       .catch((error) => {
-        console.log(error);
+        logError(error);
       })
   }
 
@@ -131,6 +132,7 @@ class TornjakApi extends Component {
         tornjakServerInfoUpdateFunc(response.data);
         tornjakMessageFunc(response.statusText);
       }).catch(error => {
+        logError(error);
         tornjakServerInfoUpdateFunc([]);
         tornjakMessageFunc("Error retrieving " + serverName + " : " + error.message);
       });
@@ -144,6 +146,7 @@ class TornjakApi extends Component {
         tornjakMessageFunc(response.statusText);
       })
       .catch((error) => {
+        logError(error);
         tornjakMessageFunc("Error retrieving: " + error.message);
       })
   }
@@ -191,7 +194,7 @@ class TornjakApi extends Component {
       } else {entriesListUpdateFunc(response.data["entries"]);}
       tornjakMessageFunc(response.statusText);
     }).catch(error => {
-      console.log(error);
+      logError(error);
       entriesListUpdateFunc([]);
       tornjakMessageFunc(error.message);
     })
@@ -206,6 +209,7 @@ class TornjakApi extends Component {
         } else {agentsListUpdateFunc(response.data["agents"]);}
         tornjakMessageFunc(response.statusText);
       }).catch(error => {
+        logError(error);
         agentsListUpdateFunc([]);
         tornjakMessageFunc("Error retrieving " + serverName + " : " + error.message);
       });
@@ -222,6 +226,7 @@ class TornjakApi extends Component {
         tornjakMessageFunc(response.statusText);
       })
       .catch((error) => {
+        logError(error);
         agentsListUpdateFunc([]);
         tornjakMessageFunc("Error retrieving: " + error.message);
       })
@@ -234,6 +239,7 @@ class TornjakApi extends Component {
         clustersListUpdateFunc(response.data["clusters"]);
         tornjakMessageFunc(response.statusText);
       }).catch(error => {
+        logError(error);
         clustersListUpdateFunc([]);
         tornjakMessageFunc("Error retrieving " + serverName + " : " + error.message);
       });
@@ -247,6 +253,7 @@ class TornjakApi extends Component {
         tornjakMessageFunc(response.statusText);
       })
       .catch((error) => {
+        logError(error);
         clustersListUpdateFunc([]);
         tornjakMessageFunc("Error retrieving: " + error.message);
       })