feat(pci-billing): add history billing section

packages/manager/apps/pci-billing/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@ovh-ux/manager-config": "^0.4.0",
     "@ovh-ux/manager-core-api": "^0.9.0-alpha.0",
+    "@ovh-ux/manager-core-utils": "^0.3.0",
     "@ovh-ux/manager-pci-common": "^0.8.0-alpha.0",
     "@ovh-ux/manager-react-components": "^1.41.0-alpha.0",
     "@ovh-ux/manager-react-core-application": "0.10.8-alpha.0",

packages/manager/apps/pci-billing/src/api/data/history.ts

@@ -0,0 +1,36 @@
+import { v6 } from '@ovh-ux/manager-core-api';
+import { TCurrentUsage } from './consumption';
+
+export type TUsageHistoryPeriod = {
+  id: string;
+  lastUpdate: string;
+  period: {
+    from: string;
+    to: string;
+  };
+};
+
+export const getUsageHistoryPeriod = async (
+  projectId: string,
+  from: string,
+  to: string,
+): Promise<TUsageHistoryPeriod[]> => {
+  const { data } = await v6.get<TUsageHistoryPeriod[]>(
+    `/cloud/project/${projectId}/usage/history?from=${from}&to=${to}`,
+  );
+
+  return data;
+};
+
+export type THistoryUsage = TCurrentUsage;
+
+export const getUsageHistory = async (
+  projectId: string,
+  usageId: string,
+): Promise<THistoryUsage> => {
+  const { data } = await v6.get<THistoryUsage>(
+    `/cloud/project/${projectId}/usage/history/${usageId}`,
+  );
+
+  return data;
+};

packages/manager/apps/pci-billing/src/api/hook/useConsumption.tsx

