Merge branch 'bugfix/volume-usage' into q/2.10

scality · Jan 3, 2022 · b23fa45 · b23fa45
2 parents 65f2497 + 935b3c0
commit b23fa45
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 30 deletions.
diff --git a/ui/src/components/VolumeListTable.js b/ui/src/components/VolumeListTable.js
@@ -32,7 +32,6 @@ import {
 import {
   allSizeUnitsToBytes,
   compareHealth,
-  formatSizeForDisplay,
   useTableSortURLSync,
 } from '../services/utils';
 import {
@@ -227,10 +226,12 @@ function Table({
   );
 
   // Synchronizes the params query with the Table sort state
-  const sorted = headerGroups[0].headers.find((item) => item.isSorted === true)
-    ?.id;
-  const desc = headerGroups[0].headers.find((item) => item.isSorted === true)
-    ?.isSortedDesc;
+  const sorted = headerGroups[0].headers.find(
+    (item) => item.isSorted === true,
+  )?.id;
+  const desc = headerGroups[0].headers.find(
+    (item) => item.isSorted === true,
+  )?.isSortedDesc;
   useTableSortURLSync(sorted, desc, data, DEFAULT_SORTING_KEY);
 
   const RenderRow = React.useCallback(
@@ -351,13 +352,8 @@ function Table({
 }
 
 const VolumeListTable = (props) => {
-  const {
-    nodeName,
-    volumeListData,
-    volumeName,
-    isNodeColumn,
-    isSearchBar,
-  } = props;
+  const { nodeName, volumeListData, volumeName, isNodeColumn, isSearchBar } =
+    props;
   const history = useHistory();
   const location = useLocation();
   const intl = useIntl();
@@ -416,7 +412,6 @@ const VolumeListTable = (props) => {
           paddingRight: '5px',
         },
         sortType: 'size',
-        Cell: ({ value }) => formatSizeForDisplay(value),
       },
       {
         Header: 'Status',

diff --git a/ui/src/components/VolumeOverviewTab.js b/ui/src/components/VolumeOverviewTab.js
@@ -19,7 +19,7 @@ import {
   STATUS_WARNING,
   LVM_LOGICAL_VOLUME,
 } from '../constants';
-import { Button, Modal, ProgressBar, Loader } from '@scality/core-ui';
+import { Button, Modal, ProgressBar } from '@scality/core-ui';
 import { useIntl } from 'react-intl';
 import { VolumeTab } from './style/CommonLayoutStyle';
 import { formatSizeForDisplay } from '../services/utils';
@@ -113,9 +113,6 @@ const ModalBody = styled.div`
 const CancelButton = styled(Button)`
   margin-right: ${padding.small};
 `;
-const LoaderContainer = styled(Loader)`
-  padding-left: ${padding.small};
-`;
 
 const LabelName = styled.span`
   font-size: ${fontSize.small};
@@ -246,7 +243,7 @@ const VolumeDetailCard = (props) => {
               {intl.formatMessage({ id: 'size' })}
             </InformationLabel>
             <InformationValue data-cy="volume_size_value">
-              {storageCapacity || intl.formatMessage({id: 'unknown'})}
+              {storageCapacity || intl.formatMessage({ id: 'unknown' })}
             </InformationValue>
           </InformationSpan>
           <InformationSpan>
@@ -360,13 +357,12 @@ const VolumeDetailCard = (props) => {
               />
             </AlertsCounterContainer>
           )}
-          {condition === VOLUME_CONDITION_LINK && (
-            <VolumeUsage>
-              <VolumeSectionTitle>
-                {intl.formatMessage({ id: 'usage' })}
-              </VolumeSectionTitle>
-              {volumeUsagePercentage !==
-              intl.formatMessage({ id: 'unknown' }) ? (
+          {volumeUsagePercentage !== undefined &&
+            condition === VOLUME_CONDITION_LINK && (
+              <VolumeUsage>
+                <VolumeSectionTitle>
+                  {intl.formatMessage({ id: 'usage' })}
+                </VolumeSectionTitle>
                 <ProgressBarContainer>
                   <ProgressBar
                     size="large"
@@ -380,11 +376,8 @@ const VolumeDetailCard = (props) => {
                     backgroundColor={theme.buttonSecondary}
                   />
                 </ProgressBarContainer>
-              ) : (
-                <LoaderContainer size="small" />
-              )}
-            </VolumeUsage>
-          )}
+              </VolumeUsage>
+            )}
         </VolumeGraph>
         <Modal
           close={() => setisDeleteConfirmationModalOpen(false)}