Add HelpTip to clarify Usage calculation (#3143)

web-app/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx

@@ -13,7 +13,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import get from "lodash/get";
 import styled from "styled-components";
 import { Link, useNavigate } from "react-router-dom";
@@ -23,6 +23,7 @@ import {
   BucketsIcon,
   Checkbox,
   Grid,
+  HelpTip,
   ReportedUsageIcon,
   TotalObjectsIcon,
 } from "mds";
@@ -37,6 +38,7 @@ import {
 } from "../../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../../common/SecureComponent";
 import { Bucket } from "../../../../api/consoleApi";
+import { usageClarifyingContent } from "screens/Console/Dashboard/BasicDashboard/ReportedUsage";
 
 const BucketItemMain = styled.div(({ theme }) => ({
   border: `${get(theme, "borderColor", "#eaeaea")} 1px solid`,
@@ -129,6 +131,8 @@ const BucketListItem = ({
 }: IBucketListItem) => {
   const navigate = useNavigate();
 
+  const [clickOverride, setClickOverride] = useState<boolean>(false);
+
   const usage = niceBytes(`${bucket.size}` || "0");
   const usageScalar = usage.split(" ")[0];
   const usageUnit = usage.split(" ")[1];
@@ -157,7 +161,7 @@ const BucketListItem = ({
   return (
     <BucketItemMain
       onClick={() => {
-        navigate(`/buckets/${bucket.name}/admin`);
+        !clickOverride && navigate(`/buckets/${bucket.name}/admin`);
       }}
       id={`manageBucket-${bucket.name}`}
       className={`bucket-item ${manageAllowed ? "disabled" : ""}`}
@@ -205,8 +209,22 @@ const BucketListItem = ({
           />
         </Link>
 
-        <Grid item className={"metric"}>
-          <ReportedUsageIcon />
+        <Grid
+          item
+          className={"metric"}
+          onMouseEnter={() =>
+            bucket.details?.versioning && setClickOverride(true)
+          }
+          onMouseLeave={() =>
+            bucket.details?.versioning && setClickOverride(false)
+          }
+        >
+          {bucket.details?.versioning && (
+            <HelpTip content={usageClarifyingContent} placement="top">
+              <ReportedUsageIcon />{" "}
+            </HelpTip>
+          )}
+          {!bucket.details?.versioning && <ReportedUsageIcon />}
           <span className={"metricLabel"}>Usage</span>
           <div className={"metricText"}>
             {usageScalar}

web-app/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.tsx

@@ -14,10 +14,10 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, { Fragment } from "react";
 import get from "lodash/get";
 import styled from "styled-components";
-import { Box, Tooltip } from "mds";
+import { Box, HelpTip } from "mds";
 import { Cell, Pie, PieChart } from "recharts";
 
 const ReportedUsageMain = styled.div(({ theme }) => ({
@@ -53,6 +53,31 @@ const ReportedUsageMain = styled.div(({ theme }) => ({
     },
   },
 }));
+export const usageClarifyingContent = (
+  <Fragment>
+    <div>
+      <strong> Not what you expected?</strong>
+      <br />
+      This Usage value is comparable to <strong>mc du --versions</strong> which
+      represents the size of all object versions that exist in the buckets.
+      <br />
+      Running{" "}
+      <a
+        target="_blank"
+        href="https://min.io/docs/minio/linux/reference/minio-mc/mc-du.html"
+      >
+        mc du
+      </a>{" "}
+      without the <strong>--versions</strong> flag or{" "}
+      <a target="_blank" href="https://man7.org/linux/man-pages/man1/df.1.html">
+        df
+      </a>{" "}
+      will provide different values corresponding to the size of all{" "}
+      <strong>current</strong> versions and the physical disk space occupied
+      respectively.
+    </div>
+  </Fragment>
+);
 
 const ReportedUsage = ({
   usageValue,
@@ -79,7 +104,7 @@ const ReportedUsage = ({
           <span>Reported Usage</span>
         </div>
 
-        <Tooltip tooltip={`${usageValue} Bytes`}>
+        <HelpTip content={usageClarifyingContent} placement="left">
           <label
             className={"unit-value"}
             style={{
@@ -88,8 +113,8 @@ const ReportedUsage = ({
           >
             {total}
           </label>
-        </Tooltip>
-        <label className={"unit-type"}>{unit}</label>
+          <label className={"unit-type"}>{unit}</label>
+        </HelpTip>
       </Box>
 
       <Box>

web-app/src/screens/Console/ObjectBrowser/OBBucketList.tsx

@@ -27,6 +27,7 @@ import {
   ProgressBar,
   RefreshIcon,
   Grid,
+  HelpTip,
 } from "mds";
 import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 import { SecureComponent } from "../../../common/SecureComponent";
@@ -50,6 +51,7 @@ import { Bucket } from "../../../api/consoleApi";
 import { api } from "../../../api";
 import { errorToHandler } from "../../../api/errors";
 import HelpMenu from "../HelpMenu";
+import { usageClarifyingContent } from "../Dashboard/BasicDashboard/ReportedUsage";
 
 const OBListBuckets = () => {
   const dispatch = useAppDispatch();
@@ -57,6 +59,7 @@ const OBListBuckets = () => {
 
   const [records, setRecords] = useState<Bucket[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [clickOverride, setClickOverride] = useState<boolean>(false);
   const [filterBuckets, setFilterBuckets] = useState<string>("");
 
   const features = useSelector(selFeatures);
@@ -102,7 +105,8 @@ const OBListBuckets = () => {
     {
       type: "view",
       onClick: (bucket: Bucket) => {
-        navigate(`${IAM_PAGES.OBJECT_BROWSER_VIEW}/${bucket.name}`);
+        !clickOverride &&
+          navigate(`${IAM_PAGES.OBJECT_BROWSER_VIEW}/${bucket.name}`);
       },
     },
   ];
@@ -213,7 +217,19 @@ const OBListBuckets = () => {
                   {
                     label: "Size",
                     elementKey: "size",
-                    renderFunction: (size: number) => niceBytesInt(size || 0),
+                    renderFunction: (size: number) => (
+                      <div
+                        onMouseEnter={() => setClickOverride(true)}
+                        onMouseLeave={() => setClickOverride(false)}
+                      >
+                        <HelpTip
+                          content={usageClarifyingContent}
+                          placement="right"
+                        >
+                          {niceBytesInt(size || 0)}
+                        </HelpTip>
+                      </div>
+                    ),
                   },
                   {
                     label: "Access",