Check activePlan for autoscaling (#983)

* Check activePlan for autoscaling * test
aptible · Nov 26, 2024 · 204bd7b · 204bd7b
1 parent 5a821c7
commit 204bd7b
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 3 deletions.
diff --git a/src/app/test/app-detail-service-scale.test.tsx b/src/app/test/app-detail-service-scale.test.tsx
@@ -10,6 +10,7 @@ import {
   testAccount,
   testApp,
   testAutoscalingAccount,
+  testAutoscalingActivePlan,
   testAutoscalingApp,
   testAutoscalingPolicy,
   testAutoscalingPolicyHAS,
@@ -18,6 +19,7 @@ import {
   testAutoscalingStack,
   testEnv,
   testServiceRails,
+  testStack,
   verifiedUserHandlers,
 } from "@app/mocks";
 import { appServiceScalePathUrl } from "@app/routes";
@@ -168,6 +170,84 @@ describe("AppDetailServiceScalePage", () => {
       });
     });
 
+    describe("with a plan that supports autoscaling", () => {
+      it("should show autoscaling options", async () => {
+        server.use(
+          ...verifiedUserHandlers(),
+          ...stacksWithResources({
+            stacks: [testStack],
+            accounts: [testAutoscalingAccount],
+            apps: [testAutoscalingApp],
+          }),
+          rest.get(`${testEnv.apiUrl}/operations/:id/logs`, (_, res, ctx) => {
+            return res(ctx.text("/mock"));
+          }),
+          rest.get(`${testEnv.apiUrl}/mock`, (_, res, ctx) => {
+            return res(ctx.text("complete"));
+          }),
+          rest.get(`${testEnv.apiUrl}/active_plans`, async (_, res, ctx) => {
+            return res(
+              ctx.json({
+                _embedded: { active_plans: [testAutoscalingActivePlan] },
+              }),
+            );
+          }),
+
+          rest.post(
+            `${testEnv.apiUrl}/services/:id/service_sizing_policies`,
+            async (_, res, ctx) => {
+              return res(ctx.json(testAutoscalingPolicy));
+            },
+          ),
+        );
+        const { App, store } = setupAppIntegrationTest({
+          initEntries: [
+            appServiceScalePathUrl(
+              `${testAutoscalingApp.id}`,
+              `${testAutoscalingService.id}`,
+            ),
+          ],
+        });
+
+        await waitForBootup(store);
+
+        render(<App />);
+
+        await waitForData(store, (state) => {
+          return hasDeployApp(
+            selectAppById(state, { id: `${testAutoscalingApp.id}` }),
+          );
+        });
+
+        await screen.findByRole("heading", { level: 1, name: "Autoscale" });
+
+        const btns = screen.getAllByRole("button", {
+          name: /Save Changes/,
+        });
+        const autoscaleBtn = btns[0];
+        expect(autoscaleBtn).toBeDisabled();
+
+        const autoscaleSelect = await screen.findByRole("combobox", {
+          name: "Autoscaling Setting",
+        });
+        expect(autoscaleSelect).toHaveValue("disabled");
+
+        fireEvent.change(autoscaleSelect, {
+          target: { value: "vertical" },
+        });
+        expect(autoscaleSelect).toHaveValue("vertical");
+
+        expect(autoscaleBtn).toBeEnabled();
+
+        fireEvent.change(autoscaleSelect, {
+          target: { value: "horizontal" },
+        });
+        expect(autoscaleSelect).toHaveValue("horizontal");
+
+        expect(autoscaleBtn).toBeEnabled();
+      });
+    });
+
     describe("when autoscaling is enabled", () => {
       it("should validate some HAS inputs", async () => {
         server.use(

diff --git a/src/deploy/plan/index.ts b/src/deploy/plan/index.ts
@@ -29,6 +29,8 @@ export interface DeployPlanResponse {
   name: string;
   updated_at: string;
   vhost_limit: number;
+  horizontal_autoscaling: boolean;
+  vertical_autoscaling: boolean;
   _type: "plan";
 }
 
@@ -51,6 +53,8 @@ export interface DeployActivePlanResponse {
   organization_id: string;
   updated_at: string;
   vhost_limit: number;
+  horizontal_autoscaling: boolean;
+  vertical_autoscaling: boolean;
   _links: {
     organization: LinkResponse;
     plan: LinkResponse;
@@ -81,6 +85,8 @@ export const defaultActivePlanResponse = (
     organization_id: "",
     updated_at: now,
     vhost_limit: 0,
+    horizontal_autoscaling: false,
+    vertical_autoscaling: false,
     _links: {
       organization: defaultHalHref(),
       plan: defaultHalHref(),
@@ -112,6 +118,8 @@ export const defaultPlanResponse = (
     name: "starter",
     updated_at: now,
     vhost_limit: 0,
+    horizontal_autoscaling: false,
+    vertical_autoscaling: false,
     _type: "plan",
     ...c,
   };
@@ -136,6 +144,8 @@ export const deserializePlan = (payload: DeployPlanResponse): DeployPlan => {
     name: payload.name as PlanName,
     updatedAt: payload.updated_at,
     vhostLimit: payload.vhost_limit,
+    horizontalAutoscaling: payload.horizontal_autoscaling,
+    verticalAutoscaling: payload.vertical_autoscaling,
   };
 };
 
@@ -164,6 +174,8 @@ export const deserializeActivePlan = (
     planId: extractIdFromLink(links.plan),
     updatedAt: payload.updated_at,
     vhostLimit: payload.vhost_limit,
+    horizontalAutoscaling: payload.horizontal_autoscaling,
+    verticalAutoscaling: payload.vertical_autoscaling,
   };
 };
 

diff --git a/src/mocks/data.ts b/src/mocks/data.ts
@@ -512,6 +512,19 @@ export const testActivePlan = defaultActivePlanResponse({
   },
 });
 
+export const testAutoscalingActivePlan = defaultActivePlanResponse({
+  id: createId(),
+  organization_id: testOrg.id,
+  horizontal_autoscaling: true,
+  vertical_autoscaling: true,
+  _links: {
+    organization: defaultHalHref(
+      `${testEnv.authUrl}/organizations/${testOrg.id}`,
+    ),
+    plan: defaultHalHref(`${testEnv.apiUrl}/plans/${testPlan.id}`),
+  },
+});
+
 export const testEnvExpress = defaultEnvResponse({
   id: createId(),
   organization_id: testOrg.id,

diff --git a/src/schema/factory.ts b/src/schema/factory.ts
@@ -475,6 +475,8 @@ export const defaultPlan = (c: Partial<DeployPlan> = {}): DeployPlan => {
     name: "none",
     updatedAt: now,
     vhostLimit: 0,
+    horizontalAutoscaling: false,
+    verticalAutoscaling: false,
     ...c,
   };
 };
@@ -502,6 +504,8 @@ export const defaultActivePlan = (
     organizationId: "",
     updatedAt: now,
     vhostLimit: 0,
+    horizontalAutoscaling: false,
+    verticalAutoscaling: false,
     planId: "",
     ...c,
   };

diff --git a/src/types/deploy.ts b/src/types/deploy.ts
@@ -442,6 +442,8 @@ export interface DeployPlan extends Timestamps {
   name: PlanName;
   updatedAt: string;
   vhostLimit: number;
+  horizontalAutoscaling: boolean;
+  verticalAutoscaling: boolean;
 }
 
 export interface DeployActivePlan extends Omit<DeployPlan, "name"> {

diff --git a/src/ui/pages/app-detail-service-scale.tsx b/src/ui/pages/app-detail-service-scale.tsx
@@ -1,6 +1,7 @@
 import {
   type ServiceSizingPolicyEditProps,
   containerSizesByProfile,
+  fetchActivePlans,
   fetchApp,
   fetchService,
   fetchServiceSizingPoliciesByServiceId,
@@ -11,11 +12,13 @@ import {
   selectContainerProfilesForStack,
   selectEndpointsByServiceId,
   selectEnvironmentById,
+  selectFirstActivePlan,
   selectManualScaleRecommendationByServiceId,
   selectServiceById,
   selectServiceSizingPolicyByServiceId,
   selectStackById,
 } from "@app/deploy";
+import { selectOrganizationSelectedId } from "@app/organizations";
 import {
   useDispatch,
   useLoader,
@@ -206,6 +209,10 @@ const AutoscalingSection = ({
 
   const modifyLoader = useLoader(modifyServiceSizingPolicy);
   const stack = useSelector((s) => selectStackById(s, { id: stackId }));
+  const orgId = useSelector(selectOrganizationSelectedId);
+  const activePlan = useSelector(selectFirstActivePlan);
+
+  useQuery(fetchActivePlans({ orgId }));
 
   const [errors, validate] = useValidator<
     ServiceSizingPolicyEditProps,
@@ -235,21 +242,26 @@ const AutoscalingSection = ({
 
   const [advancedIsOpen, setOpen] = useState(false);
 
+  const horizontalAutoscalingEnabled =
+    stack.horizontalAutoscaling || activePlan.horizontalAutoscaling;
+  const verticalAutoscalingEnabled =
+    stack.verticalAutoscaling || activePlan.verticalAutoscaling;
+
   const options: SelectOption[] = [
     {
       label: "Disabled: No autoscaling",
       value: "disabled",
     },
   ];
 
-  if (stack.horizontalAutoscaling) {
+  if (horizontalAutoscalingEnabled) {
     options.push({
       label: "Enabled: Horizontal Autoscaling",
       value: "horizontal",
     });
   }
 
-  if (stack.verticalAutoscaling) {
+  if (verticalAutoscalingEnabled) {
     options.push({
       label: "Enabled: Vertical Autoscaling",
       value: "vertical",
@@ -279,7 +291,7 @@ const AutoscalingSection = ({
     if (opt.value === "horizontal") setOpen(true);
   };
 
-  if (!stack.verticalAutoscaling && !stack.horizontalAutoscaling) {
+  if (!verticalAutoscalingEnabled && !horizontalAutoscalingEnabled) {
     return null;
   }