@patternfly/react-core#EmptyStateSecondaryActions JavaScript Examples

The following examples show how to use @patternfly/react-core#EmptyStateSecondaryActions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: tablestates.js    From ibutsu-server with MIT License 6 votes vote down vote up 
render() {
    return (
      <Bullseye>
        <EmptyState>
          <EmptyStateIcon icon={SearchIcon} />
          <Title headingLevel="h5" size="lg">No results found</Title>
          {!!this.props.onClearFilters &&
          <React.Fragment>
            <EmptyStateBody>
              No results match this filter criteria. Clear all filters to show results.
            </EmptyStateBody>
            <EmptyStateSecondaryActions>
              <Button variant="link" onClick={this.props.onClearFilters}>Clear all filters</Button>
            </EmptyStateSecondaryActions>
          </React.Fragment>
          }
        </EmptyState>
      </Bullseye>
    );
  }
Example #2
Source File: tablestates.js    From ibutsu-server with MIT License 6 votes vote down vote up 
render() {
    return (
      <Bullseye>
        <EmptyState>
          <EmptyStateIcon icon={ErrorCircleOIcon} />
          <Title headingLevel="h5" size="lg">Error occurred fetching results</Title>
          {!!this.props.onClearFilters &&
          <React.Fragment>
            <EmptyStateBody>
              An error occurred while fetching results. Try a different set of filters.
            </EmptyStateBody>
            <EmptyStateSecondaryActions>
              <Button variant="link" onClick={this.props.onClearFilters}>Clear all filters</Button>
            </EmptyStateSecondaryActions>
          </React.Fragment>
          }
        </EmptyState>
      </Bullseye>
    );
  }
Example #3
Source File: InactiveServicePage.js    From cockpit-wicked with GNU General Public License v2.0 6 votes vote down vote up 
InactiveServicePage = () => {
    return (
        <EmptyState>
            <EmptyStateIcon icon={AlertIcon} />
            <Title headingLevel="h4" size="lg">
                {_("Wicked service is not active")}
            </Title>
            <EmptyStateBody>
                <p>
                    {_(`Seems that wicked service is not active. It could be either, the service is
                    not running or wicked is not installed.`)}
                </p>
                <p>
                    {_("For more help, please check the documentation linked below.")}
                </p>
            </EmptyStateBody>

            <EmptyStateSecondaryActions>
                <ExternalLink href="https://en.opensuse.org/Portal:Wicked">
                    openSUSE Wicked Portal
                </ExternalLink>
                <ExternalLink href="https://github.com/openSUSE/wicked/wiki/FAQ">
                    Wicked FAQ
                </ExternalLink>
                <ExternalLink href="https://github.com/openSUSE/wicked">
                    Public Wicked Repository
                </ExternalLink>
            </EmptyStateSecondaryActions>
        </EmptyState>
    );
}
Example #4
Source File: Empty.js    From edge-frontend with Apache License 2.0 5 votes vote down vote up 
Empty = ({
  bgColor,
  icon,
  title,
  body,
  primaryAction,
  secondaryActions,
}) => (
  <EmptyState variant="large" style={{ backgroundColor: bgColor || '' }}>
    {icon && <EmptyStateIcon icon={iconMapper[icon]} />}
    <Title headingLevel="h4" size="lg">
      {title}
    </Title>
    <EmptyStateBody>{body}</EmptyStateBody>
    {primaryAction && (
      <>
        {primaryAction.href ? (
          <Button component={Link} to={primaryAction.href}>
            {primaryAction.text}
          </Button>
        ) : (
          <Button onClick={primaryAction.click} variant="primary">
            {primaryAction.text}
          </Button>
        )}
      </>
    )}
    <EmptyStateSecondaryActions>
      {secondaryActions.map(({ type, title, link, onClick }, index) => (
        <Button
          component={type === 'link' ? 'a' : 'button'}
          href={link}
          variant="link"
          target={type === 'link' ? '_blank' : ''}
          key={index}
          onClick={onClick}
        >
          {title}
          {link && <ExternalLinkAltIcon className="pf-u-ml-sm" />}
        </Button>
      ))}
    </EmptyStateSecondaryActions>
  </EmptyState>
)