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
kubevirt: move VmStatus from web-ui-components #2924
kubevirt: move VmStatus from web-ui-components #2924
Conversation
@andybraren , wdyt about this change, please? As the PF4 via pf-react icons are used here, the colours are gone (green for Recently, even the icon is part of the link. |
Correct, the icons should continue to be their normal green/red/yellow colors even when Status Popovers are available - only the text should turn blue. The icon being clickable sounds correct too. @jtomasek would you be able to advise? I assume the |
@andybraren , thanks, I will add the colors back. The |
@andybraren , wdyt? |
</PopoverStatus> | ||
); | ||
|
||
const VmStatusInProgress: React.FC<VmStatusSpecificProps> = (props) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are already ProgressStatus
, ErrorStatus
and Status
components which should be reused here. With those you wouldn't have to define the icons any more. Each of these components takes children
prop which then becomes a content of the popover.
Feel free to add new PendingStatus
component as that seems to be used quite frequently as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
return labelValue ? ` (${labelValue})` : null; | ||
}; | ||
|
||
const VmStatusPopover: React.FC<VmStatusPopoverProps> = ({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This could be converted to VmStatusPopoverContent
and be used as children for the status components (see below)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
<VmStatusError | ||
title="Import error (VMware)" | ||
message={IMPORTING_ERROR_VMWARE_MESSAGE} | ||
linkMessage={VIEW_VM_EVENTS} | ||
linkTo={linkToVMEvents} | ||
> | ||
{statusDetail.message} | ||
{additionalText} | ||
</VmStatusError> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<VmStatusError | |
title="Import error (VMware)" | |
message={IMPORTING_ERROR_VMWARE_MESSAGE} | |
linkMessage={VIEW_VM_EVENTS} | |
linkTo={linkToVMEvents} | |
> | |
{statusDetail.message} | |
{additionalText} | |
</VmStatusError> | |
<ErrorStatus title="Import error (VMware)"> | |
<VmStatusPopoverContent | |
title="Import error (VMware)" | |
message={IMPORTING_ERROR_VMWARE_MESSAGE} | |
linkMessage={VIEW_VM_EVENTS} | |
linkTo={linkToVMEvents} | |
> | |
{statusDetail.message} | |
{additionalText} | |
</VmStatusPopoverContent> | |
</ErrorStatus> | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
}; | ||
|
||
const PendingStatus: React.FC<PendingStatusProps> = (props) => { | ||
const icon = <HourglassHalfIcon />; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In a follow-up, I will refactor these components to reuse shared code.
I moved this PR on top of #2930 |
Rebased |
Colors look correct, thank you @mareklibra! FYI @matthewcarleton |
/retest |
@@ -7,23 +7,22 @@ import { | |||
import { | |||
global_warning_color_100 as warningColor, | |||
global_danger_color_100 as dangerColor, | |||
chart_color_green_400 as okColor, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a global_success_color_100 instead of chart_color_green_400? I'm not sure what the values are for these but using a chart variable for an icon could cause issues. There is a var(--pf-global--success-color--100) available but I'm not sure if these are 1-1. There is also var(--pf-global--success-color--200) which might be more appropriate.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch Matt! var(--pf-global--success-color--200)
looks best here, this should probably be fixed Console-wide.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This comes from #2930, I will fix there
#2930 is merged now, so rebased here |
/retest |
1 similar comment
/retest |
return labelValue ? ` (${labelValue})` : null; | ||
}; | ||
|
||
const VmStatusPopoverContent: React.FC<VmStatusPopoverContentProps> = ({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const VmStatusPopoverContent: React.FC<VmStatusPopoverContentProps> = ({ | |
const VMStatusPopoverContent: React.FC<VMStatusPopoverContentProps> = ({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
const getAdditionalImportText = (pod: PodKind): string => { | ||
const labels = getLabels(pod, {}); | ||
const labelValue = labels[`${CDI_KUBEVIRT_IO}/${STORAGE_IMPORT_PVC_NAME}`]; | ||
return labelValue ? ` (${labelValue})` : null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return labelValue ? ` (${labelValue})` : null; | |
return labelValue ? `(${labelValue})` : null; |
The extra space can be handled in JSX as {' '}
if necessary.
String concatenation shouldn't be a concern of getAdditionalImportText
function, but rather a concern of code that uses it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
</> | ||
); | ||
|
||
export const VmStatus: React.FC<VmStatusProps> = ({ vm, pods, migrations, verbose = false }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export const VmStatus: React.FC<VmStatusProps> = ({ vm, pods, migrations, verbose = false }) => { | |
export const VMStatus: React.FC<VMStatusProps> = ({ vm, pods, migrations, verbose = false }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
linkMessage={VIEW_VM_EVENTS} | ||
linkTo={linkToVMEvents} | ||
> | ||
{statusDetail.message} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{statusDetail.message} | |
{statusDetail.message}{' '} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
linkMessage={VIEW_VM_EVENTS} | ||
linkTo={linkToVMEvents} | ||
> | ||
{statusDetail.message} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{statusDetail.message} | |
{statusDetail.message}{' '} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
|
||
const getId = (value) => `${getNamespace(value)}-${getName(value)}`; | ||
|
||
export const VmStatuses: React.FC<VmStatusesProps> = (props) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export const VmStatuses: React.FC<VmStatusesProps> = (props) => { | |
export const VMStatuses: React.FC<VMStatusesProps> = (props) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
return ( | ||
<> | ||
{importerPods.map((pod) => ( | ||
<div key={getId(pod)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we really need the <div>
wrapper?
If not, you can simply declare the key
prop on <VMStatus>
below.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The VMStatus
can (rarely) render React.Fragment
with text. So this div
ensures the statuses to be shown one per line.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we could use pod.metadata.uid
instead
<div key={getId(pod)}> | |
<div key={pod.metadata.uid}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why? The reason for getId
helper is to have a common way to access metadata.uid
on a resource.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is using getId
https://github.com/openshift/console/pull/2924/files#diff-c4803c82c2975654bafdd7fdc6c394a7R10 not getUID
selector. Im proposing to use pod's uid
as key
and sure, we can use getUID
selector for that
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see, thanks for clarifying @rawagner
))} | ||
</> | ||
); | ||
default: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this (empty) default
clause needed, given the code below?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
The VmStatus component is migrated from the web-ui-components library to openshift/console and addapted to codestyle here and PF4.
/retest |
1 similar comment
/retest |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just a two nits, not blocking
} | ||
}; | ||
|
||
type VmStatusesProps = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
type VmStatusesProps = { | |
type VMStatusesProps = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done: #3058
return ( | ||
<> | ||
{importerPods.map((pod) => ( | ||
<div key={getId(pod)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we could use pod.metadata.uid
instead
<div key={getId(pod)}> | |
<div key={pod.metadata.uid}> |
/lgtm |
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: jtomasek, mareklibra, rawagner The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
/retest Please review the full test history for this PR and help us cut down flakes. |
2 similar comments
/retest Please review the full test history for this PR and help us cut down flakes. |
/retest Please review the full test history for this PR and help us cut down flakes. |
The VmStatus component is migrated from the web-ui-components library to openshift/console and addapted to codestyle here and PF4.
Depends on: