Merging latest version

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

@@ -10,17 +10,19 @@ 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.name;
+    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/translations.ts

@@ -49,9 +49,12 @@ export const flyoutDatasetDetailsText = i18n.translate(
   }
 );
 
-export const flyoutDatasetTypeText = i18n.translate('xpack.datasetQuality.flyoutDatasetTypeText', {
-  defaultMessage: 'Type',
-});
+export const flyoutDatasetNameSpaceText = i18n.translate(
+  'xpack.datasetQuality.flyoutDatasetNameSpaceText',
+  {
+    defaultMessage: 'Namespace',
+  }
+);
 
 export const flyoutDatasetLastActivityText = i18n.translate(
   'xpack.datasetQuality.flyoutDatasetLastActivityText',

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 [
     {
@@ -116,7 +118,7 @@ export const getDatasetQualitTableColumns = ({
             <EuiFlexItem grow={false}>
               <IntegrationIcon integration={integration} />
             </EuiFlexItem>
-            <EuiLink onClick={() => setSelectedDatasetName(title)}>{title}</EuiLink>
+            <EuiLink onClick={() => setSelectedDataset(dataStreamStat)}>{title}</EuiLink>
           </EuiFlexGroup>
         );
       },
@@ -178,7 +180,14 @@ export const getDatasetQualitTableColumns = ({
   ];
 };
 
-const LinkToLogExplorer = ({ dataStreamStat }: { dataStreamStat: DataStreamStat }) => {
-  const url = useLinkToLogExplorer({ dataStreamStat });
-  return <EuiLink href={url}>{openActionName}</EuiLink>;
+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

@@ -21,7 +21,7 @@ export const Table = () => {
     columns,
     loading,
     resultsCount,
-    selectedDatasetName,
+    selectedDataset,
     closeFlyout,
   } = useDatasetQualityTable();
 
@@ -64,9 +64,7 @@ export const Table = () => {
           )
         }
       />
-      {selectedDatasetName && (
-        <Flyout datasetName={selectedDatasetName} closeFlyout={closeFlyout} />
-      )}
+      {selectedDataset && <Flyout dataset={selectedDataset} closeFlyout={closeFlyout} />}
     </>
   );
 };

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

@@ -21,7 +21,7 @@ import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
 import {
   flyoutDatasetDetailsText,
   flyoutDatasetLastActivityText,
-  flyoutDatasetTypeText,
+  flyoutDatasetNameSpaceText,
 } from '../../../common/translations';
 import { DataStreamStat } from '../../../common/data_streams_stats/data_stream_stat';
 
@@ -31,7 +31,6 @@ interface DatasetSummaryProps {
 }
 
 export function DatasetSummary({ dataStreamStat, fieldFormats }: DatasetSummaryProps) {
-  const [type, _dataset, namespace] = dataStreamStat.name.split('-');
   const formattedLastActivity = fieldFormats
     .getDefaultInstance(KBN_FIELD_TYPES.DATE, [ES_FIELD_TYPES.DATE])
     .convert(dataStreamStat.lastActivity);
@@ -46,16 +45,7 @@ export function DatasetSummary({ dataStreamStat, fieldFormats }: DatasetSummaryP
         <EuiFlexGroup>
           <EuiFlexItem grow={1}>
             <EuiTitle size="xxs">
-              <span>{flyoutDatasetTypeText}</span>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={4}>{type}</EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiHorizontalRule margin="s" />
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <EuiTitle size="xxs">
-              <span>Namespace</span>
+              <span>{flyoutDatasetNameSpaceText}</span>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={4}>
@@ -65,7 +55,7 @@ export function DatasetSummary({ dataStreamStat, fieldFormats }: DatasetSummaryP
                 width: fit-content;
               `}
             >
-              {namespace}
+              {dataStreamStat.namespace}
             </EuiBadge>
           </EuiFlexItem>
         </EuiFlexGroup>

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

@@ -16,51 +16,52 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import React from 'react';
+import { DataStreamStat } from '../../../common/data_streams_stats/data_stream_stat';
 import { flyoutCancelText } from '../../../common/translations';
 import { useDatasetQualityFlyout } from '../../hooks';
 import { DatasetSummary } from './dataset_summary';
 import { Header } from './header';
 import { IntegrationSummary } from './integration_summary';
 
 interface FlyoutProps {
-  datasetName: string;
+  dataset: DataStreamStat;
   closeFlyout: () => void;
 }
 
-export function Flyout({ datasetName, closeFlyout }: FlyoutProps) {
+export function Flyout({ dataset, closeFlyout }: FlyoutProps) {
   const { dataStreamStat, loading, fieldFormats } = useDatasetQualityFlyout({
-    datasetQuery: datasetName,
+    datasetQuery: `${dataset.name}-${dataset.namespace}`,
   });
 
   return (
     <EuiFlyout onClose={closeFlyout} ownFocus={false} data-component-name={'datasetQualityFlyout'}>
-      {loading ? (
-        <EuiFlyoutBody>
-          <EuiFlexGroup justifyContent="center">
-            <EuiLoadingLogo logo="logoObservability" size="l" />
-          </EuiFlexGroup>
-        </EuiFlyoutBody>
-      ) : (
-        <>
-          <Header dataStreamStat={dataStreamStat} />
+      <>
+        <Header dataStreamStat={dataset} />
+        {loading ? (
+          <EuiFlyoutBody>
+            <EuiFlexGroup justifyContent="center">
+              <EuiLoadingLogo logo="logoObservability" size="l" />
+            </EuiFlexGroup>
+          </EuiFlyoutBody>
+        ) : (
           <EuiFlyoutBody>
             <DatasetSummary dataStreamStat={dataStreamStat} fieldFormats={fieldFormats} />
             <EuiSpacer />
             {dataStreamStat.integration && (
               <IntegrationSummary integration={dataStreamStat.integration} />
             )}
           </EuiFlyoutBody>
-          <EuiFlyoutFooter>
-            <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-                  {flyoutCancelText}
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlyoutFooter>
-        </>
-      )}
+        )}
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+                {flyoutCancelText}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </>
     </EuiFlyout>
   );
 }

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

@@ -25,7 +25,7 @@ export function Header({ dataStreamStat }: { dataStreamStat: DataStreamStat }) {
   const { integration, title } = dataStreamStat;
   const euiShadow = useEuiShadow('s');
   const { euiTheme } = useEuiTheme();
-  const logExplorerLink = useLinkToLogExplorer({ dataStreamStat });
+  const logExplorerLinkProps = useLinkToLogExplorer({ dataStreamStat });
 
   return (
     <EuiFlyoutHeader hasBorder>
@@ -55,7 +55,7 @@ export function Header({ dataStreamStat }: { dataStreamStat: DataStreamStat }) {
             justifyContent="flexEnd"
             alignItems="center"
           >
-            <EuiButton size="s" href={logExplorerLink} iconType="logoObservability">
+            <EuiButton size="s" {...logExplorerLinkProps} iconType="logoObservability">
               {flyoutOpenInLogExplorerText}
             </EuiButton>
           </EuiFlexGroup>

x-pack/plugins/dataset_quality/public/hooks/use_dataset_quality_table.tsx

@@ -27,7 +27,7 @@ export const useDatasetQualityTable = () => {
   const {
     services: { fieldFormats },
   } = useKibanaContextForPlugin();
-  const [selectedDatasetName, setSelectedDatasetName] = useState('');
+  const [selectedDataset, setSelectedDataset] = useState<DataStreamStat>();
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [sortField, setSortField] = useState<SORT_FIELD>(DEFAULT_SORT_FIELD);
@@ -47,7 +47,7 @@ export const useDatasetQualityTable = () => {
   );
 
   const columns = useMemo(
-    () => getDatasetQualitTableColumns({ fieldFormats, setSelectedDatasetName, oadingDegradedStats }),
+    () => getDatasetQualitTableColumns({ fieldFormats, setSelectedDataset, loadingDegradedStats }),
     [fieldFormats, loadingDegradedStats]
   );
 
@@ -107,7 +107,7 @@ export const useDatasetQualityTable = () => {
     );
   }, [data.length, pageIndex, pageSize, renderedItems.length]);
 
-  const closeFlyout = useCallback(() => setSelectedDatasetName(''), []);
+  const closeFlyout = useCallback(() => setSelectedDataset(undefined), []);
 
   return {
     sort,
@@ -118,6 +118,6 @@ export const useDatasetQualityTable = () => {
     loading,
     resultsCount,
     closeFlyout,
-    selectedDatasetName,
+    selectedDataset,
   };
 };