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.

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

Add new high-level page (better landing page) #100

Open
3 tasks
anilmurty opened this issue Apr 4, 2023 · 38 comments
Open
3 tasks

Add new high-level page (better landing page) #100

anilmurty opened this issue Apr 4, 2023 · 38 comments
Assignees
Labels
product/console ready-for-community-dev This issue is ready for someone in the community to work on

Comments

@anilmurty
Copy link
Contributor

anilmurty commented Apr 4, 2023

Community Bounty: $100 (paid in $AKT)

GOALS

Two goals here:

Goal 1: Console is going to serve as a way to demonstrate deploying workloads for 3 high level user segments:

  1. (RPC/ Validator) Node Deployment.
  2. Web Hosting
  3. AI & ML Model Hosting (inference/ fine-tuning)
    We want to make this clear to the users and not mix each of these user segments

image

Goal 2: We want to make a better landing page for Console than just dropping them into the list of Cosmos chain tiles, like we do today

REQUIREMENTS

  • Design a new top level page that has two sections:
    - The top half should provide clear guidance on the user segments we want to target. Ideally a single call-to-action like "What would you like to do today?" on top and then 3 tiles below it, arranged horizontally next to each other: "Deploy a Blockchain Node"; "Host a Website or BlogSite"; "Deploy an AI/ ML Model". Each should have a logo and a "Choose a Template" action that the user can click. The look-and-feel of these tiles should be same as the look-n-feel of the tiles under /new-deployment today.
    - The bottom half of the page should provide a high level overview of the deployment process for anyone not familiar with it.

Below is the design we've come up with. Please email anil [at] akash.network to request access to full figma. The icons and illustrations are uploaded to https://github.com/akash-network/deploy-templates/tree/main/template-icons/nodes/landing

Screenshot 2023-04-12 at 1 11 44 PM

The above page should be the default route when someone navigates to console.akash.network and must replace the existing /new-deployment default. The endpoint could be /landing. Note that the current /new-deployments page (with all the cosmos chains) would link from the "Deploy a Blockchain Node" tile and the other two tiles will have their own pages, so set those to "Coming Soon" in place of "Choose a Template" in the below image (we will update them when we add the pages for those specific routes)

  • Update the Console code to add that top level page
    - The content of the page should be driven by a metadata file located in https://github.com/akash-network/deploy-templates -- can put it under "landing/metadata.json" (see this issue for context: Bugfixes/add missing redirects console#98). The metadata.json file should have a version and specify the logo file location, the title for each tile, the destination (URL) that it leads to and the max number of tiles to show when the browser window is expanded horizontally. The number of tiles shown should be based on the number of entries in the file, with tiles displayed from left-to-right corresponding to entries in the file from top to bottom and a max of maxHorizontalTiles (specified) in the file per row.
  • Update the routes in Console so that the individual tiles point to routes that make sense:
      1. (RPC/ Validator) Node Deployment: /landing/node-deployment
      1. Web Hosting: /landing/web-deployment
      1. AI & ML Model Hosting (inference/ fine-tuning): /landing/ai-ml-deployment
@anilmurty
Copy link
Contributor Author

@aktdenis - please review above and we can discuss details of design

@anilmurty anilmurty added the needs-design Dev work cannot start until design is done label Apr 4, 2023
@aktdenis
Copy link

aktdenis commented Apr 5, 2023

@anilmurty Looking into it

@anilmurty anilmurty added the ready-for-community-dev This issue is ready for someone in the community to work on label Apr 13, 2023
@sonicx180
Copy link

Looking into it too.

@anilmurty
Copy link
Contributor Author

@sonicx180 - thanks. I assume you are talking about implementing this? If so do you have a sense for when you'll be able to get this done? This is a fairly high priority on our side

@anilmurty anilmurty removed the needs-design Dev work cannot start until design is done label Apr 14, 2023
@sonicx180
Copy link

sonicx180 commented Apr 16, 2023 via email

@kaushik-rishi
Copy link
Contributor

Hi @anilmurty
I have made siginificant progress on it's precursor (#98).
I believe it could serve as a helpful starting point for tackling this issue.

I plan to develop a first version within the next 2 days and would greatly appreciate your feedback and suggestions for improvement. I recognize that my initial version may not be flawless and will need further refinement for which it could take a couple more days.

Can i take up this issue ?

