[Exploratory View]added loading state for metric selector (#115748)
Co-authored-by: Dominique Clarke <doclarke71@gmail.com>
This commit is contained in:
parent
acf0426194
commit
4a92e3bc36
|
@ -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',
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue