diff options
| -rw-r--r-- | frontend/src/components/app/results/PortfolioResultsComponent.js | 16 | ||||
| -rw-r--r-- | frontend/src/containers/app/results/PortfolioResultsContainer.js | 16 | ||||
| -rw-r--r-- | frontend/src/index.sass | 4 | ||||
| -rw-r--r-- | frontend/src/pages/App.js | 8 | ||||
| -rw-r--r-- | frontend/src/util/available-metrics.js | 6 |
5 files changed, 30 insertions, 20 deletions
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', |