[Dataset quality] Toggle for showing/hidding inactive datasets and fu…

…ll dataset names (elastic#176162) Relates to elastic#170242. ### Changes - Dedicated component for switch with description was created (`DescriptiveSwitch`). - Two new events where added to the machine: - `TOGGLE_INACTIVE_DATASETS`: Used to toggle `Show inactive datasets` switch. - `TOGGLE_FULL_DATASET_NAMES`: Used to toggle `Show full dataset names` switch. - Some minor changes around typings, to reuse the existing ones instead of duplicating states in around controller public state. - DatasetQualityUrlSchema was also updated so the consumer could hold the properties around the switches. - Fixed a small issue when merging degradedDocStats into dataStreamStats, I was using `DataStreamStat.name` where I should be using `DataStreamStat.rawName` from matching datastreams. #### App statechart <img width="1099" alt="image" src="https://github.com/elastic/kibana/assets/1313018/7f0308c6-f8f5-4050-9498-e566370372f2"> #### Demo https://github.com/elastic/kibana/assets/1313018/971efb30-2562-4409-8973-25b4972e6793 #### Note for reviewers - Timefilter selector will be included in a follow up PR. - `timeRange` was added to the state to have the same `from`/`to`, that was used for querying data, when filtering inactive datasets.
fkanout · Mar 4, 2024 · 48c74ff · 48c74ff
1 parent 95f17ea
commit 48c74ff
Show file tree

Hide file tree

Showing 14 changed files with 340 additions and 63 deletions.
diff --git a/x-pack/plugins/dataset_quality/common/translations.ts b/x-pack/plugins/dataset_quality/common/translations.ts
@@ -83,3 +83,26 @@ export const flyoutIntegrationNameText = i18n.translate(
     defaultMessage: 'Name',
   }
 );