@sonicx180
Copy link

Hey there! I'm sure you can. Just to let you know, i'm working on it too.

@anilmurty
Copy link
Contributor Author

@sonicx180 - it doesn't look like you have started on this yet? I need this done in the next few days so I can test and demo it next week. Maybe let @kaushik-rishi take this one and find another issue to work on?

@kaushik-rishi
Copy link
Contributor

@anilmurty

The last tile (custom sdl), should the import SDL button open up a modal like the "Import SDL" button on the /new-deployment page does ? or should we link it to some other fresh route ?

image

I need to know this because based on this, i will have to configure the metadata differently, if it has to open up a modal, then i will put the first 3 tiles in the metadata and hardcode the custom SDL tile.

@sonicx180
Copy link

sonicx180 commented Apr 17, 2023 via email

@anilmurty
Copy link
Contributor Author

@kaushik-rishi - that's right. exactly same workflow as the current "import" button on current /new-deployments page. Also I am going to create 1 or 2 issues for pages for the other two options on that page (We have one for nodes today and import)

@anilmurty
Copy link
Contributor Author

@sonicx180 - you can if you want to but it will likely end up being a waste. It may be more useful to tackle another issue (maybe the other two new pages for web services and AI/ ML, once I create the issues for them)

@kaushik-rishi
Copy link
Contributor

@kaushik-rishi - that's right. exactly same workflow as the current "import" button on current /new-deployments page. Also I am going to create 1 or 2 issues for pages for the other two options on that page (We have one for nodes today and import)

understood, i have 2 more doubts.

  1. this means the last tile shouldn't be in the dynamic metadata.json, and i should hardcode it.
  2. talking on the product side, if we enable the import SDL on the landing page last tile to do the same function, we need to remove the option fron /landing/node-deployment page right ?

@anilmurty

@anilmurty
Copy link
Contributor Author

anilmurty commented Apr 17, 2023

this means the last tile shouldn't be in the dynamic metadata.json, and i should hardcode it.

[am] correct. We may consider making dynamic in the future but there isn't a use case for needing to change it without a redeploy at this time (unlike the tiles).

talking on the product side, if we enable the import SDL on the landing page last tile to do the same function, we need to remove the option fron /landing/node-deployment page right ?

[am] We can leave it on both (and in fact it will also be on the new web and AI pages too)

@anilmurty
Copy link
Contributor Author

hey @kaushik-rishi - one clarification:

this means the last tile shouldn't be in the dynamic metadata.json, and i should hardcode it.

[am] the import tile on the new /new-deployment page can be in the metadata but the page the modal and workflow that follow when the user clicks import on that does not have to be. Hope that makes sense

@kaushik-rishi
Copy link
Contributor

hey @kaushik-rishi - one clarification:

this means the last tile shouldn't be in the dynamic metadata.json, and i should hardcode it.

[am] the import tile on the new /new-deployment page can be in the metadata but the page the modal and workflow that follow when the user clicks import on that does not have to be. Hope that makes sense

Roger that. Makes more sense now, Thanks for going out the way to clarify it.

@kaushik-rishi
Copy link
Contributor

image

Progress till now, Need a lot more changes and have a couple more doubts, will pickup tomorrow from here.

Also, can you explain a bit how the "Import SDL" flow is working on the "/landing/node-deployment" page ? It seems very unclear from the code, all i can infer is it's just setting the editor's data into a variable.

@anilmurty
Copy link
Contributor Author

This is great progress @kaushik-rishi - thanks for update. Get some rest!!

Re. workflow - it is basically identical to the workflow from any of the node templates except that the user uploads a custom SDL. so basically pops up an SDL editor, user hits save and then. goes to pre-flight check (which is same as when the user clicks depoy now on the templates) and from then on they're the same.

Have you deployed a workload on akash? If not, I would highly recommend doing that (you should be doing that for your end-to-end tests anyway). Email me your keplr wallet and I can send you some $AKT if you don't already have that.

@kaushik-rishi
Copy link
Contributor

This is great progress @kaushik-rishi - thanks for update. Get some rest!!

Re. workflow - it is basically identical to the workflow from any of the node templates except that the user uploads a custom SDL. so basically pops up an SDL editor, user hits save and then. goes to pre-flight check (which is same as when the user clicks depoy now on the templates) and from then on they're the same.

