chore: more copy on container right-sizing recs (#1032)

aptible · Jan 24, 2025 · 48721c9 · 48721c9
1 parent d9f64d6
commit 48721c9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 23 deletions.
diff --git a/src/ui/pages/app-detail-service-scale.tsx b/src/ui/pages/app-detail-service-scale.tsx
@@ -36,6 +36,7 @@ import {
   Banner,
   ButtonIcon,
   ButtonLinkDocs,
+  Group,
   IconChevronDown,
   IconChevronRight,
   IconRefresh,
@@ -977,17 +978,21 @@ export const AppDetailServiceScalePage = () => {
             <h1 className="text-lg text-gray-500 mb-4">Manual Scale</h1>
 
             <ManualScaleReason serviceId={serviceId}>
-              <Button
-                onClick={() => {
-                  setContainerProfileType(
-                    `${rec.recommendedInstanceClass}5` as InstanceClass,
-                  );
-                  setContainerSize(rec.recommendedContainerMemoryLimitMb);
-                  setTakingRec(true);
-                }}
-              >
-                Autofill Changes
-              </Button>
+              <Group size="sm" className="items-center">
+                <Button
+                  onClick={() => {
+                    setContainerProfileType(
+                      `${rec.recommendedInstanceClass}5` as InstanceClass,
+                    );
+                    setContainerSize(rec.recommendedContainerMemoryLimitMb);
+                    setTakingRec(true);
+                  }}
+                  size="sm"
+                >
+                  Autofill Changes
+                </Button>
+                <ButtonLinkDocs href="https://aptible.com/docs/core-concepts/scaling/container-right-sizing-recommendations" />
+              </Group>
             </ManualScaleReason>
 
             <FormGroup

diff --git a/src/ui/pages/database-detail-scale.tsx b/src/ui/pages/database-detail-scale.tsx
@@ -31,6 +31,7 @@ import {
   BannerMessages,
   Box,
   Button,
+  ButtonLinkDocs,
   ContainerProfileInput,
   ContainerSizeInput,
   CpuShareView,
@@ -135,6 +136,7 @@ export const DatabaseScalePage = () => {
               >
                 Autofill Changes
               </Button>
+              <ButtonLinkDocs href="https://aptible.com/docs/core-concepts/scaling/container-right-sizing-recommendations" />
             </ManualScaleReason>
 
             <ContainerProfileInput

diff --git a/src/ui/shared/button.tsx b/src/ui/shared/button.tsx
@@ -82,12 +82,7 @@ export const ButtonLinkExternal = ({
 
 export const ButtonLinkDocs = ({ href }: { href: string }) => {
   return (
-    <ButtonLinkExternal
-      href={href}
-      className="ml-5 w-fit"
-      variant="white"
-      size="sm"
-    >
+    <ButtonLinkExternal href={href} className="w-fit" variant="white" size="sm">
       View Docs
       <IconExternalLink variant="sm" className="inline ml-1 h-5 mt-0" />
     </ButtonLinkExternal>

diff --git a/src/ui/shared/scale-recs.tsx b/src/ui/shared/scale-recs.tsx
@@ -25,11 +25,13 @@ import { Banner } from "./banner";
 import { Group } from "./group";
 import {
   IconAutoscale,
+  IconInfo,
   IconScaleCheck,
   IconScaleDown,
   IconScaleUp,
 } from "./icons";
 import { Pill } from "./pill";
+import { Tooltip } from "./tooltip";
 
 const isManualScaleRecValid = (
   service: DeployService,
@@ -71,7 +73,7 @@ export const ManualScaleReason = ({
     `${rec.recommendedInstanceClass}5` as InstanceClass,
   );
 
-  let msg = "Based on container metrics in the last 14 days, we recommend";
+  let msg = "We recommend";
   if (!isProfileSame) {
     msg += ` modifying your container profile to ${recProfile.name} class`;
   }
@@ -89,11 +91,17 @@ export const ManualScaleReason = ({
           <ManualScaleRecView serviceId={serviceId} />
         </div>
         <div className="flex-1">
+          <Group variant="horizontal" size="sm" className="items-center">
+            <span className="font-bold">Scaling Recommendation</span>
+            <Tooltip
+              text="This recommendation is updated daily based on CPU 95P, RSS MAX in
+            the last 14 days. See docs for more information on how it's
+            calculated."
+            >
+              <IconInfo variant="sm" />
+            </Tooltip>
+          </Group>
           <span>{msg}. </span>
-          <span className="font-bold">
-            We recommend conducting your own container and usage review before
-            scaling.{" "}
-          </span>
           <Link
             to={
               service.appId
@@ -102,7 +110,8 @@ export const ManualScaleReason = ({
             }
           >
             See metrics
-          </Link>
+          </Link>{" "}
+          to review usage before scaling.
         </div>
         <div>{children}</div>
       </Group>