[Rollups] Update Rollup badge for deprecation (#186321)

## Summary

This PR updates the Rollup badge in the indices list and the data views
list so that it provides deprecation information. The tooltip component
is stored in a new package to avoid cyclical dependencies as it is used
in both the Index management plugin and in the Data views management
plugin.

<details><summary>Screenshots</summary>
<img width="1679" alt="Screenshot 2024-06-17 at 18 08 35"
src="1d3daa9d-3f62-49f8-803f-1b3d4605f9a4">

<img width="1679" alt="Screenshot 2024-06-17 at 18 08 53"
src="2e88d119-88e7-4d01-bab9-bc2add82b91c">

<img width="1679" alt="Screenshot 2024-06-17 at 18 09 18"
src="29d3d3f2-de46-45ea-96a1-b83495d122df">
</details>

**How to test:**
1. Start Es and Kibana
2. Add the sample data "Sample web logs"
3. Elasticsearch only allows creating a rollup job if there is an
existing rollup usage in the cluster. To simulate rollup usage, create a
mock rollup index through Console:

```
PUT /mock_rollup_index
{
  "mappings": {
    "_meta": {
      "_rollup": {
        "id": "logs_job"
      }
    }
  }
}
```


4. Create a sample rollup job through Console:

```
PUT _rollup/job/logs_job
{
  "id": "logs_job",
  "index_pattern": "kibana_sample_data_logs",
  "rollup_index": "rollup_logstash",
  "cron": "* * * * * ?",
  "page_size": 1000,
  "groups": {
    "date_histogram": {
      "interval": "60m",
      "delay": "7d",
      "time_zone": "UTC",
      "field": "@timestamp"
    },
    "terms": {
      "fields": [
        "geo.src",
        "machine.os.keyword"
      ]
    },
    "histogram": {
      "interval": "1003",
      "fields": [
        "bytes",
        "memory"
      ]
    }
  }
}
```


5. Delete the mock rollup index since it causes issues for the rollup
API that we use to fetch rollup indices:
`DELETE /mock_rollup_index`
6. Navigate to Index Management and toggle the "Include rollup indices"
switch
7. Verify that the rollup indices have the deprecation badge.
8. Navigate to Data Views and create a rollup data view with index
pattern that matches the created rollup index (`rollup*`).
9. In the list of data views, verify that the rollup data view has the
correct rollup deprecation badge.
10. Click on the rollup data view and verify that the details panel also
has the deprecation badge.

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

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

.github/CODEOWNERS

@@ -684,6 +684,7 @@ x-pack/test/plugin_functional/plugins/resolver_test @elastic/security-solution
 packages/response-ops/feature_flag_service @elastic/response-ops
 examples/response_stream @elastic/ml-ui
 packages/kbn-rison @elastic/kibana-operations
+x-pack/packages/rollup @elastic/kibana-management
 x-pack/plugins/rollup @elastic/kibana-management
 packages/kbn-router-to-openapispec @elastic/kibana-core
 packages/kbn-router-utils @elastic/obs-ux-logs-team

package.json

@@ -695,6 +695,7 @@
     "@kbn/response-ops-feature-flag-service": "link:packages/response-ops/feature_flag_service",
     "@kbn/response-stream-plugin": "link:examples/response_stream",
     "@kbn/rison": "link:packages/kbn-rison",
+    "@kbn/rollup": "link:x-pack/packages/rollup",
     "@kbn/rollup-plugin": "link:x-pack/plugins/rollup",
     "@kbn/router-to-openapispec": "link:packages/kbn-router-to-openapispec",
     "@kbn/router-utils": "link:packages/kbn-router-utils",

src/plugins/data_view_management/public/components/edit_index_pattern/edit_index_pattern.tsx

@@ -31,6 +31,7 @@ import {
 import { pickBy } from 'lodash';
 import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import type * as CSS from 'csstype';
+import { RollupDeprecationTooltip } from '@kbn/rollup';
 import { IndexPatternManagmentContext } from '../../types';
 import { Tabs } from './tabs';
 import { IndexHeader } from './index_header';
@@ -292,6 +293,10 @@ export const EditIndexPattern = withRouter(
                   >
                     {tag.name}
                   </EuiBadge>
+                ) : tag.key === 'rollup' ? (
+                  <RollupDeprecationTooltip>
+                    <EuiBadge color="warning">{tag.name}</EuiBadge>
+                  </RollupDeprecationTooltip>
                 ) : (
                   <EuiBadge color="hollow">{tag.name}</EuiBadge>
                 )}

src/plugins/data_view_management/public/components/index_pattern_table/index_pattern_table.tsx

@@ -28,6 +28,7 @@ import { reactRouterNavigate, useKibana } from '@kbn/kibana-react-plugin/public'
 import { NoDataViewsPromptComponent } from '@kbn/shared-ux-prompt-no-data-views';
 import type { SpacesContextProps } from '@kbn/spaces-plugin/public';
 import { DataViewType } from '@kbn/data-views-plugin/public';
+import { RollupDeprecationTooltip } from '@kbn/rollup';
 import type { IndexPatternManagmentContext } from '../../types';
 import { getListBreadcrumbs } from '../breadcrumbs';
 import { type RemoveDataViewProps, removeDataView } from '../edit_index_pattern';
@@ -247,7 +248,14 @@ export const IndexPatternTable = ({
           )}
           {dataView?.tags?.map(({ key: tagKey, name: tagName }) => (
             <span key={tagKey}>
-              &emsp;<EuiBadge>{tagName}</EuiBadge>
+              &emsp;
+              {tagKey === DataViewType.ROLLUP ? (
+                <RollupDeprecationTooltip>
+                  <EuiBadge color="warning">{tagName}</EuiBadge>
+                </RollupDeprecationTooltip>
+              ) : (
+                <EuiBadge>{tagName}</EuiBadge>
+              )}
             </span>
           ))}
         </div>

src/plugins/data_view_management/public/components/utils.ts

@@ -14,6 +14,7 @@ import {
   DataViewType,
 } from '@kbn/data-views-plugin/public';
 import { i18n } from '@kbn/i18n';
+import { ROLLUP_DEPRECATION_BADGE_LABEL } from '@kbn/rollup';
 
 const defaultIndexPatternListName = i18n.translate(
   'indexPatternManagement.editIndexPattern.list.defaultIndexPatternListName',
@@ -22,13 +23,6 @@ const defaultIndexPatternListName = i18n.translate(
   }
 );
 
-const rollupIndexPatternListName = i18n.translate(
-  'indexPatternManagement.editIndexPattern.list.rollupIndexPatternListName',
-  {
-    defaultMessage: 'Rollup',
-  }
-);
-
 export const isRollup = (indexPatternType: string = '') => {
   return indexPatternType === DataViewType.ROLLUP;
 };
@@ -85,7 +79,7 @@ export const getTags = (
   if (isRollup(indexPattern.type) && rollupsEnabled) {
     tags.push({
       key: DataViewType.ROLLUP,
-      name: rollupIndexPatternListName,
+      name: ROLLUP_DEPRECATION_BADGE_LABEL,
       'data-test-subj': 'rollup-tag',
     });
   }

src/plugins/data_view_management/tsconfig.json

@@ -44,6 +44,7 @@
     "@kbn/core-http-browser",
     "@kbn/code-editor",
     "@kbn/react-kibana-mount",
+    "@kbn/rollup",
   ],
   "exclude": [
     "target/**/*",

tsconfig.base.json

@@ -1362,6 +1362,8 @@
       "@kbn/response-stream-plugin/*": ["examples/response_stream/*"],
       "@kbn/rison": ["packages/kbn-rison"],
       "@kbn/rison/*": ["packages/kbn-rison/*"],
+      "@kbn/rollup": ["x-pack/packages/rollup"],
+      "@kbn/rollup/*": ["x-pack/packages/rollup/*"],
       "@kbn/rollup-plugin": ["x-pack/plugins/rollup"],
       "@kbn/rollup-plugin/*": ["x-pack/plugins/rollup/*"],
       "@kbn/router-to-openapispec": ["packages/kbn-router-to-openapispec"],

x-pack/.i18nrc.json

@@ -90,7 +90,7 @@
     "xpack.profiling": ["plugins/observability_solution/profiling"],
     "xpack.remoteClusters": "plugins/remote_clusters",
     "xpack.reporting": ["plugins/reporting"],
-    "xpack.rollupJobs": ["plugins/rollup"],
+    "xpack.rollupJobs": ["packages/rollup", "plugins/rollup"],
     "xpack.runtimeFields": "plugins/runtime_fields",
     "xpack.screenshotting": "plugins/screenshotting",
     "xpack.searchHomepage": "plugins/search_homepage",

x-pack/packages/rollup/README.md

@@ -0,0 +1,3 @@
+# @kbn/rollup
+
+Contains Rollups-related components and constants to be used by Rollups and other plugins. Primarily used to avoid cyclical dependencies.

x-pack/packages/rollup/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 { ROLLUP_DEPRECATION_BADGE_LABEL, RollupDeprecationTooltip } from './src';

x-pack/packages/rollup/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/x-pack/packages/rollup'],
+};

x-pack/packages/rollup/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/rollup",
+  "owner": "@elastic/kibana-management"
+}

x-pack/packages/rollup/package.json

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

x-pack/packages/rollup/src/constants/index.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const ROLLUP_DEPRECATION_BADGE_LABEL = i18n.translate(
+  'xpack.rollupJobs.rollupDeprecationLabel',
+  {
+    defaultMessage: 'Rollup (deprecated)',
+  }
+);

x-pack/packages/rollup/src/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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { ROLLUP_DEPRECATION_BADGE_LABEL } from './constants';
+export { RollupDeprecationTooltip } from './rollup_deprecation_tooltip';

x-pack/packages/rollup/src/rollup_deprecation_tooltip/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 { RollupDeprecationTooltip } from './rollup_deprecation_tooltip';

x-pack/packages/rollup/src/rollup_deprecation_tooltip/rollup_deprecation_tooltip.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 React, { ReactElement } from 'react';
+import { EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface RollupDeprecationTooltipProps {
+  /** The item wrapped by the deprecation tooltip.  */
+  children: ReactElement;
+}
+
+export const RollupDeprecationTooltip = ({ children }: RollupDeprecationTooltipProps) => {
+  return (
+    <EuiToolTip
+      title={i18n.translate('xpack.rollupJobs.rollupDeprecationTooltipTitle', {
+        defaultMessage: 'Rollups are deprecated in 8.11.0',
+      })}
+      content={i18n.translate('xpack.rollupJobs.rollupDeprecationTooltipContent', {
+        defaultMessage:
+          'Rollups are deprecated and will be removed in a future version. Use downsampling instead.',
+      })}
+      children={children}
+    />
+  );
+};

x-pack/packages/rollup/tsconfig.json

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

x-pack/plugins/index_management/public/application/lib/render_badges.tsx

@@ -9,6 +9,7 @@ import React, { Fragment, ReactNode } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiBadge, Query } from '@elastic/eui';
 
+import { ROLLUP_DEPRECATION_BADGE_LABEL, RollupDeprecationTooltip } from '@kbn/rollup';
 import { ExtensionsService } from '../../services';
 import { Index } from '../..';
 
@@ -18,7 +19,8 @@ export const renderBadges = (
   onFilterChange?: (query: Query) => void
 ) => {
   const badgeLabels: ReactNode[] = [];
-  extensionsService.badges.forEach(({ matchIndex, label, color, filterExpression }) => {
+  extensionsService.badges.forEach((indexBadge) => {
+    const { matchIndex, label, color, filterExpression } = indexBadge;
     if (matchIndex(index)) {
       const clickHandler = () => {
         if (onFilterChange && filterExpression) {
@@ -37,7 +39,14 @@ export const renderBadges = (
         ) : (
           <EuiBadge color={color}>{label}</EuiBadge>
         );
-      badgeLabels.push(<Fragment key={label}> {badge}</Fragment>);
+      const badgeItem =
+        // If the badge is for Rollups, add a tooltip with deprecation information
+        indexBadge.label === ROLLUP_DEPRECATION_BADGE_LABEL ? (
+          <RollupDeprecationTooltip>{badge}</RollupDeprecationTooltip>
+        ) : (
+          badge
+        );
+      badgeLabels.push(<Fragment key={label}> {badgeItem}</Fragment>);
     }
   });
   return <Fragment>{badgeLabels}</Fragment>;

x-pack/plugins/index_management/tsconfig.json

@@ -51,6 +51,7 @@
     "@kbn/ml-plugin",
     "@kbn/react-kibana-context-render",
     "@kbn/react-kibana-mount",
+    "@kbn/rollup",
     "@kbn/ml-error-utils",
   ],
   "exclude": ["target/**/*"]

x-pack/plugins/rollup/public/extend_index_management/index.ts

@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { Index } from '@kbn/index-management-plugin/common';
+import { ROLLUP_DEPRECATION_BADGE_LABEL } from '@kbn/rollup';
 
 export const rollupToggleExtension = {
   matchIndex: (index: Index) => {
@@ -22,9 +23,7 @@ export const rollupBadgeExtension = {
   matchIndex: (index: Index) => {
     return Boolean(index.isRollupIndex);
   },
-  label: i18n.translate('xpack.rollupJobs.indexMgmtBadge.rollupLabel', {
-    defaultMessage: 'Rollup',
-  }),
-  color: 'success',
+  label: ROLLUP_DEPRECATION_BADGE_LABEL,
+  color: 'warning',
   filterExpression: 'isRollupIndex:true',
 };

x-pack/plugins/rollup/tsconfig.json

@@ -34,6 +34,7 @@
     "@kbn/shared-ux-router",
     "@kbn/data-views-plugin",
     "@kbn/react-kibana-context-render",
+    "@kbn/rollup",
 
   ],
   "exclude": [

x-pack/plugins/translations/translations/fr-FR.json

@@ -4527,7 +4527,6 @@
     "indexPatternManagement.editIndexPattern.fields.table.typeHeader": "Type",
     "indexPatternManagement.editIndexPattern.indexPatternHeading": "Modèle d'indexation :",
     "indexPatternManagement.editIndexPattern.list.defaultIndexPatternListName": "Par défaut",
-    "indexPatternManagement.editIndexPattern.list.rollupIndexPatternListName": "Cumul",
     "indexPatternManagement.editIndexPattern.mappingConflictHeader": "Conflit de mapping",
     "indexPatternManagement.editIndexPattern.scripted.addFieldButton": "Ajouter un champ scripté",
     "indexPatternManagement.editIndexPattern.scripted.deleteField.cancelButton": "Annuler",
@@ -31501,7 +31500,6 @@
     "xpack.rollupJobs.detailPanel.loadingLabel": "Chargement de la tâche de cumul…",
     "xpack.rollupJobs.detailPanel.notFoundLabel": "Tâche de cumul introuvable",
     "xpack.rollupJobs.featureCatalogueDescription": "Résumez et stockez les données historiques dans un index plus petit pour une analyse ultérieure.",
-    "xpack.rollupJobs.indexMgmtBadge.rollupLabel": "Cumul",
     "xpack.rollupJobs.indexMgmtToggle.toggleLabel": "Inclure les index de cumul",
     "xpack.rollupJobs.jobActionMenu.cloneJobLabel": "Cloner la tâche",
     "xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.cancelButtonText": "Annuler",

x-pack/plugins/translations/translations/ja-JP.json

@@ -4520,7 +4520,6 @@
     "indexPatternManagement.editIndexPattern.fields.table.typeHeader": "型",
     "indexPatternManagement.editIndexPattern.indexPatternHeading": "インデックスパターン：",
     "indexPatternManagement.editIndexPattern.list.defaultIndexPatternListName": "デフォルト",
-    "indexPatternManagement.editIndexPattern.list.rollupIndexPatternListName": "ロールアップ",
     "indexPatternManagement.editIndexPattern.mappingConflictHeader": "マッピングの矛盾",
     "indexPatternManagement.editIndexPattern.scripted.addFieldButton": "スクリプトフィールドを追加",
     "indexPatternManagement.editIndexPattern.scripted.deleteField.cancelButton": "キャンセル",
@@ -31477,7 +31476,6 @@
     "xpack.rollupJobs.detailPanel.loadingLabel": "ロールアップジョブを読み込み中...",
     "xpack.rollupJobs.detailPanel.notFoundLabel": "ロールアップジョブが見つかりません",
     "xpack.rollupJobs.featureCatalogueDescription": "今後の分析用に履歴データを小さなインデックスに要約して格納します。",
-    "xpack.rollupJobs.indexMgmtBadge.rollupLabel": "ロールアップ",
     "xpack.rollupJobs.indexMgmtToggle.toggleLabel": "ロールアップインデックスを含める",
     "xpack.rollupJobs.jobActionMenu.cloneJobLabel": "ジョブのクローンを作成します",
     "xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.cancelButtonText": "キャンセル",

x-pack/plugins/translations/translations/zh-CN.json

@@ -4529,7 +4529,6 @@
     "indexPatternManagement.editIndexPattern.fields.table.typeHeader": "类型",
     "indexPatternManagement.editIndexPattern.indexPatternHeading": "索引模式：",
     "indexPatternManagement.editIndexPattern.list.defaultIndexPatternListName": "默认",
-    "indexPatternManagement.editIndexPattern.list.rollupIndexPatternListName": "汇总/打包",
     "indexPatternManagement.editIndexPattern.mappingConflictHeader": "映射冲突",
     "indexPatternManagement.editIndexPattern.scripted.addFieldButton": "添加脚本字段",
     "indexPatternManagement.editIndexPattern.scripted.deleteField.cancelButton": "取消",
@@ -31518,7 +31517,6 @@
     "xpack.rollupJobs.detailPanel.loadingLabel": "正在加载汇总/打包作业……",
     "xpack.rollupJobs.detailPanel.notFoundLabel": "未找到汇总/打包作业",
     "xpack.rollupJobs.featureCatalogueDescription": "汇总历史数据并将其存储在较小的索引中以供将来分析。",
-    "xpack.rollupJobs.indexMgmtBadge.rollupLabel": "汇总/打包",
     "xpack.rollupJobs.indexMgmtToggle.toggleLabel": "包括汇总索引",
     "xpack.rollupJobs.jobActionMenu.cloneJobLabel": "克隆作业",
     "xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.cancelButtonText": "取消",

yarn.lock

@@ -5941,6 +5941,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/rollup@link:x-pack/packages/rollup":
+  version "0.0.0"
+  uid ""
+
 "@kbn/router-to-openapispec@link:packages/kbn-router-to-openapispec":
   version "0.0.0"
   uid ""