Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stats response changes #443

Merged
merged 2 commits into from
Mar 6, 2025
Merged

Stats response changes #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31dcf49
Stats response changes
praveen5959 Mar 5, 2025
b36c942
Added formatting to CLuste page metrics
praveen5959 Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/@types/parseable/api/stream.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 1 addition & 9 deletions src/pages/Home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
38 changes: 19 additions & 19 deletions src/pages/Stream/Views/Manage/Stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -41,9 +41,9 @@ const StatsTableHeaderRow = () => {
};

const defaultEventCountData = {
count: '-',
lifetime_count: '-',
deleted_count: '-',
count: 0,
lifetime_count: 0,
deleted_count: 0,
};

const EventsCountRow = () => {
Expand All @@ -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 = () => {
Expand All @@ -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 = () => {
Expand All @@ -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}
Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions src/pages/Systems/StorageSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Comment on lines +150 to +154
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Values need to be formatted before display in the UI.

The function now returns raw numeric values instead of pre-formatted byte strings, but the UI components (lines 86, 98, 106, 115, 123) still display these values directly without formatting. This will result in plain numbers being shown to users instead of human-readable formats like "1.2 MB".

Apply the following changes to ensure proper formatting:

return {
-  storageSize,
-  lifetimeIngestedSize,
-  lifetimeStorageSize,
-  deletedStorageSize,
-  ingestedSize,
+  storageSize: formatBytes(storageSize),
+  lifetimeIngestedSize: formatBytes(lifetimeIngestedSize),
+  lifetimeStorageSize: formatBytes(lifetimeStorageSize),
+  deletedStorageSize: formatBytes(deletedStorageSize),
+  ingestedSize: formatBytes(ingestedSize),
   lifetimeCompressionRate,
   activeCompressionRate,
};

Alternatively, update all display components to format these values at render time.

Also applies to: 158-166

💡 Verification agent

🧩 Analysis chain

Ensure consistent data property path access notation.

There's an inconsistency in how the data property paths are accessed:

  • Lines 150, 153, 154 use underscore notation (parseable_storage_size_data, parseable_events_ingested_size)
  • Lines 151-152 use dot notation (parseable_lifetime_storage_size.data, parseable_deleted_storage_size.data)

This inconsistency could lead to access errors if the data structure is uniform across all properties.

🏁 Script executed:

#!/bin/bash
# Search for usage patterns of these properties to understand the correct notation pattern

echo "Searching for storage size data path patterns..."
rg -A 2 -B 2 "parseable_storage_size" --type ts --type tsx

echo "Searching for lifetime storage size path patterns..."
rg -A 2 -B 2 "parseable_lifetime_storage_size" --type ts --type tsx

echo "Searching for deleted storage size path patterns..."
rg -A 2 -B 2 "parseable_deleted_storage_size" --type ts --type tsx

Length of output: 612

The previous script’s use of the --type tsx flag produced errors because “tsx” isn’t a recognized file type for ripgrep. This revised script uses glob patterns to include both .ts and .tsx files, which should yield the expected output for verifying property path usage across the codebase. Please run this script and review the results to determine whether the inconsistent property access (dot notation vs. underscore notation) is indeed an issue that needs addressing.

🏁 Script executed:

#!/bin/bash
# Re-verify property notation usage across TypeScript and TSX files using glob patterns
echo "Searching for 'parseable_storage_size' usage patterns..."
rg -g '*.ts' -g '*.tsx' -A 2 -B 2 "parseable_storage_size" .

echo "Searching for 'parseable_lifetime_storage_size' usage patterns..."
rg -g '*.ts' -g '*.tsx' -A 2 -B 2 "parseable_lifetime_storage_size" .

echo "Searching for 'parseable_deleted_storage_size' usage patterns..."
rg -g '*.ts' -g '*.tsx' -A 2 -B 2 "parseable_deleted_storage_size" .

Length of output: 6687

Consistent Property Access Required: Update Dot Notation to Underscore Notation

In src/pages/Systems/StorageSection.tsx, the property access for lifetime and deleted storage sizes is inconsistent with the type definitions. While other properties use the underscore naming convention (e.g., parseable_storage_size_data), the code currently uses dot notation for these two properties:

  • Change from _.get(record, 'parseable_lifetime_storage_size.data', 0) to _.get(record, 'parseable_lifetime_storage_size_data', 0)
  • Change from _.get(record, 'parseable_deleted_storage_size.data', 0) to _.get(record, 'parseable_deleted_storage_size_data', 0)

This adjustment aligns with the definitions in src/@types/parseable/api/clusterInfo.ts and ensures uniform data access.

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,
};
Expand Down
13 changes: 4 additions & 9 deletions src/utils/formatBytes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}%`;
};
Loading