From 2ed4052162e2fcfa49f55cdd7f77cc2595526169 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Tue, 21 Jul 2020 15:50:20 +0200
Subject: Fix overflow and rearrange

---
 .../components/app/results/PortfolioResultsComponent.js  | 16 ++++++++--------
 .../containers/app/results/PortfolioResultsContainer.js  | 16 +++++++++++-----
 frontend/src/index.sass                                  |  4 ++--
 frontend/src/pages/App.js                                |  8 ++++++--
 frontend/src/util/available-metrics.js                   |  6 +++---
 5 files changed, 30 insertions(+), 20 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/app/results/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js
index 8c778098..a5c33f47 100644
--- a/frontend/src/components/app/results/PortfolioResultsComponent.js
+++ b/frontend/src/components/app/results/PortfolioResultsComponent.js
@@ -46,21 +46,21 @@ const PortfolioResultsComponent = ({ portfolio, scenarios }) => {
     })
 
     return (
-        <div>
+        <div className="full-height" style={{ overflowY: 'scroll', overflowX: 'hidden' }}>
             <h1>Portfolio: {portfolio.name}</h1>
             <p>Repeats per Scenario: {portfolio.targets.repeatsPerScenario}</p>
             <div className="row">
-                {AVAILABLE_METRICS.map(metric => (
+                {AVAILABLE_METRICS.map((metric) => (
                     <div className="col-6" key={metric}>
                         <h4>{METRIC_NAMES[metric]}</h4>
                         <ResponsiveContainer aspect={16 / 9} width="100%">
                             <BarChart data={dataPerMetric[metric]}>
-                                <CartesianGrid strokeDasharray="3 3"/>
-                                <XAxis dataKey="name"/>
-                                <YAxis tickFormatter={tick => approx(tick)}/>
-                                <Tooltip/>
-                                <Bar dataKey="value" fill="#8884d8"/>
-                                <ErrorBar dataKey="std" width={4} strokeWidth={2} stroke="blue" direction="y"/>
+                                <CartesianGrid strokeDasharray="3 3" />
+                                <XAxis dataKey="name" />
+                                <YAxis tickFormatter={(tick) => approx(tick)} />
+                                <Tooltip />
+                                <Bar dataKey="value" fill="#8884d8" />
+                                <ErrorBar dataKey="std" width={4} strokeWidth={2} stroke="blue" direction="y" />
                             </BarChart>
                         </ResponsiveContainer>
                     </div>
diff --git a/frontend/src/containers/app/results/PortfolioResultsContainer.js b/frontend/src/containers/app/results/PortfolioResultsContainer.js
index a3fdbf57..4b430e54 100644
--- a/frontend/src/containers/app/results/PortfolioResultsContainer.js
+++ b/frontend/src/containers/app/results/PortfolioResultsContainer.js
@@ -1,10 +1,14 @@
 import { connect } from 'react-redux'
 import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent'
 
-const mapStateToProps = state => {
-    if (state.currentPortfolioId === '-1'
-        || !state.objects.portfolio[state.currentPortfolioId]
-        || state.objects.portfolio[state.currentPortfolioId].scenarioIds.map(scenarioId => state.objects.scenario[scenarioId]).some(s => s === undefined)) {
+const mapStateToProps = (state) => {
+    if (
+        state.currentPortfolioId === '-1' ||
+        !state.objects.portfolio[state.currentPortfolioId] ||
+        state.objects.portfolio[state.currentPortfolioId].scenarioIds
+            .map((scenarioId) => state.objects.scenario[scenarioId])
+            .some((s) => s === undefined)
+    ) {
         return {
             portfolio: undefined,
             scenarios: [],
@@ -13,7 +17,9 @@ const mapStateToProps = state => {
 
     return {
         portfolio: state.objects.portfolio[state.currentPortfolioId],
-        scenarios: state.objects.portfolio[state.currentPortfolioId].scenarioIds.map(scenarioId => state.objects.scenario[scenarioId]),
+        scenarios: state.objects.portfolio[state.currentPortfolioId].scenarioIds.map(
+            (scenarioId) => state.objects.scenario[scenarioId]
+        ),
     }
 }
 
diff --git a/frontend/src/index.sass b/frontend/src/index.sass
index ca12f874..ec756bc5 100644
--- a/frontend/src/index.sass
+++ b/frontend/src/index.sass
@@ -12,7 +12,7 @@ html, body, #root
 
 .full-height
     position: relative
-    height: 100%
+    height: 100% !important
 
 .page-container
     padding-top: 60px
@@ -40,5 +40,5 @@ a, a:hover
     text-decoration: none
 
 .app-page-container
-    padding-left: $side-bar-width + 15px
+    padding-left: $side-bar-width
     padding-top: 15px
diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js
index 078ad51a..cbc805b8 100644
--- a/frontend/src/pages/App.js
+++ b/frontend/src/pages/App.js
@@ -71,14 +71,18 @@ class AppComponent extends React.Component {
         const portfolioElements = (
             <div className="full-height app-page-container">
                 <ProjectSidebarContainer />
-                <PortfolioResultsContainer/>
+                <div className="container-fluid full-height">
+                    <PortfolioResultsContainer />
+                </div>
             </div>
         )
 
         const scenarioElements = (
             <div className="full-height app-page-container">
                 <ProjectSidebarContainer />
-                <h2>Scenario loading</h2>
+                <div className="container-fluid full-height">
+                    <h2>Scenario loading</h2>
+                </div>
             </div>
         )
 
diff --git a/frontend/src/util/available-metrics.js b/frontend/src/util/available-metrics.js
index 6522a849..07f46456 100644
--- a/frontend/src/util/available-metrics.js
+++ b/frontend/src/util/available-metrics.js
@@ -1,14 +1,14 @@
 export const AVAILABLE_METRICS = [
     'total_overcommitted_burst',
+    'total_power_draw',
+    'total_failure_vm_slices',
     'total_granted_burst',
-    'total_requested_burst',
     'total_interfered_burst',
-    'total_power_draw',
+    'total_requested_burst',
     'mean_cpu_usage',
     'mean_cpu_demand',
     'mean_num_deployed_images',
     'max_num_deployed_images',
-    'total_failure_vm_slices',
     'total_vms_submitted',
     'total_vms_queued',
     'total_vms_finished',
-- 
cgit v1.2.3