Stats response changes (#443)

Author: praveen5959

src/@types/parseable/api/stream.ts

@@ -11,17 +11,17 @@ export type LogStreamStat = {
 	ingestion: {
 		count: number;
 		format: string;
-		size: string;
+		size: number;
 		lifetime_count: number;
-		lifetime_size: string;
+		lifetime_size: number;
 		deleted_count: number;
-		deleted_size: string;
+		deleted_size: number;
 	};
 	storage: {
 		format: string;
-		size: string;
-		lifetime_size: string;
-		deleted_size: string;
+		size: number;
+		lifetime_size: number;
+		deleted_size: number;
 	};
 	stream: string;
 	time: string;

src/pages/Home/index.tsx

@@ -225,16 +225,8 @@ const BigNumber = (props: { label: string; value: any; color?: string }) => {
 	);
 };
 
-const bytesStringToInteger = (str: string) => {
-	if (!str || typeof str !== 'string') return null;
-
-	const strChuncks = str?.split(' ');
-	return Array.isArray(strChuncks) && !isNaN(Number(strChuncks[0])) ? parseInt(strChuncks[0]) : null;
-};
-
 const sanitizeBytes = (str: any) => {
-	const size = bytesStringToInteger(str);
-	return size ? formatBytes(size) : '–';
+	return formatBytes(str) || '–';
 };
 
 type StreamInfoProps = {

src/pages/Stream/Views/Manage/Stats.tsx

@@ -2,7 +2,7 @@ import { Loader, Stack, Text } from '@mantine/core';
 import classes from '../../styles/Management.module.css';
 import { useStreamStore } from '../../providers/StreamProvider';
 import _ from 'lodash';
-import { calcCompressionRate, sanitizeBytes, sanitizeEventsCount } from '@/utils/formatBytes';
+import { calcCompressionRate, formatBytes, HumanizeNumber } from '@/utils/formatBytes';
 import { IconArrowDown } from '@tabler/icons-react';
 import ErrorView from './ErrorView';
 
@@ -41,9 +41,9 @@ const StatsTableHeaderRow = () => {
 };
 
 const defaultEventCountData = {
-	count: '-',
-	lifetime_count: '-',
-	deleted_count: '-',
+	count: 0,
+	lifetime_count: 0,
+	deleted_count: 0,
 };
 
 const EventsCountRow = () => {
@@ -60,27 +60,27 @@ const EventsCountRow = () => {
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeEventsCount(eventsData.count)}
+					{HumanizeNumber(eventsData.count)}
 				</Text>
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeEventsCount(eventsData.lifetime_count)}
+					{HumanizeNumber(eventsData.lifetime_count)}
 				</Text>
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeEventsCount(eventsData.deleted_count)}
+					{HumanizeNumber(eventsData.deleted_count)}
 				</Text>
 			</Stack>
 		</Stack>
 	);
 };
 
 const defaultIngestedSizeData = {
-	size: '-',
-	lifetime_size: '-',
-	deleted_size: '-',
+	size: 0,
+	lifetime_size: 0,
+	deleted_size: 0,
 };
 
 const IngestedSizeRow = () => {
@@ -97,27 +97,27 @@ const IngestedSizeRow = () => {
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeBytes(ingestionData.size)}
+					{formatBytes(ingestionData.size)}
 				</Text>
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeBytes(ingestionData.lifetime_size)}
+					{formatBytes(ingestionData.lifetime_size)}
 				</Text>
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeBytes(ingestionData.deleted_size)}
+					{formatBytes(ingestionData.deleted_size)}
 				</Text>
 			</Stack>
 		</Stack>
 	);
 };
 
 const defaultStorageData = {
-	size: '-',
-	lifetime_size: '-',
-	deleted_size: '-',
+	size: 0,
+	lifetime_size: 0,
+	deleted_size: 0,
 };
 
 const StorageSizeRow = () => {
@@ -138,7 +138,7 @@ const StorageSizeRow = () => {
 			</Stack>
 			<Stack w={bigNoWidth} gap={0} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeBytes(storageData.size)}
+					{formatBytes(storageData.size)}
 				</Text>
 				<Stack
 					gap={0}
@@ -156,12 +156,12 @@ const StorageSizeRow = () => {
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeBytes(storageData.lifetime_size)}
+					{formatBytes(storageData.lifetime_size)}
 				</Text>
 			</Stack>
 			<Stack w={bigNoWidth}>
 				<Text ta="center" className={classes.bigNoText}>
-					{sanitizeBytes(storageData.deleted_size)}
+					{formatBytes(storageData.deleted_size)}
 				</Text>
 			</Stack>
 		</Stack>

src/pages/Systems/StorageSection.tsx

@@ -147,20 +147,20 @@ const StorageSection = () => {
 };
 
 const makeOverallStorageSectionProps = (record: IngestorQueryRecord | null) => {
-	const storageSize = formatBytes(_.get(record, 'parseable_storage_size_data', 0));
-	const lifetimeStorageSize = formatBytes(_.get(record, 'parseable_lifetime_storage_size_data', 0));
-	const deletedStorageSize = formatBytes(_.get(record, 'parseable_deleted_storage_size_data', 0));
-	const ingestedSize = formatBytes(_.get(record, 'parseable_events_ingested_size', 0));
-	const lifetimeIngestedSize = formatBytes(_.get(record, 'parseable_lifetime_events_ingested_size', 0));
+	const storageSize = _.get(record, 'parseable_storage_size_data', 0);
+	const lifetimeStorageSize = _.get(record, 'parseable_lifetime_storage_size.data', 0);
+	const deletedStorageSize = _.get(record, 'parseable_deleted_storage_size.data', 0);
+	const ingestedSize = _.get(record, 'parseable_events_ingested_size', 0);
+	const lifetimeIngestedSize = _.get(record, 'parseable_lifetime_events_ingested_size', 0);
 	const lifetimeCompressionRate = calcCompressionRate(lifetimeStorageSize, lifetimeIngestedSize);
 	const activeCompressionRate = calcCompressionRate(storageSize, ingestedSize);
 
 	return {
-		storageSize,
-		lifetimeIngestedSize,
-		lifetimeStorageSize,
-		deletedStorageSize,
-		ingestedSize,
+		storageSize: formatBytes(storageSize),
+		lifetimeIngestedSize: formatBytes(lifetimeIngestedSize),
+		lifetimeStorageSize: formatBytes(lifetimeStorageSize),
+		deletedStorageSize: formatBytes(deletedStorageSize),
+		ingestedSize: formatBytes(ingestedSize),
 		lifetimeCompressionRate,
 		activeCompressionRate,
 	};

src/utils/formatBytes.ts

@@ -47,17 +47,12 @@ export const sanitizeBytes = (str: any) => {
 	return size ? formatBytes(size) : '0 bytes';
 };
 
-export const calcCompressionRate = (storageSize: string, ingestionSize: string) => {
-	const parsedStorageSize = bytesStringToInteger(storageSize);
-	const parsedIngestionSize = bytesStringToInteger(ingestionSize);
+export const calcCompressionRate = (storageSize: number, ingestionSize: number): string => {
+	if (ingestionSize === 0) return '0%';
 
-	if (parsedIngestionSize === null || parsedStorageSize === null) return '–';
-
-	if (parsedIngestionSize === 0) return '0%';
-
-	const rate = 100 - (parsedStorageSize / parsedIngestionSize) * 100;
+	const rate = 100 - (storageSize / ingestionSize) * 100;
 
 	if (rate <= 0) return '0%';
 
-	return `${rate.toPrecision(4)}%`;
+	return `${rate.toFixed(2)}%`;
 };