Have you deployed a workload on akash? If not, I would highly recommend doing that (you should be doing that for your end-to-end tests anyway). Email me your keplr wallet and I can send you some $AKT if you don't already have that.

No, I haven't deployed any. Very new to Akash (2 days). I'll do it and let you know if I need any $AKT.

@anilmurty
Copy link
Contributor Author

If you don't have a Keplr wallet you probably don't have $AKT. Send me your Keplr wallet address via email (be sure to copy Akash Address, not cosmos) and I'll send you some for testing deployments

@kaushik-rishi
Copy link
Contributor

If you don't have a Keplr wallet you probably don't have $AKT. Send me your Keplr wallet address via email (be sure to copy Akash Address, not cosmos) and I'll send you some for testing deployments

Sure @anilmurty . I'll do that in the morning.

@sonicx180
Copy link

@anilmurty Okay, I'll be doing web issues to let you know.

@kaushik-rishi
Copy link
Contributor

This is great progress @kaushik-rishi - thanks for update. Get some rest!!

Re. workflow - it is basically identical to the workflow from any of the node templates except that the user uploads a custom SDL. so basically pops up an SDL editor, user hits save and then. goes to pre-flight check (which is same as when the user clicks depoy now on the templates) and from then on they're the same.

Have you deployed a workload on akash? If not, I would highly recommend doing that (you should be doing that for your end-to-end tests anyway). Email me your keplr wallet and I can send you some $AKT if you don't already have that.

I've sent you my Keplr Waller, Can you lmk what specific workload you want me to test ?

@anilmurty
Copy link
Contributor Author

Sent 10AKT to that address. should be enough to run 100s of tests if you close out the dpeloyments.

One of the games (tetris) deployment should be sufficient. Post recording if possible, with version bumped

@kaushik-rishi
Copy link
Contributor

Understood @anilmurty .
Should i post recording of creating a tetris deployment on the PR that's in pending ? #110 ?

@kaushik-rishi
Copy link
Contributor

kaushik-rishi commented Apr 18, 2023

I will try to finish the design implementation and testing by 18 April. (IST, is now 11AM).

@Infiniti20
Copy link

Hey, I'm the guy who you accepted for the bounty of replit.com, should I still work on it? It seems like it's already been handled.

@anilmurty
Copy link
Contributor Author

@kaushik-rishi - sounds good

@Infiniti20 - that must have been a mistake. I'll check. I thought I accepted Rishi's
But if that's the case you can either decline it or work on a different issue. Your choice.

@anilmurty
Copy link
Contributor Author

Issue created for adding pages for web services and AI / ML tiles: akash-network/console#112 - I'll add design resources and metadata today and then it'll be ready to work on for anyone that wants to work on it!

@anilmurty
Copy link
Contributor Author

@Infiniti20 - i checked the bounties and none were assigned to you

@anilmurty
Copy link
Contributor Author

anilmurty commented Apr 20, 2023

akash-network/console#112 is ready for anyone to pick up (fyi @kaushik-rishi @Infiniti20 @mspilimbergo @sonicx180 @yshsaxena )

@sonicx180
Copy link

If #112 can be done in a week or so, I can pick it up

@anilmurty
Copy link
Contributor Author

It should be pretty straightforward- should be same code as the existing Node page (the current /new-deployments page which will be come /landing/node-deployments after @kaushik-rishi 's changes).

@kaushik-rishi
Copy link
Contributor

@anilmurty
Finished with the designs and functionality

Designs

1.mp4

Functionality

2.mp4

There's more to it. We didn't see this, but i am trying to understand and integrate the entire flow of import sdl into this page (new to react formik)

@kaushik-rishi
Copy link
Contributor

I was stuck regarding some credits issue, i might have to do something, which i'll be enquiring tomorrow first thing in the morning. Once i do an end-to-end test, i'll roll out a PR @anilmurty

@anilmurty
Copy link
Contributor Author

that is starting to look really good @kaushik-rishi - thanks for the update. LMK if you need more funds for deployment

@anilmurty
Copy link
Contributor Author

@ArthurEmma2 - are you interested in picking this up?

@ArthurEmma2
Copy link
Contributor

@ArthurEmma2 - are you interested in picking this up?

Sure

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
product/console ready-for-community-dev This issue is ready for someone in the community to work on
Projects
None yet
Development

No branches or pull requests

6 participants