[ML] Fixes file data viz file size check and format as bytes (#25295) (…

…#25704) * [ML] Fixes file data viz file size check and format as bytes * [ML] Fix typo in file size error callout
elastic · Nov 15, 2018 · fdd8fec · fdd8fec
1 parent cc5c6f7
commit fdd8fec
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js b/...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -82,7 +82,7 @@ export class FileDataVisualizerView extends Component {
   };
 
   async loadFile(file) {
-    if (file.size < MAX_BYTES) {
+    if (file.size <= MAX_BYTES) {
       try {
         const fileContents = await readFile(file);
         const data = fileContents.data;

diff --git a/.../ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js b/.../ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js
@@ -10,16 +10,42 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 
+import numeral from '@elastic/numeral';
+
+const FILE_SIZE_DISPLAY_FORMAT = '0,0.[0] b';
+
 export function FileTooLarge({ fileSize, maxFileSize }) {
+  const fileSizeFormatted = numeral(fileSize).format(FILE_SIZE_DISPLAY_FORMAT);
+  const maxFileSizeFormatted = numeral(maxFileSize).format(FILE_SIZE_DISPLAY_FORMAT);
+
+  // Format the byte values, using the second format if the difference between
+  // the file size and the max is so small that the formatted values are identical
+  // e.g. 100.01 MB and 100.0 MB
+  let errorText;
+  if (fileSizeFormatted !== maxFileSizeFormatted) {
+    errorText = (
+      <p>
+        The size of the file you selected for upload is {fileSizeFormatted} which
+        exceeds the maximum permitted size of {maxFileSizeFormatted}
+      </p>
+    );
+  } else {
+    const diffFormatted = numeral(fileSize - maxFileSize).format(FILE_SIZE_DISPLAY_FORMAT);
+    errorText = (
+      <p>
+        The size of the file you selected for upload exceeds the maximum
+        permitted size of {maxFileSizeFormatted} by {diffFormatted}
+      </p>
+    );
+  }
+
   return (
     <EuiCallOut
       title="File size is too large"
       color="danger"
       iconType="cross"
     >
-      <p>
-        The size of the file you selected for upload is {fileSize} which exceeds the maximum permitted size of {maxFileSize}
-      </p>
+      {errorText}
     </EuiCallOut>
   );
 }