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

Match the Infrastructure details page design with Figma design #1291

Open
gorkem-bwl opened this issue Dec 5, 2024 · 31 comments · May be fixed by #1361
Open

Match the Infrastructure details page design with Figma design #1291

gorkem-bwl opened this issue Dec 5, 2024 · 31 comments · May be fixed by #1361
Assignees
Labels
design Design related frontend
Milestone

Comments

@gorkem-bwl
Copy link
Contributor

Currently there are a few missing decorations in the Infrastructure design page.

Here is the Infra details page:

image

This is the Figma design page:

image

You need to fix fonts and add subtle background elements to the gauge elements.

Charts look fine, no need to touch them.

@gorkem-bwl gorkem-bwl added design Design related frontend labels Dec 5, 2024
@gorkem-bwl gorkem-bwl modified the milestones: 2.1, 2.0.1 Dec 5, 2024
@pratikshelar546
Copy link

I would like to work on it

@gorkem-bwl
Copy link
Contributor Author

Yep, go ahead @pratikshelar546 - make sure you share your final design before opening a PR for this. In case of doubt (e.g use of colors, fonts, components etc) please ask.

@pratikshelar546
Copy link

@gorkem-bwl sure started the work

@pratikshelar546
Copy link

pratikshelar546 commented Dec 7, 2024

is there any way to get dummy data

i tried every possible way to get data and reach to this page but failed

@gorkem-bwl
Copy link
Contributor Author

is there any way to get dummy data

i tried every possible way to get data and reach to this page but failed

You need to run the agent on a server to receive server side infrastructure data. I have necessary credentials and a secret for this. Please send an email to [email protected] so you can enter this information, and get real data from a server.

@pratikshelar546
Copy link

hello @ajhollid i am facing some issues to fix this issue. I'm not able to reach this page can you please help me into it and doing setup

@gorkem-bwl
Copy link
Contributor Author

@pratikshelar546 can you write here what you did, step by step, what the output was, and where you are stuck? This is important to make sure Alex can pinpoint your problem.

@ajhollid
Copy link
Collaborator

ajhollid commented Dec 9, 2024

hello @ajhollid i am facing some issues to fix this issue. I'm not able to reach this page can you please help me into it and doing setup

Hi @pratikshelar546 ,

As @gorkem-bwl mentioned you need to run the Capture agent on the target that you want to monitor.

The easiest way to do this is just run the Capture agent on your local machine and point a monitor to http://localhost:59323/api/v1/metrics

The other options is to use our test server, you can reach out to the email address @gorkem-bwl provided above for credentials.

@gorkem-bwl
Copy link
Contributor Author

Yep, I just provided @pratikshelar546 the credentials for our server so he can test it.

@pratikshelar546 let me know if you are successful in connecting.

@pratikshelar546
Copy link

Hi @gorkem-bwl and @ajhollid,

Thank you both for your help!

@ajhollid, if you’re available and comfortable, could we connect on Slack to discuss the setup?

Apologies for taking up so much of your time with this!

@ajhollid
Copy link
Collaborator

ajhollid commented Dec 9, 2024

Hi @pratikshelar546 ,

Walking you through the set up is beyond the scope of what I can help with, but if you have a specific issue with the setup that is causing a problem you can post it here and I can take a look.

The developer setup documentation is quite thorough and should provide all the information you need to get running.

@pratikshelar546
Copy link

Hi @ajhollid,

I followed all the steps mentioned in the document, and the app is running successfully. However, I encountered an issue:

I created an infrastructure to reach its details page, but the infrastructure's status remains pending. Since it’s not fully up, I am unable to access its details page.

Additionally, I noticed a mention about running the Capture agent on the target infrastructure that I want to monitor. Could you please confirm if this is a required step? If so, could you provide additional guidance on how to set it up?

Lastly, I received a URL from @gorkem-bwl. Could you clarify where exactly I need to use that URL in this process? I have already followed the steps mentioned in the Capture repository.

Thank you for your assistance!

@gorkem-bwl
Copy link
Contributor Author

I'll leave the "pending" issue to Alex.

Lastly, I received a URL from @gorkem-bwl. Could you clarify where exactly I need to use that URL in this process? I have already followed the steps mentioned in the Capture repository.

In fact, you should already have done this from what I read in your message above. When you go to Infrastructure from the sidebar, you'll see nothing has been added yet. When you add the URL I gave you together with the secret, you should see the data flowing in from that server. You don't need to deploy Capture on another server/Linux docker instance.

HTH.

@pratikshelar546
Copy link

@gorkem-bwl Thank you for the clarification! The issue is now resolved, and I can see the data flowing in as expected. I can now focus on fixing the UI.

Thanks again for your help!

image

@gorkem-bwl
Copy link
Contributor Author

Yep! That's it!

@pratikshelar546
Copy link

Hi @gorkem-bwl,

I've updated the design. Could you please take a look and let me know if there are any changes that could further improve the UI?

image

@gorkem-bwl
Copy link
Contributor Author

Can you please also send the light theme? The dark theme is difficult to get an understanding of the UI details.

Is there an issue connecting to the server? It seems like the dashboard doesn't get data.

@pratikshelar546
Copy link

pratikshelar546 commented Dec 10, 2024

i followed all the steps that mention in document and put the details that you shared with me.
server is running with 0 errors in console.
how can i debug to get data from server?

image

@gorkem-bwl
Copy link
Contributor Author

I am sorry - it should be http://64.23.145.13:5001/api/v1/metrics (please add /metrics at the end).

@pratikshelar546
Copy link

I've updated the URL

Please check the UI in light mode and let me know if any adjustments are needed.

image

@gorkem-bwl
Copy link
Contributor Author

Can you double check the Figma file again, as there are subtle background colors in "Used" / "Total" numbers?

@gorkem-bwl
Copy link
Contributor Author

Those are the areas that require a modification. Basically in the cards, the font weights should be modified. Memory usage and CPU usage cards have a few more details like background and smaller fonts. Please make sure you check if those fonts are available in our font styles as well.

image

@pratikshelar546
Copy link

Sure I will do necessary changes and if I need help regarding font and colors I'll reach out here

@pratikshelar546
Copy link

pratikshelar546 commented Dec 10, 2024

hi @gorkem-bwl I have made the changes you suggested.
image

@gorkem-bwl
Copy link
Contributor Author

Can you double check colors with Figma?

image image

@pratikshelar546
Copy link

Updated
image

@gorkem-bwl
Copy link
Contributor Author

Looks good! Thanks. Please send a PR.

@pratikshelar546
Copy link

I'd like to extend my gratitude to @gorkem-bwl and @ajhollid for their support. I'm excited to submit my first pull request to Checkmate and look forward to contributing more in the future.

asking one noob question i have to take pull from develop branch before creating pull request?

@gorkem-bwl
Copy link
Contributor Author

asking one noob question i have to take pull from develop branch before creating pull request?

Should be it. A core team member will respond if that's not the case.

@gorkem-bwl
Copy link
Contributor Author

@pratikshelar546 confirmed that you need to pull from develop branch.

@pratikshelar546
Copy link

@gorkem-bwl Thank you for confirming. I have already taken a pull from the develop branch, there is no conflicts, pushed my changes, and successfully raised a PR. Please let me know if there's anything else required.

@pratikshelar546 pratikshelar546 linked a pull request Dec 11, 2024 that will close this issue
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design related frontend
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants