Skip to content

Commit

Permalink
feat(productViewOpenShiftDedicated): ent-3843 instance hrs graph (#720)
Browse files Browse the repository at this point in the history
* i18n, locale strings for graph, inventory tabs
* productView, OpenShiftContainer, tab copy, locale strings
* productViewOpenShiftDedicated, dual y axes, line charts
* rhsmServices, api mock for instance hours
* rhsmApiTypes, instance hours
  • Loading branch information
cdcabrera committed Jul 26, 2021
1 parent d88833f commit 8bad6e8
Show file tree
Hide file tree
Showing 12 changed files with 333 additions and 127 deletions.
9 changes: 7 additions & 2 deletions public/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@
"coreHoursLabel": "Core hours",
"coreHoursLegendTooltip": "{{product}} core hours usage.",
"coreHoursLegendTooltip_OpenShift-dedicated-metrics": "OpenShift Dedicated core hours usage.",
"instanceHoursLabel": "Instance hours",
"instanceHoursLegendTooltip_OpenShift-dedicated-metrics": "OpenShift Dedicated instance hours usage.",
"socketsLabel": "Sockets",
"socketsLegendTooltip": "{{product}} CPU usage, per CPU socket pair.",
"cloudSocketsLabel": "Public cloud",
Expand All @@ -64,8 +66,11 @@
"cardHeading": "Current systems",
"tabHeading": "Inventory listing",
"tabHeading_plural": "Inventory listings",
"tab_hosts": "Current systems",
"tab_subscriptions": "Current subscriptions",
"tabHosts": "Current systems",
"tabHosts_noInstances_OpenShift-dedicated-metrics": "Current instances",
"tabHosts_OpenShift-dedicated-metrics": "{{count}} instance",
"tabHosts_OpenShift-dedicated-metrics_plural": "{{count}} instances",
"tabSubscriptions": "Current subscriptions",
"tab_disabled": "The {{tabName}} display is currently disabled.",
"tableAriaLabel": "{{appName}} systems inventory table.",
"tableSummary": "A generated table with one level of column headers.",
Expand Down
32 changes: 8 additions & 24 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -253,12 +253,12 @@ Array [
"match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: productLabel })",
},
Object {
"key": "curiosity-inventory.tab",
"match": "t('curiosity-inventory.tab', { context: 'hosts' })",
"key": "curiosity-inventory.tabHosts",
"match": "t('curiosity-inventory.tabHosts', { context: ['noInstances', productId] })",
},
Object {
"key": "curiosity-inventory.tab",
"match": "t('curiosity-inventory.tab', { context: 'subscriptions' })",
"key": "curiosity-inventory.tabSubscriptions",
"match": "t('curiosity-inventory.tabSubscriptions', { context: productId })",
},
],
},
Expand Down Expand Up @@ -291,12 +291,12 @@ Array [
"match": "t('curiosity-graph.cardHeadingDescription', { context: productId })",
},
Object {
"key": "curiosity-inventory.tab",
"match": "t('curiosity-inventory.tab', { context: 'hosts' })",
"key": "curiosity-inventory.tabHosts",
"match": "t('curiosity-inventory.tabHosts', { context: ['noInstances', productId] })",
},
Object {
"key": "curiosity-inventory.tab",
"match": "t('curiosity-inventory.tab', { context: 'subscriptions' })",
"key": "curiosity-inventory.tabSubscriptions",
"match": "t('curiosity-inventory.tabSubscriptions', { context: productId })",
},
Object {
"key": "curiosity-view.title",
Expand Down Expand Up @@ -589,22 +589,6 @@ Array [
"file": "./src/components/inventorySubscriptions/inventorySubscriptions.js",
"key": "curiosity-inventory.tab",
},
Object {
"file": "./src/components/productView/productView.js",
"key": "curiosity-inventory.tab",
},
Object {
"file": "./src/components/productView/productView.js",
"key": "curiosity-inventory.tab",
},
Object {
"file": "./src/components/productView/productViewOpenShiftContainer.js",
"key": "curiosity-inventory.tab",
},
Object {
"file": "./src/components/productView/productViewOpenShiftContainer.js",
"key": "curiosity-inventory.tab",
},
Object {
"file": "./src/components/productView/productViewOpenShiftContainer.js",
"key": "curiosity-inventory.label",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ exports[`ProductView Component should allow custom product views: custom graphCa
<InventoryTab
active={false}
key="inventory_hosts_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"hosts\\"})"
title="t(curiosity-inventory.tabHosts, {\\"context\\":\\"noInstances_lorem ipsum\\"})"
>
<Connect(InventoryList)
key="inv_lorem ipsum"
Expand All @@ -119,7 +119,7 @@ exports[`ProductView Component should allow custom product views: custom graphCa
<InventoryTab
active={false}
key="inventory_subs_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"subscriptions\\"})"
title="t(curiosity-inventory.tabSubscriptions, {\\"context\\":\\"lorem ipsum\\"})"
>
<Connect(InventorySubscriptions)
key="subs_lorem ipsum"
Expand Down Expand Up @@ -184,7 +184,7 @@ exports[`ProductView Component should allow custom product views: custom toolbar
<InventoryTab
active={false}
key="inventory_hosts_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"hosts\\"})"
title="t(curiosity-inventory.tabHosts, {\\"context\\":\\"noInstances_lorem ipsum\\"})"
>
<Connect(InventoryList)
key="inv_lorem ipsum"
Expand All @@ -196,7 +196,7 @@ exports[`ProductView Component should allow custom product views: custom toolbar
<InventoryTab
active={false}
key="inventory_subs_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"subscriptions\\"})"
title="t(curiosity-inventory.tabSubscriptions, {\\"context\\":\\"lorem ipsum\\"})"
>
<Connect(InventorySubscriptions)
key="subs_lorem ipsum"
Expand Down Expand Up @@ -261,7 +261,7 @@ exports[`ProductView Component should allow custom product views: custom toolbar
<InventoryTab
active={false}
key="inventory_hosts_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"hosts\\"})"
title="t(curiosity-inventory.tabHosts, {\\"context\\":\\"noInstances_lorem ipsum\\"})"
>
<Connect(InventoryList)
key="inv_lorem ipsum"
Expand All @@ -273,7 +273,7 @@ exports[`ProductView Component should allow custom product views: custom toolbar
<InventoryTab
active={false}
key="inventory_subs_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"subscriptions\\"})"
title="t(curiosity-inventory.tabSubscriptions, {\\"context\\":\\"lorem ipsum\\"})"
>
<Connect(InventorySubscriptions)
key="subs_lorem ipsum"
Expand Down Expand Up @@ -372,7 +372,7 @@ exports[`ProductView Component should render a non-connected component: non-conn
<InventoryTab
active={false}
key="inventory_hosts_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"hosts\\"})"
title="t(curiosity-inventory.tabHosts, {\\"context\\":\\"noInstances_lorem ipsum\\"})"
>
<Connect(InventoryList)
key="inv_lorem ipsum"
Expand All @@ -384,7 +384,7 @@ exports[`ProductView Component should render a non-connected component: non-conn
<InventoryTab
active={false}
key="inventory_subs_lorem ipsum"
title="t(curiosity-inventory.tab, {\\"context\\":\\"subscriptions\\"})"
title="t(curiosity-inventory.tabSubscriptions, {\\"context\\":\\"lorem ipsum\\"})"
>
<Connect(InventorySubscriptions)
key="subs_lorem ipsum"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ exports[`ProductViewOpenShiftContainer Component should render a non-connected c
<InventoryTab
active={false}
key="inventory_hosts_OpenShift Container Platform"
title="t(curiosity-inventory.tab, {\\"context\\":\\"hosts\\"})"
title="t(curiosity-inventory.tabHosts, {\\"context\\":\\"noInstances_OpenShift Container Platform\\"})"
>
<Connect(InventoryList)
filterGuestsData={
Expand Down Expand Up @@ -221,7 +221,7 @@ exports[`ProductViewOpenShiftContainer Component should render a non-connected c
<InventoryTab
active={false}
key="inventory_subs_OpenShift Container Platform"
title="t(curiosity-inventory.tab, {\\"context\\":\\"subscriptions\\"})"
title="t(curiosity-inventory.tabSubscriptions, {\\"context\\":\\"OpenShift Container Platform\\"})"
>
<Connect(InventorySubscriptions)
filterInventoryData={
Expand Down Expand Up @@ -450,7 +450,7 @@ exports[`ProductViewOpenShiftContainer Component should render a non-connected c
<InventoryTab
active={false}
key="inventory_hosts_OpenShift-metrics"
title="t(curiosity-inventory.tab, {\\"context\\":\\"hosts\\"})"
title="t(curiosity-inventory.tabHosts, {\\"context\\":\\"noInstances_OpenShift-metrics\\"})"
>
<Connect(InventoryList)
filterGuestsData={Array []}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,22 @@ exports[`ProductViewOpenShiftDedicated Component should render a non-connected c
},
"initialGraphFilters": Array [
Object {
"chartType": "line",
"color": "#06c",
"fill": "#8bc1f7",
"id": "coreHours",
"isStacked": false,
"stroke": "#06c",
"yAxisUseDataSet": true,
},
Object {
"chartType": "line",
"color": "#009596",
"fill": "#a2d9d9",
"id": "instanceHours",
"isStacked": false,
"stroke": "#009596",
"yAxisUseDataSet": true,
},
],
"initialGraphSettings": Object {
Expand Down Expand Up @@ -310,10 +322,22 @@ exports[`ProductViewOpenShiftDedicated Component should set product configuratio
Object {
"initialGraphFilters": Array [
Object {
"chartType": "line",
"color": "#06c",
"fill": "#8bc1f7",
"id": "coreHours",
"isStacked": false,
"stroke": "#06c",
"yAxisUseDataSet": true,
},
Object {
"chartType": "line",
"color": "#009596",
"fill": "#a2d9d9",
"id": "instanceHours",
"isStacked": false,
"stroke": "#009596",
"yAxisUseDataSet": true,
},
],
"initialInventoryFilters": Array [
Expand Down
7 changes: 5 additions & 2 deletions src/components/productView/productView.js
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,10 @@ const ProductView = ({ productConfig, routeDetail, t, toolbarGraph, toolbarGraph
</PageSection>
<PageSection>
<InventoryTabs key={`inventory_${productId}`} productId={productId}>
<InventoryTab key={`inventory_hosts_${productId}`} title={t('curiosity-inventory.tab', { context: 'hosts' })}>
<InventoryTab
key={`inventory_hosts_${productId}`}
title={t('curiosity-inventory.tabHosts', { context: ['noInstances', productId] })}
>
<ConnectedInventoryList
key={`inv_${productId}`}
filterGuestsData={initialGuestsFilters}
Expand All @@ -158,7 +161,7 @@ const ProductView = ({ productConfig, routeDetail, t, toolbarGraph, toolbarGraph
{!helpers.UI_DISABLED_TABLE_SUBSCRIPTIONS && (
<InventoryTab
key={`inventory_subs_${productId}`}
title={t('curiosity-inventory.tab', { context: 'subscriptions' })}
title={t('curiosity-inventory.tabSubscriptions', { context: productId })}
>
<ConnectedInventorySubscriptions
key={`subs_${productId}`}
Expand Down
4 changes: 2 additions & 2 deletions src/components/productView/productViewOpenShiftContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const ProductViewOpenShiftContainer = ({ productConfig, routeDetail, t }) => {
<InventoryTabs key={`inventory_${productId}`} productId={productId}>
<InventoryTab
key={`inventory_hosts_${productId}`}
title={t('curiosity-inventory.tab', { context: 'hosts' })}
title={t('curiosity-inventory.tabHosts', { context: ['noInstances', productId] })}
>
<InventoryList
key={`inv_${productId}`}
Expand All @@ -158,7 +158,7 @@ const ProductViewOpenShiftContainer = ({ productConfig, routeDetail, t }) => {
{!helpers.UI_DISABLED_TABLE_SUBSCRIPTIONS && initialSubscriptionsInventoryFilters && (
<InventoryTab
key={`inventory_subs_${productId}`}
title={t('curiosity-inventory.tab', { context: 'subscriptions' })}
title={t('curiosity-inventory.tabSubscriptions', { context: productId })}
>
<InventorySubscriptions
key={`subs_${productId}`}
Expand Down
18 changes: 16 additions & 2 deletions src/components/productView/productViewOpenShiftDedicated.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import {
chart_color_blue_100 as chartColorBlueLight,
chart_color_blue_300 as chartColorBlueDark
chart_color_blue_300 as chartColorBlueDark,
chart_color_cyan_100 as chartColorCyanLight,
chart_color_cyan_300 as chartColorCyanDark
} from '@patternfly/react-tokens';
import { Label as PfLabel } from '@patternfly/react-core';
import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat';
Expand Down Expand Up @@ -80,7 +82,19 @@ ProductViewOpenShiftDedicated.defaultProps = {
id: 'coreHours',
fill: chartColorBlueLight.value,
stroke: chartColorBlueDark.value,
color: chartColorBlueDark.value
color: chartColorBlueDark.value,
chartType: 'line',
isStacked: false,
yAxisUseDataSet: true
},
{
id: 'instanceHours',
fill: chartColorCyanLight.value,
stroke: chartColorCyanDark.value,
color: chartColorCyanDark.value,
chartType: 'line',
isStacked: false,
yAxisUseDataSet: true
}
],
initialGraphSettings: {
Expand Down
Loading

0 comments on commit 8bad6e8

Please sign in to comment.