Fixing issue with inadequate bytes pretty printer.

ReCodEx · Nov 29, 2017 · 29a85d3 · 29a85d3
1 parent d63ba8e
commit 29a85d3
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,6 @@
     "js-yaml": "^3.10.0",
     "jwt-decode": "^2.0.1",
     "moment": "^2.18.1",
-    "pretty-bytes": "^3.0.1",
     "pretty-ms": "^2.1.0",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",

diff --git a/src/components/Exercises/AttachedFilesTable/AdditionalFilesTableRow.js b/src/components/Exercises/AttachedFilesTable/AdditionalFilesTableRow.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import withLinks from '../../../hoc/withLinks';
 import { Button } from 'react-bootstrap';
@@ -25,7 +25,7 @@ const AdditionalFilesTableRow = ({
       </a>
     </td>
     <td>
-      {prettyBytes(size)}
+      {prettyPrintBytes(size)}
     </td>
     <td>
       <FormattedDate value={uploadedAt * 1000} />

diff --git a/src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableRow.js b/src/components/Exercises/AttachedFilesTable/SupplementaryFilesTableRow.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import { Button } from 'react-bootstrap';
 import Confirm from '../../../components/forms/Confirm';
@@ -26,7 +26,7 @@ const SupplementaryFilesTableRow = ({
           </span>}
     </td>
     <td>
-      {prettyBytes(size)}
+      {prettyPrintBytes(size)}
     </td>
     <td>
       <FormattedDate value={uploadedAt * 1000} />

diff --git a/...nceSolutions/ReferenceSolutionsEvaluationsResults/ReferenceSolutionsEvaluationsResults.js b/...nceSolutions/ReferenceSolutionsEvaluationsResults/ReferenceSolutionsEvaluationsResults.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from 'react-intl';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 import prettyMs from 'pretty-ms';
 import { Table } from 'react-bootstrap';
 import Box from '../../widgets/Box';
 
-const ReferenceSolutionsEvaluationsResults = ({ results, testId, taskId }) => (
+const ReferenceSolutionsEvaluationsResults = ({ results, testId, taskId }) =>
   <Box
     isOpen={false}
     collapsable
@@ -71,19 +71,24 @@ const ReferenceSolutionsEvaluationsResults = ({ results, testId, taskId }) => (
 
             return (
               <tr key={i}>
-                <td>{result.referenceSolution.description}</td>
+                <td>
+                  {result.referenceSolution.description}
+                </td>
                 <td>
                   <FormattedDate value={result.evaluation.evaluatedAt * 1000} />
                 </td>
-                <td>{prettyBytes(taskStats.usedMemory)}</td>
-                <td>{prettyMs(taskStats.usedTime * 1000)}</td>
+                <td>
+                  {prettyPrintBytes(taskStats.usedMemory)}
+                </td>
+                <td>
+                  {prettyMs(taskStats.usedTime * 1000)}
+                </td>
               </tr>
             );
           })}
       </tbody>
     </Table>
-  </Box>
-);
+  </Box>;
 
 ReferenceSolutionsEvaluationsResults.propTypes = {
   results: PropTypes.array.isRequired,

diff --git a/src/components/Submissions/TestResultsTable/TestResultsTable.js b/src/components/Submissions/TestResultsTable/TestResultsTable.js
@@ -5,7 +5,7 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Icon from 'react-fontawesome';
 import prettyMs from 'pretty-ms';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 
 import exitCodeMapping from '../../helpers/exitCodeMapping';
 
@@ -184,7 +184,7 @@ const TestResultsTable = ({ results, runtimeEnvironmentId }) =>
               memoryExceeded === false,
               memoryRatio,
               memory,
-              prettyBytes
+              prettyPrintBytes
             )}
             {tickOrCrossAndRatioOrValue(
               timeExceeded === false,

diff --git a/src/components/Submissions/UploadsTable/UploadsTable.js b/src/components/Submissions/UploadsTable/UploadsTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 import Icon from 'react-fontawesome';
 import { Table, Button, ButtonGroup } from 'react-bootstrap';
 
@@ -13,7 +13,7 @@ const UploadsTable = ({
   returnFile,
   removeFailedFile,
   retryUploadFile
-}) => (
+}) =>
   <Table responsive>
     <thead>
       <tr>
@@ -24,13 +24,17 @@ const UploadsTable = ({
       </tr>
     </thead>
     <tbody>
-      {attachedFiles.map(payload => (
+      {attachedFiles.map(payload =>
         <tr key={'attached-' + payload.name}>
           <td className="text-center">
             <Icon name="check" className="text-success text-bold" />
           </td>
-          <td>{payload.name}</td>
-          <td>{prettyBytes(payload.file.size)}</td>
+          <td>
+            {payload.name}
+          </td>
+          <td>
+            {prettyPrintBytes(payload.file.size)}
+          </td>
           <td>
             <Button
               bsSize="xs"
@@ -41,26 +45,34 @@ const UploadsTable = ({
             </Button>
           </td>
         </tr>
-      ))}
+      )}
 
-      {uploadingFiles.map(payload => (
+      {uploadingFiles.map(payload =>
         <tr key={'uploading-' + payload.name}>
           <td className="text-center">
             <Icon name="circle-o" spin />
           </td>
-          <td>{payload.name}</td>
-          <td>{prettyBytes(payload.file.size)}</td>
+          <td>
+            {payload.name}
+          </td>
+          <td>
+            {prettyPrintBytes(payload.file.size)}
+          </td>
           <td />
         </tr>
-      ))}
+      )}
 
-      {failedFiles.map(payload => (
+      {failedFiles.map(payload =>
         <tr key={'failed-' + payload.name}>
           <td className="text-center">
             <Icon name="exclamation-triangle" className="text-danger" />
           </td>
-          <td>{payload.name}</td>
-          <td>{prettyBytes(payload.file.size)}</td>
+          <td>
+            {payload.name}
+          </td>
+          <td>
+            {prettyPrintBytes(payload.file.size)}
+          </td>
           <td>
             <ButtonGroup>
               <Button
@@ -80,15 +92,19 @@ const UploadsTable = ({
             </ButtonGroup>
           </td>
         </tr>
-      ))}
+      )}
 
-      {removedFiles.map(payload => (
+      {removedFiles.map(payload =>
         <tr key={'removed' + payload.name}>
           <td className="text-center">
             <Icon name="trash" className="text-warning" />
           </td>
-          <td>{payload.name}</td>
-          <td>{prettyBytes(payload.file.size)}</td>
+          <td>
+            {payload.name}
+          </td>
+          <td>
+            {prettyPrintBytes(payload.file.size)}
+          </td>
           <td>
             <ButtonGroup>
               <Button
@@ -101,10 +117,9 @@ const UploadsTable = ({
             </ButtonGroup>
           </td>
         </tr>
-      ))}
+      )}
     </tbody>
-  </Table>
-);
+  </Table>;
 
 UploadsTable.propTypes = {
   uploadingFiles: PropTypes.array.isRequired,

diff --git a/src/components/forms/Fields/KiloBytesTextField.js b/src/components/forms/Fields/KiloBytesTextField.js
@@ -1,22 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 import TextField from './TextField';
 import { HelpBlock } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 
-const KiloBytesTextField = ({ input, ...props }) => (
+const KiloBytesTextField = ({ input, ...props }) =>
   <div>
     <TextField {...props} input={input} />
     <HelpBlock>
       <FormattedMessage
         id="app.bytesTextField.humanReadable"
         defaultMessage="Human readable variant:"
       />{' '}
-      <b>{prettyBytes(Number(input.value) * 1000)}</b>
+      <b>{prettyPrintBytes(Number(input.value) * 1024)}</b>
     </HelpBlock>
-  </div>
-);
+  </div>;
 
 KiloBytesTextField.propTypes = {
   input: PropTypes.shape({

diff --git a/src/components/helpers/stringFormatters.js b/src/components/helpers/stringFormatters.js
@@ -0,0 +1,21 @@
+const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+export function parseBytes(value) {
+  const bytes = Number(value);
+  let absValue = Math.abs(bytes);
+  if (!Number.isFinite(absValue)) return 'infinity';
+
+  const base = 1024;
+  let unit = 0;
+  while (absValue >= base && unit < units.length) {
+    absValue /= base;
+    ++unit;
+  }
+  const rounded = Math.round(absValue * 1000) / 1000;
+  return { value: rounded.toString(), unit: units[unit] };
+}
+
+export function prettyPrintBytes(input) {
+  const { value, unit } = parseBytes(input);
+  return `${value} ${unit}`;
+}
diff --git a/src/components/widgets/SourceCodeInfoBox/SourceCodeInfoBox.js b/src/components/widgets/SourceCodeInfoBox/SourceCodeInfoBox.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SimpleInfoBox } from '../InfoBox';
-import prettyBytes from 'pretty-bytes';
+import { prettyPrintBytes } from '../../helpers/stringFormatters';
 
-const SourceCodeInfoBox = ({ id, name, size, uploadedAt }) => (
+const SourceCodeInfoBox = ({ id, name, size, uploadedAt }) =>
   <SimpleInfoBox
     title={name}
-    description={prettyBytes(size)}
+    description={prettyPrintBytes(size)}
     icon="file-code-o"
-  />
-);
+  />;
 
 SourceCodeInfoBox.propTypes = {
   id: PropTypes.string.isRequired,

diff --git a/yarn.lock b/yarn.lock
@@ -5814,12 +5814,6 @@ prettier@^1.3.1:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.5.3.tgz#59dadc683345ec6b88f88b94ed4ae7e1da394bfe"
 
-pretty-bytes@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-3.0.1.tgz#27d0008d778063a0b4811bb35c79f1bd5d5fbccf"
-  dependencies:
-    number-is-nan "^1.0.0"
-
 pretty-ms@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-2.1.0.tgz#4257c256df3fb0b451d6affaab021884126981dc"