Leaderboard Styles Enhancement & Bug Fixes

[Cena-Studio]

Overview

This PR aims to improve the leaderboard style so that it can have a responsive size with the window size changing. Besides, it adds national flag icons to the location column of the entries of the leaderboard. It also fixed a backend bug in device_controller#raw_data that causes an error when fetching the data without having any entries in the database.

Testing

• Run rails s to start the local server.
• Access the leaderboard page http://localhost:3000/leaderboard/grouped through a browser.
• Resize the browser window to see the responsive resizing of the leaderboard.

[Womblue]

Something I'm noticing with this branch is that the leaderboard itself loads a little slower (at least on my laptop, it's noticeable): Recording, first page is this branch, second page is the public leaderboard server. I feel like this amount of delay isn't a significant issue, but I imagine it'll get worse when more devices are on the leaderboard.

[megan-godfrey]

Could be caused by loading the icons? Could try reducing the file sizes of the platform icons. I'm not sure how urgent it is though

[Womblue]

I'm going to try and add a bunch of new groups to my local database and see if the issue becomes more serious

[Womblue]

I'm afraid I'm going to have to say that the loading time IS too long. I added 26 total groups to my own database, and this is the result:

Screencast from 2024-05-09 17-31-19.webm

I can see for sure that it's caused by the platform icons and NOT the flags, because the individual leaderboard still loads fast (which has the flags, but not the platform icons). In the video, I'm swapping between the individual group page and the individual page to demonstrate the difference.

There's a lot of slowdown there with just 26 groups - the current public leaderboard has 64 groups, and that's the MINIMUM we'll be dealing with, given that users will be adding their own devices to the leaderboard. There must be a way to deal with this, given that the flag images are of a similar size and don't have the same issues.

[Womblue]

If the loading time IS completely unavoidable, we could at least have some text that says Loading... or something similar, but this feels like an issue that we should be able to solve. There's clearly a significant difference in the way the flags and platforms are being displayed

[Womblue]

Found the culprit (I think)

def platform_icon
    platform = self.platform.downcase
    if Boavizta.type_exists?(self.instance_type, 'alces')
      'alces'
    elsif %w(aws azure openstack).include?(platform)
      platform
    else
      'server'
    end
  end

This function is run individually for each item on the leaderboard. In order to check if the device is an alces device, we're pinging Boavizta, which introduces a small delay while we wait for the response.

[Womblue]

Just added a couple of commits which fix the slowdown.

• Alces Cloud devices are now checked by Boavizta only when added to the database, instead of being checked every single time a platform string is used.
• With this change, a device's platform now has an extra potential option: "Alces Cloud". I've included a data migration to update any existing alces instances - so if you run rails db:migrate:with_data, then any instances already in your local database which would have been labelled Alces Cloud will have their platforms updated.

[megan-godfrey]

LGTM!

[Womblue]

LGTM!