Fix - Sort Data In/Out correctly in Sites Management page in the Pangolin Dashboard #1387

New Issue

MrUnknownDE · 2026-04-05T19:18:57+02:00

MrUnknownDE commented

2026-04-05 19:18:57 +02:00

Originally created by @thijsvanloef on 6/7/2025

Community Contribution License Agreement

By creating this pull request, I grant the project maintainers an unlimited,
perpetual license to use, modify, and redistribute these contributions under any terms they
choose, including both the AGPLv3 and the Fossorial Commercial license terms. I
represent that I have the right to grant this license for all contributed content.

Description

Fixes https://github.com/fosrl/pangolin/issues/767
Data Out and Data In sorting option in the "Manage Sites" tab does not actually seem to be sorting on most data in/out based on total number of bytes, but it will try to sort it as text (Str).

The solution is to parse each size string to a numeric value (in bytes) and compare those numbers:

Added a parseDataSize helper that splits off the numeric part and unit from the string and converts it to a consistent number (bytes)
Added sortingFn to the SitesTable.tsx to correctly sort the data in/out.

As you can see the table now sorts correctly!

Fix Considerations

I've decided to put the parseDataSize function as a shared module, this makes it more reusable if the maintainers of this project decide to use any other table or component that needs to sort or compare data-size strings.
Adding it to only the SitesTable.tsx seemed a fine fix for now, but could lead to duplicate code if it is needed elsewhere in the project.

How to test?

Clone the branch
Create a dev instance by following the https://docs.fossorial.io/development#pangolin docs.
Go to the sites overview in the pangolin dashboard.
Click on the sorting button above Data In or Data Out
Check if the Data In/Out is sorted on total number of bytes instead of as a string.

I'm not super used to Typescript, so please let me know if you would like things changed :)

*Originally created by @thijsvanloef on 6/7/2025* ## Community Contribution License Agreement By creating this pull request, I grant the project maintainers an unlimited, perpetual license to use, modify, and redistribute these contributions under any terms they choose, including both the AGPLv3 and the Fossorial Commercial license terms. I represent that I have the right to grant this license for all contributed content. ## Description Fixes https://github.com/fosrl/pangolin/issues/767 Data Out and Data In sorting option in the "Manage Sites" tab does not actually seem to be sorting on most data in/out based on total number of bytes, but it will try to sort it as text (Str). The solution is to parse each size string to a numeric value (in bytes) and compare those numbers: - Added a `parseDataSize` helper that splits off the numeric part and unit from the string and converts it to a consistent number (bytes) - Added `sortingFn` to the `SitesTable.tsx` to correctly sort the data in/out. As you can see the table now sorts correctly! ![image](https://github.com/user-attachments/assets/f9a69d72-9917-4540-b0c4-35af2bfca1f1) ## Fix Considerations I've decided to put the `parseDataSize` function as a shared module, this makes it more reusable if the maintainers of this project decide to use any other table or component that needs to sort or compare data-size strings. Adding it to only the `SitesTable.tsx` seemed a fine fix for now, but could lead to duplicate code if it is needed elsewhere in the project. ## How to test? 1. Clone the branch 2. Create a dev instance by following the https://docs.fossorial.io/development#pangolin docs. 3. Go to the sites overview in the pangolin dashboard. 4. Click on the sorting button above Data In or Data Out 5. Check if the Data In/Out is sorted on total number of bytes instead of as a string. I'm not super used to Typescript, so please let me know if you would like things changed :)

MrUnknownDE closed this issue

2026-04-05 19:18:57 +02:00

Sign in to join this conversation.

Branches Tags

main

dev

dependabot/npm_and_yarn/dev-minor-updates-b4e5d6b9c5

revert-2766-feature/systemd-install-instructions

dependabot/npm_and_yarn/prod-patch-updates-05702d39f2

dependabot/npm_and_yarn/next-16.2.1

dependabot/npm_and_yarn/recharts-3.8.1

alerting-rules

private-site-ha

dependabot/docker/docker/library/node-25-slim

ssh

delete-account

msg-delivery

org-only-idp

cicd

patch

site-targets-auto-login

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/pangolin#1387