[Dataset quality] Introduce management fly out

NOTICE.txt

@@ -1,5 +1,5 @@
 Kibana source code with Kibana X-Pack source code
-Copyright 2012-2023 Elasticsearch B.V.
+Copyright 2012-2024 Elasticsearch B.V.
 
 ---
 Pretty handling of logarithmic axes.

x-pack/plugins/dataset_quality/common/api_types.ts

@@ -54,6 +54,12 @@ export const degradedDocsRt = rt.type({
 
 export type DegradedDocs = rt.TypeOf<typeof degradedDocsRt>;
 
+export const dataStreamDetailsRt = rt.type({
+  createdOn: rt.number,
+});
+
+export type DataStreamDetails = rt.TypeOf<typeof dataStreamDetailsRt>;
+
 export const getDataStreamsStatsResponseRt = rt.exact(
   rt.intersection([
     rt.type({
@@ -70,3 +76,5 @@ export const getDataStreamsDegradedDocsStatsResponseRt = rt.exact(
     degradedDocs: rt.array(degradedDocsRt),
   })
 );
+
+export const getDataStreamsDetailsResponseRt = rt.exact(dataStreamDetailsRt);

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

@@ -6,6 +6,7 @@
  */
 
 export const DATASET_QUALITY_APP_ID = 'dataset_quality';
+export const DEFAULT_DATASET_TYPE = 'logs';
 
 export const POOR_QUALITY_MINIMUM_PERCENTAGE = 3;
 export const DEGRADED_QUALITY_MINIMUM_PERCENTAGE = 0;

x-pack/plugins/dataset_quality/common/data_streams_stats/data_stream_details.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { DataStreamDetailsType } from './types';
+
+export class DataStreamDetails {
+  createdOn?: number;
+
+  private constructor(obj: DataStreamDetails) {
+    this.createdOn = obj.createdOn;
+  }
+
+  public static create(dataStreamDetails: DataStreamDetailsType) {
+    return new DataStreamDetails(dataStreamDetails);
+  }
+}

x-pack/plugins/dataset_quality/common/data_streams_stats/data_stream_stat.ts

@@ -6,21 +6,23 @@
  */
 
 import { Integration } from './integration';
-import { DataStreamStatType, IntegrationType } from './types';
+import { DataStreamStatType } from './types';
 
 export class DataStreamStat {
   rawName: string;
+  type: string;
   name: DataStreamStatType['name'];
   namespace: string;
   title: string;
   size?: DataStreamStatType['size'];
   sizeBytes?: DataStreamStatType['sizeBytes'];
   lastActivity?: DataStreamStatType['lastActivity'];
-  integration?: IntegrationType;
+  integration?: Integration;
   degradedDocs?: number;
 
   private constructor(dataStreamStat: DataStreamStat) {
     this.rawName = dataStreamStat.rawName;
+    this.type = dataStreamStat.type;
     this.name = dataStreamStat.name;
     this.title = dataStreamStat.title ?? dataStreamStat.name;
     this.namespace = dataStreamStat.namespace;
@@ -32,10 +34,11 @@ export class DataStreamStat {
   }
 
   public static create(dataStreamStat: DataStreamStatType) {
-    const [_type, dataset, namespace] = dataStreamStat.name.split('-');
+    const [type, dataset, namespace] = dataStreamStat.name.split('-');
 
     const dataStreamStatProps = {
       rawName: dataStreamStat.name,
+      type,
       name: dataset,
       title: dataStreamStat.integration?.datasets?.[dataset] ?? dataset,
       namespace,

x-pack/plugins/dataset_quality/common/data_streams_stats/types.ts

@@ -7,6 +7,7 @@
 
 import { APIClientRequestParamsOf, APIReturnType } from '../rest/create_call_dataset_quality_api';
 import { DataStreamStat } from './data_stream_stat';
+import { DataStreamDetails } from './data_stream_details';
 
 export type GetDataStreamsStatsParams =
   APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/stats`>['params'];
@@ -26,3 +27,10 @@ export type GetDataStreamsDegradedDocsStatsResponse =
   APIReturnType<`GET /internal/dataset_quality/data_streams/degraded_docs`>;
 export type DataStreamDegradedDocsStatServiceResponse = DegradedDocsStatType[];
 export type DegradedDocsStatType = GetDataStreamsDegradedDocsStatsResponse['degradedDocs'][0];
+
+export type GetDataStreamDetailsParams =
+  APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/details`>['params']['query'];
+export type GetDataStreamDetailsResponse =
+  APIReturnType<`GET /internal/dataset_quality/data_streams/details`>;
+export type DataStreamDetailsServiceResponse = DataStreamDetails;
+export type DataStreamDetailsType = Partial<DataStreamDetailsServiceResponse>;

x-pack/plugins/dataset_quality/common/translations.ts

@@ -30,3 +30,56 @@ export const tableSummaryAllText = i18n.translate('xpack.datasetQuality.tableSum
 export const tableSummaryOfText = i18n.translate('xpack.datasetQuality.tableSummaryOfText', {
   defaultMessage: 'of',
 });
+
+export const flyoutCancelText = i18n.translate('xpack.datasetQuality.flyoutCancelText', {
+  defaultMessage: 'Cancel',
+});
+
+export const flyoutOpenInLogExplorerText = i18n.translate(
+  'xpack.datasetQuality.flyoutOpenInLogExplorerText',
+  {
+    defaultMessage: 'Open in Logs Explorer',
+  }
+);
+
+export const flyoutDatasetDetailsText = i18n.translate(
+  'xpack.datasetQuality.flyoutDatasetDetailsText',
+  {
+    defaultMessage: 'Dataset details',
+  }
+);
+
+export const flyoutDatasetLastActivityText = i18n.translate(
+  'xpack.datasetQuality.flyoutDatasetLastActivityText',
+  {
+    defaultMessage: 'Last Activity',
+  }
+);
+
+export const flyoutDatasetCreatedOnText = i18n.translate(
+  'xpack.datasetQuality.flyoutDatasetCreatedOnText',
+  {
+    defaultMessage: 'Created on',
+  }
+);
+
+export const flyoutIntegrationDetailsText = i18n.translate(
+  'xpack.datasetQuality.flyoutIntegrationDetailsText',
+  {
+    defaultMessage: 'Integration details',
+  }
+);
+
+export const flyoutIntegrationVersionText = i18n.translate(
+  'xpack.datasetQuality.flyoutIntegrationVersionText',
+  {
+    defaultMessage: 'Version',
+  }
+);
+
+export const flyoutIntegrationNameText = i18n.translate(
+  'xpack.datasetQuality.flyoutIntegrationNameText',
+  {
+    defaultMessage: 'Name',
+  }
+);

x-pack/plugins/dataset_quality/public/components/common/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 * from './integration_icon';

x-pack/plugins/dataset_quality/public/components/common/integration_icon.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiIcon } from '@elastic/eui';
+import { PackageIcon } from '@kbn/fleet-plugin/public';
+import React from 'react';
+import { Integration } from '../../../common/data_streams_stats/integration';
+import loggingIcon from '../../icons/logging.svg';
+
+interface IntegrationIconProps {
+  integration?: Integration;
+}
+
+export const IntegrationIcon = ({ integration }: IntegrationIconProps) => {
+  return integration ? (
+    <PackageIcon
+      packageName={integration.name}
+      version={integration.version!}
+      icons={integration.icons}
+      size="m"
+      tryApi
+    />
+  ) : (
+    <EuiIcon type={loggingIcon} size="m" />
+  );
+};

x-pack/plugins/dataset_quality/public/components/dataset_quality/columns.tsx

@@ -12,23 +12,23 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiLink,
   EuiSkeletonRectangle,
   EuiToolTip,
 } from '@elastic/eui';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
-import { PackageIcon } from '@kbn/fleet-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import {
   DEGRADED_QUALITY_MINIMUM_PERCENTAGE,
   POOR_QUALITY_MINIMUM_PERCENTAGE,
 } from '../../../common/constants';
 import { DataStreamStat } from '../../../common/data_streams_stats/data_stream_stat';
-import loggingIcon from '../../icons/logging.svg';
-import { LogExplorerLink } from '../log_explorer_link';
 import { QualityIndicator, QualityPercentageIndicator } from '../quality_indicator';
+import { IntegrationIcon } from '../common';
+import { useLinkToLogExplorer } from '../../hooks';
 
 const nameColumnName = i18n.translate('xpack.datasetQuality.nameColumnName', {
   defaultMessage: 'Dataset Name',
@@ -98,10 +98,12 @@ const degradedDocsColumnTooltip = (
 
 export const getDatasetQualitTableColumns = ({
   fieldFormats,
+  setSelectedDataset,
   loadingDegradedStats,
 }: {
   fieldFormats: FieldFormatsStart;
   loadingDegradedStats?: boolean;
+  setSelectedDataset: Dispatch<SetStateAction<DataStreamStat | undefined>>;
 }): Array<EuiBasicTableColumn<DataStreamStat>> => {
   return [
     {
@@ -114,19 +116,9 @@ export const getDatasetQualitTableColumns = ({
         return (
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
-              {integration ? (
-                <PackageIcon
-                  packageName={integration.name}
-                  version={integration.version!}
-                  icons={integration.icons}
-                  size="m"
-                  tryApi
-                />
-              ) : (
-                <EuiIcon type={loggingIcon} size="m" />
-              )}
+              <IntegrationIcon integration={integration} />
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>{title}</EuiFlexItem>
+            <EuiLink onClick={() => setSelectedDataset(dataStreamStat)}>{title}</EuiLink>
           </EuiFlexGroup>
         );
       },
@@ -187,3 +179,15 @@ export const getDatasetQualitTableColumns = ({
     },
   ];
 };
+
+const LogExplorerLink = ({
+  dataStreamStat,
+  title,
+}: {
+  dataStreamStat: DataStreamStat;
+  title: string;
+}) => {
+  const logExplorerLinkProps = useLinkToLogExplorer({ dataStreamStat });
+
+  return <EuiLink {...logExplorerLinkProps}>{title}</EuiLink>;
+};

x-pack/plugins/dataset_quality/public/components/dataset_quality/table.tsx

@@ -10,10 +10,20 @@ import { EuiBasicTable, EuiHorizontalRule, EuiSpacer, EuiText, EuiEmptyPrompt }
 import { FormattedMessage } from '@kbn/i18n-react';
 import { loadingDatasetsText, noDatasetsTitle } from '../../../common/translations';
 import { useDatasetQualityTable } from '../../hooks';
+import { Flyout } from '../flyout';
 
 export const Table = () => {
-  const { sort, onTableChange, pagination, renderedItems, columns, loading, resultsCount } =
-    useDatasetQualityTable();
+  const {
+    sort,
+    onTableChange,
+    pagination,
+    renderedItems,
+    columns,
+    loading,
+    resultsCount,
+    selectedDataset,
+    closeFlyout,
+  } = useDatasetQualityTable();
 
   return (
     <>
@@ -54,6 +64,7 @@ export const Table = () => {
           )
         }
       />
+      {selectedDataset && <Flyout dataset={selectedDataset} closeFlyout={closeFlyout} />}
     </>
   );
 };

x-pack/plugins/dataset_quality/public/components/flyout/dataset_summary.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
+import {
+  flyoutDatasetCreatedOnText,
+  flyoutDatasetDetailsText,
+  flyoutDatasetLastActivityText,
+} from '../../../common/translations';
+import { DataStreamStat } from '../../../common/data_streams_stats/data_stream_stat';
+import { DataStreamDetails } from '../../../common/data_streams_stats/data_stream_details';
+import { FieldsList } from './fields_list';
+
+interface DatasetSummaryProps {
+  fieldFormats: FieldFormatsStart;
+  dataStreamDetails: DataStreamDetails;
+  dataStreamStat: DataStreamStat;
+}
+
+export function DatasetSummary({
+  dataStreamStat,
+  dataStreamDetails,
+  fieldFormats,
+}: DatasetSummaryProps) {
+  const dataFormatter = fieldFormats.getDefaultInstance(KBN_FIELD_TYPES.DATE, [
+    ES_FIELD_TYPES.DATE,
+  ]);
+  const formattedLastActivity = dataFormatter.convert(dataStreamStat.lastActivity);
+  const formattedCreatedOn = dataStreamDetails.createdOn
+    ? dataFormatter.convert(dataStreamDetails.createdOn)
+    : '';
+
+  return (
+    <FieldsList
+      title={flyoutDatasetDetailsText}
+      fields={[
+        {
+          fieldTitle: flyoutDatasetLastActivityText,
+          fieldValue: formattedLastActivity,
+        },
+        {
+          fieldTitle: flyoutDatasetCreatedOnText,
+          fieldValue: formattedCreatedOn,
+        },
+      ]}
+    />
+  );
+}