[Rollups] Migrate to new page layout

docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md

@@ -116,6 +116,7 @@ readonly links: {
         readonly addData: string;
         readonly kibana: string;
         readonly upgradeAssistant: string;
+        readonly rollupJobs: string;
         readonly elasticsearch: Record<string, string>;
         readonly siem: {
             readonly guide: string;

docs/development/core/public/kibana-plugin-core-public.doclinksstart.md

@@ -18,4 +18,3 @@ export interface DocLinksStart
 |  [DOC\_LINK\_VERSION](./kibana-plugin-core-public.doclinksstart.doc_link_version.md) | <code>string</code> |  |
 |  [ELASTIC\_WEBSITE\_URL](./kibana-plugin-core-public.doclinksstart.elastic_website_url.md) | <code>string</code> |  |
 |  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly canvas: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly drilldowns: string;</code><br/><code>            readonly drilldownsTriggerPicker: string;</code><br/><code>            readonly urlDrilldownTemplateSyntax: string;</code><br/><code>            readonly urlDrilldownVariables: string;</code><br/><code>        };</code><br/><code>        readonly discover: Record&lt;string, string&gt;;</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly elasticsearchModule: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly configure: string;</code><br/><code>            readonly httpEndpoint: string;</code><br/><code>            readonly install: string;</code><br/><code>            readonly start: string;</code><br/><code>        };</code><br/><code>        readonly enterpriseSearch: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly appSearchBase: string;</code><br/><code>            readonly workplaceSearchBase: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly composite: string;</code><br/><code>            readonly composite_missing_bucket: string;</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly date_format_pattern: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly runtimeFields: {</code><br/><code>            readonly overview: string;</code><br/><code>            readonly mapping: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessLangSpec: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly painlessWalkthrough: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly search: {</code><br/><code>            readonly sessions: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly introduction: string;</code><br/><code>            readonly fieldFormattersNumber: string;</code><br/><code>            readonly fieldFormattersString: string;</code><br/><code>            readonly runtimeFields: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly upgradeAssistant: string;</code><br/><code>        readonly elasticsearch: Record&lt;string, string&gt;;</code><br/><code>        readonly siem: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly eql: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly percolate: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>            readonly dateMathIndexNames: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly ml: Record&lt;string, string&gt;;</code><br/><code>        readonly transforms: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>        readonly apis: Readonly&lt;{</code><br/><code>            bulkIndexAlias: string;</code><br/><code>            byteSizeUnits: string;</code><br/><code>            createAutoFollowPattern: string;</code><br/><code>            createFollower: string;</code><br/><code>            createIndex: string;</code><br/><code>            createSnapshotLifecyclePolicy: string;</code><br/><code>            createRoleMapping: string;</code><br/><code>            createRoleMappingTemplates: string;</code><br/><code>            createRollupJobsRequest: string;</code><br/><code>            createApiKey: string;</code><br/><code>            createPipeline: string;</code><br/><code>            createTransformRequest: string;</code><br/><code>            cronExpressions: string;</code><br/><code>            executeWatchActionModes: string;</code><br/><code>            indexExists: string;</code><br/><code>            openIndex: string;</code><br/><code>            putComponentTemplate: string;</code><br/><code>            painlessExecute: string;</code><br/><code>            painlessExecuteAPIContexts: string;</code><br/><code>            putComponentTemplateMetadata: string;</code><br/><code>            putSnapshotLifecyclePolicy: string;</code><br/><code>            putIndexTemplateV1: string;</code><br/><code>            putWatch: string;</code><br/><code>            simulatePipeline: string;</code><br/><code>            timeUnits: string;</code><br/><code>            updateTransform: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly observability: Record&lt;string, string&gt;;</code><br/><code>        readonly alerting: Record&lt;string, string&gt;;</code><br/><code>        readonly maps: Record&lt;string, string&gt;;</code><br/><code>        readonly monitoring: Record&lt;string, string&gt;;</code><br/><code>        readonly security: Readonly&lt;{</code><br/><code>            apiKeyServiceSettings: string;</code><br/><code>            clusterPrivileges: string;</code><br/><code>            elasticsearchSettings: string;</code><br/><code>            elasticsearchEnableSecurity: string;</code><br/><code>            indicesPrivileges: string;</code><br/><code>            kibanaTLS: string;</code><br/><code>            kibanaPrivileges: string;</code><br/><code>            mappingRoles: string;</code><br/><code>            mappingRolesFieldRules: string;</code><br/><code>            runAsPrivilege: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly watcher: Record&lt;string, string&gt;;</code><br/><code>        readonly ccs: Record&lt;string, string&gt;;</code><br/><code>        readonly plugins: Record&lt;string, string&gt;;</code><br/><code>        readonly snapshotRestore: Record&lt;string, string&gt;;</code><br/><code>        readonly ingest: Record&lt;string, string&gt;;</code><br/><code>        readonly fleet: Readonly&lt;{</code><br/><code>            guide: string;</code><br/><code>            fleetServer: string;</code><br/><code>            fleetServerAddFleetServer: string;</code><br/><code>            settings: string;</code><br/><code>            settingsFleetServerHostSettings: string;</code><br/><code>            troubleshooting: string;</code><br/><code>            elasticAgent: string;</code><br/><code>            datastreams: string;</code><br/><code>            datastreamsNamingScheme: string;</code><br/><code>            upgradeElasticAgent: string;</code><br/><code>            upgradeElasticAgent712lower: string;</code><br/><code>        }&gt;;</code><br/><code>    }</code> |  |
-

src/core/public/doc_links/doc_links_service.ts

@@ -137,6 +137,7 @@ export class DocLinksService {
         addData: `${KIBANA_DOCS}connect-to-elasticsearch.html`,
         kibana: `${KIBANA_DOCS}index.html`,
         upgradeAssistant: `${KIBANA_DOCS}upgrade-assistant.html`,
+        rollupJobs: `${KIBANA_DOCS}data-rollups.html`,
         elasticsearch: {
           docsBase: `${ELASTICSEARCH_DOCS}`,
           asyncSearch: `${ELASTICSEARCH_DOCS}async-search-intro.html`,
@@ -532,6 +533,7 @@ export interface DocLinksStart {
     readonly addData: string;
     readonly kibana: string;
     readonly upgradeAssistant: string;
+    readonly rollupJobs: string;
     readonly elasticsearch: Record<string, string>;
     readonly siem: {
       readonly guide: string;

src/core/public/public.api.md

@@ -595,6 +595,7 @@ export interface DocLinksStart {
         readonly addData: string;
         readonly kibana: string;
         readonly upgradeAssistant: string;
+        readonly rollupJobs: string;
         readonly elasticsearch: Record<string, string>;
         readonly siem: {
             readonly guide: string;

x-pack/plugins/rollup/public/crud_app/_crud_app.scss

@@ -4,11 +4,3 @@
 .rollupJobWizardStepActions {
   align-items: flex-end; /* 1 */
 }
-
-/**
- * 1. Ensure panel fills width of parent when search input yields no matching rollup jobs.
- */
-.rollupJobsListPanel {
-  // sass-lint:disable-block no-important
-  flex-grow: 1 !important; /* 1 */
-}

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { cloneDeep, debounce, first, mapValues } from 'lodash';
 
@@ -18,11 +18,10 @@ import {
   EuiCallOut,
   EuiLoadingKibana,
   EuiOverlayMask,
-  EuiPageContent,
-  EuiPageContentHeader,
+  EuiPageContentBody,
+  EuiPageHeader,
   EuiSpacer,
   EuiStepsHorizontal,
-  EuiTitle,
 } from '@elastic/eui';
 
 import {
@@ -522,44 +521,46 @@ export class JobCreateUi extends Component {
       }
 
       saveErrorFeedback = (
-        <Fragment>
+        <>
+          <EuiSpacer />
+
           <EuiCallOut title={message} icon="cross" color="danger">
             {errorBody}
           </EuiCallOut>
 
           <EuiSpacer />
-        </Fragment>
+        </>
       );
     }
 
     return (
-      <Fragment>
-        <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiTitle size="l">
-              <h1>
-                <FormattedMessage
-                  id="xpack.rollupJobs.createTitle"
-                  defaultMessage="Create rollup job"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageContentHeader>
-
-          {saveErrorFeedback}
-
-          <EuiStepsHorizontal steps={this.getSteps()} />
+      <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+        <EuiPageHeader
+          bottomBorder
+          pageTitle={
+            <FormattedMessage
+              id="xpack.rollupJobs.createTitle"
+              defaultMessage="Create rollup job"
+            />
+          }
+        />
 
-          <EuiSpacer />
+        <EuiSpacer size="l" />
+
+        <EuiStepsHorizontal steps={this.getSteps()} />
+
+        {saveErrorFeedback}
+
+        <EuiSpacer />
+
+        {this.renderCurrentStep()}
 
-          {this.renderCurrentStep()}
+        <EuiSpacer size="l" />
 
-          <EuiSpacer size="l" />
+        {this.renderNavigation()}
 
-          {this.renderNavigation()}
-        </EuiPageContent>
         {savingFeedback}
-      </Fragment>
+      </EuiPageContentBody>
     );
   }
 

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

@@ -195,7 +195,7 @@ export class DetailPanel extends Component {
                 <EuiTextColor color="subdued">
                   <FormattedMessage
                     id="xpack.rollupJobs.detailPanel.loadingLabel"
-                    defaultMessage="Loading rollup job..."
+                    defaultMessage="Loading rollup job…"
                   />
                 </EuiTextColor>
               </EuiText>

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

@@ -70,7 +70,7 @@ describe('<DetailPanel />', () => {
       ({ component, find, exists } = initTestBed({ isLoading: true }));
       const loading = find('rollupJobDetailLoading');
       expect(loading.length).toBeTruthy();
-      expect(loading.text()).toEqual('Loading rollup job...');
+      expect(loading.text()).toEqual('Loading rollup job…');
 
       // Make sure the title and the tabs are visible
       expect(exists('detailPanelTabSelected')).toBeTruthy();