[Field formatters] Time suffix for duration formatter (#76729)

* [Field formatters] Time suffix for duration formatter * Fix missing arg * Fix test Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Sep 8, 2020 · 02233e7 · 02233e7
1 parent bcaffba
commit 02233e7
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 22 deletions.
diff --git a/src/plugins/data/common/field_formats/converters/duration.test.ts b/src/plugins/data/common/field_formats/converters/duration.test.ts
@@ -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',
@@ -44,6 +49,7 @@ describe('Duration Format', () => {
     inputFormat: 'minutes',
     outputFormat: 'humanize',
     outputPrecision: undefined,
+    showSuffix: undefined,
     fixtures: [
       {
         input: -60,
@@ -64,6 +70,7 @@ describe('Duration Format', () => {
     inputFormat: 'minutes',
     outputFormat: 'asHours',
     outputPrecision: undefined,
+    showSuffix: undefined,
     fixtures: [
       {
         input: -60,
@@ -84,6 +91,7 @@ describe('Duration Format', () => {
     inputFormat: 'seconds',
     outputFormat: 'asSeconds',
     outputPrecision: 0,
+    showSuffix: undefined,
     fixtures: [
       {
         input: -60,
@@ -104,6 +112,7 @@ describe('Duration Format', () => {
     inputFormat: 'seconds',
     outputFormat: 'asSeconds',
     outputPrecision: 2,
+    showSuffix: undefined,
     fixtures: [
       {
         input: -60,
@@ -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>) => {
@@ -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);

diff --git a/src/plugins/data/common/field_formats/converters/duration.ts b/src/plugins/data/common/field_formats/converters/duration.ts
@@ -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
@@ -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;
   };
 }
diff --git a/...itor/components/field_format_editor/editors/duration/__snapshots__/duration.test.tsx.snap b/...itor/components/field_format_editor/editors/duration/__snapshots__/duration.test.tsx.snap
diff --git a/...blic/components/field_editor/components/field_format_editor/editors/duration/duration.tsx b/...blic/components/field_editor/components/field_format_editor/editors/duration/duration.tsx
@@ -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';
@@ -51,6 +51,7 @@ interface DurationFormatEditorFormatParams {
   outputPrecision: number;
   inputFormat: string;
   outputFormat: string;
+  showSuffix?: boolean;
 }
 
 export class DurationFormatEditor extends DefaultFormatEditor<
@@ -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>