[Rollups] Add deprecated prompt (#185896)

Closes #185861 ## Summary This PR replaces the empty prompt in Rollup Jobs with a deprecation prompt: <img width="1494" alt="Screenshot 2024-06-10 at 17 55 38" src="https://github.com/elastic/kibana/assets/59341489/dd245836-6e9b-4efd-9657-74e2c372059f"> <br> <br> **How to test:** 1. Start Es and Kibana 2. Go to Stack Management -> Rollup Jobs 3. Since there are no existing rollup jobs, verify that the deprecation prompt is displayed and the Downsampling documentation link is correct. ### 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] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [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)
elastic · Jun 17, 2024 · 1cca809 · 1cca809
1 parent c7b5af6
commit 1cca809
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 59 deletions.
diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts
@@ -842,6 +842,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
       datastreamsManualRollover: `${ELASTICSEARCH_DOCS}use-a-data-stream.html#manually-roll-over-a-data-stream`,
       datastreamsTSDS: `${ELASTICSEARCH_DOCS}tsds.html`,
       datastreamsTSDSMetrics: `${ELASTICSEARCH_DOCS}tsds.html#time-series-metric`,
+      datastreamsDownsampling: `${ELASTICSEARCH_DOCS}downsampling.html`,
       installElasticAgent: `${FLEET_DOCS}install-fleet-managed-elastic-agent.html`,
       installElasticAgentStandalone: `${FLEET_DOCS}install-standalone-elastic-agent.html`,
       upgradeElasticAgent: `${FLEET_DOCS}upgrade-elastic-agent.html`,

diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts
@@ -534,6 +534,7 @@ export interface DocLinks {
     datastreamsManualRollover: string;
     datastreamsTSDS: string;
     datastreamsTSDSMetrics: string;
+    datastreamsDownsampling: string;
     installElasticAgent: string;
     installElasticAgentStandalone: string;
     packageSignatures: string;

diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/deprecated_prompt.tsx b/x-pack/plugins/rollup/public/crud_app/sections/job_list/deprecated_prompt.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, { Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiButton, EuiEmptyPrompt, EuiPageSection } from '@elastic/eui';
+import { documentationLinks } from '../../services/documentation_links';
+
+export const DeprecatedPrompt = () => {
+  return (
+    <EuiPageSection alignment="center" grow={true}>
+      <EuiEmptyPrompt
+        color="primary"
+        data-test-subj="jobListDeprecatedPrompt"
+        iconType="iInCircle"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.rollupJobs.deprecatedPromptTitle"
+              defaultMessage="Deprecated in 8.11.0"
+            />
+          </h1>
+        }
+        body={
+          <Fragment>
+            <p>
+              <FormattedMessage
+                id="xpack.rollupJobs.deprecatedPromptDescription"
+                defaultMessage="Rollups are deprecated and will be removed in a future version. Use downsampling instead."
+              />
+            </p>
+          </Fragment>
+        }
+        actions={
+          <EuiButton
+            href={documentationLinks.fleet.datastreamsDownsampling}
+            target="_blank"
+            fill
+            iconType="help"
+          >
+            <FormattedMessage
+              id="xpack.rollupJobs.deprecatedPrompt.downsamplingDocsButtonLabel"
+              defaultMessage="Downsampling docs"
+            />
+          </EuiButton>
+        }
+      />
+    </EuiPageSection>
+  );
+};
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js b/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js
@@ -11,7 +11,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
 import {
-  EuiButton,
   EuiButtonEmpty,
   EuiEmptyPrompt,
   EuiPageHeader,
@@ -22,11 +21,12 @@ import {
 import { withKibana } from '@kbn/kibana-react-plugin/public';
 
 import { extractQueryParams, SectionLoading } from '../../../shared_imports';
-import { getRouterLinkProps, listBreadcrumb } from '../../services';
+import { listBreadcrumb } from '../../services';
 import { documentationLinks } from '../../services/documentation_links';
 
 import { JobTable } from './job_table';
 import { DetailPanel } from './detail_panel';
+import { DeprecatedPrompt } from './deprecated_prompt';
 
 const REFRESH_RATE_MS = 30000;
 
@@ -132,50 +132,6 @@ export class JobListUi extends Component {
     );
   }
 
-  renderEmpty() {
-    return (
-      <EuiPageSection alignment="center" grow={true}>
-        <EuiEmptyPrompt
-          color="subdued"
-          data-test-subj="jobListEmptyPrompt"
-          iconType="indexRollupApp"
-          title={
-            <h1>
-              <FormattedMessage
-                id="xpack.rollupJobs.jobList.emptyPromptTitle"
-                defaultMessage="Create your first rollup job"
-              />
-            </h1>
-          }
-          body={
-            <Fragment>
-              <p>
-                <FormattedMessage
-                  id="xpack.rollupJobs.jobList.emptyPromptDescription"
-                  defaultMessage="Rollup jobs summarize and store historical data in a smaller index
-                  for future analysis."
-                />
-              </p>
-            </Fragment>
-          }
-          actions={
-            <EuiButton
-              data-test-subj="createRollupJobButton"
-              {...getRouterLinkProps('/create')}
-              fill
-              iconType="plusInCircle"
-            >
-              <FormattedMessage
-                id="xpack.rollupJobs.jobList.emptyPrompt.createButtonLabel"
-                defaultMessage="Create rollup job"
-              />
-            </EuiButton>
-          }
-        />
-      </EuiPageSection>
-    );
-  }
-
   renderLoading() {
     return (
       <EuiPageSection alignment="center" grow={true}>
@@ -235,7 +191,7 @@ export class JobListUi extends Component {
         content = this.renderError(jobLoadError);
       }
     } else if (!isLoading && !hasJobs) {
-      content = this.renderEmpty();
+      content = <DeprecatedPrompt />;
     } else if (isLoading) {
       content = this.renderLoading();
     } else {

diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.test.js b/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.test.js
@@ -52,10 +52,10 @@ const Component = (props) => (
 const initTestBed = registerTestBed(Component, { defaultProps, store: rollupJobsStore });
 
 describe('<JobList />', () => {
-  it('should render empty prompt when loading is complete and there are no jobs', () => {
+  it('should render deprecated prompt when loading is complete and there are no rollup jobs', () => {
     const { exists } = initTestBed();
 
-    expect(exists('jobListEmptyPrompt')).toBeTruthy();
+    expect(exists('jobListDeprecatedPrompt')).toBeTruthy();
   });
 
   it('should display a loading message when loading the jobs', () => {

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -31549,9 +31549,6 @@
     "xpack.rollupJobs.jobDetails.tabSummary.sectionLogisticsLabel": "Logistique",
     "xpack.rollupJobs.jobDetails.tabSummary.sectionStatsTitle": "Statistiques",
     "xpack.rollupJobs.jobList.createButtonLabel": "Créer une tâche de cumul",
-    "xpack.rollupJobs.jobList.emptyPrompt.createButtonLabel": "Créer une tâche de cumul",
-    "xpack.rollupJobs.jobList.emptyPromptDescription": "Les tâches de cumul résument et stockent les données historiques dans un index plus petit pour une analyse ultérieure.",
-    "xpack.rollupJobs.jobList.emptyPromptTitle": "Créer votre première tâche de cumul",
     "xpack.rollupJobs.jobList.loadingErrorTitle": "Erreur lors du chargement des tâches de cumul",
     "xpack.rollupJobs.jobList.loadingTitle": "Chargement des tâches de cumul…",
     "xpack.rollupJobs.jobList.noPermissionText": "Vous n'êtes pas autorisé à afficher ou à ajouter des tâches de cumul.",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -31525,9 +31525,6 @@
     "xpack.rollupJobs.jobDetails.tabSummary.sectionLogisticsLabel": "ロジスティクス",
     "xpack.rollupJobs.jobDetails.tabSummary.sectionStatsTitle": "統計",
     "xpack.rollupJobs.jobList.createButtonLabel": "ロールアップジョブを作成",
-    "xpack.rollupJobs.jobList.emptyPrompt.createButtonLabel": "ロールアップジョブを作成",
-    "xpack.rollupJobs.jobList.emptyPromptDescription": "ロールアップジョブは、今後の分析用に履歴データを小さなインデックスに要約して格納します。",
-    "xpack.rollupJobs.jobList.emptyPromptTitle": "初めてのロールアップジョブの作成",
     "xpack.rollupJobs.jobList.loadingErrorTitle": "ロールアップジョブを読み込み中にエラーが発生",
     "xpack.rollupJobs.jobList.loadingTitle": "ロールアップジョブを読み込み中...",
     "xpack.rollupJobs.jobList.noPermissionText": "ロールアップジョブの表示または追加パーミッションがありません。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -31566,9 +31566,6 @@
     "xpack.rollupJobs.jobDetails.tabSummary.sectionLogisticsLabel": "运筹",
     "xpack.rollupJobs.jobDetails.tabSummary.sectionStatsTitle": "统计信息",
     "xpack.rollupJobs.jobList.createButtonLabel": "创建汇总/打包作业",
-    "xpack.rollupJobs.jobList.emptyPrompt.createButtonLabel": "创建汇总/打包作业",
-    "xpack.rollupJobs.jobList.emptyPromptDescription": "汇总/打包作业可汇总历史数据并将其存储在较小的索引中以供将来分析。",
-    "xpack.rollupJobs.jobList.emptyPromptTitle": "创建您的首个汇总/打包作业",
     "xpack.rollupJobs.jobList.loadingErrorTitle": "加载汇总/打包作业时出错",
     "xpack.rollupJobs.jobList.loadingTitle": "正在加载汇总/打包作业……",
     "xpack.rollupJobs.jobList.noPermissionText": "您没有权限查看或添加汇总/打包作业。",

diff --git a/x-pack/test/functional/apps/rollup_job/rollup_jobs.js b/x-pack/test/functional/apps/rollup_job/rollup_jobs.js
@@ -17,6 +17,7 @@ export default function ({ getService, getPageObjects }) {
   const esDeleteAllIndices = getService('esDeleteAllIndices');
   const kibanaServer = getService('kibanaServer');
   const es = getService('es');
+  const testSubjects = getService('testSubjects');
   const isRunningCcs = config.get('esTestCluster.ccs') ? true : false;
   let remoteEs;
   if (isRunningCcs) {
@@ -53,6 +54,10 @@ export default function ({ getService, getPageObjects }) {
       await createMockRollupIndex(es);
     });
 
+    it('shows deprecation prompt when there are no existing rollup jobs', async () => {
+      expect(await testSubjects.exists('jobListDeprecatedPrompt')).to.be(true);
+    });
+
     it('create new rollup job', async () => {
       const interval = '1000ms';
       const esNode = isRunningCcs ? remoteEs : es;

diff --git a/x-pack/test/functional/page_objects/rollup_page.ts b/x-pack/test/functional/page_objects/rollup_page.ts
@@ -13,6 +13,7 @@ export class RollupPageObject extends FtrService {
   private readonly log = this.ctx.getService('log');
   private readonly find = this.ctx.getService('find');
   private readonly header = this.ctx.getPageObject('header');
+  private readonly common = this.ctx.getPageObject('common');
   private readonly retry = this.ctx.getService('retry');
 
   async createNewRollUpJob(
@@ -26,7 +27,7 @@ export class RollupPageObject extends FtrService {
   ) {
     let stepNum = 1;
     // Step 1
-    await this.testSubjects.click('createRollupJobButton');
+    await this.common.navigateToUrlWithBrowserHistory('rollupJob', '/create');
     await this.verifyStepIsActive(stepNum);
     await this.addRollupNameandIndexPattern(jobName, indexPattern);
     await this.verifyIndexPatternAccepted();