-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Tornjak dashboard UI- Front End[Part 1] (#76)
* tornjak dashboard design details * fix rendering bugs * fix navbar render bog on resize * taking care of initial review nits * removing title component * readding title component * dashboard data management * cluster edit update * expire time date reformat * no data to show display for banner * fixing === * material Ui version update * merging changes from dashboard data management pr * nits from review * remove Dashboard folder * renaming as dashboard lowercase * cluster create form cluster types bug fix * manager mode cluster create type bug fix * expanded view tables for dashboard * expanded view refactor tables dashboard * removing unused variables and functions * merging from dashboard frontend bug fixing pr * removing agent update gitignore * remove agent file * nits in spiffe-entry-interface Signed-off-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com>
- Loading branch information
Showing
26 changed files
with
3,240 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -33,4 +33,4 @@ agentlocaldb | |
| bin/ | ||
| ui/ | ||
| ui-agent/ | ||
| /agent | ||
| agent | ||
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -50,4 +50,5 @@ | |
| height: 30px; | ||
| position: fixed; | ||
| bottom: 0; | ||
| z-index: 2; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import React from "react"; | ||
| import { PieChart } from "@carbon/charts-react"; | ||
| import "@carbon/charts/styles.css"; | ||
| import { connect } from 'react-redux'; | ||
| class PieChart1 extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| options: { | ||
| resizable: true, | ||
| height: "300px", | ||
| legend: { | ||
| alignment: "center" | ||
| }, | ||
| pie: { | ||
| alignment: "center" | ||
| } | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| const { data } = this.props; | ||
| return ( | ||
| <div> | ||
| <div> | ||
| </div> | ||
| <PieChart | ||
| data={data} | ||
| options={this.state.options} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const mapStateToProps = state => ({ | ||
| }) | ||
|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| {} | ||
| )(PieChart1); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
tornjak-frontend/src/components/dashboard/agents-dashboard-table.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { withStyles } from '@material-ui/core/styles'; | ||
| import renderCellExpand from './render-cell-expand'; | ||
| import Table1 from './table/dashboard-table'; | ||
| import SpiffeEntryInterface from '../spiffe-entry-interface'; | ||
|
|
||
| const columns = [ | ||
| { field: "spiffeid", headerName: "Name", flex: 1, renderCell: renderCellExpand }, | ||
| { 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 => ({ | ||
| seeMore: { | ||
| marginTop: theme.spacing(3), | ||
| }, | ||
| }); | ||
|
|
||
| class AgentDashboardTable extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.SpiffeEntryInterface = new SpiffeEntryInterface() | ||
| } | ||
|
|
||
| numberEntries(spiffeid) { | ||
| if (typeof this.props.globalEntries.globalEntriesList !== 'undefined') { | ||
| var entriesList = this.props.globalEntries.globalEntriesList.filter(entry => { | ||
| return (typeof entry !== 'undefined') && (this.SpiffeEntryInterface.getEntryParentid(entry) === spiffeid) | ||
| }); | ||
| if (typeof entriesList === 'undefined') { | ||
| return 0 | ||
| } else { | ||
| return entriesList.length | ||
| } | ||
| } else { | ||
| return 0 | ||
| } | ||
| } | ||
|
|
||
| agent(entry) { | ||
| var thisSpiffeid = this.SpiffeEntryInterface.getAgentSpiffeid(entry); | ||
| // get status | ||
| var status = this.SpiffeEntryInterface.getAgentStatusString(entry); | ||
| // get tornjak metadata | ||
| var metadata_entry = this.SpiffeEntryInterface.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), | ||
| status: status, | ||
| platformType: plugin, | ||
| clusterName: cluster, | ||
| } | ||
| } | ||
|
|
||
| agentList() { | ||
| if (typeof this.props.globalAgents.globalAgentsList !== undefined) { | ||
| return this.props.globalAgents.globalAgentsList.map(currentAgent => { | ||
| return this.agent(currentAgent); | ||
| }) | ||
| } else { | ||
| return [] | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const { numRows, tableType } = this.props; | ||
| var data = this.agentList(); | ||
| return ( | ||
| <div> | ||
| <Table1 | ||
| title={"Agents"} | ||
| numRows={numRows} | ||
| tableType={tableType} | ||
| columns={columns} | ||
| data={data}/> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| const mapStateToProps = (state) => ({ | ||
| globalAgents: state.agents, | ||
| globalEntries: state.entries, | ||
| }) | ||
|
|
||
| export default withStyles(styles)( | ||
| connect(mapStateToProps, {})(AgentDashboardTable) | ||
| ) |
Oops, something went wrong.