fix loading issues

elastic · Apr 8, 2021 · 7da240d · 7da240d
1 parent c8678ec
commit 7da240d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx
@@ -6,16 +6,14 @@
  */
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { EuiLoadingSpinner, EuiPanel, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiTitle } from '@elastic/eui';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { ObservabilityPublicPluginsStart } from '../../../plugin';
 import { ExploratoryViewHeader } from './header/header';
 import { SeriesEditor } from './series_editor/series_editor';
 import { useUrlStorage } from './hooks/use_url_storage';
 import { useLensAttributes } from './hooks/use_lens_attributes';
 import { EmptyView } from './components/empty_view';
-import { useIndexPatternContext } from './hooks/use_default_index_pattern';
 import { TypedLensByValueInput } from '../../../../../lens/public';
 
 export function ExploratoryView() {
@@ -27,8 +25,6 @@ export function ExploratoryView() {
     null
   );
 
-  const { indexPattern } = useIndexPatternContext();
-
   const LensComponent = lens?.EmbeddableComponent;
 
   const { firstSeriesId: seriesId, firstSeries: series } = useUrlStorage();
@@ -47,11 +43,6 @@ export function ExploratoryView() {
       {lens ? (
         <>
           <ExploratoryViewHeader lensAttributes={lensAttributes} seriesId={seriesId} />
-          {!indexPattern && (
-            <SpinnerWrap>
-              <EuiLoadingSpinner size="xl" />
-            </SpinnerWrap>
-          )}
           {lensAttributes && seriesId && series?.reportType && series?.time ? (
             <LensComponent
               id="exploratoryView"
@@ -77,10 +68,3 @@ export function ExploratoryView() {
     </EuiPanel>
   );
 }
-
-const SpinnerWrap = styled.div`
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
diff --git a/...ility/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx b/...ility/public/components/shared/exploratory_view/series_builder/columns/data_types_col.tsx
@@ -22,7 +22,7 @@ export const dataTypes: Array<{ id: AppDataType; label: string }> = [
 export function DataTypesCol() {
   const { series, setSeries, removeSeries } = useUrlStorage(NEW_SERIES_KEY);
 
-  const { loadIndexPattern } = useIndexPatternContext();
+  const { loadIndexPattern, indexPattern } = useIndexPatternContext();
 
   const onDataTypeChange = (dataType?: AppDataType) => {
     if (dataType) {
@@ -47,6 +47,8 @@ export function DataTypesCol() {
             iconType="arrowRight"
             color={selectedDataType === dataTypeId ? 'primary' : 'text'}
             fill={selectedDataType === dataTypeId}
+            isDisabled={!indexPattern}
+            isLoading={!indexPattern && selectedDataType === dataTypeId}
             onClick={() => {
               onDataTypeChange(dataTypeId === selectedDataType ? undefined : dataTypeId);
             }}

diff --git a/...ity/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx b/...ity/public/components/shared/exploratory_view/series_builder/columns/report_types_col.tsx
@@ -11,6 +11,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { ReportViewTypeId, SeriesUrl } from '../../types';
 import { NEW_SERIES_KEY, useUrlStorage } from '../../hooks/use_url_storage';
 import { DEFAULT_TIME } from '../../configurations/constants';
+import { useIndexPatternContext } from '../../hooks/use_default_index_pattern';
 
 interface Props {
   reportTypes: Array<{ id: ReportViewTypeId; label: string }>;
@@ -22,6 +23,8 @@ export function ReportTypesCol({ reportTypes }: Props) {
     setSeries,
   } = useUrlStorage(NEW_SERIES_KEY);
 
+  const { indexPattern } = useIndexPatternContext();
+
   return reportTypes?.length > 0 ? (
     <EuiFlexGroup direction="column" gutterSize="xs">
       {reportTypes.map(({ id: reportType, label }) => (
@@ -32,6 +35,7 @@ export function ReportTypesCol({ reportTypes }: Props) {
             iconType="arrowRight"
             color={selectedReportType === reportType ? 'primary' : 'text'}
             fill={selectedReportType === reportType}
+            isDisabled={!indexPattern}
             onClick={() => {
               if (reportType === selectedReportType) {
                 setSeries(NEW_SERIES_KEY, {

diff --git a/...rvability/public/components/shared/exploratory_view/utils/observability_index_patterns.ts b/...rvability/public/components/shared/exploratory_view/utils/observability_index_patterns.ts
@@ -47,12 +47,16 @@ const appToPatternMap: Record<DataType, string> = {
 };
 
 export function isParamsSame(param1: IFieldFormat['_params'], param2: FieldFormatParams) {
-  return (
+  const isSame =
     param1?.inputFormat === param2?.inputFormat &&
     param1?.outputFormat === param2?.outputFormat &&
-    param1?.showSuffix === param2?.showSuffix &&
-    param2?.outputPrecision === param1?.outputPrecision
-  );
+    param1?.showSuffix === param2?.showSuffix;
+
+  if (param2.outputPrecision !== undefined) {
+    return param2?.outputPrecision === param1?.outputPrecision && isSame;
+  }
+
+  return isSame;
 }
 
 export class ObservabilityIndexPatterns {