Skip to content

Commit

Permalink
Merge pull request #33 from platformsh/30-remove-app-scaled-horizonta…
Browse files Browse the repository at this point in the history 
…lly-detection-features

30 remove app scaled horizontally detection features
  • Loading branch information
@chadwcarlson
chadwcarlson committed Sep 26, 2023
2 parents a213260 + 9fde3fd commit a191141
Show file tree
Hide file tree
Showing 6 changed files with 5 additions and 184 deletions.
15 changes: 1 addition & 14 deletions backend/app/routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,12 @@

@bp.route(f'{API_PREFIX}/environment')
def environment():
return jsonify(type=getPlatformEnvironment(), instance_count=getPlatformInstances(), session_storage=getSessionStorageType())
return jsonify(type=getPlatformEnvironment(), session_storage=getSessionStorageType())

@bp.route('/')
def home():
return "Hello from the Python backend!"

def getPlatformInstances():
platform_application_data = os.environ.get('PLATFORM_APPLICATION')
if platform_application_data is None:
return None

platform_application = json.loads(base64.b64decode(platform_application_data))

if 'instance_count' in platform_application:
instance_count = platform_application['instance_count']
else :
instance_count = None
return instance_count

def getSessionStorageType():
platform_relationships_data = os.environ.get('PLATFORM_RELATIONSHIPS')

