[Dataset quality] Introduce management fly out (#173554)

related to  #170441 

## 📝  Summary

This PR introduces the dataset quality flyout and shows the first 2
sections in the flyout, dataset and integration details. The new Actions
column is also added as part of this PR.

---------

Co-authored-by: mohamedhamed-ahmed <mohamed.ahmed@elastic.co>
Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

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,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 interface DataStreamDetails {
+  createdOn?: number;
+}

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

@@ -5,22 +5,26 @@
  * 2.0.
  */
 
+import { DataStreamType } from '../types';
+import { indexNameToDataStreamParts } from '../utils';
 import { Integration } from './integration';
-import { DataStreamStatType, IntegrationType } from './types';
+import { DataStreamStatType } from './types';
 
 export class DataStreamStat {
   rawName: string;
+  type: DataStreamType;
   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 +36,11 @@ export class DataStreamStat {
   }
 
   public static create(dataStreamStat: DataStreamStatType) {
-    const [_type, dataset, namespace] = dataStreamStat.name.split('-');
+    const { type, dataset, namespace } = indexNameToDataStreamParts(dataStreamStat.name);
 
     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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { APIClientRequestParamsOf, APIReturnType } from '../rest/create_call_dataset_quality_api';
+import { APIClientRequestParamsOf, APIReturnType } from '../rest';
 import { DataStreamStat } from './data_stream_stat';
 
 export type GetDataStreamsStatsParams =
@@ -26,3 +26,11 @@ 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/{dataStream}/details`>['params']['path'];
+export type GetDataStreamDetailsResponse =
+  APIReturnType<`GET /internal/dataset_quality/data_streams/{dataStream}/details`>;
+
+export type { DataStreamStat } from './data_stream_stat';
+export type { DataStreamDetails } from './data_stream_details';

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/common/types/dataset_types.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+// https://github.com/gcanti/io-ts/blob/master/index.md#union-of-string-literals
+import * as t from 'io-ts';
+
+export const dataStreamTypesRt = t.keyof({
+  logs: null,
+  metrics: null,
+  traces: null,
+  synthetics: null,
+  profiling: null,
+});
+
+export type DataStreamType = t.TypeOf<typeof dataStreamTypesRt>;

x-pack/plugins/dataset_quality/common/types/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 './dataset_types';

x-pack/plugins/dataset_quality/common/utils/dataset_name.test.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 {
+  dataStreamPartsToIndexName,
+  streamPartsToIndexPattern,
+  indexNameToDataStreamParts,
+} from './dataset_name';
+
+describe('dataset_name', () => {
+  describe('streamPartsToIndexPattern', () => {
+    it('returns the correct index pattern', () => {
+      expect(
+        streamPartsToIndexPattern({
+          typePattern: 'logs',
+          datasetPattern: '*nginx.access*',
+        })
+      ).toEqual('logs-*nginx.access*');
+    });
+  });
+
+  describe('dataStreamPartsToIndexName', () => {
+    it('returns the correct index name', () => {
+      expect(
+        dataStreamPartsToIndexName({
+          type: 'logs',
+          dataset: 'nginx.access',
+          namespace: 'default',
+        })
+      ).toEqual('logs-nginx.access-default');
+    });
+  });
+
+  describe('indexNameToDataStreamParts', () => {
+    it('returns the correct data stream name', () => {
+      expect(indexNameToDataStreamParts('logs-nginx.access-default')).toEqual({
+        type: 'logs',
+        dataset: 'nginx.access',
+        namespace: 'default',
+      });
+    });
+
+    it('handles the case where the dataset name contains a hyphen', () => {
+      expect(indexNameToDataStreamParts('logs-heartbeat-8-default')).toEqual({
+        type: 'logs',
+        dataset: 'heartbeat-8',
+        namespace: 'default',
+      });
+    });
+  });
+});

x-pack/plugins/dataset_quality/common/utils/dataset_name.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { DataStreamType } from '../types';
+
+export interface DataStreamNameParts {
+  type: DataStreamType;
+  dataset: string;
+  namespace: string;
+}
+
+export const streamPartsToIndexPattern = ({
+  typePattern,
+  datasetPattern,
+}: {
+  datasetPattern: string;
+  typePattern: string;
+}) => {
+  return `${typePattern}-${datasetPattern}`;
+};
+
+export const dataStreamPartsToIndexName = ({ type, dataset, namespace }: DataStreamNameParts) => {
+  return `${type}-${dataset}-${namespace}`;
+};
+
+export const indexNameToDataStreamParts = (dataStreamName: string) => {
+  const [type, ...dataStreamParts] = dataStreamName.split('-');
+  const namespace = dataStreamParts[dataStreamParts.length - 1];
+  const dataset = dataStreamParts.slice(0, dataStreamParts.length - 1).join('-');
+
+  return {
+    type: type as DataStreamType,
+    dataset,
+    namespace,
+  };
+};

x-pack/plugins/dataset_quality/common/utils/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 './dataset_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" />
+  );
+};