[Exploratory View]added loading state for metric selector (#115748)

Co-authored-by: Dominique Clarke <doclarke71@gmail.com>
This commit is contained in:
Shahzad 2021-10-28 12:36:27 +02:00 committed by GitHub
parent acf0426194
commit 4a92e3bc36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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 <EuiText>{NO_DATA_AVAILABLE}</EuiText>;
}
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}
</EuiButton>
@ -107,19 +114,23 @@ export function ReportMetricOptions({ seriesId, series, seriesConfig }: Props) {
</EuiListGroup>
</EuiPopover>
)}
{series.selectedMetricField && (
<EuiBadge
iconType="cross"
iconSide="right"
iconOnClick={() => onChange(undefined)}
iconOnClickAriaLabel={REMOVE_REPORT_METRIC_LABEL}
>
{
seriesConfig?.metricOptions?.find((option) => option.id === series.selectedMetricField)
?.label
}
</EuiBadge>
)}
{series.selectedMetricField &&
(indexPattern && !loading ? (
<EuiBadge
iconType="cross"
iconSide="right"
iconOnClick={() => onChange(undefined)}
iconOnClickAriaLabel={REMOVE_REPORT_METRIC_LABEL}
>
{
seriesConfig?.metricOptions?.find(
(option) => option.id === series.selectedMetricField
)?.label
}
</EuiBadge>
) : (
<EuiLoadingSpinner />
))}
</>
);
}
@ -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',
});