[Dataset quality] Filters for timeRange, integrations and datasetQuery (

elastic#176611)

Closes elastic#170242

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

.github/CODEOWNERS

@@ -813,6 +813,7 @@ x-pack/examples/third_party_vis_lens_example @elastic/kibana-visualizations
 x-pack/plugins/threat_intelligence @elastic/security-threat-hunting-investigations
 x-pack/plugins/timelines @elastic/security-threat-hunting-investigations
 packages/kbn-timelion-grammar @elastic/kibana-visualizations
+packages/kbn-timerange @elastic/obs-ux-logs-team
 packages/kbn-tinymath @elastic/kibana-visualizations
 packages/kbn-tooling-log @elastic/kibana-operations
 x-pack/plugins/transform @elastic/ml-ui

package.json

@@ -805,6 +805,7 @@
     "@kbn/threat-intelligence-plugin": "link:x-pack/plugins/threat_intelligence",
     "@kbn/timelines-plugin": "link:x-pack/plugins/timelines",
     "@kbn/timelion-grammar": "link:packages/kbn-timelion-grammar",
+    "@kbn/timerange": "link:packages/kbn-timerange",
     "@kbn/tinymath": "link:packages/kbn-tinymath",
     "@kbn/transform-plugin": "link:x-pack/plugins/transform",
     "@kbn/translations-plugin": "link:x-pack/plugins/translations",

packages/kbn-timerange/README.md

@@ -0,0 +1,25 @@
+# @kbn/timerange
+
+This package shares a set of utilities for working with timeranges.
+
+## Utils
+
+### getDateRange
+
+This function return a timestamp for `startDate` and `endDate` of a given date range.
+
+```tsx
+import { getDateRange } from '@kbn/timerange';
+
+const { startDate, endDate } = getDateRange({ from: 'now-24h', to: 'now' });
+```
+
+### getDateISORange
+
+This function return an ISO string for `startDate` and `endDate` of a given date range.
+
+```tsx
+import { getDateRange } from '@kbn/timerange';
+
+const { startDate, endDate } = getDateISORange({ from: 'now-24h', to: 'now' });
+```

packages/kbn-timerange/index.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { getDateRange, getDateISORange } from './src';

packages/kbn-timerange/jest.config.js

@@ -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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-timerange'],
+};

packages/kbn-timerange/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/timerange",
+  "owner": "@elastic/obs-ux-logs-team"
+}

packages/kbn-timerange/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/timerange",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-timerange/src/index.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import datemath from '@kbn/datemath';
+
+function getParsedDate(rawDate?: string, options = {}) {
+  if (rawDate) {
+    const parsed = datemath.parse(rawDate, options);
+    if (parsed && parsed.isValid()) {
+      return parsed.toDate();
+    }
+  }
+}
+
+function getRanges({ from, to }: { from: string; to: string }) {
+  const start = getParsedDate(from);
+  const end = getParsedDate(to, { roundUp: true });
+
+  if (!start || !end || start > end) {
+    throw new Error(`Invalid Dates: from: ${from}, to: ${to}`);
+  }
+
+  const startDate = start.toISOString();
+  const endDate = end.toISOString();
+
+  return {
+    startDate,
+    endDate,
+  };
+}
+
+export function getDateRange({ from, to }: { from: string; to: string }) {
+  const { startDate, endDate } = getRanges({ from, to });
+
+  return {
+    startDate: new Date(startDate).getTime(),
+    endDate: new Date(endDate).getTime(),
+  };
+}
+
+export function getDateISORange({ from, to }: { from: string; to: string }) {
+  const { startDate, endDate } = getRanges({ from, to });
+
+  return {
+    startDate,
+    endDate,
+  };
+}

packages/kbn-timerange/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/datemath",
+  ]
+}

tsconfig.base.json

@@ -1620,6 +1620,8 @@
       "@kbn/timelines-plugin/*": ["x-pack/plugins/timelines/*"],
       "@kbn/timelion-grammar": ["packages/kbn-timelion-grammar"],
       "@kbn/timelion-grammar/*": ["packages/kbn-timelion-grammar/*"],
+      "@kbn/timerange": ["packages/kbn-timerange"],
+      "@kbn/timerange/*": ["packages/kbn-timerange/*"],
       "@kbn/tinymath": ["packages/kbn-tinymath"],
       "@kbn/tinymath/*": ["packages/kbn-tinymath/*"],
       "@kbn/tooling-log": ["packages/kbn-tooling-log"],

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

@@ -10,5 +10,10 @@ export const DEFAULT_DATASET_TYPE = 'logs';
 
 export const POOR_QUALITY_MINIMUM_PERCENTAGE = 3;
 export const DEGRADED_QUALITY_MINIMUM_PERCENTAGE = 0;
+
 export const DEFAULT_SORT_FIELD = 'title';
 export const DEFAULT_SORT_DIRECTION = 'asc';
+
+export const NONE = 'none';
+
+export const DEFAULT_TIME_RANGE = { from: 'now-24h', to: 'now' };

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

@@ -7,13 +7,17 @@
 
 import { APIClientRequestParamsOf, APIReturnType } from '../rest';
 import { DataStreamStat } from './data_stream_stat';
