Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Field formatters] Time suffix for duration formatter #76729

Merged
merged 4 commits into from
Sep 8, 2020
Merged

[Field formatters] Time suffix for duration formatter #76729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e51f52
[Field formatters] Time suffix for duration formatter
wylieconlon Sep 3, 2020
1585c7e
Fix missing arg
wylieconlon Sep 3, 2020
7690922
Fix test
wylieconlon Sep 4, 2020
4362856
Merge branch 'master' into duration-suffix
elasticmachine Sep 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion src/plugins/data/common/field_formats/converters/duration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,16 @@ describe('Duration Format', () => {
inputFormat: 'seconds',
outputFormat: 'humanize',
outputPrecision: undefined,
showSuffix: undefined,
fixtures: [
{
input: -60,
output: 'minus a minute',
},
{
input: 1,
output: 'a few seconds',
},
{
input: 60,
output: 'a minute',
Expand All @@ -44,6 +49,7 @@ describe('Duration Format', () => {
inputFormat: 'minutes',
outputFormat: 'humanize',
outputPrecision: undefined,
showSuffix: undefined,
fixtures: [
{
input: -60,
Expand All @@ -64,6 +70,7 @@ describe('Duration Format', () => {
inputFormat: 'minutes',
outputFormat: 'asHours',
outputPrecision: undefined,
showSuffix: undefined,
fixtures: [
{
input: -60,
Expand All @@ -84,6 +91,7 @@ describe('Duration Format', () => {
inputFormat: 'seconds',
outputFormat: 'asSeconds',
outputPrecision: 0,
showSuffix: undefined,
fixtures: [
{
input: -60,
Expand All @@ -104,6 +112,7 @@ describe('Duration Format', () => {
inputFormat: 'seconds',
outputFormat: 'asSeconds',
outputPrecision: 2,
showSuffix: undefined,
fixtures: [
{
input: -60,
Expand All @@ -124,15 +133,34 @@ describe('Duration Format', () => {
],
});

testCase({
inputFormat: 'seconds',
outputFormat: 'asSeconds',
outputPrecision: 0,
showSuffix: true,
fixtures: [
{
input: -60,
output: '-60 Seconds',
},
{
input: -32.333,
output: '-32 Seconds',
},
],
});

function testCase({
inputFormat,
outputFormat,
outputPrecision,
showSuffix,
fixtures,
}: {
inputFormat: string;
outputFormat: string;
outputPrecision: number | undefined;
showSuffix: boolean | undefined;
fixtures: any[];
}) {
fixtures.forEach((fixture: Record<string, any>) => {
Expand All @@ -143,7 +171,7 @@ describe('Duration Format', () => {
outputPrecision ? `, ${outputPrecision} decimals` : ''
}`, () => {
const duration = new DurationFormat(
{ inputFormat, outputFormat, outputPrecision },
{ inputFormat, outputFormat, outputPrecision, showSuffix },
jest.fn()
);
expect(duration.convert(input)).toBe(output);
Expand Down
6 changes: 5 additions & 1 deletion src/plugins/data/common/field_formats/converters/duration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@ export class DurationFormat extends FieldFormat {
const inputFormat = this.param('inputFormat');
const outputFormat = this.param('outputFormat') as keyof Duration;
const outputPrecision = this.param('outputPrecision');
const showSuffix = Boolean(this.param('showSuffix'));
const human = this.isHuman();
const prefix =
val < 0 && human
Expand All @@ -200,6 +201,9 @@ export class DurationFormat extends FieldFormat {
const duration = parseInputAsDuration(val, inputFormat) as Record<keyof Duration, Function>;
const formatted = duration[outputFormat]();
const precise = human ? formatted : formatted.toFixed(outputPrecision);
return prefix + precise;
const type = outputFormats.find(({ method }) => method === outputFormat);
const suffix = showSuffix && type ? ` ${type.text}` : '';

return prefix + precise + suffix;
};
}
20 changes: 20 additions & 0 deletions ...itor/components/field_format_editor/editors/duration/__snapshots__/duration.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

59 changes: 39 additions & 20 deletions ...blic/components/field_editor/components/field_format_editor/editors/duration/duration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import React, { Fragment } from 'react';
import { DurationFormat } from 'src/plugins/data/common';

import { EuiFieldNumber, EuiFormRow, EuiSelect } from '@elastic/eui';
import { EuiFieldNumber, EuiFormRow, EuiSelect, EuiSwitch } from '@elastic/eui';

import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -51,6 +51,7 @@ interface DurationFormatEditorFormatParams {
outputPrecision: number;
inputFormat: string;
outputFormat: string;
showSuffix?: boolean;
}

export class DurationFormatEditor extends DefaultFormatEditor<
Expand Down Expand Up @@ -146,26 +147,44 @@ export class DurationFormatEditor extends DefaultFormatEditor<
/>
</EuiFormRow>
{!(format as DurationFormat).isHuman() ? (
<EuiFormRow
label={
<FormattedMessage
id="indexPatternManagement.duration.decimalPlacesLabel"
defaultMessage="Decimal places"
/>
}
isInvalid={!!error}
error={hasDecimalError ? error : null}
>
<EuiFieldNumber
value={formatParams.outputPrecision}
min={0}
max={20}
onChange={(e) => {
this.onChange({ outputPrecision: e.target.value ? Number(e.target.value) : null });
}}
<>
<EuiFormRow
label={
<FormattedMessage
id="indexPatternManagement.duration.decimalPlacesLabel"
defaultMessage="Decimal places"
/>
}
isInvalid={!!error}
/>
</EuiFormRow>
error={hasDecimalError ? error : null}
>
<EuiFieldNumber
value={formatParams.outputPrecision}
min={0}
max={20}
onChange={(e) => {
this.onChange({
outputPrecision: e.target.value ? Number(e.target.value) : null,
});
}}
isInvalid={!!error}
/>
</EuiFormRow>
<EuiFormRow>
<EuiSwitch
label={
<FormattedMessage
id="indexPatternManagement.duration.showSuffixLabel"
defaultMessage="Show suffix"
/>
}
checked={Boolean(formatParams.showSuffix)}
onChange={(e) => {
this.onChange({ showSuffix: !formatParams.showSuffix });
}}
/>
</EuiFormRow>
</>
) : null}
<FormatEditorSamples samples={samples} />
</Fragment>
Expand Down