UI improvements

raptox · Jan 12, 2019 · a2e732c · a2e732c
1 parent 3f70ac1
commit a2e732c
Show file tree

Hide file tree

Showing 22 changed files with 134,566 additions and 882,064 deletions.
diff --git a/app/app.html b/app/app.html
@@ -43,5 +43,6 @@
         );
       }
     </script>
+    <img alt='TU Logo' src='../resources/TU-Signet.png' style='position:fixed; width:50px; height:50px; right:3px; top:3px;'/>
   </body>
 </html>
diff --git a/app/components/Home.css → app/components/Basic.css b/app/components/Home.css → app/components/Basic.css
@@ -17,11 +17,12 @@
 }
 
 .backButton {
-  top: 10px;
-  left: 10px;
-  display: inline-block;
+  float: left;
+  margin-right: 10px;
+  margin-top: 4px;
 }
 
-.textfield {
-  margin: 15px 10px 0 10px;
+.pieDiv {
+  width: 1000px;
+  height: 650px;
 }
diff --git a/app/components/Home.js b/app/components/Home.js
@@ -1,10 +1,12 @@
 // @flow
+/* eslint-disable */
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import routes from '../constants/routes';
-import styles from './Home.css';
+import styles from './Basic.css';
 
 type Props = {};
+const remote = require('electron').remote;
 
 export default class Home extends Component<Props> {
   props: Props;
@@ -17,6 +19,9 @@ export default class Home extends Component<Props> {
           <Link to={routes.PARSE}>Parse XML</Link> <br />
           <Link to={routes.VIEW}>View Parsed</Link>
         </div>
+        <a href="#" onClick={() => remote.getCurrentWindow().close()}>
+          Close Application
+        </a>
       </div>
     );
   }

diff --git a/app/components/ParseXML.js b/app/components/ParseXML.js
@@ -2,20 +2,27 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 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';
+import { ClipLoader } from 'react-spinners';
+import styles from './Basic.css';
 
 const { dialog } = require('electron').remote;
 const fs = require('fs');
 import { parseData } from '../utils/parser';
 
+const buttonStyle = {
+  marginRight: '10px'
+};
+
 export default class ParseXML extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      parseLog: ''
+      selectedFile: '',
+      parseLog: '',
+      parsing: false
     };
   }
 
