message: Fix inconsistent error messaging
diff: import * as React from 'react';
  import Iframe from 'react-iframe';
  import * as API from '../../services/Api';
  -import { ToastNotification, ToastNotificationList } from 'patternfly-react';
  +import { Alert, EmptyState, EmptyStateTitle, EmptyStateIcon } from 'patternfly-react';
  type ServiceJaegerState = {
  height: string;
  @@ -11,6 +11,21 @@ type ServiceJaegerState = {
  errorMsg: string;
  };
  +const EmptyStatePage = ({ title }) => (
  + <>
  + <h2>Distributed Tracing</h2>
  + <Alert>{title}</Alert>
  + <EmptyState>
  + <EmptyStateIcon name="info" />
  + <EmptyStateTitle>
  + Distributed Tracing is not available.
  + <br />
  + This could mean that we couldn't communicate to the service.
  + </EmptyStateTitle>
  + </EmptyState>
  + </>
  +);
  +
  class ServiceJaegerPage extends React.Component<{}, ServiceJaegerState> {
  constructor(props: {}) {
  super(props);
  @@ -32,7 +47,7 @@ class ServiceJaegerPage extends React.Component<{}, ServiceJaegerState> {
  .catch(error => {
  this.setState({
  error: true,
  - errorMsg: API.getErrorMsg('Could not fetch Jaeger info.', error)
  + errorMsg: API.getErrorMsg('Could not fetch Jaeger info', error)
  });
  console.log(error);
  });
  @@ -49,16 +64,7 @@ class ServiceJaegerPage extends React.Component<{}, ServiceJaegerState> {
  render() {
  return (
  <div className="container-fluid container-pf-nav-pf-vertical">
  - {this.state.error ? (
  - <ToastNotificationList>
  - <ToastNotification type="danger">
  - <span>
  - <strong>Error </strong>
  - {this.state.errorMsg}
  - </span>
  - </ToastNotification>
  - </ToastNotificationList>
  - ) : null}
  + {this.state.error ? <EmptyStatePage title={this.state.errorMsg} /> : null}
  <div className="container-fluid container-cards-pf">
  <Iframe
  url={this.state.jaegerURL}
  