[DataUsage][Serverless] UX/API changes based on demo feedback (elasti…

…c#200911)

## Summary

Adds a bunch of UX updates based on the feedback after demo. 

- [x] Tidy chart legend action popup and links
- [x] fix UX date picker invalid time (UX shows invalid time falsely)
- [ ] Tooltip for date filter
- [ ] send UTC time to requests (1:1 mapping for date-time picked vs
date-time sent)
- [x] Remove unusable common date filter shortcuts
- [x] data stream filter `select all`
- [x] data stream filter `clear all`
- [x] No charts empty state
- [x] filter in datastreams that have greater than `0` bytes storage
size
- [ ] Filter out system indices from data stream filter?
- [x] Taller filter popover list for larger lists

Follow up of elastic#200731

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [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)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [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
- [x] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_node:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/data_usage/common/constants.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const PLUGIN_ID = 'data_usage';
+
+export const DEFAULT_SELECTED_OPTIONS = 50 as const;
+
+export const DATA_USAGE_API_ROUTE_PREFIX = '/api/data_usage/';
+export const DATA_USAGE_METRICS_API_ROUTE = `/internal${DATA_USAGE_API_ROUTE_PREFIX}metrics`;
+export const DATA_USAGE_DATA_STREAMS_API_ROUTE = `/internal${DATA_USAGE_API_ROUTE_PREFIX}data_streams`;

x-pack/plugins/data_usage/common/index.ts

@@ -5,15 +5,10 @@
  * 2.0.
  */
 
-import { i18n } from '@kbn/i18n';
-
-export const PLUGIN_ID = 'data_usage';
-export const PLUGIN_NAME = i18n.translate('xpack.dataUsage.name', {
-  defaultMessage: 'Data Usage',
-});
-
-export const DEFAULT_SELECTED_OPTIONS = 50 as const;
-
-export const DATA_USAGE_API_ROUTE_PREFIX = '/api/data_usage/';
-export const DATA_USAGE_METRICS_API_ROUTE = `/internal${DATA_USAGE_API_ROUTE_PREFIX}metrics`;
-export const DATA_USAGE_DATA_STREAMS_API_ROUTE = `/internal${DATA_USAGE_API_ROUTE_PREFIX}data_streams`;
+export {
+  PLUGIN_ID,
+  DEFAULT_SELECTED_OPTIONS,
+  DATA_USAGE_API_ROUTE_PREFIX,
+  DATA_USAGE_METRICS_API_ROUTE,
+  DATA_USAGE_DATA_STREAMS_API_ROUTE,
+} from './constants';

x-pack/plugins/data_usage/common/test_utils/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { TestProvider } from './test_provider';
+export { dataUsageTestQueryClientOptions } from './test_query_client_options';
+export { timeXMinutesAgo } from './time_ago';

x-pack/plugins/data_usage/common/test_utils/test_provider.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { I18nProvider } from '@kbn/i18n-react';
+
+export const TestProvider = memo(({ children }: { children?: React.ReactNode }) => {
+  return <I18nProvider>{children}</I18nProvider>;
+});

x-pack/plugins/data_usage/common/test_utils/time_ago.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const timeXMinutesAgo = (x: number) =>
+  new Date(new Date().getTime() - x * 60 * 1000).toISOString();

x-pack/plugins/data_usage/common/utils.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import dateMath from '@kbn/datemath';
+export const dateParser = (date: string) => dateMath.parse(date)?.toISOString();
+export const momentDateParser = (date: string) => dateMath.parse(date);

x-pack/plugins/data_usage/public/app/components/chart_panel.tsx

@@ -20,7 +20,7 @@ import {
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { LegendAction } from './legend_action';
-import { MetricTypes, MetricSeries } from '../../../common/rest_types';
+import { type MetricTypes, type MetricSeries } from '../../../common/rest_types';
 import { formatBytes } from '../../utils/format_bytes';
 
 // TODO: Remove this when we have a title for each metric type

x-pack/plugins/data_usage/public/app/components/charts.tsx

@@ -6,9 +6,8 @@
  */
 import React, { useCallback, useState } from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
-import { MetricTypes } from '../../../common/rest_types';
 import { ChartPanel } from './chart_panel';
-import { UsageMetricsResponseSchemaBody } from '../../../common/rest_types';
+import type { UsageMetricsResponseSchemaBody, MetricTypes } from '../../../common/rest_types';
 import { useTestIdGenerator } from '../../hooks/use_test_id_generator';
 interface ChartsProps {
   data: UsageMetricsResponseSchemaBody;

x-pack/plugins/data_usage/public/app/components/charts_loading.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiLoadingChart } from '@elastic/eui';
+import { useTestIdGenerator } from '../../hooks/use_test_id_generator';
+
+export const ChartsLoading = ({
+  'data-test-subj': dataTestSubj,
+}: {
+  'data-test-subj'?: string;
+}) => {
+  const getTestId = useTestIdGenerator(dataTestSubj);
+  // returns 2 loading icons for the two charts
+  return (
+    <EuiFlexGroup
+      direction="column"
+      alignItems="center"
+      data-test-subj={getTestId('charts-loading')}
+    >
+      {[...Array(2)].map((i) => (
+        <EuiFlexItem key={i}>
+          <EuiPanel paddingSize="xl" hasShadow={false} hasBorder={false}>
+            <EuiLoadingChart size="l" />
+          </EuiPanel>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};
+
+ChartsLoading.displayName = 'ChartsLoading';

x-pack/plugins/data_usage/public/app/components/data_usage_metrics.test.tsx

@@ -5,7 +5,8 @@
  * 2.0.
  */
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { TestProvider } from '../../../common/test_utils';
+import { render, waitFor, within, type RenderResult } from '@testing-library/react';
 import userEvent, { type UserEvent } from '@testing-library/user-event';
 import { DataUsageMetrics } from './data_usage_metrics';
 import { useGetDataUsageMetrics } from '../../hooks/use_get_usage_metrics';
@@ -102,21 +103,6 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
                     to: 'now',
                     display: 'Last 7 days',
                   },
-                  {
-                    from: 'now-30d',
-                    to: 'now',
-                    display: 'Last 30 days',
-                  },
-                  {
-                    from: 'now-90d',
-                    to: 'now',
-                    display: 'Last 90 days',
-                  },
-                  {
-                    from: 'now-1y',
-                    to: 'now',
-                    display: 'Last 1 year',
-                  },
                 ],
               };
               return x[k];
@@ -156,6 +142,7 @@ describe('DataUsageMetrics', () => {
   let user: UserEvent;
   const testId = 'test';
   const testIdFilter = `${testId}-filter`;
+  let renderComponent: () => RenderResult;
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -167,18 +154,24 @@ describe('DataUsageMetrics', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    renderComponent = () =>
+      render(
+        <TestProvider>
+          <DataUsageMetrics data-test-subj={testId} />
+        </TestProvider>
+      );
     user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime, pointerEventsCheck: 0 });
     mockUseGetDataUsageMetrics.mockReturnValue(getBaseMockedDataUsageMetrics);
     mockUseGetDataUsageDataStreams.mockReturnValue(getBaseMockedDataStreams);
   });
 
   it('renders', () => {
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     expect(getByTestId(`${testId}`)).toBeTruthy();
   });
 
   it('should show date filter', () => {
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     const dateFilter = getByTestId(`${testIdFilter}-date-range`);
     expect(dateFilter).toBeTruthy();
     expect(dateFilter.textContent).toContain('to');
@@ -190,12 +183,12 @@ describe('DataUsageMetrics', () => {
       ...getBaseMockedDataStreams,
       isFetching: true,
     });
-    const { queryByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { queryByTestId } = renderComponent();
     expect(queryByTestId(`${testIdFilter}-dataStreams-popoverButton`)).not.toBeTruthy();
   });
 
   it('should show data streams filter', () => {
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     expect(getByTestId(`${testIdFilter}-dataStreams-popoverButton`)).toBeTruthy();
   });
 
@@ -205,7 +198,7 @@ describe('DataUsageMetrics', () => {
       data: generateDataStreams(5),
       isFetching: false,
     });
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     expect(getByTestId(`${testIdFilter}-dataStreams-popoverButton`)).toHaveTextContent(
       'Data streams5'
     );
@@ -217,37 +210,84 @@ describe('DataUsageMetrics', () => {
       data: generateDataStreams(100),
       isFetching: false,
     });
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     const toggleFilterButton = getByTestId(`${testIdFilter}-dataStreams-popoverButton`);
 
     expect(toggleFilterButton).toHaveTextContent('Data streams50');
   });
 
-  it('should allow de-selecting all but one data stream option', async () => {
+  it('should allow de-selecting data stream options', async () => {
     mockUseGetDataUsageDataStreams.mockReturnValue({
       error: undefined,
-      data: generateDataStreams(5),
+      data: generateDataStreams(10),
       isFetching: false,
     });
-    const { getByTestId, getAllByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId, getAllByTestId } = renderComponent();
     const toggleFilterButton = getByTestId(`${testIdFilter}-dataStreams-popoverButton`);
 
-    expect(toggleFilterButton).toHaveTextContent('Data streams5');
+    expect(toggleFilterButton).toHaveTextContent('Data streams10');
     await user.click(toggleFilterButton);
     const allFilterOptions = getAllByTestId('dataStreams-filter-option');
-    for (let i = 0; i < allFilterOptions.length - 1; i++) {
+    // deselect 9 options
+    for (let i = 0; i < allFilterOptions.length; i++) {
       await user.click(allFilterOptions[i]);
     }
 
     expect(toggleFilterButton).toHaveTextContent('Data streams1');
+    expect(within(toggleFilterButton).getByRole('marquee').getAttribute('aria-label')).toEqual(
+      '1 active filters'
+    );
+  });
+
+  it('should allow selecting/deselecting all data stream options using `select all` and `clear all`', async () => {
+    mockUseGetDataUsageDataStreams.mockReturnValue({
+      error: undefined,
+      data: generateDataStreams(10),
+      isFetching: false,
+    });
+    const { getByTestId } = renderComponent();
+    const toggleFilterButton = getByTestId(`${testIdFilter}-dataStreams-popoverButton`);
+
+    expect(toggleFilterButton).toHaveTextContent('Data streams10');
+    await user.click(toggleFilterButton);
+
+    // all options are selected on load
+    expect(within(toggleFilterButton).getByRole('marquee').getAttribute('aria-label')).toEqual(
+      '10 active filters'
+    );
+
+    const selectAllButton = getByTestId(`${testIdFilter}-dataStreams-selectAllButton`);
+    const clearAllButton = getByTestId(`${testIdFilter}-dataStreams-clearAllButton`);
+
+    // select all is disabled
+    expect(selectAllButton).toBeTruthy();
+    expect(selectAllButton.getAttribute('disabled')).not.toBeNull();
+
+    // clear all is enabled
+    expect(clearAllButton).toBeTruthy();
+    expect(clearAllButton.getAttribute('disabled')).toBeNull();
+    // click clear all and expect all options to be deselected
+    await user.click(clearAllButton);
+    expect(within(toggleFilterButton).getByRole('marquee').getAttribute('aria-label')).toEqual(
+      '10 available filters'
+    );
+    // select all is enabled again
+    expect(await selectAllButton.getAttribute('disabled')).toBeNull();
+    // click select all
+    await user.click(selectAllButton);
+
+    // all options are selected and clear all is disabled
+    expect(within(toggleFilterButton).getByRole('marquee').getAttribute('aria-label')).toEqual(
+      '10 active filters'
+    );
   });
 
   it('should not call usage metrics API if no data streams', async () => {
     mockUseGetDataUsageDataStreams.mockReturnValue({
       ...getBaseMockedDataStreams,
       data: [],
     });
-    render(<DataUsageMetrics data-test-subj={testId} />);
+    renderComponent();
     expect(mockUseGetDataUsageMetrics).toHaveBeenCalledWith(
       expect.any(Object),
       expect.objectContaining({ enabled: false })
@@ -259,7 +299,7 @@ describe('DataUsageMetrics', () => {
       ...getBaseMockedDataUsageMetrics,
       isFetching: true,
     });
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     expect(getByTestId(`${testId}-charts-loading`)).toBeTruthy();
   });
 
@@ -290,10 +330,19 @@ describe('DataUsageMetrics', () => {
         ],
       },
     });
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     expect(getByTestId(`${testId}-charts`)).toBeTruthy();
   });
 
+  it('should show no charts callout', () => {
+    mockUseGetDataUsageMetrics.mockReturnValue({
+      ...getBaseMockedDataUsageMetrics,
+      isFetched: false,
+    });
+    const { getByTestId } = renderComponent();
+    expect(getByTestId(`${testId}-no-charts-callout`)).toBeTruthy();
+  });
+
   it('should refetch usage metrics with `Refresh` button click', async () => {
     const refetch = jest.fn();
     mockUseGetDataUsageMetrics.mockReturnValue({
@@ -306,7 +355,7 @@ describe('DataUsageMetrics', () => {
       isFetched: true,
       refetch,
     });
-    const { getByTestId } = render(<DataUsageMetrics data-test-subj={testId} />);
+    const { getByTestId } = renderComponent();
     const refreshButton = getByTestId(`${testIdFilter}-super-refresh-button`);
     // click refresh 5 times
     for (let i = 0; i < 5; i++) {
@@ -326,7 +375,7 @@ describe('DataUsageMetrics', () => {
       isFetched: true,
       error: new Error('Uh oh!'),
     });
-    render(<DataUsageMetrics data-test-subj={testId} />);
+    renderComponent();
     await waitFor(() => {
       expect(mockServices.notifications.toasts.addDanger).toHaveBeenCalledWith({
         title: 'Error getting usage metrics',
@@ -341,7 +390,7 @@ describe('DataUsageMetrics', () => {
       isFetched: true,
       error: new Error('Uh oh!'),
     });
-    render(<DataUsageMetrics data-test-subj={testId} />);
+    renderComponent();
     await waitFor(() => {
       expect(mockServices.notifications.toasts.addDanger).toHaveBeenCalledWith({
         title: 'Error getting data streams',