From 0d7889c23d407f6c0cd3db4020989ce8a5f8063a Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Wed, 22 Jul 2020 11:40:01 +0200
Subject: Fix polling and upgrade bootstrap

---
 frontend/public/index.html                         | 16 +++++------
 .../app/results/PortfolioResultsComponent.js       | 28 +++++++++++--------
 .../app/sidebars/project/PortfolioListComponent.js |  4 +--
 .../sidebars/project/ProjectSidebarComponent.js    |  6 +++--
 .../app/sidebars/project/ScenarioListComponent.js  |  4 +--
 .../app/sidebars/project/TopologyListComponent.js  |  4 +--
 frontend/src/sagas/portfolios.js                   | 31 ++++++++++++++++++++--
 frontend/src/sagas/scenarios.js                    |  3 ++-
 8 files changed, 66 insertions(+), 30 deletions(-)

(limited to 'frontend')

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 0254eff4..b19fdbda 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -37,8 +37,8 @@
     <meta name="google-site-verification" content="YIR4LkQTv6WmOdWv8MkeiUKni-0Yu3WHylLp4VvUMig"/>
 
     <!-- CDN dependencies -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
-          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://use.fontawesome.com/ece66a2e7c.js"></script>
 
@@ -61,14 +61,14 @@
 </noscript>
 <div id="root"></div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
-        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
-        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
         crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
-        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
+        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
         crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/frontend/src/components/app/results/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js
