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

Co-authored-by: Dominique Clarke <[email protected]>
elastic · Oct 28, 2021 · b6aa7c2 · b6aa7c2
1 parent 68be5c2
commit b6aa7c2
Showing 1 changed file with 29 additions and 14 deletions.
diff --git a/...ability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx b/...ability/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 <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',
+});