message: Show "No data available" on empty metrics
  This applies the "No data" design available at
diff: import * as React from 'react';
  import { LineChart, Icon } from 'patternfly-react';
  +import { InfoAltIcon } from '@patternfly/react-icons';
  import { style } from 'typestyle';
  import { format } from 'd3-format';
  import { TimeSeries, Metric, AllPromLabelsValues } from '../../types/Metrics';
  +const chartHeight = 350;
  +
  type MetricsChartBaseProps = {
  chartName: string;
  unit: string;
  @@ -18,6 +21,27 @@ const expandBlockStyle = style({
  textAlign: 'right'
  });
  +const emptyMetricsStyle = style({
  + width: '100%',
  + height: chartHeight,
  + textAlign: 'center',
  + $nest: {
  + '& > p': {
  + font: '14px sans-serif',
  + margin: 0
  + },
  + '& div': {
  + width: '100%',
  + height: 'calc(100% - 5ex)',
  + backgroundColor: '#fafafa',
  + border: '1px solid #d1d1d1'
  + },
  + '& div p:first-child': {
  + marginTop: '8ex'
  + }
  + }
  +});
  +
  interface C3ChartData {
  x: string;
  columns: any[][];
  @@ -156,17 +180,18 @@ abstract class MetricsChartBase<Props extends MetricsChartBaseProps> extends Rea
  render() {
  const data = this.getSeriesData();
  + const hasData = this.hasData(data);
  this.checkUnload(data);
  - const height = 350;
  // Note: if any direct interaction is needed with the C3 chart,
  // use "oninit" hook and reference "this" as the C3 chart object.
  // see commented code
  const self = this;
  return (
  - <div key={this.getControlKey()} style={{ height: '100%' }}>
  - {this.props.onExpandRequested && this.renderExpand()}
  + <div key={this.getControlKey()}>
  + {this.props.onExpandRequested && hasData && this.renderExpand()}
  + {hasData ? (
  <LineChart
  - style={{ height: this.props.onExpandRequested ? height : '99%' }}
  + style={{ height: this.props.onExpandRequested ? chartHeight : '99%' }}
  id={this.props.chartName}
  title={{ text: this.props.chartName }}
  data={data}
  @@ -178,10 +203,18 @@ abstract class MetricsChartBase<Props extends MetricsChartBaseProps> extends Rea
  this.config.axis_x_tick_count = scaleInfo.count;
  this.config.axis_x_tick_format = scaleInfo.format;
  }}
  - // oninit={function(this: any) {
  - // self.chartRef = this;
  - // }}
  />
  + ) : (
  + <div className={emptyMetricsStyle}>
  + <p>{this.props.chartName}</p>
  + <div>
  + <p>
  + <InfoAltIcon />
  + </p>
  + <p>No data available</p>
  + </div>
  + </div>
  + )}
  </div>
  );
  }
  @@ -206,6 +239,14 @@ abstract class MetricsChartBase<Props extends MetricsChartBaseProps> extends Rea
  };
  }
  + private hasData(data: C3ChartData): boolean {
  + // Get "x", which has the timestamps
  + const timestamps = data.columns.find(val => val[0] === data.x);
  +
  + // If there are timestamps, assume there is data
  + return !!(timestamps && timestamps.length > 1);
  + }
  +
  private scaledAxisInfo() {
  if ((window.innerWidth * this.props.spans) / 12 < 450) {
  return {
  