Skip to content

Commit

Permalink
added mpi charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@raptox
raptox committed Jan 12, 2019
1 parent d5028c9 commit 3f70ac1
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 16 deletions.
9 changes: 2 additions & 7 deletions app/app.global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,20 @@
* @NOTE: Prepend a `~` to css file paths that are in your node_modules
* See https://github.com/webpack-contrib/sass-loader#imports
*/
@import "~@fortawesome/fontawesome-free/css/all.css";
@import '~@fortawesome/fontawesome-free/css/all.css';

body {
position: relative;
color: white;
height: 100vh;
background-color: #232c39;
background-image: linear-gradient(45deg, rgba(0, 216, 255, 0.5) 10%, rgba(0, 1, 127, 0.7));
font-family: Arial, Helvetica, Helvetica Neue, serif;
overflow-y: hidden;
overflow-y: auto;
}

h2 {
margin: 0;
font-size: 2.25rem;
font-weight: bold;
letter-spacing: -0.025em;
color: #fff;
}

p {
Expand All @@ -31,7 +27,6 @@ li {
}

a {
color: white;
opacity: 0.75;
text-decoration: none;
}
Expand Down
18 changes: 13 additions & 5 deletions app/components/ParseXML.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import routes from '../constants/routes';
import styles from './Home.css';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import ReactJson from 'react-json-view';

const { dialog } = require('electron').remote;
const fs = require('fs');
Expand All @@ -19,6 +20,8 @@ export default class ParseXML extends Component {
}

render() {
let data = this.state.parseLog;

return (
<div>
<div className={styles.backButton} data-tid="backButton">
Expand All @@ -35,7 +38,7 @@ export default class ParseXML extends Component {
>
Select File
</Button>
{this.state.parseLog && (
{data && (
<Button
variant="contained"
color="secondary"
Expand All @@ -44,10 +47,15 @@ export default class ParseXML extends Component {
Save Parsed
</Button>
)}
<div className={styles.textfield}>
Parse Log: <br />
{this.state.parseLog}
</div>
{data && (
<div className={styles.textfield}>
Parse Log: <br />
<ReactJson
src={data ? JSON.parse(data) : { empty: true }}
collapsed={true}
/>
</div>
)}
</div>
);
}
Expand Down
10 changes: 9 additions & 1 deletion app/components/ViewParsed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import styles from './Home.css';
import Button from '@material-ui/core/Button';
import ReactTable from 'react-table';
import moment from 'moment';
import { Pie } from 'react-chartjs-2';

const { dialog } = require('electron').remote;
const fs = require('fs');
Expand Down Expand Up @@ -39,6 +40,7 @@ export default class ViewParsed extends Component {
</Button>
{content && (
<div>
<h3>Metadata</h3>
<div>
user: {content.metadata.username} <br />
start:{' '}
Expand All @@ -56,6 +58,7 @@ export default class ViewParsed extends Component {
seconds <br />
comm: missing
</div>
<h3>{content.hosts.length} Hosts</h3>
<ReactTable
data={content.hosts}
columns={[
Expand All @@ -82,9 +85,14 @@ export default class ViewParsed extends Component {
]
}
]}
defaultPageSize={10}
pageSizeOptions={[2, 5, 10, 20, 25, 50, 100]}
defaultPageSize={2}
className="-striped -highlight"
/>
<h3>MPI %</h3>
<Pie data={content.mpiPies.mpiPercent} />
<h3>MPI % Wall</h3>
<Pie data={content.mpiPies.mpiWall} />
</div>
)}
</div>
Expand Down
80 changes: 77 additions & 3 deletions app/utils/parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,89 @@ export const parseData = (filename, callback) => {
let taskdata = result[ROOT_ITEM].task;
let data = {};
fs.writeFile('log.json', JSON.stringify(result, null, 2), err => {
console.log(err);
if (err) {
console.log(err);
process.exit(1);
}
});
data.metadata = getMetadata(taskdata[0]);
data.hosts = getHosts(taskdata);
data.mpiData = getMpiData(taskdata);
let totalWallTime = (data.metadata.stop - data.metadata.start) * 1000;
data.mpiPies = getMpiPieCharts(data.mpiData, totalWallTime);
callback(JSON.stringify(data, null, 2));
});
};

const getMpiPieCharts = (mpiData, totalWallTime) => {
let mpiPieCharts = {
mpiPercent: {
datasets: [
{
data: [], // here comes the numeric data
backgroundColor: [],
hoverBackgroundColor: []
}
],
labels: [] // labels
},
mpiWall: {
datasets: [
{
data: [], // here comes the numeric data
backgroundColor: [],
hoverBackgroundColor: []
}
],
labels: [] // labels
}
};

for (let mpiCallKey in mpiData.mpiCalls) {
let mpiCall = mpiData.mpiCalls[mpiCallKey];

// mpi percent pie
let value = ((mpiCall.ttot / mpiData.mpiAnalysis.totalTime) * 100).toFixed(
2
);
mpiPieCharts.mpiPercent.datasets[0].data.push(value);
mpiPieCharts.mpiPercent.labels.push(mpiCall.call);
let colors = getRandomColors();
mpiPieCharts.mpiPercent.datasets[0].backgroundColor.push(colors.color);
mpiPieCharts.mpiPercent.datasets[0].hoverBackgroundColor.push(colors.hover);

// mpi wall time pie
let value2 = ((mpiCall.ttot / totalWallTime) * 100).toFixed(2);
mpiPieCharts.mpiWall.datasets[0].data.push(value2);
mpiPieCharts.mpiWall.labels.push(mpiCall.call);
mpiPieCharts.mpiWall.datasets[0].backgroundColor.push(colors.color);
mpiPieCharts.mpiWall.datasets[0].hoverBackgroundColor.push(colors.hover);
}

// also add rest of app time at mpi wall time pie
let appTimeValue = (
((totalWallTime - mpiData.mpiAnalysis.totalTime) / totalWallTime) *
100
).toFixed(2);
let colors = getRandomColors();
mpiPieCharts.mpiWall.datasets[0].data.push(appTimeValue);
mpiPieCharts.mpiWall.labels.push('Apllication');
mpiPieCharts.mpiWall.datasets[0].backgroundColor.push(colors.color);
mpiPieCharts.mpiWall.datasets[0].hoverBackgroundColor.push(colors.hover);

return mpiPieCharts;
};

const getRandomColors = () => {
// set random colors
let r = Math.floor(Math.random() * 200);
let g = Math.floor(Math.random() * 200);
let b = Math.floor(Math.random() * 200);
let color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
let hover = 'rgb(' + (r + 20) + ', ' + (g + 20) + ', ' + (b + 20) + ')';
return { color, hover };
};

const getMpiData = taskdata => {
let mpiCalls = [];
let mpiAnalysis = {
Expand Down Expand Up @@ -65,8 +139,8 @@ const getMpiData = taskdata => {
const getMetadata = firstTask => {
let metadata = {};
metadata.username = firstTask.$.username;
metadata.start = firstTask.$.stamp_init;
metadata.stop = firstTask.$.stamp_final;
metadata.start = parseFloat(firstTask.$.stamp_init);
metadata.stop = parseFloat(firstTask.$.stamp_final);
return metadata;
};

Expand Down

0 comments on commit 3f70ac1

Please sign in to comment.