+import { Integration } from './integration';
 
 export type GetDataStreamsStatsParams =
   APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/stats`>['params'];
 export type GetDataStreamsStatsQuery = GetDataStreamsStatsParams['query'];
 export type GetDataStreamsStatsResponse =
   APIReturnType<`GET /internal/dataset_quality/data_streams/stats`>;
-export type DataStreamStatServiceResponse = DataStreamStat[];
+export interface DataStreamStatServiceResponse {
+  dataStreamStats: DataStreamStat[];
+  integrations: Integration[];
+}
 export type IntegrationType = GetDataStreamsStatsResponse['integrations'][0];
 export type DataStreamStatType = GetDataStreamsStatsResponse['dataStreamsStats'][0] & {
   integration?: IntegrationType;

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

@@ -16,7 +16,7 @@ export const noDatasetsDescription = i18n.translate('xpack.datasetQuality.noData
 });
 
 export const noDatasetsTitle = i18n.translate('xpack.datasetQuality.noDatasetsTitle', {
-  defaultMessage: 'There is no data to display.',
+  defaultMessage: 'No matching data streams found',
 });
 
 export const loadingDatasetsText = i18n.translate('xpack.datasetQuality.loadingDatasetsText', {

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

@@ -8,6 +8,7 @@
 import { EuiIcon } from '@elastic/eui';
 import { PackageIcon } from '@kbn/fleet-plugin/public';
 import React from 'react';
+import { NONE } from '../../../common/constants';
 import { Integration } from '../../../common/data_streams_stats/integration';
 import loggingIcon from '../../icons/logging.svg';
 
@@ -16,7 +17,7 @@ interface IntegrationIconProps {
 }
 
 export const IntegrationIcon = ({ integration }: IntegrationIconProps) => {
-  return integration ? (
+  return integration && integration.name !== NONE ? (
     <PackageIcon
       packageName={integration.name}
       version={integration.version!}

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

@@ -56,18 +56,22 @@ export const createDatasetQuality = ({
 };
 
 const Header = dynamic(() => import('./header'));
-const Table = dynamic(() => import('./table'));
+const Table = dynamic(() => import('./table/table'));
+const Filters = dynamic(() => import('./filters/filters'));
 const SummaryPanel = dynamic(() => import('./summary_panel/summary_panel'));
 
 function DatasetQuality() {
   return (
-    <EuiFlexGroup direction="column" gutterSize="m">
+    <EuiFlexGroup direction="column" gutterSize="l">
       <EuiFlexItem grow={false}>
         <Header />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <SummaryPanel />
       </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <Filters />
+      </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <Table />
       </EuiFlexItem>

x-pack/plugins/dataset_quality/public/components/dataset_quality/filters/filter_bar.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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, { ChangeEvent, useCallback } from 'react';
+import { EuiFieldSearch } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const placeholder = i18n.translate('xpack.datasetQuality.filterBar.placeholder', {
+  defaultMessage: 'Filter datasets',
+});
+
+export interface FilterBarComponentProps {
+  query?: string;
+  onQueryChange: (query: string) => void;
+}
+
+export const FilterBar = ({ query, onQueryChange }: FilterBarComponentProps) => {
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      onQueryChange(event.target.value);
+    },
+    [onQueryChange]
+  );
+
+  return (
+    <EuiFieldSearch
+      fullWidth
+      placeholder={placeholder}
+      value={query ?? ''}
+      onChange={onChange}
+      isClearable={true}
+      aria-label={placeholder}
+    />
+  );
+};

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

@@ -0,0 +1,78 @@
+/*
+ * 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, EuiFlexItem } from '@elastic/eui';
+import { EuiSuperDatePicker } from '@elastic/eui';
+import { UI_SETTINGS } from '@kbn/data-service';
+import { TimePickerQuickRange } from '@kbn/observability-shared-plugin/public/hooks/use_quick_time_ranges';
+import React, { useMemo } from 'react';
+import { useDatasetQualityFilters } from '../../../hooks/use_dataset_quality_filters';
+import { useKibanaContextForPlugin } from '../../../utils/use_kibana';
+import { FilterBar } from './filter_bar';
+import { IntegrationsSelector } from './integrations_selector';
+
+// Allow for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default function Filters() {
+  const {
+    timeRange,
+    onTimeChange,
+    onRefresh,
+    onRefreshChange,
+    isLoading,
+    integrations,
+    onIntegrationsChange,
+    selectedQuery,
+    onQueryChange,
+  } = useDatasetQualityFilters();
+
+  const {
+    services: { uiSettings },
+  } = useKibanaContextForPlugin();
+
+  const timePickerQuickRanges = uiSettings.get<TimePickerQuickRange[]>(
+    UI_SETTINGS.TIMEPICKER_QUICK_RANGES
+  );
+
+  const commonlyUsedRanges = useMemo(
+    () =>
+      timePickerQuickRanges.map(({ from, to, display }) => ({
+        start: from,
+        end: to,
+        label: display,
+      })),
+    [timePickerQuickRanges]
+  );
+
+  return (
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem>
+        <FilterBar query={selectedQuery} onQueryChange={onQueryChange} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <IntegrationsSelector
+          isLoading={isLoading}
+          integrations={integrations}
+          onIntegrationsChange={onIntegrationsChange}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSuperDatePicker
+          start={timeRange.from}
+          end={timeRange.to}
+          onTimeChange={onTimeChange}
+          onRefresh={onRefresh}
+          onRefreshChange={onRefreshChange}
+          commonlyUsedRanges={commonlyUsedRanges}
+          showUpdateButton={true}
+          isPaused={timeRange.refresh.isPaused}
+          refreshInterval={timeRange.refresh.interval}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}