Expand Down
10 changes: 1 addition & 9 deletions frontend/src/App.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ describe("<App />", () => {
it("should successfully fetch environment data and set the state", async () => {
const mockData = {
type: "staging",
instance_count: 3,
session_storage: "redis",
};

Expand All @@ -39,13 +38,11 @@ describe("<App />", () => {
screen.getByText(`User session service: ${mockData.session_storage}`),
).toBeInTheDocument();
expect(screen.getByText(`Scaling: Ready`)).toBeInTheDocument();
expect(screen.getByText(`App scaled horizontally`)).toBeInTheDocument();
});

it("uses production intro for production", async () => {
const mockData = {
type: "production",
instance_count: 3,
session_storage: "redis",
};

Expand All @@ -64,7 +61,6 @@ describe("<App />", () => {
it("uses staging copy for non-production", async () => {
const mockData = {
type: "other",
instance_count: 3,
session_storage: "redis",
};

Expand All @@ -83,7 +79,6 @@ describe("<App />", () => {
it("highlights Deploy to Upsun and Creat preview environment on production and session_storage is file", async () => {
const mockData = {
type: "production",
instance_count: 1,
session_storage: "file",
};

Expand Down Expand Up @@ -120,7 +115,6 @@ describe("<App />", () => {
it("highlights redis step on file storage in staging", async () => {
const mockData = {
type: "staging",
instance_count: 1,
session_storage: "file",
};

Expand Down Expand Up @@ -157,7 +151,6 @@ describe("<App />", () => {
it("highlights merge step to on redis storage set in staging", async () => {
const mockData = {
type: "staging",
instance_count: 1,
session_storage: "redis",
};

Expand Down Expand Up @@ -193,10 +186,9 @@ describe("<App />", () => {
).toHaveClass("is-disabled");
});

it("highlights all steps completed in production when redis storage set and instance count 1", async () => {
it("highlights all steps completed in production when redis storage set", async () => {
const mockData = {
type: "production",
instance_count: 1,
session_storage: "redis",
};

Expand Down
47 changes: 3 additions & 44 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,17 @@
import React, { useEffect, useState } from "react";
import { ENVIRONMENT_PATH, fetchEnvironment } from "./utility/api";
import { ReactComponent as RedisIcon } from "./assets/utility/service_redis.svg";
import { ReactComponent as ScaleIcon } from "./assets/utility/scale_app.svg";
import { ReactComponent as DoneIcon } from "./assets/utility/done.svg";
import { ReactComponent as MergeIcon } from "./assets/utility/merge.svg";
import { ReactComponent as BranchIcon } from "./assets/utility/branch.svg";

// import { Link } from 'react-router-dom'

import CopyButton from "./components/CopyButton";

import { API_BASE_URL } from "./config";
import ErrorPage from "./page/ErrorPage";
import Header from "./components/Header";
import Sidebar from "./components/Sidebar";
import FeatureStep from "./components/FeatureStep";
import { CodeBlock, CopyBlock, dracula } from "react-code-blocks";

// import SyntaxHighlighter from 'react-syntax-highlighter';
// import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { CodeBlock, dracula } from "react-code-blocks";

function App() {

Expand All @@ -27,7 +20,6 @@ function App() {
const [sessionStorageType, setSessionStorageType] = useState<string | null>(
null,
);
const [appInstances, setAppInstances] = useState<number | null>(null);
const [fatalErrorMessage, setFatalErrorMessage] = useState<string | null>(
null,
);
Expand All @@ -49,9 +41,8 @@ services:
useEffect(() => {
fetchEnvironment()
.then((envResponse) => {
const { type, instance_count, session_storage } = envResponse;
const { type, session_storage } = envResponse;
setEnvironment(type && type.charAt(0).toUpperCase() + type.slice(1));
setAppInstances(instance_count ? instance_count : 0);
setSessionStorageType(session_storage);
})
.catch((error) =>
Expand All @@ -73,9 +64,6 @@ services:
sessionStorageType === "redis":
setCurrentStep("merge-production");
break;
// case appInstances !== null && appInstances < 1:
// setCurrentStep("scale");
// break;
case environment?.toLocaleLowerCase() === "production" &&
sessionStorageType === "redis":
setCurrentStep("complete");
Expand All @@ -84,7 +72,7 @@ services:
setCurrentStep("complete");
break;
}
}, [environment, sessionStorageType, appInstances]);
}, [environment, sessionStorageType]);

if (fatalErrorMessage)
return (
Expand Down Expand Up @@ -114,7 +102,6 @@ services:
<Sidebar
environment={environment}
sessionStorageType={sessionStorageType}
appInstances={appInstances}
/>
<section className="border-t-2 border-upsun-violet-600 w-full sm:w-3/4">
<div className="content-intro sm:w-3/4 mx-auto mt-12 mb-12">
Expand Down Expand Up @@ -346,34 +333,6 @@ services:
}
</FeatureStep>

{/* Step 4 - SCALE HORIZONTALLY */}
{/* <FeatureStep
icon={<ScaleIcon className="w-10 h-10" />}
title={"5. Scale app"}
isDisabled={currentStep !== "scale"}
>
{ currentStep === "scale" &&
<>
<p className="mb-2">
Whether you have 10 daily visitors or 10,000, with Upsun
your app is primed to scale at a moment's notice using the
CLI.
</p>
<code className="px-4 mb-2">upsun scale:update</code>
<p className="mb-2">
To wrap up your tour of Upsun, let’s scale your app.
Continue with the following command in your terminal,
which will scale your backend application to have 3 instances.
</p>
<p className="mb-2 mt-4">
<CopyButton className="hidden sm:inline-block w" copyText="upsun resources:set --count backend:3">
<code className="px-4">upsun resources:set --count backend:3</code>
</CopyButton>
</p>
</>
}
</FeatureStep> */}

{/* Step 5 - DEMO COMPLETED */}
<FeatureStep
icon={<DoneIcon className="w-10 h-10 p-1" />}
Expand Down
45 changes: 0 additions & 45 deletions frontend/src/components/Sidebar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ describe("<Sidebar />", () => {
const props = {
environment: "Production",
sessionStorageType: "Redis",
appInstances: 1,
};

render(<Sidebar {...props} />);
Expand All @@ -49,7 +48,6 @@ describe("<Sidebar />", () => {
const props = {
environment: "Staging",
sessionStorageType: "Redis",
appInstances: 1,
};

render(<Sidebar {...props} />);
Expand All @@ -63,7 +61,6 @@ describe("<Sidebar />", () => {
const props = {
environment: "Production",
sessionStorageType: "file",
appInstances: 1,
};

render(<Sidebar {...props} />);
Expand All @@ -81,7 +78,6 @@ describe("<Sidebar />", () => {
const props = {
environment: "Production",
sessionStorageType: "redis",
appInstances: 1,
};

render(<Sidebar {...props} />);
Expand All @@ -94,45 +90,4 @@ describe("<Sidebar />", () => {
within(storageSection).getByText("User session service: redis"),
).toBeInTheDocument();
});

const environments = ["Production", "Staging", "Other", null];
const sessionStorageTypes = ["redis", "file", "Other", null];
const appInstancesArray = [1, 5, null];

environments.forEach((environment) => {
sessionStorageTypes.forEach((sessionStorageType) => {
appInstancesArray.forEach((appInstances) => {
const props = { environment, sessionStorageType, appInstances };
test(`environment status section renders green on Scaling: Ready for environment: ${environment}, sessionStorageType: ${sessionStorageType}, appInstances: ${appInstances}`, () => {
render(<Sidebar {...props} />);

const storageSection = screen.getByTestId("status-scaling-ready");
expect(
within(storageSection).getByText("status-complete-svg"),
).toBeInTheDocument();
expect(
within(storageSection).getByText("Scaling: Ready"),
).toBeInTheDocument();
});
});
});
});

test("environment status section renders green when app scaled", () => {
const props = {
environment: "Production",
sessionStorageType: "redis",
appInstances: 1,
};

render(<Sidebar {...props} />);

const storageSection = screen.getByTestId("status-app-scaled");
expect(
within(storageSection).getByText("status-complete-svg"),
).toBeInTheDocument();
expect(
within(storageSection).getByText("App scaled horizontally"),
).toBeInTheDocument();
});
});
71 changes: 0 additions & 71 deletions frontend/src/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// import { ReactComponent as StartIcon } from "../assets/utility/key_start.svg";
// import { ReactComponent as InfoIcon } from "../assets/utility/key_info.svg";
// import { ReactComponent as ResetIcon } from "../assets/utility/key_reset.svg";
import CopyButton from "./CopyButton";
import { ReactComponent as ProductionIcon } from "../assets/utility/production.svg";
import { ReactComponent as StagingIcon } from "../assets/utility/staging.svg";
Expand All @@ -10,13 +7,11 @@ import { ReactComponent as StatusIncompleteIcon } from "../assets/utility/status
interface SidebarProps {
environment: string | null;
sessionStorageType: string | null;
appInstances: number | null;
}

const Sidebar: React.FC<SidebarProps> = ({
environment,
sessionStorageType,
appInstances,
}) => {
return (
<aside className="h-fit w-full flex flex-row sm:flex-col flex-wrap sm:w-2/5 lg:w-1/4">
Expand All @@ -29,15 +24,6 @@ const Sidebar: React.FC<SidebarProps> = ({
)}
<h1>{environment}</h1>
</div>

{/* <div className="aside-title mt-4 flex flex-row gap-4 items-center">
<ul className="p-0 list-none flex flex-col gap-2">
<li
className="flex flex-row items-center"
><a href="">View the environment</a></li>
</ul>
</div> */}

</section>
<section className="w-1/2 sm:w-full">
<div className="environment-status flex flex-col gap-4">
Expand Down Expand Up @@ -69,19 +55,6 @@ const Sidebar: React.FC<SidebarProps> = ({
</div>
<span className="pl-3.5">Scaling: Ready</span>
</li>
<li
data-testid="status-app-scaled"
className="flex flex-row items-center"
>
<div className="w-4 h-4 flex justify-center">
{appInstances !== null && appInstances > 0 ? (
<StatusCompleteIcon className="w-auto h-auto" />
) : (
<StatusIncompleteIcon className="w-auto h-auto" />
)}
</div>
<span className="pl-3.5">App scaled horizontally</span>
</li>
</ul>
</div>
</section>
Expand Down Expand Up @@ -132,51 +105,7 @@ const Sidebar: React.FC<SidebarProps> = ({
</CopyButton>
</span>
</li>

</ul>


{/* <div className="flex flex-col gap-2 md:flex-row md:gap-0 flex-wrap">
<div className="w-fit md:w-1/2 md:pr-1">
<div className="flex flex-col gap-2">
<CopyButton className="hidden sm:inline-block w-12" copyText="upsun project:info">
<InfoIcon className="h-full w-full" />
</CopyButton>
<code className="px-3">upsun project:info</code>
</div>
</div>
<div className="w-fit md:w-1/2 md:pr-1">
<div className="flex flex-col gap-2">
<CopyButton className="hidden sm:inline-block w-12" copyText="upsun resources:get">
<InfoIcon className="h-full w-full" />
</CopyButton>
<code className="px-3">upsun resources:get</code>
</div>
</div>
<div className="w-fit md:w-1/2 md:pr-1">
<div className="flex flex-col gap-2">
<CopyButton className="hidden sm:inline-block w-12" copyText="upsun relationships">
<InfoIcon className="h-full w-full" />
</CopyButton>
<code className="px-3">upsun relationships</code>
</div>
</div>
<div className="w-fit md:w-1/2 md:pr-1 md:pt-4">
<div className="flex flex-col gap-2">
<CopyButton className="hidden sm:inline-block w-12" copyText="upsun demo:reset">
<ResetIcon className="h-full w-full" />
</CopyButton>
<code className="px-3">upsun demo:reset</code>
</div>
</div>
</div> */}
</div>
</section>
</aside>
Expand Down
1 change: 0 additions & 1 deletion frontend/src/utility/api.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { API_BASE_URL } from "../config";

type EnvironmentResponseType = {
"instance_count": null | number,
"session_storage": "redis" | "file" | string,
"type": "production" | "staging" | "development" | string
}
Expand Down

0 comments on commit a191141

Please sign in to comment.