open-telemetry / opentelemetry.io

The OpenTelemetry website and documentation
https://opentelemetry.io
Creative Commons Attribution 4.0 International
536 stars 1.19k forks source link

[outreachy] Registry: add pagination #5311

Open svrnm opened 3 weeks ago

svrnm commented 3 weeks ago

Outreachy task for @Naggayi-Daphne-Pearl

Based on your user experience report, please provide the following suggested improvement via a PR:

Introducing pagination would enhance usability by breaking up the results into manageable sections and improving navigation.

Note that there is no (trivial) way to chunck the items per page on the server side (especially with search involved). Therefore the pagination should be a purely client side implementation

Note: This is an assigned issue for a participant that has completed the user experience report, if you are an outreachy participant as well, find instructions here: #5290

crocmons commented 3 weeks ago

Hello @svrnm , as an outreachy contributor I want to work on this issue also

svrnm commented 3 weeks ago

Hello @svrnm , as an outreachy contributor I want to work on this issue also

hey @crocmons, please review #5290, and follow the instructions for outreachy contributors there.

Naggayi-Daphne-Pearl commented 3 weeks ago

Hello @svrnm,

I hope your week is beginning well.

I managed to implement the first vision i had for the pagination. My page size is 10 entries per page. I have an issue though my changes dont reflect in the source control for me to commit.

I asked two of my collegues have the same issue

I have attached the screenshot of my git status. I applied changes in the index.html

Screenshot 2024-10-06 at 12 16 47 AM

of my changes.

my first attempt at pagination

Screenshot 2024-10-07 at 9 25 00 AM
Naggayi-Daphne-Pearl commented 3 weeks ago

I created a link with gitpod The link is attached here: attached link running the server on npm run serve:netlify you can see my changes in my gitpod see link

Still improving the pagination while i figure out why my changes dont reflect in my source control

svrnm commented 3 weeks ago

Screenshot 2024-10-07 at 10 26 21

hey @Naggayi-Daphne-Pearl, your changes are still in "staging", so you need to run git add to have those files added to your commit, or you can do git commit -a -m <message>, where the -a will auto-add all changes.

Naggayi-Daphne-Pearl commented 3 weeks ago

hey @svrnm the changes in staging arent really the files i was focusing on this was me doing a try and error to see if other files can be changed. i made changes in the index.html located in the public folder >ecosystem>registry>index.html and registrySearch.js

the changes though reflect when i run my server but not in the source control for me to commit them

here is a screenshot when i try to comment my changes in these two files.

Screenshot 2024-10-07 at 11 47 38 AM
svrnm commented 3 weeks ago

@Naggayi-Daphne-Pearl can you share with me the output of git status and git log, also since you use gitpod can you make your workspace accessible to me, so I can take a closer look? Thanks

Naggayi-Daphne-Pearl commented 3 weeks ago

Hey @svrnm here is the link to the gitpod Link commands used : npm run serve:netlify

the machine i am using is macbook pro steps i took during set up

  1. Forked the repo
  2. Command sudo nvm install
  3. Command sudo npm install
  4. Command sudo npm run build ~ this helped generate the public folder i am working in
  5. npm run serve to run site
  6. npm run serve:netlify that runs on port localhost:8888

I was able to edit changes and see them running them running locally

Committing them is where i am getting the blocker. i have reinstalled the app thrice in hope i had done it poorly the first time

git status ~ even though i have made changes to the code

Screenshot 2024-10-07 at 3 20 34 PM

git log

Screenshot 2024-10-07 at 3 23 54 PM
svrnm commented 3 weeks ago

Command sudo npm run build ~ this helped generate the public folder i am working in

Do not work on the public folder, as it is ignored via .gitignore, you need to edit the source files, see https://github.com/open-telemetry/opentelemetry.io/issues/5290, section "Registry Source Code"

Naggayi-Daphne-Pearl commented 3 weeks ago

Ohh dear Thanks a lot for this

Naggayi-Daphne-Pearl commented 3 weeks ago

Hello, It worked!!! Thanks Alot @svrnm for your help

svrnm commented 3 weeks ago

Great! Then your next step is raising a PR such that I can review your work

Naggayi-Daphne-Pearl commented 3 weeks ago

Hey @svrnm,

I've created a pull request with pagination improvements for the pages. Users can now customize the number of entries shown per page and use the "Go to Page" feature to navigate directly to specific pages.

I'm still working on further improvements to make the pagination even better.

Please let me know if you have any feedback or require additional information.

Thank you for your help yesterday.

my branch name is pagination/Daphne

Screenshot 2024-10-08 at 3 28 03 PM
Naggayi-Daphne-Pearl commented 2 weeks ago

Hello @svrnm,

I hope are well.

I wanted to update you on the progress I’ve made with my work. I have implemented several changes, incorporating your helpful comments along the way. You can view my progress through the link below:

Additionally, I have a question: once I complete this issue, would it be possible for me to take on another one that i listed in my google form last week?

Thank you, and I look forward to your feedback!

Naggayi-Daphne-Pearl commented 1 week ago

Hey @svrnm,

Thank you for your help.

I am done making the changes suggested in my PR.

Any suggestions on the way forward