Merge branch 'feature/progress-bar' of https://github.com/DariaLutkov…

…a/tasty-ui into parallelMode
DariaLutkova · May 25, 2020 · 2c79a89 · 2c79a89
2 parents 1350021 + 1723783
commit 2c79a89
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,26 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 
 import Testing from './pages/Testing';
 import Reports from './pages/Reports';
 
-const PROJECT_NAME = 'Lego';
+import { getProjectName } from "./api";
 
 function App() {
+  const [ProjectName, setProjectName] = useState('');
+
+  useEffect( () => {
+    (async () => {
+      const res = await getProjectName();
+      setProjectName(res.name)
+    })()
+}, []);
+
   return (
     <Router>
       <Navbar variant="dark" bg="dark" expand="lg">
-        <Navbar.Brand as={NavLink} to="/">{`${PROJECT_NAME} Tasty Point`}</Navbar.Brand>
+        <Navbar.Brand as={NavLink} to="/">{`${ProjectName} Tasty Point`}</Navbar.Brand>
         <Nav className="mr-auto">
           <NavLink to="/tests" className="nav-link">Tests</NavLink>
           <NavLink to="/reports" className="nav-link">Reports</NavLink>

diff --git a/src/api.js b/src/api.js
@@ -75,3 +75,13 @@ export const getStats = async () => {
     return null;
   }
 };
+
+export const getProjectName = async () => {
+  try {
+    const res = await axios.get('/api/name');
+
+    return res.data;
+  } catch (err) {
+    return null;
+  }
+};
diff --git a/src/subpages/Tests.js b/src/subpages/Tests.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge, Button, Col, ListGroup, ProgressBar, Row, Spinner, Toast } from 'react-bootstrap';
+import { Badge, Button, Col, ListGroup,  Row, Spinner, Toast, ProgressBar } from 'react-bootstrap';
 import _ from 'lodash';
 import * as api from '../api';
 import { FaPlay as Run } from 'react-icons/fa';
@@ -15,6 +15,7 @@ class Tests extends React.Component {
     funcLog: '',
     loadLog: '',
     errors: [],
+    percentage: 0,
   };
 
   socket = socketIOClient();
@@ -42,29 +43,53 @@ class Tests extends React.Component {
     });
 
     this.socket.on('tests:start', () => {
-      this.setState({ loading: true });
+      localStorage.setItem('func_log', '');
+      localStorage.setItem('load_log', '');
+
+      this.setState({
+        loading: true,
+      });
     });
 
     this.socket.on('tests:end', (stats) => {
-      this.setState({ loading: false, stats });
+      this.setState({
+        loading: false,
+        stats,
+        percentage: 0
+      });
       localStorage.setItem(this.type === 'func' ? 'func_stats' : 'load_stats', JSON.stringify(stats));
     });
 
     this.socket.on('tests:error', (err) => {
       this.setState((prevState) => ({
         loading: false,
+        percentage: 0,
         errors: [...prevState.errors, err]
       }));
     });
 
     this.socket.on('tests:func:log', (log) => {
-      localStorage.setItem('func_log', this.state.funcLog + log);
-      this.setState({ funcLog: this.state.funcLog + log });
+      localStorage.setItem('func_log', localStorage.getItem('func_log') + log );
     });
 
+    this.socket.on('tests:func:log', _.throttle(this.setFuncLog, 300, {
+      trailing: true,
+      leading: false
+    }));
+
     this.socket.on('tests:load:log', (log) => {
-      localStorage.setItem('load_log', this.state.loadLog + log);
-      this.setState({ loadLog: this.state.loadLog + log });
+      localStorage.setItem('load_log', localStorage.getItem('load_log') + log);
+    });
+
+    this.socket.on('tests:load:log', _.throttle(this.setLoadLog, 300, {
+      trailing: true,
+      leading: false
+    }));
+
+    this.socket.on('tests:test:finished', (percentage) => {
+      this.setState({
+        percentage
+      })
     })
   }
 
@@ -90,6 +115,14 @@ class Tests extends React.Component {
     }
   }
 
+  setFuncLog = () => {
+    this.setState({ funcLog: localStorage.getItem('func_log') })
+  };
+
+  setLoadLog = () => {
+    this.setState({ loadLog: localStorage.getItem('load_log')  });
+  };
+
   handleToggle = (test) => {
     const { selected } = this.state;
 
@@ -110,7 +143,7 @@ class Tests extends React.Component {
     const selectedTests = _.get(this.state, 'selected', this.state.tests);
     const filters = {
       type: this.type,
-      tests: selectedTests.map(test => test.id),
+      tests: selectedTests.length ? selectedTests.map(test => test.id) : this.state.tests.map(test => test.id),
     };
 
     this.setState({
@@ -201,7 +234,7 @@ class Tests extends React.Component {
   };
 
   render() {
-    const { tests, errors } = this.state;
+    const { tests, errors, percentage } = this.state;
 
     if (!tests) return <Spinner />;
 
@@ -217,7 +250,7 @@ class Tests extends React.Component {
           </div>
           {this.state.loading ? (
             <Col>
-              <ProgressBar now={0} className="my-auto" />
+              <ProgressBar now={percentage} label={`${percentage}%`} animated striped className="my-auto" />
             </Col>
           ) : (
             this.renderStats()