Skip to content
This repository has been archived by the owner on Apr 28, 2020. It is now read-only.

Add status component #416

Merged
merged 2 commits into from
Apr 29, 2019
Merged

Add status component #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
937079d
Add status component
rawagner Apr 25, 2019
70c15ad
Use css margin instead of <br>
rawagner Apr 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions sass/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@
@import './components/Form/dropdown';
@import './components/Form/form-group';
@import './components/Form/list-form-factory';
@import './components/HostStatus/host-status';
@import './components/Table/editable-table-actions';
@import './components/Table/editable-table';
@import './components/TemplateSource/template-source';
@import './components/VmConsoles/desktop-viewer-selector';
@import './components/VmDetails/boot-order';
@import './components/VmDetails/vm-details';
@import './components/VmStatus/vm-status';
@import './components/Wizard/create-vm-wizard';
@import './components/Wizard/wizard';
@import './components/ConfigurationSummary/configuration-summary';
Expand All @@ -35,6 +33,8 @@
@import './components/CreateBaremetalHostDialog/create-baremetal-host-dialog';
@import './components/StorageOverview/data-resiliency';
@import './components/StorageOverview/top-consumer';
@import './components/Status/status';
@import './components/HostStatus/host-status';

/*
TODO: these styles should be backported to the corresponding PF-React package
Expand Down
8 changes: 6 additions & 2 deletions sass/components/HostStatus/host-status.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.kubevirt-host-status__icon {
margin-right: 5px;
.kubevirt-host-status__description {
margin-bottom: 1em;
}

.kubevirt-host-status__reason {
margin-bottom: 1em;
}
8 changes: 8 additions & 0 deletions sass/components/Status/status.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.kubevirt-status__icon {
margin-right: 5px;
}

.kubevirt-status__button {
padding: 0;
margin: 0;
}
3 changes: 0 additions & 3 deletions sass/components/VmStatus/vm-status.scss
View file
Open in desktop

This file was deleted.

43 changes: 21 additions & 22 deletions src/components/BareMetalHosts/StatusComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Popover } from '@patternfly/react-core';
import { Icon } from 'patternfly-react';

export const IconAndText = ({ icon, text }) => (
<React.Fragment>
<Icon type="pf" name={icon} className="kubevirt-host-status__icon" />
{text}
</React.Fragment>
);

IconAndText.propTypes = {
icon: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
};
import { Status, OverlayStatus } from '../Status';

// Generic status component as a fallback
export const GenericStatus = ({ status, text, errorMessage }) => text;
Expand All @@ -29,38 +18,48 @@ GenericStatus.defaultProps = {
};

// Generic success status component
export const GenericSuccess = ({ status, text, errorMessage }) => <IconAndText icon="ok" text={text} />;
export const GenericSuccess = ({ status, text, errorMessage }) => <Status icon="ok">{text}</Status>;

GenericSuccess.propTypes = GenericStatus.propTypes;
GenericSuccess.defaultProps = GenericStatus.defaultProps;

const ErrorOverlay = ({ errorMessage }) => (
<Popover position="right" size="regular" title="Errors">
<div>{errorMessage}</div>
</Popover>
);

ErrorOverlay.propTypes = {
errorMessage: PropTypes.string,
};

ErrorOverlay.defaultProps = {
errorMessage: null,
};

// Generic error status component
// If the errorMessage property isn't empty its contents are
// shown in a Popover.
export const GenericError = ({ status, text, errorMessage }) =>
errorMessage ? (
<Popover position="right" size="regular" headerContent={<div>Errors</div>} bodyContent={errorMessage}>
<IconAndText icon="error-circle-o" text={text} />
</Popover>
<OverlayStatus icon="error-circle-o" text={text} overlay={<ErrorOverlay errorMessage={errorMessage} />} />
) : (
<IconAndText icon="error-circle-o" text={text} />
<Status icon="error-circle-o">{text}</Status>
);

GenericError.propTypes = GenericStatus.propTypes;
GenericError.defaultProps = GenericStatus.defaultProps;

// Generic progress status component
export const GenericProgress = ({ status, text, errorMessage }) => <IconAndText icon="in-progress" text={text} />;
export const GenericProgress = ({ status, text, errorMessage }) => <Status icon="in-progress">{text}</Status>;

GenericProgress.propTypes = GenericStatus.propTypes;
GenericProgress.defaultProps = GenericStatus.defaultProps;

// Validation Error component
// (TODO) Add details for validation errors in Popover component
export const ValidationError = ({ status, text, errorMessage }) => (
<Popover position="right" size="regular" headerContent={<div>Errors</div>} bodyContent={errorMessage}>
<IconAndText icon="error-circle-o" text={text} />
</Popover>
<OverlayStatus icon="error-circle-o" text={text} overlay={<ErrorOverlay errorMessage={errorMessage} />} />
);

ValidationError.propTypes = {
Expand All @@ -71,6 +70,6 @@ ValidationError.propTypes = {

export const AddDiscoveredHostLink = host => (
<a>
<IconAndText icon="add-circle-o" text="Add host" />
<Status icon="add-circle-o">Add host</Status>
</a>
);
100 changes: 32 additions & 68 deletions src/components/BareMetalHosts/tests/__snapshots__/StatusComponents.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,96 +2,60 @@

exports[`<AddDiscoveredHostLink /> renders a link to add discovered host 1`] = `
<a>
<IconAndText
<Status
icon="add-circle-o"
text="Add host"
/>
>
Add host
</Status>
</a>
`;

exports[`<GenericError /> renders an error message 1`] = `
<IconAndText
<Status
icon="error-circle-o"
text="Registration Error"
/>
>
Registration Error
</Status>
`;

exports[`<GenericError /> with details renders an error message with details 1`] = `
<Popover
appendTo={[Function]}
aria-label=""
bodyContent="some error details"
className={null}
closeBtnAriaLabel="Close"
enableFlip={true}
headerContent={
<div>
Errors
</div>
<OverlayStatus
icon="error-circle-o"
overlay={
<ErrorOverlay
errorMessage="some error details"
/>
}
hideOnOutsideClick={true}
isVisible={null}
onHidden={[Function]}
onHide={[Function]}
onMount={[Function]}
onShow={[Function]}
onShown={[Function]}
position="right"
shouldClose={[Function]}
size="regular"
zIndex={9999}
>
<IconAndText
icon="error-circle-o"
text="Registration Error"
/>
</Popover>
text="Registration Error"
/>
`;

exports[`<GenericProgress /> renders a progress message 1`] = `
<IconAndText
<Status
icon="in-progress"
text="Provisioning"
/>
>
Provisioning
</Status>
`;

exports[`<GenericStatus /> renders a generic status string 1`] = `"Provisioned"`;

exports[`<GenericSuccess /> renders a success message 1`] = `
<IconAndText
<Status
icon="ok"
text="Provisioned"
/>
>
Provisioned
</Status>
`;

exports[`<ValidationError /> renders a validation error 1`] = `
<Popover
appendTo={[Function]}
aria-label=""
bodyContent="some validation errors"
className={null}
closeBtnAriaLabel="Close"
enableFlip={true}
headerContent={
<div>
Errors
</div>
<OverlayStatus
icon="error-circle-o"
overlay={
<ErrorOverlay
errorMessage="some validation errors"
/>
}
hideOnOutsideClick={true}
isVisible={null}
onHidden={[Function]}
onHide={[Function]}
onMount={[Function]}
onShow={[Function]}
onShown={[Function]}
position="right"
shouldClose={[Function]}
size="regular"
zIndex={9999}
>
<IconAndText
icon="error-circle-o"
text="Validation Error(s)"
/>
</Popover>
text="Validation Error(s)"
/>
`;
24 changes: 12 additions & 12 deletions src/components/Details/VmDetails/tests/__snapshots__/VmDetails.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -251,7 +251,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -450,7 +450,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -655,7 +655,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-on-running"
class="pficon pficon-on-running kubevirt-status__icon"
/>
Running
</div>
Expand Down Expand Up @@ -862,7 +862,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -1037,7 +1037,7 @@ exports[`<VmDetails /> renders correctly as overview 1`] = `
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-on-running"
class="pficon pficon-on-running kubevirt-status__icon"
/>
Running
</div>
Expand Down Expand Up @@ -1243,7 +1243,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -1430,7 +1430,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -1629,7 +1629,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -1818,7 +1818,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down Expand Up @@ -2021,7 +2021,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-on-running"
class="pficon pficon-on-running kubevirt-status__icon"
/>
Running
</div>
Expand Down Expand Up @@ -2228,7 +2228,7 @@ Array [
<div>
<span
aria-hidden="true"
class="kubevirt-vm-status__icon pficon pficon-off"
class="pficon pficon-off kubevirt-status__icon"
/>
Off
</div>
Expand Down
Loading