diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx index 496e7a10f9c4..eca18f0eb0dd 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx @@ -13,6 +13,8 @@ import { EuiListGroup, EuiListGroupItem, EuiBadge, + EuiText, + EuiLoadingSpinner, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -33,7 +35,7 @@ export function ReportMetricOptions({ seriesId, series, seriesConfig }: Props) { const [showOptions, setShowOptions] = useState(false); const metricOptions = seriesConfig?.metricOptions; - const { indexPatterns } = useAppIndexPatternContext(); + const { indexPatterns, loading } = useAppIndexPatternContext(); const onChange = (value?: string) => { setSeries(seriesId, { @@ -78,6 +80,10 @@ export function ReportMetricOptions({ seriesId, series, seriesConfig }: Props) { }; }); + if (!indexPattern && !loading) { + return {NO_DATA_AVAILABLE}; + } + return ( <> {!series.selectedMetricField && ( @@ -88,6 +94,7 @@ export function ReportMetricOptions({ seriesId, series, seriesConfig }: Props) { onClick={() => setShowOptions((prevState) => !prevState)} fill size="s" + isLoading={!indexPattern && loading} > {SELECT_REPORT_METRIC_LABEL} @@ -107,19 +114,23 @@ export function ReportMetricOptions({ seriesId, series, seriesConfig }: Props) { )} - {series.selectedMetricField && ( - onChange(undefined)} - iconOnClickAriaLabel={REMOVE_REPORT_METRIC_LABEL} - > - { - seriesConfig?.metricOptions?.find((option) => option.id === series.selectedMetricField) - ?.label - } - - )} + {series.selectedMetricField && + (indexPattern && !loading ? ( + onChange(undefined)} + iconOnClickAriaLabel={REMOVE_REPORT_METRIC_LABEL} + > + { + seriesConfig?.metricOptions?.find( + (option) => option.id === series.selectedMetricField + )?.label + } + + ) : ( + + ))} ); } @@ -137,3 +148,7 @@ const REMOVE_REPORT_METRIC_LABEL = i18n.translate( defaultMessage: 'Remove report metric', } ); + +const NO_DATA_AVAILABLE = i18n.translate('xpack.observability.expView.seriesEditor.noData', { + defaultMessage: 'No data available', +});