diff options
Diffstat (limited to 'frontend/src')
3 files changed, 43 insertions, 21 deletions
diff --git a/frontend/src/components/app/results/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js index a5c33f47..e9b33777 100644 --- a/frontend/src/components/app/results/PortfolioResultsComponent.js +++ b/frontend/src/components/app/results/PortfolioResultsComponent.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { Bar, BarChart, CartesianGrid, ErrorBar, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts' -import { AVAILABLE_METRICS, METRIC_NAMES } from '../../../util/available-metrics' +import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts' +import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } from '../../../util/available-metrics' import { mean, std } from 'mathjs' import Shapes from '../../../shapes/index' import approx from 'approximate-number' @@ -41,27 +41,32 @@ const PortfolioResultsComponent = ({ portfolio, scenarios }) => { dataPerMetric[metric] = scenarios.map((scenario) => ({ name: scenario.name, value: mean(scenario.results[metric]), - std: std(scenario.results[metric]), + errorX: std(scenario.results[metric]), })) }) return ( <div className="full-height" style={{ overflowY: 'scroll', overflowX: 'hidden' }}> - <h1>Portfolio: {portfolio.name}</h1> + <h2>Portfolio: {portfolio.name}</h2> <p>Repeats per Scenario: {portfolio.targets.repeatsPerScenario}</p> <div className="row"> {AVAILABLE_METRICS.map((metric) => ( - <div className="col-6" key={metric}> + <div className="col-6 mb-2" 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" /> - </BarChart> + <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"/> + </Scatter> + + </ComposedChart> </ResponsiveContainer> </div> ))} diff --git a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js index f44ce77f..8b50eff0 100644 --- a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js +++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js @@ -34,7 +34,7 @@ class ScenarioListComponent extends React.Component { </div> <div className="col-4 text-right"> <Link - className="btn btn-outline-primary mr-1 fa fa-play" + className="btn btn-outline-primary mr-1 fa fa-play disabled" to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`} onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)} /> diff --git a/frontend/src/util/available-metrics.js b/frontend/src/util/available-metrics.js index 07f46456..ed11f5f7 100644 --- a/frontend/src/util/available-metrics.js +++ b/frontend/src/util/available-metrics.js @@ -16,13 +16,13 @@ export const AVAILABLE_METRICS = [ ] export const METRIC_NAMES = { - total_overcommitted_burst: 'Overcomm. CPU Cycles [MFLOP]', - total_granted_burst: 'Granted CPU Cycles [MFLOP]', - total_requested_burst: 'Requested CPU Cycles [MFLOP]', - total_interfered_burst: 'Interfered CPU Cycles [MFLOP]', - total_power_draw: 'Total Power Consumption [Wh]', - mean_cpu_usage: 'Mean Host CPU Usage [MHz]', - mean_cpu_demand: 'Mean Host CPU Demand [MHz]', + total_overcommitted_burst: 'Overcomm. CPU Cycles', + total_granted_burst: 'Granted CPU Cycles', + total_requested_burst: 'Requested CPU Cycles', + total_interfered_burst: 'Interfered CPU Cycles', + total_power_draw: 'Total Power Consumption', + mean_cpu_usage: 'Mean Host CPU Usage', + mean_cpu_demand: 'Mean Host CPU Demand', mean_num_deployed_images: 'Mean Num. Deployed Images Per Host', max_num_deployed_images: 'Max. Num. Deployed Images Per Host', total_failure_vm_slices: 'Total Num. Failed VM Slices', @@ -31,3 +31,20 @@ export const METRIC_NAMES = { total_vms_finished: 'Max. Num. VMs Finished', total_vms_failed: 'Max. Num. VMs Failed', } + +export const METRIC_UNITS = { + total_overcommitted_burst: 'MFLOP', + total_granted_burst: 'MFLOP', + total_requested_burst: 'MFLOP', + total_interfered_burst: 'MFLOP', + total_power_draw: 'Wh', + mean_cpu_usage: 'MHz', + mean_cpu_demand: 'MHz', + mean_num_deployed_images: 'VMs', + max_num_deployed_images: 'VMs', + total_failure_vm_slices: 'VM Slices', + total_vms_submitted: 'VMs', + total_vms_queued: 'VMs', + total_vms_finished: 'VMs', + total_vms_failed: 'VMs', +} |