Billing enhancements: storage layers (#3080) - summary chart

client/src/components/billing/reports/charts/get-quotas-datasets.js

@@ -140,7 +140,8 @@ export default function getQuotaDatasets (
   compute,
   storages,
   quotas,
-  data = []
+  data = [],
+  maximum = undefined
 ) {
   let accessor = () => quotas?.overallGlobal || {};
   if (compute && !storages) {
@@ -170,14 +171,18 @@ export default function getQuotaDatasets (
       affectivePeriods = [Period.quarter, Period.year];
       break;
   }
-  const {
-    max: maximum = Infinity
-  } = getVisibleDataRange(data);
+  let maximumValue = maximum;
+  if (maximumValue === undefined) {
+    const {
+      max = Infinity
+    } = getVisibleDataRange(data);
+    maximumValue = max;
+  }
   const quotaValues = affectivePeriods
     .map(getQuotaPeriodForReportPeriod)
     .map(quotaPeriod => ({period: quotaPeriod, quota: quotaInfo[quotaPeriod]}))
     .filter(info => info.quota !== undefined && !Number.isNaN(Number(info.quota)))
-    .filter(info => info.quota <= maximum); // filter quotas that not in displayed range
+    .filter(info => info.quota <= maximumValue); // filter quotas that not in displayed range
   return getRangedQuotaDatasets(quotaValues, data, dataRequest.filters)
     .map(rangedDataset => ({
       data: rangedDataset.dataset,

client/src/components/billing/reports/charts/object-storage/get-datasets-by-storage-class.js

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2017-2022 EPAM Systems, Inc. (https://www.epam.com/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import {costTickFormatter} from '../../utilities';
+
+export function getSummaryDatasetsByStorageClass (storageClass) {
+  const total = /^total$/i.test(storageClass);
+  const getCostDetailsValue = (costDetails, key) => {
+    if (
+      !costDetails ||
+      !costDetails.tiers ||
+      !costDetails.tiers[storageClass]
+    ) {
+      return undefined;
+    }
+    return costDetails.tiers[storageClass][key];
+  };
+  const getCostDetailsSumm = (costDetails, ...keys) => {
+    const values = keys.map((key) => getCostDetailsValue(costDetails, key));
+    if (values.some((value) => value !== undefined && !Number.isNaN(Number(value)))) {
+      return values.reduce((summ, value) => (summ + (value || 0)), 0);
+    }
+    return undefined;
+  };
+  const currentDataset = {
+    accumulative: {
+      value: (item) => getCostDetailsSumm(
+        item.costDetails,
+        'accumulativeCost',
+        'accumulativeOldVersionCost'
+      ),
+      options: {
+        borderWidth: 3,
+        tooltipValue: (currentValue, item) => {
+          if (item) {
+            const currentValue = getCostDetailsValue(
+              item.costDetails,
+              'accumulativeCost'
+            ) || 0;
+            const oldVersionsValue = getCostDetailsValue(
+              item.costDetails,
+              'accumulativeOldVersionCost'
+            ) || 0;
+            const current = costTickFormatter(currentValue);
+            const oldVersion = costTickFormatter(oldVersionsValue);
+            const total = costTickFormatter(currentValue + oldVersionsValue);
+            return `${total} (current: ${current}; old versions: ${oldVersion})`;
+          }
+          return currentValue;
+        }
+      }
+    },
+    fact: {
+      value: (item) => getCostDetailsSumm(
+        item.costDetails,
+        'cost'
+      ),
+      options: {
+        subTitle: 'cost',
+        stack: 'current',
+        tooltipValue: (currentValue, item) => {
+          if (item) {
+            const currentValue = getCostDetailsValue(
+              item.costDetails,
+              'cost'
+            ) || 0;
+            const oldVersionsValue = getCostDetailsValue(
+              item.costDetails,
+              'oldVersionCost'
+            ) || 0;
+            const current = costTickFormatter(currentValue);
+            const oldVersion = costTickFormatter(oldVersionsValue);
+            const total = costTickFormatter(currentValue + oldVersionsValue);
+            return `${total} (current: ${current}; old versions: ${oldVersion})`;
+          }
+          return currentValue;
+        }
+      }
+    }
+  };
+
+  const currentOldVersionsDataset = {
+    accumulative: {
+      value: (item) => getCostDetailsSumm(
+        item.costDetails,
+        'accumulativeOldVersionCost'
+      ),
+      options: {
+        borderWidth: 2,
+        backgroundColor: 'transparent',
+        dashed: true,
+        showTooltip: false
+      }
+    },
+    fact: {
+      value: (item) => getCostDetailsSumm(
+        item.costDetails,
+        'oldVersionCost'
+      ),
+      options: {
+        borderWidth: 1,
+        subTitle: 'cost',
+        stack: 'current',
+        backgroundColor: 'transparent',
+        showTooltip: false
+      }
+    }
+  };
+
+  const previousDataset = {
+    accumulative: {
+      value: (item) => total ? item.previous : getCostDetailsSumm(
+        item.previousCostDetails,
+        'accumulativeCost',
+        'accumulativeOldVersionCost'
+      ),
+      options: {
+        isPrevious: true
+      }
+    },
+    fact: {
+      value: (item) => total ? item.previousCost : getCostDetailsSumm(
+        item.previousCostDetails,
+        'cost',
+        'oldVersionCost'
+      ),
+      options: {
+        isPrevious: true,
+        subTitle: 'cost',
+        stack: 'previous'
+      }
+    }
+  };
+  return [
+    currentDataset,
+    currentOldVersionsDataset,
+    previousDataset
+  ];
+}