diff --git a/app/app.global.css b/app/app.global.css index 0a85f9f..c8e9280 100644 --- a/app/app.global.css +++ b/app/app.global.css @@ -2,16 +2,13 @@ * @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 { @@ -19,7 +16,6 @@ h2 { font-size: 2.25rem; font-weight: bold; letter-spacing: -0.025em; - color: #fff; } p { @@ -31,7 +27,6 @@ li { } a { - color: white; opacity: 0.75; text-decoration: none; } diff --git a/app/components/ParseXML.js b/app/components/ParseXML.js index 2bf6fef..b4e1efa 100644 --- a/app/components/ParseXML.js +++ b/app/components/ParseXML.js @@ -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'); @@ -19,6 +20,8 @@ export default class ParseXML extends Component { } render() { + let data = this.state.parseLog; + return (
@@ -35,7 +38,7 @@ export default class ParseXML extends Component { > Select File - {this.state.parseLog && ( + {data && (
); } diff --git a/app/components/ViewParsed.js b/app/components/ViewParsed.js index 8e54943..26b0e41 100644 --- a/app/components/ViewParsed.js +++ b/app/components/ViewParsed.js @@ -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'); @@ -39,6 +40,7 @@ export default class ViewParsed extends Component { {content && (
+

Metadata

user: {content.metadata.username}
start:{' '} @@ -56,6 +58,7 @@ export default class ViewParsed extends Component { seconds
comm: missing
+

{content.hosts.length} Hosts

+

MPI %

+ +

MPI % Wall

+
)}
diff --git a/app/utils/parser.js b/app/utils/parser.js index f868cd2..e2edfea 100644 --- a/app/utils/parser.js +++ b/app/utils/parser.js @@ -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 = { @@ -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; };