Skip to content

Commit

Permalink
Add Terms, Histogram, Metrics, and Review steps to Rollup Job Wizard (#…
Browse files Browse the repository at this point in the history
…22984)

* Move steps into a single steps directory.
* Update deserializeJob method for symmetry with serializeJob method.
* Return dateFields, keywordFields, and numericFields from index_pattern_validity API endpoint.
* Block forward progress from first step if:
  - we're waiting for async validation
  - index pattern is invalid
* Add FieldList, FieldChooser, and JobDetails components.
  • Loading branch information
cjcenizal committed Sep 13, 2018
1 parent 1f4f9f7 commit cb61f6a
Show file tree
Hide file tree
Showing 37 changed files with 1,651 additions and 350 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
"url": "https://github.com/elastic/kibana.git"
},
"dependencies": {
"@elastic/eui": "3.7.0",
"@elastic/eui": "4.0.0",
"@elastic/filesaver": "1.1.2",
"@elastic/numeral": "2.3.2",
"@elastic/ui-ace": "0.2.3",
Expand Down
2 changes: 1 addition & 1 deletion x-pack/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
"yargs": "4.7.1"
},
"dependencies": {
"@elastic/eui": "3.7.0",
"@elastic/eui": "4.0.0",
"@elastic/node-crypto": "0.1.2",
"@elastic/node-phantom-simple": "2.2.4",
"@elastic/numeral": "2.3.2",
Expand Down
11 changes: 11 additions & 0 deletions x-pack/plugins/rollup/public/crud_app/sections/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,14 @@
*/

export { JobActionMenu } from './job_action_menu';

export {
JobDetails,
JOB_DETAILS_TAB_SUMMARY,
JOB_DETAILS_TAB_TERMS,
JOB_DETAILS_TAB_HISTOGRAM,
JOB_DETAILS_TAB_METRICS,
JOB_DETAILS_TAB_JSON,
} from './job_details';

export { JobStatus } from './job_status';
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export {
JobDetails,
JOB_DETAILS_TAB_SUMMARY,
JOB_DETAILS_TAB_TERMS,
JOB_DETAILS_TAB_HISTOGRAM,
JOB_DETAILS_TAB_METRICS,
JOB_DETAILS_TAB_JSON,
} from './job_details';
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import PropTypes from 'prop-types';

import {
TabSummary,
TabTerms,
TabMetrics,
TabJson,
TabHistogram,
} from './tabs';

export const JOB_DETAILS_TAB_SUMMARY = 'Summary';
export const JOB_DETAILS_TAB_TERMS = 'Terms';
export const JOB_DETAILS_TAB_HISTOGRAM = 'Histogram';
export const JOB_DETAILS_TAB_METRICS = 'Metrics';
export const JOB_DETAILS_TAB_JSON = 'JSON';

const JOB_DETAILS_TABS = [
JOB_DETAILS_TAB_SUMMARY,
JOB_DETAILS_TAB_TERMS,
JOB_DETAILS_TAB_HISTOGRAM,
JOB_DETAILS_TAB_METRICS,
JOB_DETAILS_TAB_JSON,
];

export const JobDetails = ({
tab,
job,
stats,
json,
}) => {
const {
metrics,
terms,
histogram,
histogramInterval,
} = job;

const tabToContentMap = {
Summary: (
<TabSummary
job={job}
stats={stats}
/>
),
Terms: (
<TabTerms terms={terms} />
),
Histogram: (
<TabHistogram histogram={histogram} histogramInterval={histogramInterval} />
),
Metrics: (
<TabMetrics metrics={metrics} />
),
JSON: (
<TabJson json={json} />
),
};

return tabToContentMap[tab];
};

JobDetails.propTypes = {
tab: PropTypes.oneOf(JOB_DETAILS_TABS),
job: PropTypes.object,
};
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,13 @@ import {
EuiFlexItem,
} from '@elastic/eui';

export const TabHistogram = ({ histogram }) => {
const { interval, fields } = histogram;

export const TabHistogram = ({ histogram, histogramInterval }) => {
// TODO: Render a table if there are more than 20 fields.

const renderedTerms = fields.map(field => {
const renderedTerms = histogram.map(({ name }) => {
return (
<li key={field}>
{field}
<li key={name}>
{name}
</li>
);
});
Expand All @@ -38,7 +36,7 @@ export const TabHistogram = ({ histogram }) => {

<EuiFlexItem grow={false}>
<EuiText>
<p>Interval: {interval}</p>
<p>Interval: {histogramInterval}</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,10 @@ import {

export const TabMetrics = ({ metrics }) => {
// TODO: Render a table if there are more than 20 metrics.
const listMetrics = metrics.map(metric => {
const {
field,
metrics: aggTypes,
} = metric;

const listMetrics = metrics.map(({ name, types }) => {
return {
title: field,
description: aggTypes.join(', '),
title: name,
description: types.join(', '),
};
});

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
EuiTitle,
EuiSpacer,
EuiIconTip,
} from '@elastic/eui';

import { JobStatus } from '../../job_status';

export class TabSummary extends Component {
static propTypes = {
job: PropTypes.object.isRequired,
stats: PropTypes.object,
};

renderStats() {
const { stats } = this.props;

if (!stats) {
return null;
}

const {
documentsProcessed,
pagesProcessed,
rollupsIndexed,
triggerCount,
status,
} = stats;

return (
<Fragment>
<EuiSpacer size="s" />

<EuiTitle size="s">
<h3>Stats</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiDescriptionList type="column" align="center">
<Fragment>
<EuiDescriptionListTitle>
<strong>Status</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
<JobStatus status={status} />
</EuiDescriptionListDescription>
</Fragment>

<EuiDescriptionListTitle>
<strong>Documents processed</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{documentsProcessed}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Pages processed</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{pagesProcessed}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Rollups indexed</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{rollupsIndexed}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Trigger count</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{triggerCount}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</Fragment>
);
}

render() {
const { job } = this.props;

const {
indexPattern,
rollupIndex,
rollupCron,
dateHistogramInterval,
dateHistogramDelay,
dateHistogramTimeZone,
dateHistogramField,
} = job;

return (
<Fragment>
<EuiTitle size="s">
<h3>Logistics</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiDescriptionList type="column" align="center">
<EuiDescriptionListTitle>
<strong>Index pattern</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription className="eui-textBreakWord">
{indexPattern}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Rollup index</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription className="eui-textBreakWord">
{rollupIndex}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Cron</strong>{' '}
<EuiIconTip
content="Interval at which data is rolled up"
/>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{rollupCron}
</EuiDescriptionListDescription>
</EuiDescriptionList>

<EuiSpacer size="s" />

<EuiTitle size="s">
<h3>Date histogram</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiDescriptionList type="column" align="center">
<EuiDescriptionListTitle>
<strong>Time field</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription className="eui-textBreakWord">
{dateHistogramField}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Timezone</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{dateHistogramTimeZone}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Delay</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{dateHistogramDelay || 'None'}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Interval</strong>{' '}
<EuiIconTip
content="Time bucket interval generated at roll-up time"
/>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{dateHistogramInterval}
</EuiDescriptionListDescription>
</EuiDescriptionList>

{this.renderStats()}
</Fragment>
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import {
export const TabTerms = ({ terms }) => {
// TODO: Render a table if there are more than 20 fields.

const renderedTerms = terms.fields.map(field => {
const renderedTerms = terms.map(({ name }) => {
return (
<li key={field}>
{field}
<li key={name}>
{name}
</li>
);
});
Expand Down
Loading

0 comments on commit cb61f6a

Please sign in to comment.