[DataUsage][Serverless] Data usage charts enhancements (elastic#196559)

## Summary follow up of: - elastic/pull/195556 Adds a lot of enhancements to the datastream dropdown including: - [x] shows storage sizes on the data stream dropdown - [x] preselects all data streams on the first page load - [x] updates selected data streams to URL params - [x] selects data streams based on URL load - [x] doesn't allow deselecting all data streams - [x] cancels older API requests ### screen ![Screenshot 2024-10-16 at 16 57 43](https://github.com/user-attachments/assets/38db2d93-f531-4269-88ea-51b4926b6a72) ### clip ![metrics-ux-16-10](https://github.com/user-attachments/assets/7913d1b6-31df-48e6-a3a9-f4dad0dc1b1e) related PRs - elastic/pull/193966 ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 13e19cb)
kibanamachine · Oct 18, 2024 · da174cc · da174cc
1 parent 9ad35b8
commit da174cc
Show file tree

Hide file tree

Showing 14 changed files with 160 additions and 195 deletions.
diff --git a/x-pack/plugins/data_usage/public/app/components/chart_panel.tsx b/x-pack/plugins/data_usage/public/app/components/chart_panel.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { useCallback, useMemo } from 'react';
-import numeral from '@elastic/numeral';
+
 import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
 import {
   Chart,
@@ -20,6 +20,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { LegendAction } from './legend_action';
 import { MetricTypes, MetricSeries } from '../../../common/rest_types';
+import { formatBytes } from '../../utils/format_bytes';
 
 // TODO: Remove this when we have a title for each metric type
 type ChartKey = Extract<MetricTypes, 'ingest_rate' | 'storage_retained'>;
@@ -118,7 +119,3 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
     </EuiFlexItem>
   );
 };
-
-const formatBytes = (bytes: number) => {
-  return numeral(bytes).format('0.0 b');
-};
diff --git a/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.tsx b/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, memo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { css } from '@emotion/react';
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingElastic, EuiCallOut } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingElastic } from '@elastic/eui';
 import { Charts } from './charts';
 import { useBreadcrumbs } from '../../utils/use_breadcrumbs';
 import { useKibanaContextForPlugin } from '../../utils/use_kibana';
@@ -16,31 +16,40 @@ import { useGetDataUsageMetrics } from '../../hooks/use_get_usage_metrics';
 import { useDataUsageMetricsUrlParams } from '../hooks/use_charts_url_params';
 import { DEFAULT_DATE_RANGE_OPTIONS, useDateRangePicker } from '../hooks/use_date_picker';
 import { DEFAULT_METRIC_TYPES, UsageMetricsRequestBody } from '../../../common/rest_types';
-import { ChartFilters } from './filters/charts_filters';
-import { UX_LABELS } from '../translations';
+import { ChartFilters, ChartFiltersProps } from './filters/charts_filters';
+import { useGetDataUsageDataStreams } from '../../hooks/use_get_data_streams';
 
 const EuiItemCss = css`
   width: 100%;
 `;
 
