Merged in more-icons (pull request #18)

More icons

package-lock.json

@@ -1251,35 +1251,6 @@
         }
       }
     },
-    "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.32",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
-      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
-    },
-    "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.32",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
-      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.32"
-      }
-    },
-    "@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
-      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.32"
-      }
-    },
-    "@fortawesome/react-fontawesome": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.12.tgz",
-      "integrity": "sha512-kV6HtqotM3K4YIXlTVvomuIi6QgGCvYm++ImyEx2wwgmSppZ6kbbA29ASwjAUBD63j2OFU0yoxeXpZkjrrX0qQ==",
-      "requires": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -13372,6 +13343,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
       "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
     },
+    "react-icons": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
+      "integrity": "sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -12,12 +12,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.32",
-    "@fortawesome/free-solid-svg-icons": "5.15.1",
-    "@fortawesome/react-fontawesome": "0.1.12",
     "react": "^17.0.1",
     "react-bootstrap": "1.4.0",
     "react-dom": "^17.0.1",
+    "react-icons": "4.1.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.0",
     "react-tabs": "3.1.2",

src/components/experiment-list/experiment-list-element.css

@@ -118,4 +118,12 @@
 .entity-thumbnail {
   max-width: 230px;
   max-height: 160px;
+}
+
+.icon {
+  margin-right: 3px;
+}
+
+.experiment-details {
+  margin-top: 10px;
 }
\ No newline at end of file

src/components/experiment-list/experiment-list-element.js

 import React from 'react';
+import { FaPlay, FaTrash, FaFileExport, FaShareAlt, FaClone } from 'react-icons/fa';
+import { VscTriangleUp, VscTriangleDown } from 'react-icons/vsc';
+import { GoFileSubmodule } from 'react-icons/go';
+
 import timeDDHHMMSS from '../../utility/time-filter.js';
 import ExperimentStorageService from '../../services/experiments/storage/experiment-storage-service.js';
 import ExperimentExecutionService from '../../services/experiments/execution/experiment-execution-service.js';