+
+export const inactiveDatasetsLabel = i18n.translate('xpack.datasetQuality.inactiveDatasetsLabel', {
+  defaultMessage: 'Show inactive datasets',
+});
+
+export const inactiveDatasetsDescription = i18n.translate(
+  'xpack.datasetQuality.inactiveDatasetsDescription',
+  {
+    defaultMessage:
+      'Turn on to show datasets with a Last activity outside of the selected timeframe.',
+  }
+);
+
+export const fullDatasetNameLabel = i18n.translate('xpack.datasetQuality.fullDatasetNameLabel', {
+  defaultMessage: 'Show full dataset names',
+});
+
+export const fullDatasetNameDescription = i18n.translate(
+  'xpack.datasetQuality.fullDatasetNameDescription',
+  {
+    defaultMessage: 'Turn on to show the actual dataset names used to store the documents.',
+  }
+);
diff --git a/x-pack/plugins/dataset_quality/public/components/common/descriptive_switch.tsx b/x-pack/plugins/dataset_quality/public/components/common/descriptive_switch.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 { EuiFlexGroup, EuiIcon, EuiSwitch, EuiText, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+
+interface DescriptiveSwitchProps {
+  label: string;
+  checked: boolean;
+  tooltipText: string;
+  onToggle: () => void;
+}
+
+export const DescriptiveSwitch = ({
+  label,
+  checked,
+  tooltipText,
+  onToggle,
+}: DescriptiveSwitchProps) => {
+  return (
+    <EuiFlexGroup gutterSize="xs" css={{ flexGrow: 'unset' }} alignItems="center">
+      <EuiSwitch compressed label={label} checked={checked} onChange={onToggle} showLabel={false} />
+      <EuiFlexGroup gutterSize="xs" alignItems="center">
+        <EuiText size="xs">{label}</EuiText>
+        <EuiToolTip position="bottom" content={tooltipText}>
+          <EuiIcon tabIndex={0} type="questionInCircle" size="s" />
+        </EuiToolTip>
+      </EuiFlexGroup>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/dataset_quality/public/components/dataset_quality/columns.tsx b/x-pack/plugins/dataset_quality/public/components/dataset_quality/columns.tsx
@@ -63,10 +63,25 @@ const lastActivityColumnName = i18n.translate('xpack.datasetQuality.lastActivity
 const actionsColumnName = i18n.translate('xpack.datasetQuality.actionsColumnName', {
   defaultMessage: 'Actions',
 });
+
 const openActionName = i18n.translate('xpack.datasetQuality.openActionName', {
   defaultMessage: 'Open',
 });
 
+const inactiveDatasetActivityColumnDescription = i18n.translate(
+  'xpack.datasetQuality.inactiveDatasetActivityColumnDescription',
+  {
+    defaultMessage: 'No activity in the selected timeframe',
+  }
+);
+
+const inactiveDatasetActivityColumnTooltip = i18n.translate(
+  'xpack.datasetQuality.inactiveDatasetActivityColumnTooltip',
+  {
+    defaultMessage: 'Try expanding the time range above for more results',
+  }
+);
+
 const degradedDocsDescription = (minimimPercentage: number) =>
   i18n.translate('xpack.datasetQuality.degradedDocsQualityDescription', {
     defaultMessage: 'greater than {minimimPercentage}%',
@@ -111,11 +126,15 @@ export const getDatasetQualityTableColumns = ({
   selectedDataset,
   openFlyout,
   loadingDegradedStats,
+  showFullDatasetNames,
+  isActiveDataset,
 }: {
   fieldFormats: FieldFormatsStart;
   selectedDataset?: FlyoutDataset;
-  loadingDegradedStats?: boolean;
+  loadingDegradedStats: boolean;
+  showFullDatasetNames: boolean;
   openFlyout: (selectedDataset: FlyoutDataset) => void;
+  isActiveDataset: (lastActivity: number) => boolean;
 }): Array<EuiBasicTableColumn<DataStreamStat>> => {
   return [
     {
@@ -146,14 +165,19 @@ export const getDatasetQualityTableColumns = ({
       field: 'title',
       sortable: true,
       render: (title: string, dataStreamStat: DataStreamStat) => {
-        const { integration } = dataStreamStat;
+        const { integration, name } = dataStreamStat;
 
         return (
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
               <IntegrationIcon integration={integration} />
             </EuiFlexItem>
             <EuiText size="s">{title}</EuiText>
+            {showFullDatasetNames && (
+              <EuiText size="xs" color="subdued">
+                <em>{name}</em>
+              </EuiText>
+            )}
           </EuiFlexGroup>
         );
       },
@@ -199,10 +223,22 @@ export const getDatasetQualityTableColumns = ({
     {
       name: lastActivityColumnName,
       field: 'lastActivity',
-      render: (timestamp: number) =>
-        fieldFormats
+      render: (timestamp: number) => {
+        if (!isActiveDataset(timestamp)) {
+          return (
+            <EuiFlexGroup gutterSize="xs" alignItems="center">
+              <EuiText size="s">{inactiveDatasetActivityColumnDescription}</EuiText>
+              <EuiToolTip position="top" content={inactiveDatasetActivityColumnTooltip}>
+                <EuiIcon tabIndex={0} type="iInCircle" size="s" />
+              </EuiToolTip>
+            </EuiFlexGroup>
+          );
+        }
+
+        return fieldFormats
           .getDefaultInstance(KBN_FIELD_TYPES.DATE, [ES_FIELD_TYPES.DATE])
-          .convert(timestamp),
+          .convert(timestamp);
+      },
       sortable: true,
     },
     {

diff --git a/x-pack/plugins/dataset_quality/public/components/dataset_quality/table.tsx b/x-pack/plugins/dataset_quality/public/components/dataset_quality/table.tsx
@@ -5,12 +5,27 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiBasicTable, EuiHorizontalRule, EuiSpacer, EuiText, EuiEmptyPrompt } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { dynamic } from '@kbn/shared-ux-utility';
-import { loadingDatasetsText, noDatasetsTitle } from '../../../common/translations';
+import React from 'react';
+import {
+  fullDatasetNameDescription,
+  fullDatasetNameLabel,
+  inactiveDatasetsDescription,
+  inactiveDatasetsLabel,
+  loadingDatasetsText,
+  noDatasetsTitle,
+} from '../../../common/translations';
 import { useDatasetQualityTable } from '../../hooks';
+import { DescriptiveSwitch } from '../common/descriptive_switch';
 
 const Flyout = dynamic(() => import('../flyout/flyout'));
 
@@ -25,19 +40,39 @@ export const Table = () => {
     resultsCount,
     selectedDataset,
     closeFlyout,
+    showInactiveDatasets,
+    showFullDatasetNames,
+    toggleInactiveDatasets,
+    toggleFullDatasetNames,
   } = useDatasetQualityTable();
 
   return (
     <>
-      <EuiText size="xs">
-        <FormattedMessage
-          id="xpack.datasetQuality.tableSummary"
-          defaultMessage="Showing {items} Datasets"
-          values={{
-            items: resultsCount,
-          }}
-        />
-      </EuiText>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiText size="xs">
+          <FormattedMessage
+            id="xpack.datasetQuality.tableSummary"
+            defaultMessage="Showing {items} Datasets"
+            values={{
+              items: resultsCount,
+            }}
+          />
+        </EuiText>
+        <EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
+          <DescriptiveSwitch
+            label={fullDatasetNameLabel}
+            checked={showFullDatasetNames}
+            tooltipText={fullDatasetNameDescription}
+            onToggle={toggleFullDatasetNames}
+          />
+          <DescriptiveSwitch
+            label={inactiveDatasetsLabel}
+            checked={showInactiveDatasets}
+            tooltipText={inactiveDatasetsDescription}
+            onToggle={toggleInactiveDatasets}
+          />
+        </EuiFlexGroup>
+      </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiHorizontalRule margin="none" style={{ height: 2 }} />
       <EuiBasicTable

diff --git a/x-pack/plugins/dataset_quality/public/controller/public_state.ts b/x-pack/plugins/dataset_quality/public/controller/public_state.ts
@@ -18,6 +18,7 @@ export const getPublicStateFromContext = (
   return {
     table: context.table,
     flyout: context.flyout,
+    filters: context.filters,
   };
 };
 
@@ -39,4 +40,8 @@ export const getContextFromPublicState = (
     ...DEFAULT_CONTEXT.flyout,
     ...publicState.flyout,
   },
+  filters: {
+    ...DEFAULT_CONTEXT.filters,
+    ...publicState.filters,
+  },
 });
diff --git a/x-pack/plugins/dataset_quality/public/controller/types.ts b/x-pack/plugins/dataset_quality/public/controller/types.ts
@@ -6,36 +6,32 @@
  */
 
 import { Observable } from 'rxjs';
-import { DataStreamStat } from '../../common/data_streams_stats';
-import { Direction } from '../hooks';
-import { DatasetQualityControllerStateService } from '../state_machines/dataset_quality_controller';
+import {
+  DatasetQualityControllerStateService,
+  WithFilters,
+  WithFlyoutOptions,
+  WithTableOptions,
+} from '../state_machines/dataset_quality_controller';
 
 export interface DatasetQualityController {
   state$: Observable<DatasetQualityPublicState>;
   service: DatasetQualityControllerStateService;
 }
 
-export interface DatasetQualityTableOptions {
-  page?: number;
-  rowsPerPage?: number;
-  sort?: {
-    field: string;
-    direction: Direction;
-  };
-}
+type TableSortOptions = Omit<WithTableOptions['table']['sort'], 'field'> & { field: string };
 
-type FlyoutOptions = Omit<
-  DataStreamStat,
-  'type' | 'size' | 'sizeBytes' | 'lastActivity' | 'degradedDocs'
+export type DatasetQualityTableOptions = Partial<
+  Omit<WithTableOptions['table'], 'sort'> & { sort: TableSortOptions }
 >;
 
-export interface DatasetQualityFlyoutOptions {
-  dataset?: FlyoutOptions & { type: string };
-}
+export type DatasetQualityFlyoutOptions = Omit<WithFlyoutOptions['flyout'], 'datasetDetails'>;
+
+export type DatasetQualityFilterOptions = Partial<Omit<WithFilters['filters'], 'timeRange'>>;
 
 export interface DatasetQualityPublicState {
   table: DatasetQualityTableOptions;
   flyout: DatasetQualityFlyoutOptions;
+  filters: DatasetQualityFilterOptions;
 }
 
 export type DatasetQualityPublicStateUpdate = Partial<DatasetQualityPublicState>;