@@ -16,7 +16,10 @@ const sumPrices = <T,>(items: T[], key: string) =>
 
 const initMonthlyInstanceList = (data: TCurrentUsage) => {
   if (!data?.monthlyUsage) {
-    return {};
+    return {
+      monthlyInstanceList: [],
+      monthlyInstanceTotalPrice: 0,
+    };
   }
 
   const monthlyInstanceList = data.monthlyUsage.instance.flatMap((instance) =>
@@ -43,7 +46,7 @@ const initMonthlyInstanceList = (data: TCurrentUsage) => {
 
 const initHourlyInstanceList = (data: TCurrentUsage) => {
   if (!data?.hourlyUsage) {
-    return {};
+    return { hourlyInstanceList: [], hourlyInstanceTotalPrice: 0 };
   }
 
   const hourlyInstanceList = data.hourlyUsage.instance.flatMap((instance) =>
@@ -70,14 +73,22 @@ const initHourlyInstanceList = (data: TCurrentUsage) => {
 
 const initObjectStorageList = (data: TCurrentUsage) => {
   if (!data?.hourlyUsage) {
-    return {};
+    return {
+      objectStorageList: [],
+      objectStorageTotalPrice: 0,
+    };
   }
 
   const objectStorageList = data.hourlyUsage.storage?.filter(
     (storage) => storage.type !== 'pca',
   );
 
-  const objectStorageTotalPrice = sumPrices(objectStorageList, 'totalPrice');
+  const objectStorageTotalPrice = roundPrice(
+    objectStorageList.reduce(
+      (sum, storage) => sum + roundPrice(storage.totalPrice),
+      0,
+    ),
+  );
 
   return {
     objectStorageList,
@@ -87,14 +98,22 @@ const initObjectStorageList = (data: TCurrentUsage) => {
 
 const initArchiveStorageList = (data: TCurrentUsage) => {
   if (!data?.hourlyUsage) {
-    return {};
+    return {
+      archiveStorageList: [],
+      archiveStorageTotalPrice: 0,
+    };
   }
 
   const archiveStorageList = data.hourlyUsage.storage?.filter(
     (storage) => storage.type === 'pca',
   );
 
-  const archiveStorageTotalPrice = sumPrices(archiveStorageList, 'totalPrice');
+  const archiveStorageTotalPrice = roundPrice(
+    archiveStorageList.reduce(
+      (sum, storage) => sum + roundPrice(storage.totalPrice),
+      0,
+    ),
+  );
 
   return {
     archiveStorageList,
@@ -104,15 +123,23 @@ const initArchiveStorageList = (data: TCurrentUsage) => {
 
 const initSnapshotList = (data: TCurrentUsage) => {
   if (!data?.hourlyUsage) {
-    return {};
+    return {
+      snapshotList: [],
+      snapshotsTotalPrice: 0,
+    };
   }
 
   const snapshotList = data.hourlyUsage.snapshot.map((snapshot) => ({
     ...snapshot,
     totalPrice: roundPrice(snapshot.totalPrice),
   }));
 
-  const snapshotsTotalPrice = sumPrices(snapshotList, 'totalPrice');
+  const snapshotsTotalPrice = roundPrice(
+    data.hourlyUsage.snapshot.reduce(
+      (sum, snapshot) => sum + roundPrice(snapshot.totalPrice),
+      0,
+    ),
+  );
 
   return {
     snapshotList,
@@ -122,7 +149,10 @@ const initSnapshotList = (data: TCurrentUsage) => {
 
 const initVolumeList = (data: TCurrentUsage) => {
   if (!data?.hourlyUsage) {
-    return {};
+    return {
+      volumeList: [],
+      volumesTotalPrice: 0,
+    };
   }
 
   const volumeList = data.hourlyUsage.volume.flatMap((volume) =>
@@ -149,7 +179,10 @@ const initVolumeList = (data: TCurrentUsage) => {
 
 const initInstanceBandwidth = (data: TCurrentUsage) => {
   if (!data?.hourlyUsage) {
-    return {};
+    return {
+      bandwidthList: [],
+      bandwidthTotalPrice: 0,
+    };
   }
 
   const bandwidthList = data.hourlyUsage.instanceBandwidth.map(
@@ -168,9 +201,11 @@ const initInstanceBandwidth = (data: TCurrentUsage) => {
     }),
   );
 
-  const bandwidthTotalPrice = bandwidthList.reduce(
-    (sum, item) => sum + item.outgoingBandwidth.totalPrice,
-    0,
+  const bandwidthTotalPrice = roundPrice(
+    bandwidthList.reduce(
+      (sum, item) => sum + item.outgoingBandwidth.totalPrice,
+      0,
+    ),
   );
 
   return {
@@ -238,8 +273,8 @@ const initResourceUsage = (data: TCurrentUsage, resourceType: string) => {
   const totalPrice = sumPrices(resources, 'totalPrice');
 
   return {
-    resources,
-    totalPrice,
+    resources: resources || [],
+    totalPrice: totalPrice || 0,
   };
 };
 
@@ -318,8 +353,6 @@ export type TSnapshot = {
 };
 
 export type TConsumptionDetail = {
-  hourlyBilling: TCurrentUsage;
-  monthlyBilling: TCurrentUsage;
   hourlyInstances: TInstance[];
   monthlyInstances: TInstance[];
   objectStorages: TStorage[];
@@ -370,7 +403,7 @@ export type TConsumptionDetail = {
   };
 };
 
-const getConsumptionDetails = (usage: TCurrentUsage) => {
+export const getConsumptionDetails = (usage: TCurrentUsage) => {
   const resourceMap = [
     { type: 'registry', key: 'privateRegistry' },
     { type: 'loadbalancer', key: 'kubernetesLoadBalancer' },
@@ -445,8 +478,6 @@ const getConsumptionDetails = (usage: TCurrentUsage) => {
   const finalTotal = roundPrice(totals.hourly.total + totals.monthly.total);
 
   return {
-    hourlyBilling: usage,
-    monthlyBilling: usage,
     hourlyInstances: hourlyInstanceList,
     monthlyInstances: monthlyInstanceList,
     objectStorages: objectStorageList,
@@ -466,9 +497,10 @@ export const useGeTCurrentUsage = (projectId: string) =>
   useQuery({
     queryKey: [projectId, 'current', 'usage'],
     queryFn: async () => {
-      const usageData = await getCurrentUsage(projectId);
-      return getConsumptionDetails(usageData);
+      const currentUsage = await getCurrentUsage(projectId);
+      return currentUsage;
     },
+    select: (data) => getConsumptionDetails(data),
   });
 
 type ActivateMonthlyBillingProps = {

packages/manager/apps/pci-billing/src/api/hook/useHistory.ts

@@ -0,0 +1,54 @@
+import { useQuery } from '@tanstack/react-query';
+import { isSameMonth } from 'date-fns';
+import { useComputeDate } from '@/components/history/useComputeDate.hook';
+import { getCurrentUsage } from '../data/consumption';
+import {
+  getUsageHistory,
+  getUsageHistoryPeriod,
+  TUsageHistoryPeriod,
+} from '../data/history';
+import { getConsumptionDetails } from './useConsumption';
+
+export const useUsageHistoryPeriod = (
+  projectId: string,
+  from: string,
+  to: string,
+) =>
+  useQuery({
+    queryKey: [projectId, from, to, 'history', 'usage'],
+    queryFn: async () => {
+      const historyPeriod = await getUsageHistoryPeriod(projectId, from, to);
+      return historyPeriod?.length
+        ? historyPeriod[0]
+        : ({} as TUsageHistoryPeriod);
+    },
+  });
+
+export const useGetUsageHistory = (
+  projectId: string,
+  periodDetail: TUsageHistoryPeriod,
+) => {
+  const { billingDate } = useComputeDate();
+
+  return useQuery({
+    queryKey: [projectId, periodDetail?.id, 'history', 'usage'],
+    queryFn: async () => {
+      const historyUsage = await getUsageHistory(projectId, periodDetail?.id);
+      let monthlyDetails;
+
+      if (isSameMonth(new Date(), billingDate)) {
+        const currentUsage = await getCurrentUsage(projectId);
+        monthlyDetails = currentUsage?.monthlyUsage;
+      } else if (
+        new Date(periodDetail.period.to).getUTCMonth() ===
+        billingDate.getMonth()
+      ) {
+        monthlyDetails = historyUsage?.monthlyUsage;
+      }
+
+      return { ...historyUsage, monthlyUsage: monthlyDetails };
+    },
+    enabled: !!periodDetail?.id,
+    select: (data) => getConsumptionDetails(data),
+  });
+};

packages/manager/apps/pci-billing/src/components/consumption/ArchiveStorageList.component.tsx

@@ -128,7 +128,6 @@ export default function ArchiveStorageList({
         totalItems={paginatedStorages.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/ColdArchiveList.component.tsx

@@ -48,6 +48,7 @@ export default function ColdArchiveList({
     const sortedColdArchives = coldArchives?.sort((a, b) =>
       a.region.localeCompare(b.region),
     );
+
     return paginateResults(sortedColdArchives || [], pagination);
   }, [coldArchives, pagination, setPagination]);
 
@@ -118,7 +119,6 @@ export default function ColdArchiveList({
         totalItems={paginatedColdArchives.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/InstanceList.component.tsx

@@ -292,7 +292,6 @@ export default function InstanceList({
         totalItems={instanceConsumptionDetails.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/ObjectStorageList.component.tsx

@@ -103,7 +103,6 @@ export default function ObjectStorageList({
         totalItems={paginatedStorages.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/OutgoingTrafficList.component.tsx

@@ -102,7 +102,6 @@ export default function OutgoingTrafficList({
         totalItems={paginatedInstanceBandWidths.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/ResourceUsageList.component.tsx

@@ -101,7 +101,6 @@ export default function ResourceUsageList({
         totalItems={paginatedResourcesUsage.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/SnapshotList.component.tsx

@@ -27,19 +27,17 @@ export default function SnapshotList({
   const { pagination, setPagination } = useDataGrid();
 
   const getSnapshotPriceInfoTooltip = (snapshot: TSnapshot) =>
-    `${t('cpbc_snapshot_col_usage_info_part1')}${t(
+    `${t('cpbc_snapshot_col_usage_info_part1')} ${t(
       'cpbc_snapshot_col_usage_info_part2',
       {
         amount: (snapshot.instance?.quantity?.value || 0).toFixed(2),
       },
     )}`;
 
-  const paginatedSnapshots = useMemo(() => {
-    const sortedSnapshots = snapshots?.sort((a, b) =>
-      a.region.localeCompare(b.region),
-    );
-    return paginateResults(sortedSnapshots || [], pagination);
-  }, [snapshots, pagination, setPagination]);
+  const paginatedSnapshots = useMemo(
+    () => paginateResults(snapshots || [], pagination),
+    [snapshots, pagination, setPagination],
+  );
 
   const columns = [
     {
@@ -85,7 +83,6 @@ export default function SnapshotList({
         totalItems={paginatedSnapshots.totalRows}
         pagination={pagination}
         onPaginationChange={setPagination}
-        className="overflow-x-visible"
       />
     </div>
   );

packages/manager/apps/pci-billing/src/components/consumption/TooltipIcon.component.tsx

@@ -32,6 +32,7 @@ export default function TooltipIcon({
           size={ODS_TEXT_SIZE._100}
           level={ODS_TEXT_LEVEL.body}
           color={ODS_THEME_COLOR_INTENT.text}
+          className="break-normal"
         >
           {content}
         </OsdsText>