feat(performance): add performance form

This adds performance check form to check response time for backend to catch regression

Signed-off-by: Danil Kostromin <[email protected]>

apps/bublik/src/app/router.tsx

@@ -39,6 +39,7 @@ import {
 } from '../pages';
 import { Layout } from './layout';
 import { RedirectToLogPage } from './redirects';
+import { PerformancePage } from '../pages/performance-page';
 
 const router = createBrowserRouter(
 	[
@@ -102,6 +103,7 @@ const router = createBrowserRouter(
 							element: <DevelopersLayout />,
 							children: [
 								{ path: 'import', element: <ImportPage /> },
+								{ path: 'performance', element: <PerformancePage /> },
 								{ path: 'flower', element: <FlowerFeature /> },
 								{ path: 'users', element: <AdminUsersPage /> },
 								{ element: <NoMatchFeature /> }

apps/bublik/src/pages/performance-page/index.ts

@@ -0,0 +1,4 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* SPDX-FileCopyrightText: 2024 OKTET LTD */
+
+export * from './performance.page';

apps/bublik/src/pages/performance-page/performance.page.tsx

@@ -0,0 +1,16 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* SPDX-FileCopyrightText: 2024 OKTET LTD */
+
+import { PerformanceListContainer } from '@/bublik/features/performance-check';
+
+export const PerformancePage = () => {
+	return (
+		<div className="h-screen p-2">
+			<div className="h-full flex justify-center items-center">
+				<div className="max-w-4xl flex-1 bg-white rounded-lg p-4">
+					<PerformanceListContainer />
+				</div>
+			</div>
+		</div>
+	);
+};

apps/bublik/vite.config.ts

@@ -35,6 +35,7 @@ export default defineConfig(async ({ mode }) => {
 	// Derived
 	const API_PATHNAME = `${URL_PREFIX}/api/v2`;
 	const AUTH_PATHNAME = `${URL_PREFIX}/auth`;
+	const PERFORMANCE_CHECK_PATHNAME = `${URL_PREFIX}/performance_check`;
 	const EXTERNAL_PATHNAME = `${URL_PREFIX}/external`;
 
 	return {
@@ -55,6 +56,12 @@ export default defineConfig(async ({ mode }) => {
 					secure: false,
 					configure: createRequestLogger('AUTH')
 				},
+				[PERFORMANCE_CHECK_PATHNAME]: {
+					target: DJANGO_TARGET,
+					changeOrigin: true,
+					secure: false,
+					configure: createRequestLogger('PERFORMANCE')
+				},
 				[EXTERNAL_PATHNAME]: {
 					target: LOGS_TARGET,
 					changeOrigin: true,

libs/bublik/features/performance-check/.babelrc

@@ -0,0 +1,12 @@
+{
+	"presets": [
+		[
+			"@nx/react/babel",
+			{
+				"runtime": "automatic",
+				"useBuiltIns": "usage"
+			}
+		]
+	],
+	"plugins": []
+}

libs/bublik/features/performance-check/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["plugin:@nx/react", "../../../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}

libs/bublik/features/performance-check/README.md

@@ -0,0 +1,7 @@
+# performance-check
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test performance-check` to execute the unit tests via [Vitest](https://vitest.dev/).

libs/bublik/features/performance-check/project.json

@@ -0,0 +1,20 @@
+{
+	"name": "performance-check",
+	"$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "libs/bublik/features/performance-check/src",
+	"projectType": "library",
+	"tags": [],
+	"targets": {
+		"lint": {
+			"executor": "@nx/eslint:lint",
+			"outputs": ["{options.outputFile}"]
+		},
+		"test": {
+			"executor": "@nx/vite:test",
+			"outputs": ["{options.reportsDirectory}"],
+			"options": {
+				"reportsDirectory": "../../../../coverage/libs/bublik/features/performance-check"
+			}
+		}
+	}
+}

libs/bublik/features/performance-check/src/index.ts

@@ -0,0 +1,3 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* SPDX-FileCopyrightText: 2024 OKTET LTD */
+export * from './lib/performance-list.container';

libs/bublik/features/performance-check/src/lib/__snapshots__/performance-list.component.spec.tsx.snap

@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<PerformanceList /> > should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-col gap-2"
+  >
+    <h2
+      class="text-xl font-semibold"
+    >
+      Health Check
+    </h2>
+    <ul
+      class="flex flex-col gap-2"
+    >
+      <li
+        class="flex items-center gap-2 justify-between border border-border-primary rounded px-4 py-2"
+      >
+        <a
+          class="flex-1 flex-shrink-0 hover:underline text-primary"
+          href="https://google.com"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Google (1s)
+        </a>
+        <span
+          class="tabular-nums w-[8ch] flex-1"
+        >
+          <div
+            class="animate-pulse bg-gray-300 rounded-md h-[16px] w-[8ch] flex-1"
+          />
+        </span>
+        <div
+          class="w-3 h-3 rounded-full relative bg-gray-300"
+        />
+      </li>
+    </ul>
+    <button
+      class="inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all appearance-none select-none disabled:shadow-[inset_0_0_0_1px_hsl(var(--colors-border-primary))] disabled:bg-white disabled:hover:bg-white disabled:text-text-menu px-3 text-[0.875rem] leading-[1.5rem] cursor-not-allowed pointer-events-none rounded-md hover:shadow-[inset_0_0_0_3px_#94b0ff] py-2 shadow-[inset_0_0_0_1px_hsl(var(--colors-border-primary))] bg-white hover:bg-white text-border-primary"
+      disabled=""
+    >
+      Check
+    </button>
+  </div>
+</DocumentFragment>
+`;

libs/bublik/features/performance-check/src/lib/performance-list.component.spec.tsx

@@ -0,0 +1,17 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* SPDX-FileCopyrightText: 2024 OKTET LTD */
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import { PerformanceList } from './performance-list.component';
+
+describe('<PerformanceList />', () => {
+	it('should match snapshot', () => {
+		const { asFragment } = render(
+			<PerformanceList
+				urls={[{ url: 'https://google.com', timeout: 1, label: 'Google' }]}
+			/>
+		);
+
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

libs/bublik/features/performance-check/src/lib/performance-list.component.stories.tsx

@@ -0,0 +1,87 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+/* SPDX-FileCopyrightText: 2024 OKTET LTD */
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import { withBackground } from '@/shared/tailwind-ui';
+
+import {
+	PerformanceList,
+	PerformanceListEmpty,
+	PerformanceListError,
+	PerformanceListLoading
+} from './performance-list.component';
+
+const meta = {
+	title: 'performance/Performance List',
+	decorators: [
+		withBackground,
+		(story) => <div className={'min-w-[400px]'}>{story()}</div>
+	]
+} satisfies Meta<typeof PerformanceList>;
+export default meta;
+
+type Story = StoryObj<typeof PerformanceList>;
+
+const Template: StoryFn<typeof PerformanceList> = (args) => (
+	<PerformanceList {...args} />
+);
+
+export const Primary = {
+	render: Template,
+	args: {
+		urls: [
+			{
+				label: 'Google',
+				url: 'https://www.google.com/',
+				timeout: 1
+			},
+			{
+				label: 'GitHub',
+				url: 'https://github.com/',
+				timeout: 10
+			},
+			{
+				label: 'Amazon',
+				url: 'https://www.amazon.com/',
+				timeout: 10
+			},
+			{
+				label: 'Facebook',
+				url: 'https://www.facebook.com/',
+				timeout: 10
+			},
+			{
+				label: 'Twitter',
+				url: 'https://twitter.com/',
+				timeout: 10
+			},
+			{
+				label: 'LinkedIn',
+				url: 'https://www.linkedin.com/',
+				timeout: 10
+			},
+			{
+				label: 'Wikipedia',
+				url: 'https://www.wikipedia.org/',
+				timeout: 10
+			},
+			{
+				label: 'Netflix',
+				url: 'https://www.netflix.com/',
+				timeout: 10
+			}
+		]
+	}
+} satisfies Story;
+
+export const Loading = {
+	render: () => <PerformanceListLoading />
+} satisfies Story;
+
+export const Empty = {
+	render: () => <PerformanceListEmpty />
+} satisfies Story;
+
+export const Error = {
+	render: () => <PerformanceListError error={{ status: 404 }} />
+} satisfies Story;