Tornjak dashboard details metadata and UI [Part2]

tornjak-frontend/package.json

@@ -6,9 +6,10 @@
  "@carbon/charts": "^0.41.80",
  "@carbon/charts-react": "^0.41.80",
  "@carbon/themes": "^10.38.0",
- "@material-ui/core": "^4.12.2",
+ "@material-ui/core": "^4.12.3",
  "@material-ui/data-grid": "^4.0.0-alpha.33",
  "@material-ui/icons": "^4.11.2",
+ "@material-ui/lab": "^4.0.0-alpha.60",
  "@material-ui/styles": "^4.11.4",
  "axios": "^0.21.1",
  "bootstrap": "^4.5.3",
@@ -19,6 +20,7 @@
  "dotenv": "^8.2.0",
  "node-sass": "^6.0.1",
  "react": "^16.6.3",
+ "react-alert": "^7.0.3",
  "react-dom": "^16.6.3",
  "react-redux": "^7.2.2",
  "react-router-dom": "^5.2.0",

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

@@ -7,10 +7,10 @@ import SpiffeHelper from '../spiffe-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 +22,45 @@ const styles = theme => ({
 class AgentDashboardTable extends React.Component {
  constructor(props) {
  super(props);
+ this.state = {
+ };
  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,
- }
- }
-
  agentList() {
+ var filteredData = [], 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.SpiffeHelper.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["agentsFilter"]) || (agentsList[i].id === selectedDataKey["agentsFilter"])) {
+ filteredData.push(agentsList[i]);
+ }
+ }
+ return filteredData;
+ }
+ 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 +70,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

@@ -7,8 +7,8 @@ import SpiffeHelper from '../spiffe-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 => ({
@@ -23,55 +23,36 @@ class ClusterDashboardTable extends React.Component {
  this.SpiffeHelper = new SpiffeHelper()
  }
 
- 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 filteredData = [], selectedDataKey = this.props.selectedDataKey;
+ let clustersList = [];
+ if (typeof this.props.globalClustersList === 'undefined') {
+ return [];
  }
- }
+  clustersList = this.props.globalClustersList.map(a => this.SpiffeHelper.cluster(a, this.props.globalEntries.globalEntriesList));
 
- 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["clustersFilter"]) || (clustersList[i].name === selectedDataKey["clustersFilter"])) {
+ filteredData.push(clustersList[i]);
+ }
+ }
+ return filteredData;
  }
+ 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,
+ clickedDashboardTabelFunc,
+} 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.clickedDashboardTabelFunc(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.clickedDashboardTabelFunc(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, clickedDashboardTabelFunc }
+)(DashboardDetailsRender)