@@ -26,7 +33,7 @@ export default class ParseXML extends Component {
       <div>
         <div className={styles.backButton} data-tid="backButton">
           <Link to={routes.HOME}>
-            <i className="fa fa-arrow-left fa-3x" />
+            <i className="fa fa-arrow-left fa-2x" />
           </Link>
         </div>
         <h2>Parse XML</h2>
@@ -35,6 +42,7 @@ export default class ParseXML extends Component {
           variant="contained"
           color="primary"
           onClick={() => this.openFile()}
+          style={buttonStyle}
         >
           Select File
         </Button>
@@ -43,13 +51,22 @@ export default class ParseXML extends Component {
             variant="contained"
             color="secondary"
             onClick={() => this.saveFile()}
+            style={buttonStyle}
           >
-            Save Parsed
+            Save Parsed Data
           </Button>
         )}
+        <div>
+          {this.state.selectedFile && (
+            <h3>Selected File: {this.state.selectedFile}</h3>
+          )}
+          <div>
+            <ClipLoader loading={this.state.parsing} />
+          </div>
+        </div>
         {data && (
-          <div className={styles.textfield}>
-            Parse Log: <br />
+          <div>
+            View Parsed Data: <br />
             <ReactJson
               src={data ? JSON.parse(data) : { empty: true }}
               collapsed={true}
@@ -61,18 +78,31 @@ export default class ParseXML extends Component {
   }
 
   openFile() {
-    let file = dialog.showOpenDialog({ properties: ['openFile'] });
+    let file = dialog.showOpenDialog({
+      properties: ['openFile'],
+      filters: [
+        { name: 'XML Files', extensions: ['xml'] },
+        { name: 'All Files', extensions: ['*'] }
+      ]
+    });
     if (file) {
+      this.setState({});
+      this.setState({ parsing: true, selectedFile: file, parseLog: '' });
       parseData(file[0], data => {
-        this.setState({ parseLog: data });
+        this.setState({ parseLog: data, parsing: false });
       });
     }
   }
 
   saveFile() {
     const options = {
       title: 'Where to save?',
-      message: 'Where to save?'
+      message: 'Where to save?',
+      defaultPath: 'parsed.json',
+      filters: [
+        { name: 'JSON Files', extensions: ['json'] },
+        { name: 'All Files', extensions: ['*'] }
+      ]
     };
     let file = dialog.showSaveDialog(options);
     if (file) {

diff --git a/app/components/ViewParsed.js b/app/components/ViewParsed.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import routes from '../constants/routes';
-import styles from './Home.css';
+import styles from './Basic.css';
 import Button from '@material-ui/core/Button';
 import ReactTable from 'react-table';
 import moment from 'moment';
@@ -26,7 +26,7 @@ export default class ViewParsed extends Component {
       <div>
         <div className={styles.backButton} data-tid="backButton">
           <Link to={routes.HOME}>
-            <i className="fa fa-arrow-left fa-3x" />
+            <i className="fa fa-arrow-left fa-2x" />
           </Link>
         </div>
         <h2>View Parsed</h2>
@@ -90,21 +90,30 @@ export default class ViewParsed extends Component {
               className="-striped -highlight"
             />
             <h3>MPI %</h3>
-            <Pie data={content.mpiPies.mpiPercent} />
+            <div className={styles.pieDiv}>
+              <Pie data={content.mpiPies.mpiPercent} />
+            </div>
             <h3>MPI % Wall</h3>
-            <Pie data={content.mpiPies.mpiWall} />
+            <div className={styles.pieDiv}>
+              <Pie data={content.mpiPies.mpiWall} />
+            </div>
           </div>
         )}
       </div>
     );
   }
 
   openFile() {
-    let file = dialog.showOpenDialog({ properties: ['openFile'] });
+    let file = dialog.showOpenDialog({
+      properties: ['openFile'],
+      filters: [
+        { name: 'JSON Files', extensions: ['json'] },
+        { name: 'All Files', extensions: ['*'] }
+      ]
+    });
     if (file) {
       fs.readFile(file[0], (err, data) => {
         this.setState({ parsedContent: JSON.parse(data) });
-        console.log(this.state.parsedContent);
       });
     }
   }

diff --git a/app/menu.js b/app/menu.js
@@ -48,7 +48,7 @@ export default class MenuBuilder {
       label: 'Electron',
       submenu: [
         {
-          label: 'About ElectronReact',
+          label: 'About IPM HPC v2',
           selector: 'orderFrontStandardAboutPanel:'
         },
         { type: 'separator' },
@@ -146,29 +146,9 @@ export default class MenuBuilder {
       label: 'Help',
       submenu: [
         {
-          label: 'Learn More',
+          label: 'View on GitHub',
           click() {
-            shell.openExternal('http://electron.atom.io');
-          }
-        },
-        {
-          label: 'Documentation',
-          click() {
-            shell.openExternal(
-              'https://github.com/atom/electron/tree/master/docs#readme'
-            );
-          }
-        },
-        {
-          label: 'Community Discussions',
-          click() {
-            shell.openExternal('https://discuss.atom.io/c/electron');
-          }
-        },
-        {
-          label: 'Search Issues',
-          click() {
-            shell.openExternal('https://github.com/atom/electron/issues');
+            shell.openExternal('https://github.com/raptox/ipm-hpc-v2');
           }
         }
       ]
@@ -243,29 +223,9 @@ export default class MenuBuilder {
         label: 'Help',
         submenu: [
           {
-            label: 'Learn More',
-            click() {
-              shell.openExternal('http://electron.atom.io');
-            }
-          },
-          {
-            label: 'Documentation',
-            click() {
-              shell.openExternal(
-                'https://github.com/atom/electron/tree/master/docs#readme'
-              );
-            }
-          },
-          {
-            label: 'Community Discussions',
-            click() {
-              shell.openExternal('https://discuss.atom.io/c/electron');
-            }
-          },
-          {
-            label: 'Search Issues',
+            label: 'View on GitHub',
             click() {
-              shell.openExternal('https://github.com/atom/electron/issues');
+              shell.openExternal('https://github.com/raptox/ipm-hpc-v2');
             }
           }
         ]

diff --git a/app/utils/parser-example.js b/app/utils/parser-example.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,5 +43,6 @@ @@
             );
           }
         </script>
+        <img alt='TU Logo' src='../resources/TU-Signet.png' style='position:fixed; width:50px; height:50px; right:3px; top:3px;'/>
       </body>
     </html>