chore: use formatBytes from react components

canonical · Jan 30, 2024 · 0bda6c2 · 0bda6c2
1 parent e0283a8
commit 0bda6c2
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 280 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@canonical/maas-react-components": "1.15.0",
+    "@canonical/maas-react-components": "1.19.1",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "0.46.0",
     "@reduxjs/toolkit": "1.9.3",

diff --git a/src/app/base/components/UploadTextArea/UploadTextArea.tsx b/src/app/base/components/UploadTextArea/UploadTextArea.tsx
@@ -1,6 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useState } from "react";
 
+import { formatBytes } from "@canonical/maas-react-components";
 import type { TextareaProps } from "@canonical/react-components";
 import { Icon, Textarea } from "@canonical/react-components";
 import { useFormikContext } from "formik";
@@ -9,7 +10,6 @@ import { useDropzone } from "react-dropzone";
 import FormikField from "@/app/base/components/FormikField";
 import { useId } from "@/app/base/hooks/base";
 import type { AnyObject } from "@/app/base/types";
-import { formatBytes } from "@/app/utils";
 
 type Props<V> = {
   label: string;
@@ -53,7 +53,7 @@ export const UploadTextArea = <V extends AnyObject>({
     }
     const file = files[0];
     if (file.size > maxSize) {
-      const byteSize = formatBytes(maxSize, "B");
+      const byteSize = formatBytes({ value: maxSize, unit: "B" });
       setFileErrors(
         `File cannot be larger than ${byteSize.value}${byteSize.unit}.`
       );

diff --git a/...components/node/StorageTables/AvailableStorageTable/AddLogicalVolume/AddLogicalVolume.tsx b/...components/node/StorageTables/AvailableStorageTable/AddLogicalVolume/AddLogicalVolume.tsx
@@ -1,3 +1,4 @@
+import { formatBytes } from "@canonical/maas-react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -13,7 +14,6 @@ import type { MachineEventErrors } from "@/app/store/machine/types/base";
 import { isMachineDetails } from "@/app/store/machine/utils";
 import type { RootState } from "@/app/store/root/types";
 import type { Disk } from "@/app/store/types/node";
-import { formatBytes } from "@/app/utils";
 
 export type AddLogicalVolumeValues = {
   fstype?: string;
@@ -47,27 +47,36 @@ const generateSchema = (availableSize: number) =>
       .test("enoughSpace", "Not enough space", function test() {
         const values: AddLogicalVolumeValues = this.parent;
         const { size, unit } = values;
-        const sizeInBytes = formatBytes(size, unit, {
-          convertTo: "B",
-          roundFunc: "floor",
-        }).value;
+        const sizeInBytes = formatBytes(
+          { value: size, unit: unit },
+          {
+            convertTo: "B",
+            roundFunc: "floor",
+          }
+        ).value;
 
         if (sizeInBytes < MIN_PARTITION_SIZE) {
-          const min = formatBytes(MIN_PARTITION_SIZE, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const min = formatBytes(
+            { value: MIN_PARTITION_SIZE, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `At least ${min}${unit} is required to add a logical volume`,
             path: "size",
           });
         }
 
         if (sizeInBytes > availableSize) {
-          const max = formatBytes(availableSize, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const max = formatBytes(
+            { value: availableSize, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `Only ${max}${unit} available in this volume group`,
             path: "size",
@@ -114,10 +123,13 @@ export const AddLogicalVolume = ({
           mountOptions: "",
           mountPoint: "",
           name: initialName,
-          size: formatBytes(disk.available_size, "B", {
-            convertTo: "GB",
-            roundFunc: "floor",
-          }).value,
+          size: formatBytes(
+            { value: disk.available_size, unit: "B" },
+            {
+              convertTo: "GB",
+              roundFunc: "floor",
+            }
+          ).value,
           tags: [],
           unit: "GB",
         }}
@@ -131,9 +143,12 @@ export const AddLogicalVolume = ({
           const { fstype, mountOptions, mountPoint, name, size, tags, unit } =
             values;
           // Convert size into bytes before dispatching action
-          const convertedSize = formatBytes(size, unit, {
-            convertTo: "B",
-          })?.value;
+          const convertedSize = formatBytes(
+            { value: size, unit: unit },
+            {
+              convertTo: "B",
+            }
+          )?.value;
           const params = {
             name,
             size: convertedSize,

diff --git a/...pp/base/components/node/StorageTables/AvailableStorageTable/AddPartition/AddPartition.tsx b/...pp/base/components/node/StorageTables/AvailableStorageTable/AddPartition/AddPartition.tsx
@@ -1,3 +1,4 @@
+import { formatBytes } from "@canonical/maas-react-components";
 import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
@@ -13,7 +14,6 @@ import type { MachineEventErrors } from "@/app/store/machine/types/base";
 import { isMachineDetails } from "@/app/store/machine/utils";
 import type { RootState } from "@/app/store/root/types";
 import type { Disk } from "@/app/store/types/node";
-import { formatBytes } from "@/app/utils";
 
 export type AddPartitionValues = {
   fstype?: string;
@@ -43,27 +43,36 @@ const generateSchema = (availableSize: number) =>
       .test("enoughSpace", "Not enough space", function test() {
         const values: AddPartitionValues = this.parent;
         const { partitionSize, unit } = values;
-        const sizeInBytes = formatBytes(partitionSize, unit, {
-          convertTo: "B",
-          roundFunc: "floor",
-        }).value;
+        const sizeInBytes = formatBytes(
+          { value: partitionSize, unit },
+          {
+            convertTo: "B",
+            roundFunc: "floor",
+          }
+        ).value;
 
         if (sizeInBytes < MIN_PARTITION_SIZE) {
-          const min = formatBytes(MIN_PARTITION_SIZE, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const min = formatBytes(
+            { value: MIN_PARTITION_SIZE, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `At least ${min}${unit} is required to partition this disk`,
             path: "partitionSize",
           });
         }
 
         if (sizeInBytes > availableSize) {
-          const max = formatBytes(availableSize, "B", {
-            convertTo: unit,
-            roundFunc: "floor",
-          }).value;
+          const max = formatBytes(
+            { value: availableSize, unit: "B" },
+            {
+              convertTo: unit,
+              roundFunc: "floor",
+            }
+          ).value;
           return this.createError({
             message: `Only ${max}${unit} available in this disk`,
             path: "partitionSize",
@@ -107,10 +116,13 @@ export const AddPartition = ({
           fstype: "",
           mountOptions: "",
           mountPoint: "",
-          partitionSize: formatBytes(disk.available_size, "B", {
-            convertTo: "GB",
-            roundFunc: "floor",
-          }).value,
+          partitionSize: formatBytes(
+            { value: disk.available_size, unit: "B" },
+            {
+              convertTo: "GB",
+              roundFunc: "floor",
+            }
+          ).value,
           unit: "GB",
         }}
         onCancel={closeExpanded}
@@ -124,9 +136,12 @@ export const AddPartition = ({
           const { fstype, mountOptions, mountPoint, partitionSize, unit } =
             values;
           // Convert size into bytes before dispatching action
-          const size = formatBytes(partitionSize, unit, {
-            convertTo: "B",
-          })?.value;
+          const size = formatBytes(
+            { value: partitionSize, unit },
+            {
+              convertTo: "B",
+            }
+          )?.value;
           const params = {
             blockId: disk.id,
             partitionSize: size,

diff --git a/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx b/src/app/kvm/components/KVMForms/ComposeForm/StorageTable/PoolSelect/PoolSelect.tsx
@@ -1,4 +1,4 @@
-import { Meter } from "@canonical/maas-react-components";
+import { Meter, formatBytes } from "@canonical/maas-react-components";
 import { ContextualMenu } from "@canonical/react-components";
 import { useFormikContext } from "formik";
 import { useSelector } from "react-redux";
@@ -10,7 +10,6 @@ import { getSortedPoolsArray } from "@/app/kvm/utils";
 import podSelectors from "@/app/store/pod/selectors";
 import type { Pod, PodDetails } from "@/app/store/pod/types";
 import type { RootState } from "@/app/store/root/types";
-import { formatBytes } from "@/app/utils";
 
 type RequestMap = { [location: string]: number };
 
@@ -23,10 +22,13 @@ type Props = {
 };
 
 const byteDisplay = (bytes: number, roundDown = false): number =>
-  formatBytes(bytes, "B", {
-    convertTo: "GB",
-    roundFunc: roundDown ? "floor" : "round",
-  }).value;
+  formatBytes(
+    { value: bytes, unit: "B" },
+    {
+      convertTo: "GB",
+      roundFunc: roundDown ? "floor" : "round",
+    }
+  ).value;
 
 const generateDropdownContent = (
   pod: PodDetails,
@@ -68,19 +70,26 @@ const generateDropdownContent = (
 
         // Convert requests into bytes
         const requested = requests[name]
-          ? formatBytes(requests[name], "GB", { convertTo: "B" }).value
+          ? formatBytes(
+              { value: requests[name], unit: "GB" },
+              { convertTo: "B" }
+            ).value
           : 0;
         const pendingRequest = isSelected
           ? 0
-          : formatBytes(disk.size, "GB", { convertTo: "B" }).value;
+          : formatBytes({ value: disk.size, unit: "GB" }, { convertTo: "B" })
+              .value;
         // Free amount is the actual space available in the pool, less any
         // existing storage requests (including the current request).
         const freeBytes =
           pool.total - pool.allocated_tracked - pool.allocated_other;
-        const free = formatBytes(freeBytes - requested - pendingRequest, "B", {
-          convertTo: "B",
-          roundFunc: "floor",
-        }).value;
+        const free = formatBytes(
+          { value: freeBytes - requested - pendingRequest, unit: "B" },
+          {
+            convertTo: "B",
+            roundFunc: "floor",
+          }
+        ).value;
 
         return (
           <button

diff --git a/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx b/src/app/kvm/components/KVMResourceMeter/KVMResourceMeter.tsx
@@ -1,7 +1,6 @@
-import { Meter } from "@canonical/maas-react-components";
+import { Meter, formatBytes } from "@canonical/maas-react-components";
 
 import { COLOURS } from "@/app/base/constants";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   allocated: number;

diff --git a/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx b/src/app/kvm/components/StorageColumn/StoragePopover/StoragePopover.tsx
@@ -1,14 +1,13 @@
 import type { ReactNode } from "react";
 import { Fragment } from "react";
 
-import { Meter } from "@canonical/maas-react-components";
+import { Meter, formatBytes } from "@canonical/maas-react-components";
 
 import Popover from "@/app/base/components/Popover";
 import { COLOURS } from "@/app/base/constants";
 import type { KVMStoragePoolResources } from "@/app/kvm/types";
 import { getSortedPoolsArray } from "@/app/kvm/utils";
 import type { Pod } from "@/app/store/pod/types";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   children: ReactNode;
@@ -52,10 +51,16 @@ const StoragePopover = ({
             const isDefault = "id" in pool && pool.id === defaultPoolId;
             const freeBytes =
               pool.total - pool.allocated_tracked - pool.allocated_other;
-            const total = formatBytes(pool.total, "B");
-            const allocated = formatBytes(pool.allocated_tracked, "B");
-            const free = formatBytes(freeBytes, "B");
-            const other = formatBytes(pool.allocated_other, "B");
+            const total = formatBytes({ value: pool.total, unit: "B" });
+            const allocated = formatBytes({
+              value: pool.allocated_tracked,
+              unit: "B",
+            });
+            const free = formatBytes({ value: freeBytes, unit: "B" });
+            const other = formatBytes({
+              value: pool.allocated_other,
+              unit: "B",
+            });
 
             return (
               <Fragment key={`storage-pool-${name}`}>

diff --git a/src/app/kvm/components/StorageResources/StorageCards/StorageCards.tsx b/src/app/kvm/components/StorageResources/StorageCards/StorageCards.tsx
@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
+import { formatBytes } from "@canonical/maas-react-components";
 import { useListener } from "@canonical/react-components/dist/hooks";
 
 import { COLOURS } from "@/app/base/constants";
 import StoragePopover from "@/app/kvm/components/StorageColumn/StoragePopover";
 import type { KVMStoragePoolResources } from "@/app/kvm/types";
 import { calcFreePoolStorage, getSortedPoolsArray } from "@/app/kvm/utils";
 import type { Pod } from "@/app/store/pod/types";
-import { formatBytes } from "@/app/utils";
 
 type Props = {
   defaultPoolId?: Pod["default_storage_pool"];
@@ -58,15 +58,17 @@ const StorageCards = ({ defaultPoolId, pools }: Props): JSX.Element | null => {
         const allocatedWidth = (pool.allocated_tracked / pool.total) * 100;
         const otherWidth =
           allocatedWidth + (pool.allocated_other / pool.total) * 100;
-        const total = formatBytes(pool.total, "B");
+        const total = formatBytes({ value: pool.total, unit: "B" });
         const allocated = formatBytes(
-          pool.allocated_tracked + pool.allocated_other,
-          "B",
+          { value: pool.allocated_tracked + pool.allocated_other, unit: "B" },
           { convertTo: total.unit }
         );
-        const free = formatBytes(calcFreePoolStorage(pool), "B", {
-          convertTo: total.unit,
-        });
+        const free = formatBytes(
+          { value: calcFreePoolStorage(pool), unit: "B" },
+          {
+            convertTo: total.unit,
+          }
+        );
 
         return (
           <StoragePopover