index e9b33777..286dd48c 100644
--- a/frontend/src/components/app/results/PortfolioResultsComponent.js
+++ b/frontend/src/components/app/results/PortfolioResultsComponent.js
@@ -54,18 +54,24 @@ const PortfolioResultsComponent = ({ portfolio, scenarios }) => {
                     <div className="col-6 mb-2" key={metric}>
                         <h4>{METRIC_NAMES[metric]}</h4>
                         <ResponsiveContainer aspect={16 / 9} width="100%">
-                            <ComposedChart data={dataPerMetric[metric]} margin={{ bottom: 15 }} layout="vertical" animationDUration={0}>
-                                <CartesianGrid strokeDasharray="3 3"/>
-                                <XAxis tickFormatter={(tick) => approx(tick)}
-                                       label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
-                                       type="number"/>
-                                <YAxis dataKey="name" type="category"/>
-                                <Bar dataKey="value" fill="#3399FF"/>
-                                <Scatter dataKey="value" opacity={0}>
-                                    <ErrorBar dataKey="errorX" width={10} strokeWidth={3} stroke="#FF6600"
-                                              direction="x"/>
+                            <ComposedChart data={dataPerMetric[metric]} margin={{ bottom: 15 }} layout="vertical">
+                                <CartesianGrid strokeDasharray="3 3" />
+                                <XAxis
+                                    tickFormatter={(tick) => approx(tick)}
+                                    label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
+                                    type="number"
+                                />
+                                <YAxis dataKey="name" type="category" />
+                                <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
+                                <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
+                                    <ErrorBar
+                                        dataKey="errorX"
+                                        width={10}
+                                        strokeWidth={3}
+                                        stroke="#FF6600"
+                                        direction="x"
+                                    />
                                 </Scatter>
-
                             </ComposedChart>
                         </ResponsiveContainer>
                     </div>
diff --git a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
index 837666af..b000b9e2 100644
--- a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -37,13 +37,13 @@ class PortfolioListComponent extends React.Component {
                         <div className="row mb-1">
                             <div
                                 className={
-                                    'col-8 align-self-center ' +
+                                    'col-7 align-self-center ' +
                                     (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')
                                 }
                             >
                                 {portfolio.name}
                             </div>
-                            <div className="col-4 text-right">
+                            <div className="col-5 text-right">
                                 <Link
                                     className="btn btn-outline-primary mr-1 fa fa-play"
                                     to={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}
diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
index aadc451e..4789315e 100644
--- a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -5,8 +5,10 @@ import PortfolioListContainer from '../../../../containers/app/sidebars/project/
 
 const ProjectSidebarComponent = ({ collapsible }) => (
     <Sidebar isRight={false} collapsible={collapsible}>
-        <TopologyListContainer />
-        <PortfolioListContainer />
+        <div className="h-100 overflow-auto container-fluid">
+            <TopologyListContainer />
+            <PortfolioListContainer />
+        </div>
     </Sidebar>
 )
 
diff --git a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
index 8b50eff0..e775a663 100644
--- a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -26,13 +26,13 @@ class ScenarioListComponent extends React.Component {
                     <div key={scenario._id} className="row mb-1">
                         <div
                             className={
-                                'col-8 pl-5 align-self-center ' +
+                                'col-7 pl-5 align-self-center ' +
                                 (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
                             }
                         >
                             {scenario.name}
                         </div>
-                        <div className="col-4 text-right">
+                        <div className="col-5 text-right">
                             <Link
                                 className="btn btn-outline-primary mr-1 fa fa-play disabled"
                                 to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
index 498ee26d..2f42f7e4 100644
--- a/frontend/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
@@ -34,13 +34,13 @@ class TopologyListComponent extends React.Component {
                     <div key={topology._id} className="row mb-1">
                         <div
                             className={
-                                'col-8 align-self-center ' +
+                                'col-7 align-self-center ' +
                                 (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')
                             }
                         >
                             {topology.name}
                         </div>
-                        <div className="col-4 text-right">
+                        <div className="col-5 text-right">
                             <span
                                 className="btn btn-outline-primary mr-1 fa fa-play"
                                 onClick={() => this.onChoose(topology._id)}
diff --git a/frontend/src/sagas/portfolios.js b/frontend/src/sagas/portfolios.js
index 3c004282..ed9bfd29 100644
--- a/frontend/src/sagas/portfolios.js
+++ b/frontend/src/sagas/portfolios.js
@@ -1,4 +1,4 @@
-import { call, put, select } from 'redux-saga/effects'
+import { call, put, select, delay } from 'redux-saga/effects'
 import { addPropToStoreObject, addToStore } from '../actions/objects'
 import { addPortfolio, deletePortfolio, getPortfolio, updatePortfolio } from '../api/routes/portfolios'
 import { getProject } from '../api/routes/projects'
@@ -15,7 +15,34 @@ export function* onOpenPortfolioSucceeded(action) {
         yield fetchAndStoreAllSchedulers()
         yield fetchAndStoreAllTraces()
 
-        // TODO Fetch portfolio-specific metrics
+        yield watchForPortfolioResults()
+    } catch (error) {
+        console.error(error)
+    }
+}
+
+export function* watchForPortfolioResults() {
+    try {
+        const currentPortfolioId = yield select((state) => state.currentPortfolioId)
+        let unfinishedScenarios = yield getCurrentUnfinishedScenarios()
+
+        while (unfinishedScenarios.length > 0) {
+            yield delay(3000)
+            yield fetchPortfolioWithScenarios(currentPortfolioId)
+            unfinishedScenarios = yield getCurrentUnfinishedScenarios()
+        }
+    } catch (error) {
+        console.error(error)
+    }
+}
+
+export function* getCurrentUnfinishedScenarios() {
+    try {
+        const currentPortfolioId = yield select((state) => state.currentPortfolioId)
+        const scenarioIds = yield select((state) => state.objects.portfolio[currentPortfolioId].scenarioIds)
+        const scenarioObjects = yield select((state) => state.objects.scenario)
+        const scenarios = scenarioIds.map((s) => scenarioObjects[s])
+        return scenarios.filter((s) => !s || s.simulation.state === 'QUEUED' || s.simulation.state === 'RUNNING')
     } catch (error) {
         console.error(error)
     }
diff --git a/frontend/src/sagas/scenarios.js b/frontend/src/sagas/scenarios.js
index 3ecc3fc4..720c0c97 100644
--- a/frontend/src/sagas/scenarios.js
+++ b/frontend/src/sagas/scenarios.js
@@ -4,7 +4,7 @@ import { getProject } from '../api/routes/projects'
 import { fetchAndStoreAllSchedulers, fetchAndStoreAllTraces } from './objects'
 import { fetchAndStoreAllTopologiesOfProject } from './topology'
 import { addScenario, deleteScenario, updateScenario } from '../api/routes/scenarios'
-import { fetchPortfolioWithScenarios } from './portfolios'
+import { fetchPortfolioWithScenarios, watchForPortfolioResults } from './portfolios'
 
 export function* onOpenScenarioSucceeded(action) {
     try {
@@ -32,6 +32,7 @@ export function* onAddScenario(action) {
                 scenarioIds: scenarioIds.concat([scenario._id]),
             })
         )
+        yield watchForPortfolioResults()
     } catch (error) {
         console.error(error)
     }
-- 
cgit v1.2.3