Cost model updates per settings mocks

project-koku · Aug 9, 2023 · a4d1dd1 · a4d1dd1
1 parent dc7a73b
commit a4d1dd1
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 60 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -1261,7 +1261,7 @@
     "costModelsDesc": [
       {
         "type": 0,
-        "value": "Associate a price to metrics provided by your sources to charge for utilization of resources. "
+        "value": "Cost models can help you analyze and predict future costs. Associate a price to metrics provided by your sources to calculate your charges for resource usage. "
       },
       {
         "type": 1,
@@ -1854,7 +1854,7 @@
     "costTypeSettingsDesc": [
       {
         "type": 0,
-        "value": "Select the preferred way to calculating upfront costs, either through savings plans or subscription fees. This feature is available for Amazon Web Services cost only."
+        "value": "Select the preferred way of calculating upfront costs of savings plans or subscription fees. This feature is available for Amazon Web Services cost only."
       }
     ],
     "costTypeSettingsLabel": [
@@ -6934,7 +6934,7 @@
             "value": [
               {
                 "type": 0,
-                "value": "Input for name name"
+                "value": "Input for name"
               }
             ]
           },
@@ -6969,7 +6969,7 @@
             "value": [
               {
                 "type": 0,
-                "value": "Input for service_name name"
+                "value": "Input for service_name"
               }
             ]
           },
@@ -7009,7 +7009,15 @@
             "value": [
               {
                 "type": 0,
-                "value": "Input for service_name name"
+                "value": "Input for service_name"
+              }
+            ]
+          },
+          "status": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Input for status value"
               }
             ]
           },

diff --git a/locales/translations.json b/locales/translations.json
@@ -90,7 +90,7 @@
   "costModelsDelete": "Delete cost model",
   "costModelsDeleteDesc": "This action will delete {costModel} cost model from the system. This action cannot be undone.",
   "costModelsDeleteSource": "You must unassign any sources before you can delete this cost model.",
-  "costModelsDesc": "Associate a price to metrics provided by your sources to charge for utilization of resources. {learnMore}",
+  "costModelsDesc": "Cost models can help you analyze and predict future costs. Associate a price to metrics provided by your sources to calculate your charges for resource usage. {learnMore}",
   "costModelsDescTooLong": "Should not exceed 500 characters",
   "costModelsDetailsTitle": "Cost Model Details",
   "costModelsDistributionDesc": "The following is the type of metric that is set to be used when distributing costs to the project level breakdowns.",
@@ -168,7 +168,7 @@
   "costTypeBlended": "Blended",
   "costTypeBlendedDesc": "Using a blended rate to calcuate cost usage",
   "costTypeLabel": "Show cost as",
-  "costTypeSettingsDesc": "Select the preferred way to calculating upfront costs, either through savings plans or subscription fees. This feature is available for Amazon Web Services cost only.",
+  "costTypeSettingsDesc": "Select the preferred way of calculating upfront costs of savings plans or subscription fees. This feature is available for Amazon Web Services cost only.",
   "costTypeSettingsLabel": "Show cost as (Amazon Web Services only)",
   "costTypeUnblended": "Unblended",
   "costTypeUnblendedDesc": "Usage cost on the day you are charged",
@@ -294,7 +294,7 @@
   "filterByCostCategoryKeyAriaLabel": "Cost category keys",
   "filterByCostCategoryValueAriaLabel": "Cost category values",
   "filterByCostCategoryValueButtonAriaLabel": "Filter button for cost category value",
-  "filterByInputAriaLabel": "{value, select, account {Input for account name} aws_category {Input for cost category name} cluster {Input for cluster name} gcp_project {Input for GCP project name} name {Input for name name} node {Input for node name} org_unit_id {Input for organizational unit name} payer_tenant_id {Input for account name} product_service {Input for service_name name} project {Input for project name} region {Input for region name} resource_location {Input for region name} service {Input for service name} service_name {Input for service_name name} subscription_guid {Input for account name} tag {Input for tag name} other {}}",
+  "filterByInputAriaLabel": "{value, select, account {Input for account name} aws_category {Input for cost category name} cluster {Input for cluster name} gcp_project {Input for GCP project name} name {Input for name} node {Input for node name} org_unit_id {Input for organizational unit name} payer_tenant_id {Input for account name} product_service {Input for service_name} project {Input for project name} region {Input for region name} resource_location {Input for region name} service {Input for service name} service_name {Input for service_name} subscription_guid {Input for account name} status {Input for status value} tag {Input for tag name} other {}}",
   "filterByOrgUnitAriaLabel": "Organizational units",
   "filterByOrgUnitPlaceholder": "Choose unit",
   "filterByPlaceholder": "{value, select, account {Filter by account} aws_category {Filter by cost category} cluster {Filter by cluster} container {Filter by container} description {Filter by description} gcp_project {Filter by GCP project} group {Filter by group} name {Filter by name} node {Filter by node} org_unit_id {Filter by organizational unit} payer_tenant_id {Filter by account} product_service {Filter by service} project {Filter by project} region {Filter by region} resource_location {Filter by region} service {Filter by service} service_name {Filter by service} source_type {Filter by source type} status {Filter by status} subscription_guid {Filter by account} workload {Filter by workload name} workload_type {Filter by workload type} tag {Filter by tag} other {}}",

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -509,9 +509,9 @@ export default defineMessages({
   },
   costModelsDesc: {
     defaultMessage:
-      'Associate a price to metrics provided by your sources to charge for utilization of resources. {learnMore}',
+      'Cost models can help you analyze and predict future costs. Associate a price to metrics provided by your sources to calculate your charges for resource usage. {learnMore}',
     description:
-      'Associate a price to metrics provided by your sources to charge for utilization of resources. {learnMore}',
+      'Cost models can help you analyze and predict future costs. Associate a price to metrics provided by your sources to calculate your charges for resource usage. {learnMore}',
     id: 'costModelsDesc',
   },
   costModelsDescTooLong: {
@@ -927,9 +927,9 @@ export default defineMessages({
   },
   costTypeSettingsDesc: {
     defaultMessage:
-      'Select the preferred way to calculating upfront costs, either through savings plans or subscription fees. This feature is available for Amazon Web Services cost only.',
+      'Select the preferred way of calculating upfront costs of savings plans or subscription fees. This feature is available for Amazon Web Services cost only.',
     description:
-      'Select the preferred way to calculating upfront costs, either through savings plans or subscription fees. This feature is available for Amazon Web Services cost only.',
+      'Select the preferred way of calculating upfront costs of savings plans or subscription fees. This feature is available for Amazon Web Services cost only.',
     id: 'costTypeSettingsDesc',
   },
   costTypeSettingsLabel: {

diff --git a/src/routes/settings/costModels/components/rateTable.tsx b/src/routes/settings/costModels/components/rateTable.tsx
@@ -53,8 +53,8 @@ const RateTableBase: React.FC<RateTableProps> = ({
       {
         data: { index: ix, hasChildren: isTagRates, tag_rates: tier.tag_rates, stateIndex: tier.stateIndex },
         cells: [
-          tier.description || '',
           getMetric(tier.metric.label_metric),
+          tier.description || '',
           getMeasurement(tier.metric.label_measurement, tier.metric.label_measurement_unit),
           tier.cost_type,
           {
@@ -68,8 +68,8 @@ const RateTableBase: React.FC<RateTableProps> = ({
     ];
   }, []);
   const columns = [
+    { title: intl.formatMessage(messages.metric), sortable: true, sortIndex: 0 },
     { title: intl.formatMessage(messages.description) },
-    { title: intl.formatMessage(messages.metric), sortable: true, sortIndex: 1 },
     { title: intl.formatMessage(messages.measurement), sortable: true, sortIndex: 2 },
     { title: intl.formatMessage(messages.calculationType) },
     { title: intl.formatMessage(messages.rate) },

diff --git a/src/routes/settings/costModels/costModel/distribution.tsx b/src/routes/settings/costModels/costModel/distribution.tsx
@@ -1,13 +1,11 @@
 import {
+  Button,
+  ButtonVariant,
   Card,
   CardActions,
   CardBody,
   CardHeader,
   CardHeaderMain,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
@@ -38,7 +36,6 @@ const DistributionCardBase: React.FC<Props> = ({
   isUpdateDialogOpen,
 }) => {
   const intl = useIntl();
-  const [dropdownIsOpen, setDropdownIsOpen] = React.useState(false);
 
   return (
     <>
@@ -51,24 +48,16 @@ const DistributionCardBase: React.FC<Props> = ({
             </Title>
           </CardHeaderMain>
           <CardActions>
-            <Dropdown
-              toggle={<KebabToggle onToggle={setDropdownIsOpen} />}
-              isOpen={dropdownIsOpen}
-              onSelect={() => setDropdownIsOpen(false)}
-              position={DropdownPosition.right}
-              isPlain
-              dropdownItems={[
-                <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
-                  <DropdownItem
-                    isDisabled={!isWritePermission}
-                    onClick={() => setCostModelDialog({ isOpen: true, name: 'updateDistribution' })}
-                    component="button"
-                  >
-                    {intl.formatMessage(messages.costModelsDistributionEdit)}
-                  </DropdownItem>
-                </ReadOnlyTooltip>,
-              ]}
-            />
+            <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
+              <Button
+                aria-label={intl.formatMessage(messages.costModelsDistributionEdit)}
+                variant={ButtonVariant.link}
+                isAriaDisabled={!isWritePermission}
+                onClick={() => setCostModelDialog({ isOpen: true, name: 'updateDistribution' })}
+              >
+                {intl.formatMessage(messages.edit)}
+              </Button>
+            </ReadOnlyTooltip>
           </CardActions>
         </CardHeader>
         <CardBody style={styles.cardDescription}>{intl.formatMessage(messages.costModelsDistributionDesc)}</CardBody>

diff --git a/src/routes/settings/costModels/costModel/markup.tsx b/src/routes/settings/costModels/costModel/markup.tsx
@@ -1,13 +1,11 @@
 import {
+  Button,
+  ButtonVariant,
   Card,
   CardActions,
   CardBody,
   CardHeader,
   CardHeaderMain,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
@@ -40,7 +38,6 @@ const MarkupCardBase: React.FC<Props> = ({
   current,
   isUpdateDialogOpen,
 }) => {
-  const [dropdownIsOpen, setDropdownIsOpen] = React.useState(false);
   const markupValue = formatPercentageMarkup(
     current && current.markup && current.markup.value ? Number(current.markup.value) : 0
   );
@@ -56,24 +53,16 @@ const MarkupCardBase: React.FC<Props> = ({
             </Title>
           </CardHeaderMain>
           <CardActions>
-            <Dropdown
-              toggle={<KebabToggle onToggle={setDropdownIsOpen} />}
-              isOpen={dropdownIsOpen}
-              onSelect={() => setDropdownIsOpen(false)}
-              position={DropdownPosition.right}
-              isPlain
-              dropdownItems={[
-                <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
-                  <DropdownItem
-                    isDisabled={!isWritePermission}
-                    onClick={() => setCostModelDialog({ isOpen: true, name: 'updateMarkup' })}
-                    component="button"
-                  >
-                    {intl.formatMessage(messages.editMarkup)}
-                  </DropdownItem>
-                </ReadOnlyTooltip>,
-              ]}
-            />
+            <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
+              <Button
+                aria-label={intl.formatMessage(messages.editMarkup)}
+                variant={ButtonVariant.link}
+                isAriaDisabled={!isWritePermission}
+                onClick={() => setCostModelDialog({ isOpen: true, name: 'updateMarkup' })}
+              >
+                {intl.formatMessage(messages.edit)}
+              </Button>
+            </ReadOnlyTooltip>
           </CardActions>
         </CardHeader>
         <CardBody style={styles.cardDescription}>{intl.formatMessage(messages.markupOrDiscountDesc)}</CardBody>