Merge pull request #118 from sapcc/info_button

fix: base quota information

Author: VoigtS

.changeset/dry-pianos-refuse.md

@@ -0,0 +1,5 @@
+---
+"@sapcc/limes-ui": patch
+---
+
+Change indicator for additional resource info from an icon to a button.

src/components/mainView/Resource.js

@@ -18,7 +18,7 @@ import React from "react";
 import { globalStore, createCommitmentStore } from "../StoreProvider";
 import { t } from "../../lib/utils";
 import { CustomZones, PanelType } from "../../lib/constants";
-import { Button, Icon, Stack } from "@cloudoperators/juno-ui-components";
+import { Button, Stack } from "@cloudoperators/juno-ui-components";
 import { Link } from "react-router";
 import { ProjectBadges } from "../shared/LimesBadges";
 import { isAZUnaware } from "../../lib/utils";
@@ -112,16 +112,18 @@ const Resource = (props) => {
           gap="1"
           distribution={canEdit && !editableResource && "between"}
         >
-          <Stack>
-            {displayName}
+          <Stack gap="2">
+            <div className="m-auto">{displayName}</div>
             {resourceHasQuota && !isPanelView && (
-              <Icon
+              <Button
                 data-testid="detailedResourceInfo"
                 icon={displayResourceInfo ? "expandMore" : "chevronRight"}
-                title={displayResourceInfo ? "hide info" : "display info"}
+                label="Explain"
                 onClick={() => {
                   setDisplayResourceInfo(!displayResourceInfo);
                 }}
+                title={displayResourceInfo ? "hide info" : "display info for this resource"}
+                size="small"
               />
             )}
           </Stack>

src/components/resourceBar/ResourceInfo.js

@@ -48,7 +48,7 @@ const ResourceInfo = (props) => {
       infos.push(getPaygInfo());
     }
     if (!scope.isCluster()) {
-      infos.push(getBaseQuotaInfo());
+      infos.push(...getBaseQuotaInfo());
     }
     infos.push(...getNegativeRemainingQuotaInfo());
 
@@ -82,8 +82,15 @@ const ResourceInfo = (props) => {
 
   function getBaseQuotaInfo() {
     const baseQuotaAZ = locateBaseQuotaAZ(resource);
-    if (!baseQuotaAZ) return;
-    return BaseQuotaLabels.AVAILABLE(unit.format(baseQuotaAZ.quota), az);
+    const sections = [];
+    if (!baseQuotaAZ) return sections;
+    const totalQuota = unit.format(resource.quota);
+    const remainingBaseQuota = unit.format(baseQuotaAZ.quota);
+    const deductedBaseQuota = unit.format(resource.quota - baseQuotaAZ.quota);
+    !az && sections.push(BaseQuotaLabels.REMAINING({ totalQuota, remainingBaseQuota, deductedBaseQuota }));
+    !az && sections.push(BaseQuotaLabels.BASEINFO);
+    az && az.name != CustomZones.UNKNOWN && sections.push(BaseQuotaLabels.AZINFO(az));
+    return sections;
   }
 
   function getNegativeRemainingQuotaInfo() {
@@ -108,7 +115,7 @@ const ResourceInfo = (props) => {
   return (
     <IntroBox className="my-1 text-sm">
       {resourceInfos.map((info, index) => (
-        <p key={index}>{info}</p>
+        <div key={index}>{info}</div>
       ))}
     </IntroBox>
   );

src/components/resourceBar/ResourceInfo.test.js

@@ -117,16 +117,12 @@ describe("Resource info tests", () => {
     // AZ info should contain the info addition.
     props.az = { name: "AZ1" };
     rerender(<ResourceInfo {...props} />);
-    expect(screen.getByTestId(/BaseQuota.AVAILABLE/i)).toBeInTheDocument();
-    expect(screen.getByText("1 GiB")).toBeInTheDocument();
-    expect(screen.getByTestId(/BaseQuota.ADDITION/i)).toBeInTheDocument();
     expect(screen.getByTestId(/BaseQuota.AZ/i)).toBeInTheDocument();
 
     // unknown AZ info should contain specific info.
     props.az = { name: CustomZones.UNKNOWN };
     rerender(<ResourceInfo {...props} />);
-    expect(screen.getByTestId(/BaseQuota.ADDITION/i)).toBeInTheDocument();
-    expect(screen.getByTestId(/BaseQuota.UNKNOWN/i)).toBeInTheDocument();
+    expect(screen.queryByTestId(/BaseQuota.AZ/i)).not.toBeInTheDocument();
 
     // Provided AZ's without a base quota AZ should not display info.
     props.resource = {

src/components/resourceBar/resourceInfoLabels.js

@@ -15,7 +15,6 @@
  */
 
 import React from "react";
-import { CustomZones } from "../../lib/constants";
 
 export const UnknownAZLabel = (
   <span data-testid="UnknownAZ">
@@ -50,22 +49,20 @@ export const PAYGLabels = {
 };
 
 export const BaseQuotaLabels = {
-  AVAILABLE: (amount, az) => (
-    <>
-      <span data-testid="BaseQuota.AVAILABLE">
-        Available base quota: <strong>{amount}</strong>.{" "}
-      </span>{" "}
-      {az && (
-        <span data-testid="BaseQuota.ADDITION">
-          {az.name === CustomZones.UNKNOWN ? (
-            <span data-testid="BaseQuota.UNKNOWN">Usage assigns</span>
-          ) : (
-            <span data-testid="BaseQuota.AZ">Commitments and usage assign</span>
-          )}{" "}
-          base quota to this AZ.
-        </span>
-      )}
-    </>
+  REMAINING: ({ totalQuota, remainingBaseQuota, deductedBaseQuota }) => (
+    <p data-testid="BaseQuota.AVAILABLE">
+      Base quota: <strong>{remainingBaseQuota}</strong> out of the original <strong>{totalQuota}</strong> are still
+      available. <strong>{deductedBaseQuota}</strong> have been deducted because of AZ-aware quotas based on existing
+      commitments and usage.
+    </p>
+  ),
+  AZINFO: () => (
+    <span data-testid="BaseQuota.AZ">
+      Resources in this AZ can also be deployed using the region-wide base quota seen above.
+    </span>
+  ),
+  BASEINFO: (
+    <span>Base quota can be used to deploy into any AZ of your choice. Quota does not incur costs until used.</span>
   ),
 };