[Rollups] Add deprecation warning callout (#186174)

## Summary

This PR adds a deprecation warning callout to the Rollup list view and
in the creation form.

<details><summary>Screenshots</summary>
<img width="1370" alt="Screenshot 2024-06-13 at 12 16 03"
src="https://github.com/elastic/kibana/assets/59341489/0d92a9b4-57e5-4216-bdc1-c82622d99c12">

<img width="1370" alt="Screenshot 2024-06-13 at 12 16 10"
src="https://github.com/elastic/kibana/assets/59341489/c01b6aff-e2d9-4271-991b-dc155cce0fb6">
</details>

**How to test:**
1. Start Es and Kibana
2. Add the sample data "Sample web logs"
<details><summary>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:</summary>

```
PUT /mock_rollup_index
{
  "mappings": {
    "_meta": {
      "_rollup": {
        "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"
            ]
          }
        },
        "metrics": [
          {
            "field": "bytes",
            "metrics": [
              "avg"
            ]
          }
        ]
      }
    }
  }
}
```
</details>

<details><summary>4. Create a sample rollup job through
Console:</summary>

```
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"
      ]
    }
  },
  "metrics": [
    {
      "field": "bytes",
      "metrics": [
        "avg"
      ]
    }
  ]
}
```

</details>
5. Navigate to Stack Management -> Rollup Jobs
6. In the list view, verify that there is deprecation callout with the
correct links (to the migration guide and the downsampling doc).
7. Start creating a new rollup job through the UI and verify that the
deprecation callout exists on every step.

### 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)

---------

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

packages/kbn-doc-links/src/get_doc_links.ts

@@ -435,6 +435,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
       remoteClustersOnPremSetupTrustWithCert: `${ELASTICSEARCH_DOCS}remote-clusters-cert.html`,
       remoteClustersOnPremSetupTrustWithApiKey: `${ELASTICSEARCH_DOCS}remote-clusters-api-key.html`,
       remoteClustersCloudSetupTrust: `${ELASTIC_WEBSITE_URL}guide/en/cloud/current/ec-enable-ccs.html`,
+      rollupMigratingToDownsampling: `${ELASTICSEARCH_DOCS}rollup-migrating-to-downsampling.html`,
       rrf: `${ELASTICSEARCH_DOCS}rrf.html`,
       scriptParameters: `${ELASTICSEARCH_DOCS}modules-scripting-using.html#prefer-params`,
       secureCluster: `${ELASTICSEARCH_DOCS}secure-cluster.html`,

x-pack/plugins/rollup/public/crud_app/sections/components/deprecation_callout/deprecation_callout.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 { EuiCallOut, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { documentationLinks } from '../../../services/documentation_links';
+
+/*
+A component for displaying a deprecation warning.
+ */
+export const DeprecationCallout = () => {
+  return (
+    <EuiCallOut
+      title="Deprecated in 8.11.0"
+      color="warning"
+      iconType="warning"
+      data-test-subj="rollupDeprecationCallout"
+    >
+      <FormattedMessage
+        id="xpack.rollupJobs.deprecationCalloutMessage"
+        defaultMessage="Rollups are deprecated and will be removed in a future version. Check our {migrationGuideLink} and use {downsamplingLink} instead."
+        values={{
+          migrationGuideLink: (
+            <EuiLink
+              href={documentationLinks.elasticsearch.rollupMigratingToDownsampling}
+              target="_blank"
+            >
+              {i18n.translate('xpack.rollupJobs.deprecationCallout.migrationGuideLink', {
+                defaultMessage: 'migration guide',
+              })}
+            </EuiLink>
+          ),
+          downsamplingLink: (
+            <EuiLink href={documentationLinks.fleet.datastreamsDownsampling} target="_blank">
+              {i18n.translate('xpack.rollupJobs.deprecationCallout.downsamplingLink', {
+                defaultMessage: 'downsampling',
+              })}
+            </EuiLink>
+          ),
+        }}
+      />
+    </EuiCallOut>
+  );
+};

x-pack/plugins/rollup/public/crud_app/sections/components/deprecation_callout/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 { DeprecationCallout } from './deprecation_callout';

x-pack/plugins/rollup/public/crud_app/sections/components/index.js

@@ -21,3 +21,5 @@ export {
 } from './job_details';
 
 export { JobStatus } from './job_status';
+
+export { DeprecationCallout } from './deprecation_callout';

x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js

@@ -13,6 +13,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { withKibana } from '@kbn/kibana-react-plugin/public';
+import { DeprecationCallout } from '../components';
 
 import {
   EuiCallOut,
@@ -556,6 +557,10 @@ export class JobCreateUi extends Component {
 
         <EuiSpacer size="l" />
 
+        <DeprecationCallout />
+
+        <EuiSpacer size="l" />
+
         <EuiStepsHorizontal steps={this.getSteps()} />
 
         {saveErrorFeedback}

x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js

@@ -26,6 +26,7 @@ import { documentationLinks } from '../../services/documentation_links';
 
 import { JobTable } from './job_table';
 import { DetailPanel } from './detail_panel';
+import { DeprecationCallout } from '../components';
 import { DeprecatedPrompt } from './deprecated_prompt';
 
 const REFRESH_RATE_MS = 30000;
@@ -172,6 +173,10 @@ export class JobListUi extends Component {
 
         <EuiSpacer size="l" />
 
+        <DeprecationCallout />
+
+        <EuiSpacer size="l" />
+
         <JobTable />
 
         <DetailPanel />

x-pack/plugins/rollup/public/test/client_integration/job_create_date_histogram.test.js

@@ -63,6 +63,10 @@ describe('Create Rollup Job, step 2: Date histogram', () => {
       expect(exists('rollupJobCreateDateHistogramDocsButton')).toBe(true);
     });
 
+    test('should have a deprecation callout', () => {
+      expect(exists('rollupDeprecationCallout')).toBe(true);
+    });
+
     it('should have the "next" and "back" button visible', () => {
       expect(exists('rollupJobBackButton')).toBe(true);
       expect(exists('rollupJobNextButton')).toBe(true);

x-pack/plugins/rollup/public/test/client_integration/job_create_histogram.test.js

@@ -70,6 +70,10 @@ describe('Create Rollup Job, step 4: Histogram', () => {
       expect(exists('rollupJobCreateHistogramDocsButton')).toBe(true);
     });
 
+    test('should have a deprecation callout', () => {
+      expect(exists('rollupDeprecationCallout')).toBe(true);
+    });
+
     it('should have the "next" and "back" button visible', () => {
       expect(exists('rollupJobBackButton')).toBe(true);
       expect(exists('rollupJobNextButton')).toBe(true);

x-pack/plugins/rollup/public/test/client_integration/job_create_logistics.test.js

@@ -58,6 +58,10 @@ describe('Create Rollup Job, step 1: Logistics', () => {
     expect(exists('rollupJobCreateLogisticsDocsButton')).toBe(true);
   });
 
+  test('should have a deprecation callout', () => {
+    expect(exists('rollupDeprecationCallout')).toBe(true);
+  });
+
   it('should only have the "next" button visible', () => {
     expect(exists('rollupJobBackButton')).toBe(false);
     expect(exists('rollupJobNextButton')).toBe(true);

x-pack/plugins/rollup/public/test/client_integration/job_create_metrics.test.js

@@ -71,6 +71,10 @@ describe('Create Rollup Job, step 5: Metrics', () => {
       expect(exists('rollupJobCreateMetricsDocsButton')).toBe(true);
     });
 
+    test('should have a deprecation callout', () => {
+      expect(exists('rollupDeprecationCallout')).toBe(true);
+    });
+
     it('should have the "next" and "back" button visible', () => {
       expect(exists('rollupJobBackButton')).toBe(true);
       expect(exists('rollupJobNextButton')).toBe(true);

x-pack/plugins/rollup/public/test/client_integration/job_create_review.test.js

@@ -70,6 +70,10 @@ describe('Create Rollup Job, step 6: Review', () => {
       expect(exists('rollupJobCreateReviewTitle')).toBe(true);
     });
 
+    test('should have a deprecation callout', () => {
+      expect(exists('rollupDeprecationCallout')).toBe(true);
+    });
+
     it('should have the "next" and "save" button visible', () => {
       expect(exists('rollupJobBackButton')).toBe(true);
       expect(exists('rollupJobNextButton')).toBe(false);

x-pack/plugins/rollup/public/test/client_integration/job_create_terms.test.js

@@ -68,6 +68,10 @@ describe('Create Rollup Job, step 3: Terms', () => {
       expect(exists('rollupJobCreateTermsDocsButton')).toBe(true);
     });
 
+    test('should have a deprecation callout', () => {
+      expect(exists('rollupDeprecationCallout')).toBe(true);
+    });
+
     it('should have the "next" and "back" button visible', () => {
       expect(exists('rollupJobBackButton')).toBe(true);
       expect(exists('rollupJobNextButton')).toBe(true);

x-pack/plugins/rollup/public/test/client_integration/job_list.test.js

@@ -62,6 +62,10 @@ describe('<JobList />', () => {
       startMock.http.get.mockClear();
     });
 
+    test('should have a deprecation callout', () => {
+      expect(exists('rollupDeprecationCallout')).toBe(true);
+    });
+
     test('should open the detail panel when clicking on a job in the table', () => {
       const { rows } = table.getMetaData('rollupJobsListTable');
       const button = rows[0].columns[1].reactWrapper.find('button');