-const FlexItemWithCss = memo(({ children }: { children: React.ReactNode }) => (
+const FlexItemWithCss = ({ children }: { children: React.ReactNode }) => (
   <EuiFlexItem css={EuiItemCss}>{children}</EuiFlexItem>
-));
+);
 
 export const DataUsageMetrics = () => {
   const {
     services: { chrome, appParams },
   } = useKibanaContextForPlugin();
+  useBreadcrumbs([{ text: PLUGIN_NAME }], appParams, chrome);
 
   const {
     metricTypes: metricTypesFromUrl,
     dataStreams: dataStreamsFromUrl,
     startDate: startDateFromUrl,
     endDate: endDateFromUrl,
     setUrlMetricTypesFilter,
+    setUrlDataStreamsFilter,
     setUrlDateRangeFilter,
   } = useDataUsageMetricsUrlParams();
 
+  const { data: dataStreams, isFetching: isFetchingDataStreams } = useGetDataUsageDataStreams({
+    selectedDataStreams: dataStreamsFromUrl,
+    options: {
+      enabled: true,
+    },
+  });
+
   const [metricsFilters, setMetricsFilters] = useState<UsageMetricsRequestBody>({
     metricTypes: [...DEFAULT_METRIC_TYPES],
     dataStreams: [],
@@ -52,15 +61,22 @@ export const DataUsageMetrics = () => {
     if (!metricTypesFromUrl) {
       setUrlMetricTypesFilter(metricsFilters.metricTypes.join(','));
     }
+    if (!dataStreamsFromUrl && dataStreams) {
+      setUrlDataStreamsFilter(dataStreams.map((ds) => ds.name).join(','));
+    }
     if (!startDateFromUrl || !endDateFromUrl) {
       setUrlDateRangeFilter({ startDate: metricsFilters.from, endDate: metricsFilters.to });
     }
   }, [
+    dataStreams,
+    dataStreamsFromUrl,
     endDateFromUrl,
     metricTypesFromUrl,
+    metricsFilters.dataStreams,
     metricsFilters.from,
     metricsFilters.metricTypes,
     metricsFilters.to,
+    setUrlDataStreamsFilter,
     setUrlDateRangeFilter,
     setUrlMetricTypesFilter,
     startDateFromUrl,
@@ -77,7 +93,6 @@ export const DataUsageMetrics = () => {
   const { dateRangePickerState, onRefreshChange, onTimeChange } = useDateRangePicker();
 
   const {
-    error,
     data,
     isFetching,
     isFetched,
@@ -90,6 +105,7 @@ export const DataUsageMetrics = () => {
     },
     {
       retry: false,
+      enabled: !!metricsFilters.dataStreams.length,
     }
   );
 
@@ -111,33 +127,51 @@ export const DataUsageMetrics = () => {
     [setMetricsFilters]
   );
 
-  useBreadcrumbs([{ text: PLUGIN_NAME }], appParams, chrome);
+  const filterOptions: ChartFiltersProps['filterOptions'] = useMemo(() => {
+    const dataStreamsOptions = dataStreams?.reduce<Record<string, number>>((acc, ds) => {
+      acc[ds.name] = ds.storageSizeBytes;
+      return acc;
+    }, {});
+
+    return {
+      dataStreams: {
+        filterName: 'dataStreams',
+        options: dataStreamsOptions ? Object.keys(dataStreamsOptions) : metricsFilters.dataStreams,
+        appendOptions: dataStreamsOptions,
+        selectedOptions: metricsFilters.dataStreams,
+        onChangeFilterOptions: onChangeDataStreamsFilter,
+        isFilterLoading: isFetchingDataStreams,
+      },
+      metricTypes: {
+        filterName: 'metricTypes',
+        options: metricsFilters.metricTypes,
+        onChangeFilterOptions: onChangeMetricTypesFilter,
+      },
+    };
+  }, [
+    dataStreams,
+    isFetchingDataStreams,
+    metricsFilters.dataStreams,
+    metricsFilters.metricTypes,
+    onChangeDataStreamsFilter,
+    onChangeMetricTypesFilter,
+  ]);
 
   return (
     <EuiFlexGroup alignItems="flexStart" direction="column">
       <FlexItemWithCss>
         <ChartFilters
           dateRangePickerState={dateRangePickerState}
-          isDataLoading={isFetching}
+          isDataLoading={isFetchingDataStreams}
           onClick={refetchDataUsageMetrics}
           onRefresh={onRefresh}
           onRefreshChange={onRefreshChange}
           onTimeChange={onTimeChange}
-          onChangeDataStreamsFilter={onChangeDataStreamsFilter}
-          onChangeMetricTypesFilter={onChangeMetricTypesFilter}
+          filterOptions={filterOptions}
           showMetricsTypesFilter={false}
         />
       </FlexItemWithCss>
-      {!isFetching && error?.message && (
-        <FlexItemWithCss>
-          <EuiCallOut
-            size="s"
-            title={UX_LABELS.noDataStreamsSelected}
-            iconType="iInCircle"
-            color="warning"
-          />
-        </FlexItemWithCss>
-      )}
+
       <FlexItemWithCss>
         {isFetched && data?.metrics ? (
           <Charts data={data} />

diff --git a/x-pack/plugins/data_usage/public/app/components/filters/charts_filter.tsx b/x-pack/plugins/data_usage/public/app/components/filters/charts_filter.tsx
@@ -7,15 +7,14 @@
 
 import { orderBy } from 'lodash/fp';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
+import { EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
 
 import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
 import {
   METRIC_TYPE_API_VALUES_TO_UI_OPTIONS_MAP,
   type MetricTypes,
 } from '../../../../common/rest_types';
 
-import { ClearAllButton } from './clear_all_button';
 import { UX_LABELS } from '../../translations';
 import { ChartsFilterPopover } from './charts_filter_popover';
 import { FilterItems, FilterName, useChartsFilter } from '../../hooks';
@@ -27,20 +26,34 @@ const getSearchPlaceholder = (filterName: FilterName) => {
   return UX_LABELS.filterSearchPlaceholder('metric types');
 };
 
-export const ChartsFilter = memo(
+export interface ChartsFilterProps {
+  filterOptions: {
+    filterName: FilterName;
+    options: string[];
+    appendOptions?: Record<string, number>;
+    selectedOptions?: string[];
+    onChangeFilterOptions: (selectedOptions: string[]) => void;
+    isFilterLoading?: boolean;
+  };
+  'data-test-subj'?: string;
+}
+
+export const ChartsFilter = memo<ChartsFilterProps>(
   ({
-    filterName,
-    onChangeFilterOptions,
+    filterOptions: {
+      filterName,
+      options,
+      appendOptions,
+      selectedOptions,
+      onChangeFilterOptions,
+      isFilterLoading = false,
+    },
     'data-test-subj': dataTestSubj,
-  }: {
-    filterName: FilterName;
-    onChangeFilterOptions?: (selectedOptions: string[]) => void;
-    'data-test-subj'?: string;
   }) => {
     const getTestId = useTestIdGenerator(dataTestSubj);
-
     const isMetricsFilter = filterName === 'metricTypes';
     const isDataStreamsFilter = filterName === 'dataStreams';
+
     // popover states and handlers
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const onPopoverButtonClick = useCallback(() => {
@@ -50,11 +63,8 @@ export const ChartsFilter = memo(
       setIsPopoverOpen(false);
     }, [setIsPopoverOpen]);
 
-    // search string state
-    const [searchString, setSearchString] = useState('');
     const {
       areDataStreamsSelectedOnMount,
-      isLoading,
       items,
       setItems,
       hasActiveFilters,
@@ -64,17 +74,18 @@ export const ChartsFilter = memo(
       setUrlDataStreamsFilter,
       setUrlMetricTypesFilter,
     } = useChartsFilter({
-      filterName,
-      searchString,
+      filterOptions: {
+        filterName,
+        options,
+        appendOptions,
+        selectedOptions,
+        onChangeFilterOptions,
+        isFilterLoading,
+      },
     });
 
     // track popover state to pin selected options
     const wasPopoverOpen = useRef(isPopoverOpen);
-    useEffect(() => {
-      return () => {
-        wasPopoverOpen.current = isPopoverOpen;
-      };
-    }, [isPopoverOpen, wasPopoverOpen]);
 
     // compute if selected dataStreams should be pinned
     const shouldPinSelectedDataStreams = useCallback(
@@ -104,8 +115,16 @@ export const ChartsFilter = memo(
 
     const onOptionsChange = useCallback(
       (newOptions: FilterItems) => {
+        const optionItemsToSet = newOptions.map((option) => option);
+        const currChecks = optionItemsToSet.filter((option) => option.checked === 'on');
+
+        // don't update filter state if trying to uncheck all options
+        if (currChecks.length < 1) {
+          return;
+        }
+
         // update filter UI options state
-        setItems(newOptions.map((option) => option));
+        setItems(optionItemsToSet);
 
         // compute a selected list of options
         const selectedItems = newOptions.reduce<string[]>((acc, curr) => {
@@ -129,10 +148,7 @@ export const ChartsFilter = memo(
         shouldPinSelectedDataStreams(false);
         setAreDataStreamsSelectedOnMount(false);
 
-        // update overall query state
-        if (typeof onChangeFilterOptions !== 'undefined') {
-          onChangeFilterOptions(selectedItems);
-        }
+        onChangeFilterOptions(selectedItems);
       },
       [
         setItems,
@@ -146,35 +162,11 @@ export const ChartsFilter = memo(
       ]
     );
 
-    // clear all selected options
-    const onClearAll = useCallback(() => {
-      // update filter UI options state
-      setItems(
-        items.map((option) => {
-          option.checked = undefined;
-          return option;
-        })
-      );
-
-      // update URL params based on filter on page
-      if (isMetricsFilter) {
-        setUrlMetricTypesFilter('');
-      } else if (isDataStreamsFilter) {
-        setUrlDataStreamsFilter('');
-      }
-
-      if (typeof onChangeFilterOptions !== 'undefined') {
-        onChangeFilterOptions([]);
-      }
-    }, [
-      setItems,
-      items,
-      isMetricsFilter,
-      isDataStreamsFilter,
-      onChangeFilterOptions,
-      setUrlMetricTypesFilter,
-      setUrlDataStreamsFilter,
-    ]);
+    useEffect(() => {
+      return () => {
+        wasPopoverOpen.current = isPopoverOpen;
+      };
+    }, [isPopoverOpen, wasPopoverOpen]);
 
     return (
       <ChartsFilterPopover
@@ -190,14 +182,13 @@ export const ChartsFilter = memo(
         <EuiSelectable
           aria-label={`${filterName}`}
           emptyMessage={UX_LABELS.filterEmptyMessage(filterName)}
-          isLoading={isLoading}
+          isLoading={isFilterLoading}
           onChange={onOptionsChange}
           options={sortedHostsFilterOptions}
           searchable={isSearchable ? true : undefined}
           searchProps={{
             placeholder: getSearchPlaceholder(filterName),
             compressed: true,
-            onChange: (searchValue) => setSearchString(searchValue.trim()),
           }}
         >
           {(list, search) => {
@@ -215,17 +206,6 @@ export const ChartsFilter = memo(
                   </EuiPopoverTitle>
                 )}
                 {list}
-                {!isMetricsFilter && (
-                  <EuiFlexGroup>
-                    <EuiFlexItem>
-                      <ClearAllButton
-                        data-test-subj={getTestId(`${filterName}-filter-clearAllButton`)}
-                        isDisabled={!hasActiveFilters}
-                        onClick={onClearAll}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                )}
               </div>
             );
           }}