Skip to content

Commit

Permalink
migrate rollups to new page layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonelizabeth
alisonelizabeth committed Jun 15, 2021
1 parent 35cc59b commit ec40e56
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 125 deletions.
2 changes: 2 additions & 0 deletions src/core/public/doc_links/doc_links_service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,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`,
Expand Down Expand Up @@ -518,6 +519,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;
Expand Down
46 changes: 23 additions & 23 deletions x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -18,11 +18,10 @@ import {
EuiCallOut,
EuiLoadingKibana,
EuiOverlayMask,
EuiPageContent,
EuiPageContentHeader,
EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
EuiStepsHorizontal,
EuiTitle,
} from '@elastic/eui';

import {
Expand Down Expand Up @@ -522,44 +521,45 @@ 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}
<EuiPageContentBody restrictWidth style={{ width: '100%' }}>
<EuiPageHeader
pageTitle={
<FormattedMessage
id="xpack.rollupJobs.createTitle"
defaultMessage="Create rollup job"
/>
}
/>

<>
<EuiStepsHorizontal steps={this.getSteps()} />

{saveErrorFeedback}

<EuiSpacer />

{this.renderCurrentStep()}

<EuiSpacer size="l" />

{this.renderNavigation()}
</EuiPageContent>
{savingFeedback}
</Fragment>

{savingFeedback}
</>
</EuiPageContentBody>
);
}

Expand Down
184 changes: 89 additions & 95 deletions x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,21 @@ import { i18n } from '@kbn/i18n';

import {
EuiButton,
EuiButtonEmpty,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiPageHeader,
EuiLoadingSpinner,
EuiPageContent,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiSpacer,
EuiText,
EuiTextColor,
EuiTitle,
EuiCallOut,
} from '@elastic/eui';

import { withKibana } from '../../../../../../../src/plugins/kibana_react/public';

import { extractQueryParams } from '../../../shared_imports';
import { getRouterLinkProps, listBreadcrumb } from '../../services';
import { documentationLinks } from '../../services/documentation_links';

import { JobTable } from './job_table';
import { DetailPanel } from './detail_panel';

Expand Down Expand Up @@ -87,18 +84,6 @@ export class JobListUi extends Component {
this.props.closeDetailPanel();
}

getHeaderSection() {
return (
<EuiPageContentHeaderSection data-test-subj="jobListPageHeader">
<EuiTitle size="l">
<h1>
<FormattedMessage id="xpack.rollupJobs.jobListTitle" defaultMessage="Rollup Jobs" />
</h1>
</EuiTitle>
</EuiPageContentHeaderSection>
);
}

renderNoPermission() {
const title = i18n.translate('xpack.rollupJobs.jobList.noPermissionTitle', {
defaultMessage: 'Permission error',
Expand Down Expand Up @@ -130,101 +115,112 @@ export class JobListUi extends Component {
const title = i18n.translate('xpack.rollupJobs.jobList.loadingErrorTitle', {
defaultMessage: 'Error loading rollup jobs',
});

return (
<Fragment>
{this.getHeaderSection()}
<EuiSpacer size="m" />
<EuiCallOut data-test-subj="jobListError" title={title} color="danger" iconType="alert">
{statusCode} {errorString}
</EuiCallOut>
</Fragment>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
data-test-subj="jobListError"
title={<h2>{title}</h2>}
body={
<p>
{statusCode} {errorString}
</p>
}
/>
</EuiPageContent>
);
}

renderEmpty() {
return (
<EuiEmptyPrompt
data-test-subj="jobListEmptyPrompt"
iconType="indexRollupApp"
title={
<h1>
<FormattedMessage
id="xpack.rollupJobs.jobList.emptyPromptTitle"
defaultMessage="Create your first rollup job"
/>
</h1>
}
body={
<Fragment>
<p>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<EuiEmptyPrompt
data-test-subj="jobListEmptyPrompt"
iconType="indexRollupApp"
title={
<h1>
<FormattedMessage
id="xpack.rollupJobs.jobList.emptyPromptDescription"
defaultMessage="Rollup jobs summarize and store historical data in a smaller index
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"
/>
</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>
}
/>
</EuiButton>
}
/>
</EuiPageContent>
);
}

renderLoading() {
return (
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</EuiFlexItem>

<EuiFlexItem grow={false} data-test-subj="jobListLoading">
<EuiText>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.rollupJobs.jobList.loadingTitle"
defaultMessage="Loading rollup jobs..."
/>
</EuiTextColor>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<EuiEmptyPrompt
title={<EuiLoadingSpinner size="xl" />}
body={
<FormattedMessage
id="xpack.rollupJobs.jobList.loadingTitle"
defaultMessage="Loading rollup jobs…"
/>
}
/>
</EuiPageContent>
);
}

renderList() {
const { isLoading } = this.props;

return (
<Fragment>
<EuiPageContentHeader>
{this.getHeaderSection()}

<EuiPageContentHeaderSection>
<EuiButton fill {...getRouterLinkProps(`/create`)}>
<>
<EuiPageHeader
bottomBorder
pageTitle={
<span data-test-subj="jobListPageHeader">
<FormattedMessage id="xpack.rollupJobs.jobListTitle" defaultMessage="Rollup Jobs" />
</span>
}
rightSideItems={[
<EuiButtonEmpty
href={documentationLinks.rollupJobs}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.rollupJobs.jobList.createButtonLabel"
defaultMessage="Create rollup job"
id="xpack.rollupJobs.rollupJobsDocsLinkText"
defaultMessage="Rollup Jobs docs"
/>
</EuiButton>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
</EuiButtonEmpty>,
]}
/>

{isLoading ? this.renderLoading() : <JobTable />}
<EuiSpacer size="l" />

<JobTable />

<DetailPanel />
</Fragment>
</>
);
}

Expand All @@ -241,15 +237,13 @@ export class JobListUi extends Component {
}
} else if (!isLoading && !hasJobs) {
content = this.renderEmpty();
} else if (isLoading) {
content = this.renderLoading();
} else {
content = this.renderList();
}

return (
<EuiPageContent horizontalPosition="center" className="rollupJobsListPanel">
{content}
</EuiPageContent>
);
return content;
}
}

Expand Down
Loading

0 comments on commit ec40e56

Please sign in to comment.