Make main tiles configurable via metadata

[anilmurty]

Background:
Console today has a bunch of top level tiles and then sub-tiles under each top-level tile.

Top level tiles

Sub-tiles under a top level tile:

The contents of the sub-level tiles are configurable via metadata files located in https://github.com/akash-network/deploy-templates (one per template). For example, here is the metadata file that controls the colors, logo, number of tiles, copy (text) etc for the "Akash" screenshot shown above: https://github.com/akash-network/deploy-templates/blob/main/akash/metadata.json

There is no such configurability for the tiles on the main page. We would like to add this, so that we can easily add or remove top level tiles from the UI.

Requirements:

• 1. Add a new metadata folder called "nodes-master" (prefixing this with "nodes" to allow for other categories like "web-hosting" and "AI/ML" in the future.
• 2. Add a metadata.json file under nodes-master, that should allow specifying a version, the max number of tiles per row, name, logo file location, title and copy (to show on the tile)
• Update Console code to read this metadata.json file to populate the /new-deployments page.
  - Tiles should be displayed (left-to-right) in the order that they appear in the file (top to bottom).
  - Max number of tiles shown per row (when the user expands the browser window size horizontally) should be driven by the maxHorizontalTiles key.
  - Min number of tiles (when user shrinks the browser horizontally should be 1 (same as it is before this change)
• update route for this page to /landing/node-deployment

[mspilimbergo]

I can try to take this on!

[anilmurty]

oh, that would be excellent @mspilimbergo ! - this would be a precursor to akash-network/console#100 (which is obviously very exciting) so you can take that next, if you figure this out. Meanwhile we're working on designs for #100 .

I'll create the deploy-templates for this issue (under https://github.com/akash-network/deploy-templates) and tag you on that.

[mspilimbergo]

Sounds good!! Yeah, would happy to take on #100 if all goes well here.

Btw, I don't see any changes to the deploy-templates. Do you want me to create the nodes-master folder and PR it into https://github.com/akash-network/deploy-templates ?

Thanks!

[anilmurty]

Was just working on it :) -- akash-network/deploy-templates#3

[mspilimbergo]

I see - great!

[anilmurty]

merged now - feel free to suggest any changes to the metadata file as you code up the logic. And note that a few icons referenced from the file are missing under https://github.com/akash-network/deploy-templates/tree/main/template-icons/nodes/80by80 -- I'll get these from our designer tomorrow (he's asleep now) and update github but I wanted to get you something to unblock you first

[anilmurty]

hey @mspilimbergo - couple updates/ follow ups:

1. I've uploaded the missing icons to the deploy-templates repo: akash-network/deploy-templates@f1e74b5
2. Another dev is available and interested to work on Add new high-level page (better landing page) #100 while you're working on this issue. I know I indicated that you could take that next but hope it's ok if someone else does :)

[anilmurty]

hey @mspilimbergo - just checking in. Any updates? Would like to get this in soon.

[kaushik-rishi]

Hi @anilmurty. I'm looking forward to pick this issue up.

Got a good understanding of the code and requirements.

[kaushik-rishi]

Made a PR to correct the JSON syntax in the nodes-master/metadata.json in deploy-templates

PR: akash-network/deploy-templates#5

[anilmurty]

Thanks @kaushik-rishi - go for it!

[kaushik-rishi]

Quick Question, are we planning to remove all of the icons from https://github.com/akash-network/console/tree/main/web/src/assets/images and reference them from the deploy-templates repository ?

@anilmurty

[anilmurty]

I'd prefer to keep them where the deploy templates are but if it is too much work we can leave them where they are and update the JSON templates to reference the location rather than hard coding it.

[kaushik-rishi]

We can do it either ways, i've updated the nodes-master/metadata.json to make it work however we like it.

Way - 1 (if we want to use the deployment templates)
https://github.com/akash-network/console/blob/05b984c829be4805f28fa08d101628ef06ce0d61/web/src/pages/FeaturedApps.tsx#L70

Way - 2 (if we want to use the static assets)
https://github.com/akash-network/console/blob/05b984c829be4805f28fa08d101628ef06ce0d61/web/src/pages/FeaturedApps.tsx#L71

Which one should i go forward with ?

PR #110
I've opened a draft PR to track progress and lock this issue to myself

[anilmurty]

Great progress @kaushik-rishi

@jtary - what's your preference here? I lean towards having all assets and metadata for the tiles in one place so it is easy to modify/ reference but don't want to introduce unnecessary complexity in the code.

[mspilimbergo]

hey @mspilimbergo - just checking in. Any updates? Would like to get this in soon.

Hey @anilmurty - so sorry about the late update. I had a family emergency and was forced to travel outside the country. Good to know that @kaushik-rishi was able to take care of it, looked at his PRs, and they look great.

Hope to be able to keep contributing!

[anilmurty]

Thanks @mspilimbergo - hope all's well. Looking forward to your contributions- please feel free to comment on other issues that interest you.

[anilmurty]

I'm closing this now as it is implemented and deployed to production