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

Fixes #37478 - Add host power status column to new All Hosts page #10171

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

jeremylenz
Copy link
Contributor

@jeremylenz jeremylenz commented May 16, 2024

image

This adds a Power Status column to the new All Hosts page.

Since there is no bulk endpoint for power status, I decided to use the existing API endpoint /hosts/power.

  • Displays a skeleton while loading
  • If we've already received and stored a host's power status, don't request it again (unless you refresh your browser page).
  • Because of the above, we should avoid anything more than per_page API requests at a time. This seems reasonable to me.

I added a fake delay and random power status for ease of testing. This will wait 1-4 seconds and give you a random power status back. This way you can see what it looks like when requests come in at different times.

The old page had red for powered off, but I decided to go with black here; it seems a bit less harsh.

I used the PF4-recommended icons for denoting "powered on," "powered off," and "unknown state."

@@ -10,6 +10,7 @@ class PowerStatus < Base

def power_state(timeout = DEFAULT_TIMEOUT)
result = { id: host.id }.merge(HOST_POWER[:na])
return random_power_state
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this commit to make testing easier. Will remove it once acked. You can comment out this line to switch back to returning the real power status.

Comment on lines 32 to 55
const green = '#6ec664';
const disabledGray = '#d2d2d2';
switch (state) {
case 'on':
powerIcon = (
<span style={{ ...moveItALittleUp, color: green }}>
<PowerOnIcon title={tooltipText} />
</span>
);
break;
case 'off':
powerIcon = (
<span style={{ ...moveItALittleUp }}>
<PowerOffIcon title={tooltipText} />
</span>
);
break;
default:
powerIcon = (
<span style={{ ...moveItALittleUp, color: disabledGray }}>
<UnknownIcon title={tooltipText} />
</span>
);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use icon status instead of hardcoding colors https://v4-archive.patternfly.org/v4/components/icon#status-colors

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The old page has colored power icons. The PF4 status icons aren't power icons so it would be confusing to use, for example, a "success" icon to mean power on.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use pf css variables to do that? I mostly dont want just string colors hashes in the code

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MariaAga Updated to use PF css variables. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants