Merge pull request #3234 from dlabrecq/crud-buckets

OCP details breakdown vCPU count, RAM and storage capacity
project-koku · Jun 13, 2023 · ab7a76d · ab7a76d
2 parents 1f3572d + 37c9e86
commit ab7a76d
Show file tree

Hide file tree

Showing 14 changed files with 347 additions and 173 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -3071,6 +3071,12 @@
         "value": "groupBy"
       }
     ],
+    "detailsUnusedCapacityLabel": [
+      {
+        "type": 0,
+        "value": "Unused capacity"
+      }
+    ],
     "detailsUnusedRequestsLabel": [
       {
         "type": 0,
@@ -3095,12 +3101,6 @@
         "value": "% of capacity)"
       }
     ],
-    "detailsUnusedUsageLabel": [
-      {
-        "type": 0,
-        "value": "Unused capacity"
-      }
-    ],
     "detailsUsageCapacity": [
       {
         "type": 0,
@@ -11826,6 +11826,14 @@
               }
             ]
           },
+          "core": {
+            "value": [
+              {
+                "type": 0,
+                "value": "core"
+              }
+            ]
+          },
           "core_hours": {
             "value": [
               {
@@ -11932,6 +11940,24 @@
         "value": "Usage cost"
       }
     ],
+    "usageSubtitle": [
+      {
+        "type": 1,
+        "value": "count"
+      },
+      {
+        "type": 0,
+        "value": " "
+      },
+      {
+        "type": 1,
+        "value": "countUnits"
+      },
+      {
+        "type": 0,
+        "value": " maximum"
+      }
+    ],
     "various": [
       {
         "type": 0,

diff --git a/locales/translations.json b/locales/translations.json
@@ -213,9 +213,9 @@
   "detailsMoreClusters": ", {value} more...",
   "detailsResourceNames": "{value, select, account {Account names} aws_category {Cost category names} cluster {Cluster names} gcp_project {GCP project names} group {Group} name {Name} node {Node names} org_unit_id {Organizational unit names} payer_tenant_id {Account names} product_service {Service names} project {Project names} region {Region names} resource_location {Region names} service {Service names} service_name {Service names} status {Status} subscription_guid {Account names} source_type {Source type} tag {Tag names} other {}}",
   "detailsSummaryModalTitle": "{groupBy, select, account {{name} accounts} aws_category {{name} cost categories} cluster {{name} clusters} gcp_project {{name} GCP projects} node {{name} nodes} org_unit_id {{name} organizational units} payer_tenant_id {{name} accounts} product_service {{name} services} project {{name} projects} region {{name} regions} resource_location {{name} regions} service {{name} services} service_name {{name} services} subscription_guid {{name} accounts} tag {{name} tags} other {}}",
+  "detailsUnusedCapacityLabel": "Unused capacity",
   "detailsUnusedRequestsLabel": "Unrequested capacity",
   "detailsUnusedUnits": "{units} ({percentage}% of capacity)",
-  "detailsUnusedUsageLabel": "Unused capacity",
   "detailsUsageCapacity": "Capacity - {value} {units}",
   "detailsUsageLimit": "Limit - {value} {units}",
   "detailsUsageRequests": "Requests - {value} {units}",
@@ -543,10 +543,11 @@
   "toolBarPriceListMeasurementPlaceHolder": "Filter by measurements",
   "toolBarPriceListMetricPlaceHolder": "Filter by metrics",
   "unitTooltips": "{units, select, byte_ms {{value} Byte-ms} core_hours {{value} core-hours} gb {{value} GB} gb_hours {{value} GB-hours} gb_mo {{value} GB-month} gb_ms {{value} GB-ms} gibibyte_month {{value} GiB-month} hour {{value} hours} hrs {{value} hours} ms {{value} milliseconds} vm_hours {{value} VM-hours} other {{value}}}",
-  "units": "{units, select, byte_ms {Byte-ms} core_hours {core-hours} gb {GB} gb_hours {GB-hours} gb_mo {GB-month} gb_ms {GB-ms} gibibyte_month {GiB-month} hour {hours} hrs {hours} ms {milliseconds} vm_hours {VM-hours} other {}}",
+  "units": "{units, select, byte_ms {Byte-ms} core {core} core_hours {core-hours} gb {GB} gb_hours {GB-hours} gb_mo {GB-month} gb_ms {GB-ms} gibibyte_month {GiB-month} hour {hours} hrs {hours} ms {milliseconds} vm_hours {VM-hours} other {}}",
   "usage": "Usage",
   "usageCostDesc": "The portion of cost calculated by applying hourly and/or monthly price list rates to metrics.",
   "usageCostTitle": "Usage cost",
+  "usageSubtitle": "{count} {countUnits} maximum",
   "various": "Various",
   "volumeTitle": "Volume",
   "workerUnallocated": "Worker unallocated",

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -1255,6 +1255,11 @@ export default defineMessages({
     description: ', {value} more...',
     id: 'detailsSummaryModalTitle',
   },
+  detailsUnusedCapacityLabel: {
+    defaultMessage: 'Unused capacity',
+    description: 'Unused capacity',
+    id: 'detailsUnusedCapacityLabel',
+  },
   detailsUnusedRequestsLabel: {
     defaultMessage: 'Unrequested capacity',
     description: 'Unrequested capacity',
@@ -1265,11 +1270,6 @@ export default defineMessages({
     description: '{units} ({percentage}% of capacity)',
     id: 'detailsUnusedUnits',
   },
-  detailsUnusedUsageLabel: {
-    defaultMessage: 'Unused capacity',
-    description: 'Unused capacity',
-    id: 'detailsUnusedUsageLabel',
-  },
   detailsUsageCapacity: {
     defaultMessage: 'Capacity - {value} {units}',
     description: 'Capacity - {value} {units}',
@@ -3329,6 +3329,7 @@ export default defineMessages({
     defaultMessage:
       '{units, select, ' +
       'byte_ms {Byte-ms} ' +
+      'core {core} ' +
       'core_hours {core-hours} ' +
       'gb {GB} ' +
       'gb_hours {GB-hours} ' +
@@ -3358,6 +3359,11 @@ export default defineMessages({
     description: 'Usage cost',
     id: 'usageCostTitle',
   },
+  usageSubtitle: {
+    defaultMessage: '{count} {countUnits} maximum',
+    description: '{count} {countUnits} maximum',
+    id: 'usageSubtitle',
+  },
   various: {
     defaultMessage: 'Various',
     description: 'Various',

diff --git a/src/routes/components/charts/common/chartDatum.ts b/src/routes/components/charts/common/chartDatum.ts
@@ -77,8 +77,10 @@ export function transformReport(
     }, []);
   } else {
     chartDatums = computedItems.map(i => {
-      const val = i[reportItem][reportItemValue] ? i[reportItem][reportItemValue].value : i[reportItem].value;
-      return createReportDatum(val, i, idKey, reportItem, reportItemValue);
+      if (i[reportItem]) {
+        const val = i[reportItem][reportItemValue] ? i[reportItem][reportItemValue].value : i[reportItem].value;
+        return createReportDatum(val, i, idKey, reportItem, reportItemValue);
+      }
     });
   }
   return idKey === 'date' ? padChartDatums(chartDatums, datumType) : chartDatums;
@@ -112,8 +114,8 @@ export function fillChartDatums(datums: ChartDatum[], datumType): ChartDatum[] {
   if (!datums || datums.length === 0) {
     return result;
   }
-  const firstDate = new Date(datums[0].key + 'T00:00:00');
-  const lastDate = new Date(datums[datums.length - 1].key + 'T00:00:00');
+  const firstDate = new Date(datums[0] ? datums[0].key + 'T00:00:00' : undefined);
+  const lastDate = new Date(datums[datums.length - 1] ? datums[datums.length - 1].key + 'T00:00:00' : undefined);
 
   const padDate = startOfMonth(firstDate);
   let prevChartDatum;
@@ -156,8 +158,8 @@ export function padChartDatums(datums: ChartDatum[], datumType): ChartDatum[] {
   if (!datums || datums.length === 0) {
     return result;
   }
-  const firstDate = new Date(datums[0].key + 'T00:00:00');
-  const lastDate = new Date(datums[datums.length - 1].key + 'T00:00:00');
+  const firstDate = new Date(datums[0] ? datums[0].key + 'T00:00:00' : undefined);
+  const lastDate = new Date(datums[datums.length - 1] ? datums[datums.length - 1].key + 'T00:00:00' : undefined);
 
   // Pad start for missing data
   let padDate = startOfMonth(firstDate);

diff --git a/...s/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap b/...s/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap
@@ -114,13 +114,11 @@ exports[`reports are formatted to datums 1`] = `
             </defs>
             <g>
               <path
-                d="M0.5333333333333332,-30L0.5333333333333332,-30Z"
                 role="presentation"
                 shape-rendering="auto"
                 style="fill: none; stroke-dasharray: 3,3; stroke: none; fill-opacity: 0.3; stroke-width: 2;"
               />
               <path
-                d="M0.5333333333333332,-30Z"
                 role="presentation"
                 shape-rendering="auto"
                 style="fill: none; stroke-dasharray: 3,3; stroke: #519de9; fill-opacity: 0.3; stroke-width: 2;"
@@ -146,13 +144,11 @@ exports[`reports are formatted to datums 1`] = `
             </defs>
             <g>
               <path
-                d="M0.5333333333333332,-30L0.5333333333333332,-30Z"
                 role="presentation"
                 shape-rendering="auto"
                 style="fill: none; stroke-dasharray: 3,3; stroke: none; fill-opacity: 0.3; stroke-width: 2;"
               />
               <path
-                d="M0.5333333333333332,-30Z"
                 role="presentation"
                 shape-rendering="auto"
                 style="fill: none; stroke-dasharray: 3,3; stroke: #4cb140; fill-opacity: 0.3; stroke-width: 2;"
@@ -405,7 +401,7 @@ exports[`reports are formatted to datums 1`] = `
               shape-rendering="auto"
               style="fill: none;"
               vector-effect="non-scaling-stroke"
-              width="590.8999999999999"
+              width="553.0562499999999"
               x="0"
               y="78"
             />
@@ -420,7 +416,7 @@ exports[`reports are formatted to datums 1`] = `
               style="fill: #8bc1f7;"
             />
             <path
-              d="M 303.2899999999999, 94.156
+              d="M 284.3681249999999, 94.156
       h12.32000000000005
       v-4.312
       h-12.32000000000005
@@ -450,17 +446,17 @@ exports[`reports are formatted to datums 1`] = `
               style="fill: #519de9;"
             />
             <path
-              d="M 303.2899999999999, 125.061
+              d="M 284.3681249999999, 125.061
       h3.696000000000015
       v-4.312
       h-3.696000000000015
       z
-      M 308.21799999999996, 125.061
+      M 289.29612499999996, 125.061
       h3.696000000000015
       v-4.312
       h-3.696000000000015
       z
-      M 313.14599999999996, 125.061
+      M 294.22412499999996, 125.061
       h3.696000000000015
       v-4.312
       h-3.696000000000015
@@ -480,7 +476,7 @@ exports[`reports are formatted to datums 1`] = `
               style="fill: #06c;"
             />
             <path
-              d="M 303.2899999999999, 155.966
+              d="M 284.3681249999999, 155.966
       h12.32000000000005
       v-4.312
       h-12.32000000000005
@@ -510,15 +506,15 @@ exports[`reports are formatted to datums 1`] = `
               direction="inherit"
               dx="0"
               id="exampleUsageChart-legend-ChartLabel-1"
-              x="326.24999999999994"
+              x="307.32812499999994"
               y="96.97"
             >
               <tspan
                 dx="0"
                 dy="0"
                 style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
                 text-anchor="start"
-                x="326.24999999999994"
+                x="307.32812499999994"
               >
                 Usage ({dateRange}){"dateRange":""}
               </tspan>
@@ -537,24 +533,24 @@ exports[`reports are formatted to datums 1`] = `
                 text-anchor="start"
                 x="30.8"
               >
-                Requests ({dateRange}){"dateRange":""}
+                Requests (no data)
               </tspan>
             </text>
             <text
               direction="inherit"
               dx="0"
               id="exampleUsageChart-legend-ChartLabel-3"
-              x="326.24999999999994"
+              x="307.32812499999994"
               y="127.875"
             >
               <tspan
                 dx="0"
                 dy="0"
                 style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
                 text-anchor="start"
-                x="326.24999999999994"
+                x="307.32812499999994"
               >
-                Requests ({dateRange}){"dateRange":""}
+                Requests (no data)
               </tspan>
             </text>
             <text
@@ -578,15 +574,15 @@ exports[`reports are formatted to datums 1`] = `
               direction="inherit"
               dx="0"
               id="exampleUsageChart-legend-ChartLabel-5"
-              x="326.24999999999994"
+              x="307.32812499999994"
               y="158.78"
             >
               <tspan
                 dx="0"
                 dy="0"
                 style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
                 text-anchor="start"
-                x="326.24999999999994"
+                x="307.32812499999994"
               >
                 Limit (no data)
               </tspan>

diff --git a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.test.tsx b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.test.tsx
@@ -31,7 +31,7 @@ test('reports are formatted to datums', () => {
   render(<HistoricalUsageChart {...props} />);
   /* eslint-disable-next-line testing-library/no-node-access */
   expect(screen.getByText(props.title).parentElement).toMatchSnapshot();
-  expect(screen.getAllByText(/no data/i).length).toBe(2);
+  expect(screen.getAllByText(/no data/i).length).toBe(4);
 });
 
 test('null previous and current reports are handled', () => {

diff --git a/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap b/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap
@@ -105,13 +105,11 @@ exports[`reports are formatted to datums 1`] = `
         </defs>
         <g>
           <path
-            d="M0.5333333333333332,25L0.5333333333333332,25Z"
             role="presentation"
             shape-rendering="auto"
             style="fill: none; stroke: none; stroke-dasharray: 3,3; fill-opacity: 0.3; stroke-width: 2;"
           />
           <path
-            d="M0.5333333333333332,25Z"
             role="presentation"
             shape-rendering="auto"
             style="fill: none; stroke: #d2d2d2; stroke-dasharray: 3,3; fill-opacity: 0.3; stroke-width: 2;"
@@ -137,13 +135,11 @@ exports[`reports are formatted to datums 1`] = `
         </defs>
         <g>
           <path
-            d="M0.5333333333333332,25L0.5333333333333332,25Z"
             role="presentation"
             shape-rendering="auto"
             style="fill: none; stroke: none; stroke-dasharray: 3,3; fill-opacity: 0.3; stroke-width: 2;"
           />
           <path
-            d="M0.5333333333333332,25Z"
             role="presentation"
             shape-rendering="auto"
             style="fill: none; stroke: #4cb140; stroke-dasharray: 3,3; fill-opacity: 0.3; stroke-width: 2;"
@@ -332,7 +328,7 @@ exports[`reports are formatted to datums 1`] = `
           shape-rendering="auto"
           style="fill: none;"
           vector-effect="non-scaling-stroke"
-          width="295.44999999999993"
+          width="276.52812499999993"
           x="0"
           y="57"
         />
@@ -444,7 +440,7 @@ exports[`reports are formatted to datums 1`] = `
             text-anchor="start"
             x="30.8"
           >
-            Requests ({dateRange}){"dateRange":""}
+            Requests (no data)
           </tspan>
         </text>
         <text
@@ -461,7 +457,7 @@ exports[`reports are formatted to datums 1`] = `
             text-anchor="start"
             x="30.8"
           >
-            Requests ({dateRange}){"dateRange":""}
+            Requests (no data)
           </tspan>
         </text>
       </g>

diff --git a/src/routes/components/reports/reportSummary/reportSummaryItem.test.tsx b/src/routes/components/reports/reportSummary/reportSummaryItem.test.tsx
@@ -19,7 +19,7 @@ test('formats value', () => {
   expect(screen.getByText(/label/i)).not.toBeNull();
   expect(
     screen.getByText(
-      '{value} {units} ({percent} %){"percent":"10","units":"{units, select, byte_ms {Byte-ms} core_hours {core-hours} gb {GB} gb_hours {GB-hours} gb_mo {GB-month} gb_ms {GB-ms} gibibyte_month {GiB-month} hour {hours} hrs {hours} ms {milliseconds} vm_hours {VM-hours} other {}}{}","value":100}'
+      '{value} {units} ({percent} %){"percent":"10","units":"{units, select, byte_ms {Byte-ms} core {core} core_hours {core-hours} gb {GB} gb_hours {GB-hours} gb_mo {GB-month} gb_ms {GB-ms} gibibyte_month {GiB-month} hour {hours} hrs {hours} ms {milliseconds} vm_hours {VM-hours} other {}}{}","value":100}'
     )
   ).not.toBeNull();
   expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).toBe('10');

diff --git a/src/routes/details/components/costOverview/costOverview.scss b/src/routes/details/components/costOverview/costOverview.scss
@@ -0,0 +1,9 @@
+@import url("~@patternfly/patternfly/base/patternfly-variables.css");
+
+.pf-c-card {
+  &.cardOverride {
+    .pf-c-card__title {
+      padding-bottom: 0;
+    }
+  }
+}