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

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',