From dbaf8fdceb27e74bb355ebe7c7f9820b4682c3dd Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Tue, 18 Jul 2023 10:23:31 -0400 Subject: [PATCH] Show units for each optimization metric https://issues.redhat.com/browse/COST-4032 --- locales/data.json | 42 +++---- locales/translations.json | 3 +- .../optimzations/optimizationsContent.tsx | 105 ++++++++++++++---- src/locales/messages.ts | 15 +-- 4 files changed, 105 insertions(+), 60 deletions(-) diff --git a/locales/data.json b/locales/data.json index 3452764a8..64c1814a7 100644 --- a/locales/data.json +++ b/locales/data.json @@ -1881,20 +1881,6 @@ "value": "CPU" } ], - "cpuUnits": [ - { - "type": 0, - "value": "CPU (" - }, - { - "type": 1, - "value": "units" - }, - { - "type": 0, - "value": ")" - } - ], "create": [ { "type": 0, @@ -9960,20 +9946,6 @@ "value": "Memory" } ], - "memoryUnits": [ - { - "type": 0, - "value": "Memory (" - }, - { - "type": 1, - "value": "units" - }, - { - "type": 0, - "value": ")" - } - ], "metric": [ { "type": 0, @@ -10676,6 +10648,20 @@ "value": "Optimizations table" } ], + "optimizationsValueUnits": [ + { + "type": 1, + "value": "value" + }, + { + "type": 0, + "value": " " + }, + { + "type": 1, + "value": "units" + } + ], "optimizationsValues": [ { "options": { diff --git a/locales/translations.json b/locales/translations.json index b59eaba22..b011b7cb5 100644 --- a/locales/translations.json +++ b/locales/translations.json @@ -173,7 +173,6 @@ "costTypeUnblended": "Unblended", "costTypeUnblendedDesc": "Usage cost on the day you are charged", "cpuTitle": "CPU", - "cpuUnits": "CPU ({units})", "create": "Create", "createCostModelConfirmMsg": "Are you sure you want to stop creating a cost model? All settings will be discarded.", "createCostModelDesc": "A cost model allows you to associate a price to metrics provided by your sources to charge for utilization of resources.", @@ -356,7 +355,6 @@ "measurementValues": "{value, select, count {{count, plural, one {Count} other {Count ({units})}}} effective_usage {{count, plural, one {Request} other {Effective-usage ({units})}}} request {{count, plural, one {Request} other {Request ({units})}}} usage {{count, plural, one {Usage} other {Usage ({units})}}} other {}}", "measurementValuesDesc": "{value, select, count {{units, select, node_month {The distinct number of nodes identified during the month} pvc_month {The distinct number of volume claims identified during the month} cluster_month {The distinct number of clusters identified during the month} other {}}} effective_usage {The greater of usage and request each hour} request {The pod resources requested, as reported by OpenShift} usage {The pod resources used, as reported by OpenShift} other {}}", "memoryTitle": "Memory", - "memoryUnits": "Memory ({units})", "metric": "Metric", "metricPlaceholder": "Filter by metrics", "metricValues": "{value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}", @@ -437,6 +435,7 @@ "optimizationsPerspective": "View optimizations based on", "optimizationsShortTerm": "Last 24 hrs", "optimizationsTableAriaLabel": "Optimizations table", + "optimizationsValueUnits": "{value} {units}", "optimizationsValues": "{value, select, cluster {Cluster name} container {Container name} last_reported {Last reported} project {Project name} workload {Workload name} workload_type {Workload type} other {}}", "optimizationsViewAll": "View all optimizations for this project", "optimizationsViewAllDisabled": "This project has not reported data this month.", diff --git a/src/components/drawers/optimzations/optimizationsContent.tsx b/src/components/drawers/optimzations/optimizationsContent.tsx index 82e01c739..30cc66403 100644 --- a/src/components/drawers/optimzations/optimizationsContent.tsx +++ b/src/components/drawers/optimzations/optimizationsContent.tsx @@ -180,7 +180,9 @@ class OptimizationsContentBase extends React.Component { + private getChangeValue = (value, units = '') => { + const { intl } = this.props; + // Show icon opposite of month over month let iconOverride = 'iconOverride'; if (value !== null && value < 0) { @@ -193,17 +195,32 @@ class OptimizationsContentBase extends React.Component {value < 0 ? ( <> - {formatOptimization(value)} + + {intl.formatMessage(messages.optimizationsValue, { + value: formatOptimization(value), + units, + })} + ) : value > 0 ? ( <> - {formatOptimization(value)} + + {intl.formatMessage(messages.optimizationsValue, { + value: formatOptimization(value), + units, + })} + ) : value === 0 ? ( <> - {formatOptimization(value)} + + {intl.formatMessage(messages.optimizationsValue, { + value: formatOptimization(value), + units, + })} + ) : ( @@ -236,12 +253,16 @@ class OptimizationsContentBase extends React.Component - {intl.formatMessage(messages.cpuUnits, { units: cpuConfigUnits })} - {this.getFormattedValue(cpuCurrentAmount)} - {this.getFormattedValue(cpuConfigAmount)} - {this.getChangeValue(cpuVariation)} + {intl.formatMessage(messages.cpuTitle)} + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(cpuCurrentAmount), + units: cpuCurrentUnits, + })} + + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(cpuConfigAmount), + units: cpuConfigUnits, + })} + + {this.getChangeValue(cpuVariation, cpuVariationUnits)} - {intl.formatMessage(messages.memoryUnits, { units: memConfigUnits })} - {this.getFormattedValue(memCurrentAmount)} - {this.getFormattedValue(memConfigAmount)} - {this.getChangeValue(memVariation)} + {intl.formatMessage(messages.memoryTitle)} + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(memCurrentAmount), + units: memCurrentUnits, + })} + + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(memConfigAmount), + units: memConfigUnits, + })} + + {this.getChangeValue(memVariation, memVariationUnits)} @@ -324,12 +365,16 @@ class OptimizationsContentBase extends React.Component - {intl.formatMessage(messages.cpuUnits, { units: cpuConfigUnits })} - {this.getFormattedValue(cpuCurrentAmount)} - {this.getFormattedValue(cpuConfigAmount)} - {this.getChangeValue(cpuVariation)} + {intl.formatMessage(messages.cpuTitle)} + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(cpuCurrentAmount), + units: cpuCurrentUnits, + })} + + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(cpuConfigAmount), + units: cpuConfigUnits, + })} + + {this.getChangeValue(cpuVariation, cpuVariationUnits)} - {intl.formatMessage(messages.memoryUnits, { units: memConfigUnits })} - {this.getFormattedValue(memCurrentAmount)} - {this.getFormattedValue(memConfigAmount)} - {this.getChangeValue(memVariation)} + {intl.formatMessage(messages.memoryTitle)} + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(memCurrentAmount), + units: memCurrentUnits, + })} + + + {intl.formatMessage(messages.optimizationsValue, { + value: this.getFormattedValue(memConfigAmount), + units: memConfigUnits, + })} + + {this.getChangeValue(memVariation, memVariationUnits)} diff --git a/src/locales/messages.ts b/src/locales/messages.ts index 22d21a34f..1892ce9bf 100644 --- a/src/locales/messages.ts +++ b/src/locales/messages.ts @@ -952,11 +952,6 @@ export default defineMessages({ description: 'CPU', id: 'cpuTitle', }, - cpuUnits: { - defaultMessage: 'CPU ({units})', - description: 'CPU (mCores)', - id: 'cpuUnits', - }, create: { defaultMessage: 'Create', description: 'Create', @@ -2306,11 +2301,6 @@ export default defineMessages({ description: 'Memory', id: 'memoryTitle', }, - memoryUnits: { - defaultMessage: 'Memory ({units})', - description: 'Memory (MB)', - id: 'memoryUnits', - }, metric: { defaultMessage: 'Metric', description: 'Metric', @@ -2748,6 +2738,11 @@ export default defineMessages({ description: 'Optimizations table', id: 'optimizationsTableAriaLabel', }, + optimizationsValue: { + defaultMessage: '{value} {units}', + description: '2 GiB', + id: 'optimizationsValueUnits', + }, optimizationsValues: { defaultMessage: '{value, select, ' +