Replace Node Finder table with node cards

[AlaaElattar]

Redesign Node Finder to display node cards similar to those used when deploying an app

[zaelgohary]

@AlaaElattar Can you be more specific?

[AlaaElattar]

@AlaaElattar Can you be more specific?

@xmonader wants node finder to look like node selection cards.
replace table with list of cards instead.

[xmonader]

@AlaaElattar Can you be more specific?

@xmonader wants node finder to look like node selection cards.
replace table with list of cards instead.

If possible 🙈

[zaelgohary]

@xmonader something like this?

Should the changes be applied in dedicated nodes page also, or only in node finder page?

[zaelgohary]

Work in progress:

Replaced table rows w node cards. Currently working on each card details.

[zaelgohary]

Work in Progress:

The node type used while deploying is different than the on used in nodes table which led to type mismatch and build failed. I'm still working on fixing the type errors.

[zaelgohary]

Work in progress:

Still working on fixing node types.

[AhmedHanafy725]

@ehab-hassan @zaelgohary

in addition to the current card details, the following details should be added too

• node status
• GPU
• shared, rentable, or rented
• uptime
• reserve button (maybe we can make this button always shown to the user. If the user is not logged in, we ask him to login to be able to reserve the node)
• CPU type Add processor type in card while selecting node #2055
• memory type integrate cpu and ram details in the dashboard #2427
• price Discounts rate and prices of dedicated node should be added in node finder. #2285
• network speed (up/down) visualize the node tests from iperf #1931

[zaelgohary]

Work in progress:

Worked on the card design.

[ehab-hassan]

maybe when hovering at CPU and Memory Chips show the rest of the details like the example at vast.ai

[zaelgohary]

I implemented the following design. I'm not yet sure of the chip colors but what do you think as a start? @ehab-hassan

GPU nodes:

The reserve button is not shown because none of the dedicated nodes are up. but it'll be just as shown in your screenshot.

Nodes list in solutions:

[ehab-hassan]

@zaelgohary nice!! are these the same color for status and type we used before?

and the rest is OK with gray and white text.

[khaledyoussef24]

verified on devnet
version : f530d72
cpu and ram details are now integrated in node finder
node finder tables are now replaced with node cards like the

https://app.testlodge.com/a/26076/projects/40893/suites/234374?expand_section=426661#case_4150459

[ramezsaeed]

@khaledyoussef24

• please reverify regading Hanafy's comment here: Replace Node Finder table with node cards #2057 (comment)
• and verifiy all related issues as well
• I can see "reserve button" is missing

[khaledyoussef24]

will wait for a dedicated node to be freed so i can verify

[A-Harby]

UI color need to be fixed in the light mode.

[A-Harby]

Can you also add a message when there are no nodes available for the filters, something like 'No nodes available" instead of an empty table?

[zaelgohary]

@khaledyoussef24 As for the reserve button, found some bugs and opened an issue for it. You can verify it once it's in verification

[khaledyoussef24]

verified on devnet
version : bef3f8f

there is a separate issue for the reserve button cards for the node finder is now verified .
message when there is no nodes are available is now added also

node cards