ui improvements

elastic · Feb 6, 2023 · dd698d2 · dd698d2
2 parents 4626aeb + 228135a
commit dd698d2
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 53 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx b/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx
@@ -31,7 +31,7 @@ import { NoData } from './no_data';
 import { NO_DATA_REASON_LABEL } from './translations';
 import type { AlertsTreeMapAggregation, FlattenedBucket, RawBucket } from './types';
 
-export const DEFAULT_MIN_CHART_HEIGHT = 370; // px
+export const DEFAULT_MIN_CHART_HEIGHT = 240; // px
 const DEFAULT_LEGEND_WIDTH = 300; // px
 
 export interface Props {

diff --git a/...s/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx b/...s/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiProgress } from '@elastic/eui';
 import type { EuiComboBox } from '@elastic/eui';
 import type { Action } from '@kbn/ui-actions-plugin/public';
 import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/types';
@@ -191,6 +192,12 @@ export const AlertsCountPanel = memo<AlertsCountPanelProps>(
       setQuery,
       uniqueQueryId,
     });
+    const showCount = useMemo(() => {
+      if (isAlertsPageChartsEnabled) {
+        return isExpanded;
+      }
+      return toggleStatus;
+    }, [isAlertsPageChartsEnabled, toggleStatus, isExpanded]);
 
     return (
       <InspectButtonContainer show={isAlertsPageChartsEnabled ? isExpanded : toggleStatus}>
@@ -230,26 +237,28 @@ export const AlertsCountPanel = memo<AlertsCountPanelProps>(
               uniqueQueryId={uniqueQueryId}
             />
           </HeaderSection>
-          {(isAlertsPageChartsEnabled && isExpanded) ||
-          (!isAlertsPageChartsEnabled && toggleStatus) ? (
-            <ChartContent
-              alertsData={alertsData}
-              data-test-subj="embeddable-count-table"
-              extraActions={extraActions}
-              extraOptions={extraVisualizationOptions}
-              getLensAttributes={getLensAttributes}
-              height={CHART_HEIGHT}
-              id={`${uniqueQueryId}-embeddable`}
-              inspectTitle={inspectTitle}
-              isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
-              isLoadingAlerts={isLoadingAlerts}
-              scopeId={SourcererScopeName.detections}
-              stackByField0={stackByField0}
-              stackByField1={stackByField1}
-              stackByField={stackByField0}
-              timerange={timerange}
-            />
-          ) : null}
+          {showCount &&
+            (isLoadingAlerts ? (
+              <EuiProgress color="accent" data-test-subj="progress" position="absolute" size="xs" />
+            ) : (
+              <ChartContent
+                alertsData={alertsData}
+                data-test-subj="embeddable-count-table"
+                extraActions={extraActions}
+                extraOptions={extraVisualizationOptions}
+                getLensAttributes={getLensAttributes}
+                height={CHART_HEIGHT}
+                id={`${uniqueQueryId}-embeddable`}
+                inspectTitle={inspectTitle}
+                isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
+                isLoadingAlerts={isLoadingAlerts}
+                scopeId={SourcererScopeName.detections}
+                stackByField0={stackByField0}
+                stackByField1={stackByField1}
+                stackByField={stackByField0}
+                timerange={timerange}
+              />
+            ))}
         </KpiPanel>
       </InspectButtonContainer>
     );

diff --git a/...ublic/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx b/...ublic/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx
@@ -18,7 +18,10 @@ const ProgressWrapper = styled.div`
 const StyledEuiText = styled(EuiText)`
   margin-top: -${({ theme }) => theme.eui.euiSizeM};
 `;
-
+const StyledEuiProgress = styled(EuiProgress)`
+  margin-top: ${({ theme }) => theme.eui.euiSizeS};
+  margin-bottom: ${({ theme }) => theme.eui.euiSizeS};
+`;
 export interface AlertsProcessBarProps {
   data: AlertsProgressBarData[];
   isLoading: boolean;
@@ -36,7 +39,11 @@ export const AlertsProgressBar: React.FC<AlertsProcessBarProps> = ({
       <StyledEuiText size="s" data-test-subj="alerts-progress-bar-title">
         <h5>{groupBySelection}</h5>
       </StyledEuiText>
-      <EuiHorizontalRule margin="xs" />
+      {isLoading ? (
+        <StyledEuiProgress size="xs" color="primary" />
+      ) : (
+        <EuiHorizontalRule margin="xs" />
+      )}
       {!isLoading && data.length === 0 ? (
         <>
           <EuiText size="s" textAlign="center" data-test-subj="empty-proress-bar">

diff --git a/...ity_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/index.tsx b/...ity_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/index.tsx
@@ -4,8 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiPanel, EuiLoadingSpinner } from '@elastic/eui';
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { EuiPanel } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
 import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/types';
 import type { Filter, Query } from '@kbn/es-query';
@@ -15,7 +15,6 @@ import { StackByComboBox } from '../common/components';
 import { AlertsProgressBar } from './alerts_progress_bar';
 import { useSummaryChartData } from '../alerts_summary_charts_panel/use_summary_chart_data';
 import { alertsGroupingAggregations } from '../alerts_summary_charts_panel/aggregations';
-import { showInitialLoadingSpinner } from '../alerts_histogram_panel/helpers';
 import { getIsAlertsProgressBarData } from './helpers';
 import * as i18n from './translations';
 import type { GroupBySelection } from './types';
@@ -42,7 +41,6 @@ export const AlertsProgressBarPanel: React.FC<Props> = ({
   groupBySelection,
   setGroupBySelection,
 }) => {
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
   const uniqueQueryId = useMemo(() => `${TOP_ALERTS_CHART_ID}-${uuid()}`, []);
   const dropDownOptions = DEFAULT_OPTIONS.map((field) => {
     return { value: field, label: field };
@@ -68,11 +66,6 @@ export const AlertsProgressBarPanel: React.FC<Props> = ({
     uniqueQueryId,
   });
   const data = useMemo(() => (getIsAlertsProgressBarData(items) ? items : []), [items]);
-  useEffect(() => {
-    if (!showInitialLoadingSpinner({ isInitialLoading, isLoadingAlerts: isLoading })) {
-      setIsInitialLoading(false);
-    }
-  }, [isInitialLoading, isLoading, setIsInitialLoading]);
 
   return (
     <InspectButtonContainer>
@@ -94,15 +87,7 @@ export const AlertsProgressBarPanel: React.FC<Props> = ({
             dropDownoptions={dropDownOptions}
           />
         </HeaderSection>
-        {isInitialLoading ? (
-          <EuiLoadingSpinner size="l" />
-        ) : (
-          <AlertsProgressBar
-            data={data}
-            isLoading={isLoading}
-            groupBySelection={groupBySelection}
-          />
-        )}
+        <AlertsProgressBar data={data} isLoading={isLoading} groupBySelection={groupBySelection} />
       </EuiPanel>
     </InspectButtonContainer>
   );

diff --git a/...lution/public/detections/pages/detection_engine/chart_panels/chart_select/translations.ts b/...lution/public/detections/pages/detection_engine/chart_panels/chart_select/translations.ts
@@ -34,28 +34,28 @@ export const CHARTS = i18n.translate('xpack.securitySolution.components.chartSel
 });
 
 export const TABLE_TITLE = i18n.translate(
-  'xpack.securitySolution.components.chartSelect.tableOption',
+  'xpack.securitySolution.components.chartSelect.tableOptionTitle',
   {
     defaultMessage: 'Aggregations',
   }
 );
 
 export const TREND_TITLE = i18n.translate(
-  'xpack.securitySolution.components.chartSelect.trendOption',
+  'xpack.securitySolution.components.chartSelect.trendOptionTitle',
   {
     defaultMessage: 'Trend Analysis',
   }
 );
 
 export const TREEMAP_TITLE = i18n.translate(
-  'xpack.securitySolution.components.chartSelect.treemapOption',
+  'xpack.securitySolution.components.chartSelect.treemapOptionTitle',
   {
     defaultMessage: 'Multi-dimensional',
   }
 );
 
 export const CHARTS_TITLE = i18n.translate(
-  'xpack.securitySolution.components.chartSelect.chartsOption',
+  'xpack.securitySolution.components.chartSelect.chartsOptionTitle',
   {
     defaultMessage: 'Summary',
   }

diff --git a/...plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx b/...plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
@@ -33,10 +33,8 @@ import { GROUP_BY_LABEL } from '../../../components/alerts_kpis/common/translati
 import { RESET_GROUP_BY_FIELDS } from '../../../../common/components/chart_settings_popover/configurations/default/translations';
 import { useQueryToggle } from '../../../../common/containers/query_toggle';
 
-const TABLE_PANEL_HEIGHT = 330; // px
-const TRENT_CHART_HEIGHT = 127; // px
-const TREND_CHART_PANEL_HEIGHT = 256; // px
-const ALERTS_CHARTS_PANEL_HEIGHT = 375; // px
+const TREND_CHART_HEIGHT = 280; // px
+const CHART_PANEL_HEIGHT = 375; // px
 
 const DETECTIONS_ALERTS_CHARTS_PANEL_ID = 'detection-alerts-charts-panel';
 
@@ -217,15 +215,15 @@ const ChartPanelsComponent: React.FC<Props> = ({
           ) : (
             <AlertsHistogramPanel
               alignHeader="flexStart"
-              chartHeight={TRENT_CHART_HEIGHT}
+              chartHeight={TREND_CHART_HEIGHT}
               chartOptionsContextMenu={chartOptionsContextMenu}
               comboboxRef={stackByField0ComboboxRef}
               defaultStackByOption={trendChartStackBy}
               extraActions={resetGroupByFieldAction}
               filters={alertsDefaultFilters}
               inspectTitle={i18n.TREND}
               onFieldSelected={updateCommonStackBy0}
-              panelHeight={TREND_CHART_PANEL_HEIGHT}
+              panelHeight={CHART_PANEL_HEIGHT}
               query={query}
               runtimeMappings={runtimeMappings}
               setComboboxInputRef={setStackByField0ComboboxInputRef}
@@ -255,7 +253,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
               extraActions={resetGroupByFieldAction}
               filters={alertsDefaultFilters}
               inspectTitle={i18n.TABLE}
-              panelHeight={TABLE_PANEL_HEIGHT}
+              panelHeight={CHART_PANEL_HEIGHT}
               query={query}
               runtimeMappings={runtimeMappings}
               setStackByField0={updateCommonStackBy0}
@@ -284,6 +282,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
               addFilter={addFilter}
               alignHeader="flexStart"
               chartOptionsContextMenu={chartOptionsContextMenu}
+              height={CHART_PANEL_HEIGHT}
               inspectTitle={i18n.TREEMAP}
               isPanelExpanded={isAlertsPageChartsEnabled ? isExpanded : isTreemapPanelExpanded}
               filters={alertsDefaultFilters}
@@ -317,7 +316,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
               addFilter={addFilter}
               filters={alertsDefaultFilters}
               query={query}
-              panelHeight={ALERTS_CHARTS_PANEL_HEIGHT}
+              panelHeight={CHART_PANEL_HEIGHT}
               signalIndexName={signalIndexName}
               title={title}
               runtimeMappings={runtimeMappings}