Skip to content

Commit

Permalink
Localize JobDetails tabs. (#23020)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjcenizal
cjcenizal authored Sep 13, 2018
1 parent ef9f2df commit 00a01e7
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 36 deletions.
20 changes: 17 additions & 3 deletions x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_histogram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import React, { Fragment } from 'react';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

import {
EuiTitle,
Expand All @@ -14,7 +15,7 @@ import {
EuiFlexItem,
} from '@elastic/eui';

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

const renderedTerms = histogram.map(({ name }) => {
Expand All @@ -30,13 +31,24 @@ export const TabHistogram = ({ histogram, histogramInterval }) => {
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3>Histogram</h3>
<h3>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabHistogram.sectionHistogram.title"
defaultMessage="Histogram"
/>
</h3>
</EuiTitle>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiText>
<p>Interval: {histogramInterval}</p>
<p>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabHistogram.interval.label"
defaultMessage="Interval: {histogramInterval}"
values={{ histogramInterval }}
/>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -51,3 +63,5 @@ export const TabHistogram = ({ histogram, histogramInterval }) => {
</Fragment>
);
};

export const TabHistogram = injectI18n(TabHistogramUi);
12 changes: 10 additions & 2 deletions x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,28 @@
*/

import React, { Fragment } from 'react';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

import {
EuiTitle,
EuiSpacer,
EuiCodeEditor,
} from '@elastic/eui';

export const TabJson = ({
export const TabJsonUi = ({
json,
}) => {
const jsonString = JSON.stringify(json, null, 2);

return (
<Fragment>
<EuiTitle size="s">
<h3>JSON</h3>
<h3>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabJson.sectionJson.title"
defaultMessage="JSON"
/>
</h3>
</EuiTitle>

<EuiSpacer size="s" />
Expand All @@ -38,3 +44,5 @@ export const TabJson = ({
</Fragment>
);
};

export const TabJson = injectI18n(TabJsonUi);
12 changes: 10 additions & 2 deletions x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_metrics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
*/

import React, { Fragment } from 'react';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

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

export const TabMetrics = ({ metrics }) => {
export const TabMetricsUi = ({ metrics }) => {
// TODO: Render a table if there are more than 20 metrics.
const listMetrics = metrics.map(({ name, types }) => {
return {
Expand All @@ -24,7 +25,12 @@ export const TabMetrics = ({ metrics }) => {
return (
<Fragment>
<EuiTitle size="s">
<h3>Metrics</h3>
<h3>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabMetrics.sectionMetrics.title"
defaultMessage="Metrics"
/>
</h3>
</EuiTitle>

<EuiSpacer size="s" />
Expand All @@ -33,3 +39,5 @@ export const TabMetrics = ({ metrics }) => {
</Fragment>
);
};

export const TabMetrics = injectI18n(TabMetricsUi);
143 changes: 117 additions & 26 deletions x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_summary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

import {
EuiDescriptionList,
Expand All @@ -18,7 +19,7 @@ import {

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

export class TabSummary extends Component {
export class TabSummaryUi extends Component {
static propTypes = {
job: PropTypes.object.isRequired,
stats: PropTypes.object,
Expand All @@ -44,48 +45,76 @@ export class TabSummary extends Component {
<EuiSpacer size="s" />

<EuiTitle size="s">
<h3>Stats</h3>
<h3>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.sectionStats.title"
defaultMessage="Stats"
/>
</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiDescriptionList type="column" align="center">
<Fragment>
<EuiDescriptionListTitle>
<strong>Status</strong>
</EuiDescriptionListTitle>
<EuiDescriptionListTitle>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemStatus.label"
defaultMessage="Status"
/>
</strong>
</EuiDescriptionListTitle>

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

<EuiDescriptionListTitle>
<strong>Documents processed</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemDocumentsProcessed.label"
defaultMessage="Documents processed"
/>
</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{documentsProcessed}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Pages processed</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemPagesProcessed.label"
defaultMessage="Pages processed"
/>
</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{pagesProcessed}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Rollups indexed</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemRollupsIndexed.label"
defaultMessage="Rollups indexed"
/>
</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{rollupsIndexed}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Trigger count</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemTriggerCount.label"
defaultMessage="Trigger count"
/>
</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
Expand All @@ -112,32 +141,57 @@ export class TabSummary extends Component {
return (
<Fragment>
<EuiTitle size="s">
<h3>Logistics</h3>
<h3>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.sectionLogistics.label"
defaultMessage="Logistics"
/>
</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiDescriptionList type="column" align="center">
<EuiDescriptionListTitle>
<strong>Index pattern</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemIndexPattern.label"
defaultMessage="Index pattern"
/>
</strong>
</EuiDescriptionListTitle>

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

<EuiDescriptionListTitle>
<strong>Rollup index</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemRollupIndex.label"
defaultMessage="Rollup index"
/>
</strong>
</EuiDescriptionListTitle>

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

<EuiDescriptionListTitle>
<strong>Cron</strong>{' '}
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemCron.label"
defaultMessage="Cron"
/>
</strong>{' '}
<EuiIconTip
content="Interval at which data is rolled up"
content={(
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemCron.tip"
defaultMessage="Interval at which data is rolled up"
/>
)}
/>
</EuiDescriptionListTitle>

Expand All @@ -149,40 +203,75 @@ export class TabSummary extends Component {
<EuiSpacer size="s" />

<EuiTitle size="s">
<h3>Date histogram</h3>
<h3>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.sectionDateHistogram.label"
defaultMessage="Date histogram"
/>
</h3>
</EuiTitle>

<EuiSpacer size="s" />

<EuiDescriptionList type="column" align="center">
<EuiDescriptionListTitle>
<strong>Time field</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemTimeField.label"
defaultMessage="Time field"
/>
</strong>
</EuiDescriptionListTitle>

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

<EuiDescriptionListTitle>
<strong>Timezone</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemTimezone.label"
defaultMessage="Timezone"
/>
</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{dateHistogramTimeZone}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Delay</strong>
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemDelay.label"
defaultMessage="Delay"
/>
</strong>
</EuiDescriptionListTitle>

<EuiDescriptionListDescription>
{dateHistogramDelay || 'None'}
{dateHistogramDelay || (
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemDelay.none"
defaultMessage="None"
/>
)}
</EuiDescriptionListDescription>

<EuiDescriptionListTitle>
<strong>Interval</strong>{' '}
<strong>
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemInterval.label"
defaultMessage="Interval"
/>
</strong>{' '}
<EuiIconTip
content="Time bucket interval generated at roll-up time"
content={(
<FormattedMessage
id="xpack.rollupJobs.jobDetails.tabSummary.itemInterval.tip"
defaultMessage="Time bucket interval generated at roll-up time"
/>
)}
/>
</EuiDescriptionListTitle>

Expand All @@ -196,3 +285,5 @@ export class TabSummary extends Component {
);
}
}

export const TabSummary = injectI18n(TabSummaryUi);
Loading

0 comments on commit 00a01e7

Please sign in to comment.