Tornjak dashboard details metadata and UI [Part2]

tornjak-frontend/src/App.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import "bootstrap/dist/css/bootstrap.min.css";
+import store from 'redux/store';
+import IsManager from './components/is_manager';
 import { BrowserRouter as Router, Route } from "react-router-dom";
+import { Provider } from 'react-redux'; //enables all components to have access to everything inside our react app
 import NavigationBar from "./components/navbar";
 import SelectServer from "./components/select-server";
 import ClusterList from "./components/cluster-list";
@@ -12,9 +15,7 @@ import EntryCreate from "./components/entry-create";
 import ServerManagement from "./components/server-management";
 import TornjakServerInfo from "./components/tornjak-server-info";
 import TornjakDashBoard from "./components/dashboard/tornjak-dashboard";
-import { Provider } from 'react-redux'; //enables all components to have access to everything inside our react app
-import store from 'redux/store';
-import IsManager from './components/is_manager';
+import DashboardDetailsRender from 'components/dashboard/dashboard-details-render';
 import './App.css';
 
 function App() {
@@ -38,6 +39,10 @@ function App() {
                         <Route path="/cluster/clustermanagement" exact component={ClusterManagement} />
                         <Route path="/tornjak/serverinfo" exact component={TornjakServerInfo} />
                         <Route path="/tornjak/dashboard" exact component={TornjakDashBoard} />
+                        <Route
+                            path="/tornjak/dashboard/details/:entity/:id"
+                            render={(props) => (<DashboardDetailsRender {...props} params={props.match.params} />)}
+                        />
                         <Route path="/server/manage" exact component={ServerManagement} />
                         <br /><br /><br />
                         <svg className="endbanneroutput">

tornjak-frontend/src/components/dashboard/agents-dashboard-table.js

@@ -4,13 +4,14 @@ import { withStyles } from '@material-ui/core/styles';
 import renderCellExpand from './render-cell-expand';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
+import TornjakHelper from 'components/tornjak-helper';
 
 const columns = [
   { field: "spiffeid", headerName: "Name", flex: 1, renderCell: renderCellExpand },
+  { field: "clusterName", headerName: "Cluster Name", width: 190 },
   { field: "numEntries", headerName: "Number of Entries", width: 200 },
   { field: "status", headerName: "Status", width: 120 },
   { field: "platformType", headerName: "Platform Type", width: 170 },
-  { field: "clusterName", headerName: "Cluster Name", width: 190 }
 ];
 
 const styles = theme => ({
@@ -22,81 +23,46 @@ const styles = theme => ({
 class AgentDashboardTable extends React.Component {
   constructor(props) {
     super(props);
-    this.SpiffeHelper = new SpiffeHelper()
-  }
-
-  numberEntries(spiffeid, agentEntriesDict) {
-    var validIds = new Set([spiffeid]);
-
-    // Also check for parent IDs associated with the agent
-    let agentEntries = agentEntriesDict[spiffeid];
-    if (agentEntries !== undefined) {
-      for (let j=0; j < agentEntries.length; j++) {
-          validIds.add(this.SpiffeHelper.getEntrySpiffeid(agentEntries[j]));
-      }
-    }
-
-    if (typeof this.props.globalEntries.globalEntriesList !== 'undefined') {
-      var entriesList = this.props.globalEntries.globalEntriesList.filter(entry=> {
-        return (typeof entry !== 'undefined') && validIds.has(this.SpiffeHelper.getEntryParentid(entry));
-      });
-
-      if (typeof entriesList === 'undefined') {
-        return 0
-      } else {
-        return entriesList.length
-      }
-    } else {
-      return 0
-    }
-  }
-
-  getChildEntries(agent, agentEntriesDict) {
-    var thisSpiffeid = this.SpiffeHelper.getAgentSpiffeid(agent);
-    // get status
-    var status = this.SpiffeHelper.getAgentStatusString(agent);
-    // get tornjak metadata
-    var metadata_entry = this.SpiffeHelper.getAgentMetadata(thisSpiffeid, this.props.globalAgents.globalAgentsWorkLoadAttestorInfo);
-    var plugin = "None"
-    var cluster = "None"
-    if (typeof metadata_entry["plugin"] !== 'undefined' && metadata_entry["plugin"].length !== 0) {
-      plugin = metadata_entry["plugin"]
-    }
-    if (typeof metadata_entry["cluster"] !== 'undefined' && metadata_entry["cluster"].length !== 0) {
-      cluster = metadata_entry["cluster"]
-    }
-    return {
-      id: thisSpiffeid,
-      spiffeid: thisSpiffeid,
-      numEntries: this.numberEntries(thisSpiffeid, agentEntriesDict),
-      status: status,
-      platformType: plugin,
-      clusterName: cluster,
-    }
+    this.state = {
+    };
+    this.SpiffeHelper = new SpiffeHelper();
+    this.TornjakHelper = new TornjakHelper();
   }
 
   agentList() {
+    var filterByValue = [], selectedDataKey = this.props.selectedDataKey;
+    let agentsList = [];
     if ((typeof this.props.globalEntries.globalEntriesList === 'undefined') ||
-          (typeof this.props.globalAgents.globalAgentsList === 'undefined')) {
-        return [];
+      (typeof this.props.globalAgents.globalAgentsList === 'undefined')) {
+      return [];
     }
-
-    let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList)
-    return this.props.globalAgents.globalAgentsList.map(currentAgent => {
-      return this.getChildEntries(currentAgent, agentEntriesDict);
+    let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList);
+    agentsList = this.props.globalAgents.globalAgentsList.map(currentAgent => {
+      return this.TornjakHelper.getChildEntries(currentAgent, agentEntriesDict, this.props.globalEntries.globalEntriesList, this.props.globalAgents.globalAgentsWorkLoadAttestorInfo)
     })
+
+    //For details page filtering data
+    if (selectedDataKey !== undefined) {
+      for (let i = 0; i < agentsList.length; i++) {
+        if ((agentsList[i].clusterName === selectedDataKey) || (agentsList[i].id === selectedDataKey)) {
+          filterByValue.push(agentsList[i]);
+        }
+      }
+      return filterByValue;
+    }
+    return agentsList;
   }
 
   render() {
     const { numRows } = this.props;
     var data = this.agentList();
     return (
       <div>
-        <TableDashboard 
+        <TableDashboard
           title={"Agents"}
           numRows={numRows}
           columns={columns}
-          data={data}/>
+          data={data} />
       </div>
     );
   }
@@ -106,6 +72,7 @@ class AgentDashboardTable extends React.Component {
 const mapStateToProps = (state) => ({
   globalAgents: state.agents,
   globalEntries: state.entries,
+  globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
 })
 
 export default withStyles(styles)(

tornjak-frontend/src/components/dashboard/clusters-dashboard-table.js

@@ -3,12 +3,13 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
+import TornjakHelper from 'components/tornjak-helper';
 
 const columns = [
   { field: "name", headerName: "Name", width: 200 },
   { field: "created", headerName: "Created", width: 300 },
-  { field: "numNodes", headerName: "Number Of Nodes", width: 300},
-  { field: "numEntries", headerName: "Number of Entries", width: 200}
+  { field: "numNodes", headerName: "Number Of Nodes", width: 300 },
+  { field: "numEntries", headerName: "Number of Entries", width: 200 }
 ];
 
 const styles = theme => ({
@@ -20,58 +21,40 @@ const styles = theme => ({
 class ClusterDashboardTable extends React.Component {
   constructor(props) {
     super(props);
-    this.SpiffeHelper = new SpiffeHelper()
+    this.SpiffeHelper = new SpiffeHelper();
+    this.TornjakHelper = new TornjakHelper();
   }
 
-  numberAgentEntries(spiffeid) {
-    if (typeof this.props.globalEntries.globalEntriesList !== 'undefined') {
-      var entriesList = this.props.globalEntries.globalEntriesList.filter(entry => {
-        return spiffeid === (this.SpiffeHelper.getEntryParentid(entry))
-      })
-      return entriesList.length
-    } else {
-      return 0
-    }
-  }
-
-  numberClusterEntries(entry) {
-    var entriesPerAgent = entry.agentsList.map(currentAgent => {
-      return this.numberAgentEntries(currentAgent);
-    })
-    var sum = entriesPerAgent.reduce((acc, curVal) => {
-      return acc + curVal;
-    }, 0)
-    return sum
-  }
-
-  cluster(entry) {
-    return {
-      id: entry.name,
-      name: entry.name,
-      created: entry.creationTime,
-      numNodes: entry.agentsList.length,
-      numEntries: this.numberClusterEntries(entry),
+  clusterList() {
+    var filterByValue = [], selectedDataKey = this.props.selectedDataKey;
+    let clustersList = [];
+    if (typeof this.props.globalClustersList === 'undefined') {
+      return [];
     }
-  }
+    clustersList = this.props.globalClustersList.map(a => this.TornjakHelper.getClusterMetadata(a, this.props.globalEntries.globalEntriesList, this.props.globalAgents.globalAgentsList));
 
-  clusterList() {
-    if (typeof this.props.globalClustersList !== 'undefined') {
-      return this.props.globalClustersList.map(a => this.cluster(a))
-    } else {
-      return []
+    //For details page filtering data
+    if (selectedDataKey !== undefined) {
+      for (let i = 0; i < clustersList.length; i++) {
+        if ((clustersList[i].clusterName === selectedDataKey) || (clustersList[i].name === selectedDataKey)) {
+          filterByValue.push(clustersList[i]);
+        }
+      }
+      return filterByValue;
     }
+    return clustersList;
   }
 
   render() {
     const { numRows } = this.props;
     var data = this.clusterList();
     return (
       <div>
-        <TableDashboard 
+        <TableDashboard
           title={"Clusters"}
           numRows={numRows}
           columns={columns}
-          data={data}/>
+          data={data} />
       </div>
     );
   }

tornjak-frontend/src/components/dashboard/dashboard-details-render.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import IsManager from '../is_manager';
+import DashboardDetails from './dashboard-details';
+import TornjakHelper from '../tornjak-helper';
+import TornjakApi from '../tornjak-api-helpers';
+import {
+    serverSelectedFunc,
+    clustersListUpdateFunc,
+    agentsListUpdateFunc,
+    entriesListUpdateFunc,
+    tornjakServerInfoUpdateFunc,
+    serverInfoUpdateFunc,
+    selectorInfoFunc,
+    tornjakMessageFunc,
+    workloadSelectorInfoFunc,
+    agentworkloadSelectorInfoFunc,
+    clusterTypeInfoFunc,
+    clickedDashboardTableFunc,
+} from 'redux/actions';
+
+class DashboardDetailsRender extends Component {
+    constructor(props) {
+        super(props);
+        this.TornjakApi = new TornjakApi();
+        this.TornjakHelper = new TornjakHelper();
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const { params } = this.props;
+        if (this.props.globalTornjakServerInfo === "" || this.props.globalServerInfo === undefined) {
+            if (IsManager) {
+                if (this.props.globalServerSelected !== "") {
+                    this.props.clickedDashboardTableFunc(params.entity + "details");
+                    this.TornjakApi.populateClustersUpdate(this.props.globalServerSelected, this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+                    this.TornjakApi.populateAgentsUpdate(this.props.globalServerSelected, this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+                    this.TornjakApi.populateEntriesUpdate(this.props.globalServerSelected, this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc);
+                    this.TornjakApi.refreshSelectorsState(this.props.globalServerSelected, this.props.agentworkloadSelectorInfoFunc);
+                    this.TornjakApi.populateTornjakAgentInfo(this.props.globalServerSelected, this.props.agentworkloadSelectorInfoFunc, "");
+                    this.TornjakApi.populateTornjakServerInfo(this.props.globalServerSelected, this.props.tornjakServerInfoUpdateFunc, this.props.tornjakMessageFunc);
+                }
+            } else {
+                this.props.clickedDashboardTableFunc(params.entity + "details");
+                this.TornjakApi.refreshLocalSelectorsState(this.props.agentworkloadSelectorInfoFunc);
+                this.TornjakApi.populateLocalClustersUpdate(this.props.clustersListUpdateFunc, this.props.tornjakMessageFunc);
+                this.TornjakApi.populateLocalAgentsUpdate(this.props.agentsListUpdateFunc, this.props.tornjakMessageFunc);
+                this.TornjakApi.populateLocalEntriesUpdate(this.props.entriesListUpdateFunc, this.props.tornjakMessageFunc);
+                this.TornjakApi.populateLocalTornjakAgentInfo(this.props.agentworkloadSelectorInfoFunc, "");
+                this.TornjakApi.populateLocalTornjakServerInfo(this.props.tornjakServerInfoUpdateFunc, this.props.tornjakMessageFunc);
+                if (this.props.globalTornjakServerInfo !== "") {
+                    this.TornjakApi.populateServerInfo(this.props.globalTornjakServerInfo, this.props.serverInfoUpdateFunc);
+                }
+            }
+        }
+    }
+
+    render() {
+        const { params } = this.props;
+        return (
+            <DashboardDetails selectedData={this.TornjakHelper.detailsDataParse(params, this.props)} />
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    globalServerInfo: state.servers.globalServerInfo,
+    globalTornjakServerInfo: state.servers.globalTornjakServerInfo,
+    globalClustersList: state.clusters.globalClustersList,
+    globalAgentsList: state.agents.globalAgentsList,
+    globalEntriesList: state.entries.globalEntriesList,
+    globalAgentsWorkLoadAttestorInfo: state.agents.globalAgentsWorkLoadAttestorInfo,
+})
+
+export default connect(
+    mapStateToProps,
+    { serverSelectedFunc, clustersListUpdateFunc, agentsListUpdateFunc, entriesListUpdateFunc, tornjakServerInfoUpdateFunc, serverInfoUpdateFunc, selectorInfoFunc, tornjakMessageFunc, workloadSelectorInfoFunc, agentworkloadSelectorInfoFunc, clusterTypeInfoFunc, clickedDashboardTableFunc }
+)(DashboardDetailsRender)