@@ -139,7 +143,7 @@ export default class ExperimentListElement extends React.Component {
           </div>
 
           {this.state.selected &&
-            <div style={{ position: 'relative' }} >
+            <div className='experiment-details' >
               <i>
                 Timeout:
                 {timeDDHHMMSS(exp.configuration.timeout)}
@@ -172,7 +176,7 @@ export default class ExperimentListElement extends React.Component {
                     disabled={this.isLaunchDisabled()}
                     className='btn btn-default'
                     title={this.launchButtonTitle} >
-                    <i className='fa fa-plus'></i> Launch
+                    <FaPlay className='icon' />Launch
                   </button>
                   : null}
 
@@ -180,35 +184,38 @@ export default class ExperimentListElement extends React.Component {
                   this.props.availableServers.length > 0 &&
                   exp.configuration.experimentFile && exp.configuration.bibiConfSrc ?
                   <button className='btn btn-default'>
-                    <i className='fa fa-plus'></i> Launch in Single Process Mode
+                    <FaPlay className='icon' />Launch in Single Process Mode
                   </button>
                   : null}
 
                 {this.canLaunchExperiment && this.props.availableServers.length > 1 &&
                   exp.configuration.experimentFile && exp.configuration.bibiConfSrc ?
                   <button className='btn btn-default' >
-                    <i className='fa fa-layer-group'></i> Launch Multiple
+                    <FaPlay className='icon' />Launch Multiple
                   </button>
                   : null}
 
                 {/* isPrivateExperiment */}
                 {this.canLaunchExperiment ?
                   <button className='btn btn-default'>
-                    <i className='fa fa-times'></i> Delete
+                    <FaTrash className='icon' />Delete
                   </button>
                   : null}
 
                 {/* Records button */}
                 {this.canLaunchExperiment ?
                   <button className='btn btn-default'>
-                    <i className='fa fa-sign-in'></i> Recordings »
+                    {this.state.showRecordings ?
+                      <VscTriangleUp className='icon' /> : <VscTriangleDown className='icon' />
+                    }
+                    Recordings
                   </button>
                   : null}
 
                 {/* Export button */}
                 {this.canLaunchExperiment ?
                   <button className='btn btn-default'>
-                    <i className='fa fa-file-export'></i> Export
+                    <FaFileExport className='icon' />Export
                   </button>
                   : null}
 
@@ -218,7 +225,10 @@ export default class ExperimentListElement extends React.Component {
                     onClick={() => {
                       this.setState({ showSimDetails: !this.state.showSimDetails });
                     }}>
-                    <i className='fa fa-sign-in'></i> Simulations »
+                    {this.state.showSimDetails ?
+                      <VscTriangleUp className='icon' /> : <VscTriangleDown className='icon' />
+                    }
+                    Simulations
                   </button>
                   : null}
 
@@ -226,21 +236,21 @@ export default class ExperimentListElement extends React.Component {
                 {config.canCloneExperiments && (!exp.configuration.privateStorage ||
                   (exp.configuration.experimentFile && exp.configuration.bibiConfSrc)) ?
                   <button className='btn btn-default'>
-                    <i className='fa fa-pencil-alt'></i> Clone
+                    <FaClone className='icon' />Clone
                   </button>
                   : null}
 
                 {/* Files button */}
                 {this.canLaunchExperiment ?
                   <button className='btn btn-default' >
-                    <i className='fa fa-list-alt'></i> Files
+                    <GoFileSubmodule className='icon' />Files
                   </button>
                   : null}
 
                 {/* Shared button */}
                 {this.canLaunchExperiment ?
                   <button className='btn btn-default'>
-                    <i className='fas fa-share-alt'></i> Share
+                    <FaShareAlt className='icon' />Share
                   </button>
                   : null}
               </div>

src/components/experiment-list/simulation-details.css

 .simulations-details-wrapper {
-  width: 640px;
+  width: 90%;
+  text-align: center;
+  align-items: center;
+  align-content: center;
 }
 
 .table-header {
@@ -11,11 +14,15 @@
 .table-row {
   display: grid;
   gap: 10px;
-  grid-template-columns: repeat(5, 120px);
+  grid-template-columns: repeat(4, 120px) auto;
 
   padding-top: 10px;
 }
 
 .table-column-last {
   grid-area: 1 / -2 / 2 / -1;
+}
+
+.icon {
+  margin-right: 3px;
 }
\ No newline at end of file

src/components/experiment-list/simulation-details.js

 import React from 'react';
+import { FaStop, FaStopCircle } from 'react-icons/fa';
+import { ImEnter } from 'react-icons/im';
 
 import timeDDHHMMSS from '../../utility/time-filter.js';
 import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants.js';
@@ -78,7 +80,7 @@ export default class SimulationDetails extends React.Component {
                     simulation.stopping || joinExperiment(simulation, exp);"*/
                   type="button" className="btn btn-default"
                   disabled={this.isJoinDisabled(simulation)}>
-                  Join »
+                  <ImEnter className='icon' />Join
                 </button>
                 {/* Stop button enabled provided simulation state is consistent */}
                 <button /*analytics-on analytics-event="Stop" analytics-category="Experiment"*/
@@ -86,7 +88,7 @@ export default class SimulationDetails extends React.Component {
                   type="button" className="btn btn-default"
                   disabled={this.isStopDisabled(simulation)}
                   title={this.state.titleButtonStop}>
-                  <i className="fa fa-spinner fa-spin" ng-if="simulation.stopping"></i> Stop
+                  <FaStop className='icon' />Stop
                 </button>
               </div>
             </div>
@@ -95,7 +97,9 @@ export default class SimulationDetails extends React.Component {
         }
 
         <div className='table-row'>
-          <button className='table-column-last'>Stop All</button>
+          <button className='table-column-last'>
+            <FaStopCircle className='icon' />Stop All
+          </button>
         </div>
       </div >
     );

src/components/user-menu/user-menu.js

 import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserCircle, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+import { FaUserCircle, FaSignOutAlt } from 'react-icons/fa';
 
 import NrpUserService from '../../services/proxy/nrp-user-service.js';
 import AuthenticationService from '../../services/authentication-service.js';
@@ -45,7 +44,7 @@ export default class UserMenu extends React.Component {
             variant='success'
             id='dropdown-basic'
           >
-            <FontAwesomeIcon icon={faUserCircle} className='user-icon' />
+            <FaUserCircle className='user-icon' />
             <div className='user-name'>
               {this.state.user ? this.state.user.displayName : 'pending ...'}
             </div>
@@ -56,7 +55,7 @@ export default class UserMenu extends React.Component {
               className='dropdown-item'
               onClick={this.onClickLogout}
             >
-              <FontAwesomeIcon icon={faSignOutAlt} className='user-icon' />
+              <FaSignOutAlt className='user-icon' />
               Logout
             </Dropdown.Item>
           </Dropdown.Menu>