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

@@ -16,6 +16,7 @@ import { Provider } from 'react-redux'; //enables all components to have access
 import store from 'redux/store';
 import IsManager from './components/is_manager';
 import './App.css';
+import DashboardDetails from 'components/dashboard/dashboard-details';
 
 function App() {
  return (
@@ -38,6 +39,7 @@ 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" component={DashboardDetails} />
  <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,6 +22,8 @@ const styles = theme => ({
 class AgentDashboardTable extends React.Component {
  constructor(props) {
  super(props);
+ this.state = {
+ };
  this.SpiffeHelper = new SpiffeHelper()
  }
 
@@ -31,13 +33,13 @@ class AgentDashboardTable extends React.Component {
  // 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]));
+ 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=> {
+ var entriesList = this.props.globalEntries.globalEntriesList.filter(entry => {
  return (typeof entry !== 'undefined') && validIds.has(this.SpiffeHelper.getEntryParentid(entry));
  });
 
@@ -77,8 +79,8 @@ class AgentDashboardTable extends React.Component {
 
  agentList() {
  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)
@@ -87,16 +89,47 @@ class AgentDashboardTable extends React.Component {
  })
  }
 
+ selectedData() {
+ var data = this.agentList() , selectedData = this.props.selectedData, clickedDashboardTable = this.props.globalClickedDashboardTable;
+ var filteredData = [], selectedDataKey = [];
+ if (selectedData === undefined)
+ return data;
+ if (clickedDashboardTable === "clustersdetails") {
+ for (let i = 0; i < selectedData.length; i++) {
+ selectedDataKey[i] = selectedData[i].name;
+ }
+ for (let i = 0; i < data.length; i++) {
+ for (let j = 0; j < selectedDataKey.length; j++) {
+ if (data[i].clusterName === selectedDataKey[j]) {
+ filteredData.push(data[i]);
+ }
+ }
+ }
+ } else if (clickedDashboardTable === "entriesdetails") {
+ for (let i = 0; i < selectedData.length; i++) {
+ selectedDataKey[i] = selectedData[i].value.parentId;
+ }
+ for (let i = 0; i < data.length; i++) {
+ for (let j = 0; j < selectedDataKey.length; j++) {
+ if (data[i].id === selectedDataKey[j]) {
+ filteredData.push(data[i]);
+ }
+ }
+ }
+ }
+ return filteredData;
+ }
+
  render() {
  const { numRows } = this.props;
- var data = this.agentList();
+ var data = this.selectedData();
  return (
  <div>
- <TableDashboard 
+ <TableDashboard
  title={"Agents"}
  numRows={numRows}
  columns={columns}
- data={data}/>
+ data={data} />
  </div>
  );
  }
@@ -106,6 +139,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 => ({
@@ -62,16 +62,33 @@ class ClusterDashboardTable extends React.Component {
  }
  }
 
+ selectedData() {
+ var data = this.clusterList(), filteredData = [], selectedDataKey = [], selectedData = this.props.selectedData;
+ if (selectedData === undefined)
+ return data;
+ for (let i = 0; i < selectedData.length; i++) {
+ selectedDataKey[i] = selectedData[i].value.clusterName;
+ }
+ for (let i = 0; i < data.length; i++) {
+ for (let j = 0; j < selectedDataKey.length; j++) {
+ if ((data[i].clusterName === selectedDataKey[j]) || (data[i].name === selectedDataKey[j])) {
+ filteredData.push(data[i]);
+ }
+ }
+ }
+ return filteredData;
+ }
+
  render() {
  const { numRows } = this.props;
- var data = this.clusterList();
+ var data = this.selectedData();
  return (
  <div>
- <TableDashboard 
+ <TableDashboard
  title={"Clusters"}
  numRows={numRows}
  columns={columns}
- data={data}/>
+ data={data} />
  </div>
  );
  }