Add docker and proxy settings

.github/workflows/ci.yml

@@ -1,45 +1,29 @@
-  name: CI
-  on:
-    pull_request:
-      branches: [main]
-  jobs:
-    test:
-      runs-on: ubuntu-latest
-      strategy:
-        matrix:
-          node-version: [20]
-      steps:
-        - name: Code Checkout
-          uses: actions/checkout@v4
-        - uses: pnpm/action-setup@v2
-          with:
-            version: 8
-        - name: Use Node.js ${{ matrix.node-version }}
-          uses: actions/setup-node@v4
-          with:
-            node-version: ${{ matrix.node-version }}
-            cache: 'pnpm'
-        - name: Install dependencies
-          run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
-        - name: Code Testing
-          run: pnpm run test
-    lint:
-      runs-on: ubuntu-latest
-      strategy:
-        matrix:
-          node-version: [20]
-      steps:
-        - name: Code Checkout
-          uses: actions/checkout@v4
-        - uses: pnpm/action-setup@v2
-          with:
-            version: 8
-        - name: Use Node.js ${{ matrix.node-version }}
-          uses: actions/setup-node@v4
-          with:
-            node-version: ${{ matrix.node-version }}
-            cache: 'pnpm'
-        - name: Install dependencies
-          run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
-        - name: Code Linting
-          run: pnpm run lint
+name: CI
+on:
+  pull_request:
+    branches: [main]
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+      - name: Code Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Code Linting
+        run: pnpm run lint
+      - name: Code Testing
+        run: pnpm run test

.github/workflows/create-release-build.yml

@@ -19,6 +19,8 @@ on:
         type: boolean
         description: Dry release
         default: false
+env:
+  - PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -37,7 +39,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
+        run: pnpm install
       - name: Code Testing
         run: pnpm run test
   lint:
@@ -57,7 +59,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
+        run: pnpm install
       - name: Code Linting
         run: pnpm run lint
   release:
@@ -83,7 +85,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 pnpm install
+        run: pnpm install
       - name: Create release
         run: pnpm run release --ci --verbose $TYPE_ARG $BETA_ARG $DRY_ARG
         env:

.release-it.json

@@ -3,12 +3,12 @@
 		"requireBranch": "main",
 		"commitMessage": "chore(release): v${version}",
 		"tagName": "v${version}",
-		"addUntrackedFiles": true
+    "addUntrackedFiles": true
 	},
 	"github": { "release": true, "releaseName": "v${version}" },
 	"hooks": {
 		"before:init": [],
-		"after:bump": ["pnpm run git-info", "pnpm run bublik:ci:build"],
+		"after:bump": ["pnpm run git-info"],
 		"after:@release-it/conventional-changelog:bump": "pnpm run create-mdx-changelog \"${changelog}\"",
 		"after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
 	},

README.md

@@ -1,84 +1,30 @@
-[SPDX-License-Identifier: Apache-2.0]::
-[SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd.]::
-
 # Bublik UI
 
-## Package manager
-
-We use pnpm as our package manager so to start you will need to install it, please refer to [pnpm documentation](https://pnpm.io/) for installing instructions
-
-All commands should be run like this `pnpm exec nx ...etc` or you can add alias to your .bashrc like this `alias pnx="pnpm nx --"`, then you can run like this `pnx ...`
-
-## Monorepo tools
-
-We use [Nx](https://nx.dev/getting-started/intro) for monorepo, you would need to install nx cli globally or run commands via `npx` or `pnpm dlx...`
-
-## Project structure
-
-```
-📦 dist
- ┣ 📂 apps - Built production ready applications
-📦 apps
-┣ 📂 bublik - Bublik UI Application
-📦 libs
- ┣ 📂 bublik - Bublik UI application specific libs
- ┃ ┣ 📂 +state - Redux state
- ┃ ┣ 📂 config - Different Bublik UI configs (needed for UI to work correctly)
- ┃ ┣ 📂 features - Specific Bublik UI featires implementation
- ┃ ┣ 📂 router - Router helpers, encoding/decoding search params
- ┣ 📂 env - Env helper lib
- ┣ 📂 services - General services for data-access
- ┃ ┗ 📂 bublik-api - Bublik API hooks/methods (RTK Query)
- ┣ 📂 shared - Shared libraries for multiple apps to consume
- ┃ ┣ 📂 charts - Apache Echarts components
- ┃ ┣ 📂 hooks - Shared react hooks
- ┃ ┣ 📂 icons - UI Icons
- ┃ ┣ 📂 tailwind-ui - Shared UI components
- ┃ ┣ 📂 types - Shared interfaces and types
- ┃ ┣ 📂 utils - Shared general utils
-```
-
-## Config
+## Before you start (skip if you want to run via docker)
 
-To create new Bublik UI frontend for deployment you would need to follow these steps:
+1. Make sure you installed [pnpm](https://pnpm.io/)
+2. Make sure you installed [nx](https://nx.dev/getting-started/installation#installing-nx-globally) globally
+3. Make sure you installed [docker](https://docs.docker.com/desktop/) (you can install docker desktop or just docker engine)
+4. Create env file `apps/bublik/.env.local` (see `apps/bublik/.env.local.example` for reference)
 
-1. Add needed configuration to `apps/bublik/project.json`
-2. `base` - where the app will be mounted it **must start with `/`** and **no** trailing slash at the end
+### To test everything working run following commands
 
-Example:
+1. `pnpm -v`
+2. `nx --version`
+3. `docker version`
 
-```json
-{
-	"demo": {
-		"base": "/prefix",
-		"outputPath": "dist/apps/bublik-app"
-	}
-}
-```
+## Run locally (run with docker)
 
-## Local development
+You would need to name your image ${YOUR_IMAGE_NAME} replace with your value in below commands
+You can run UI the following way:
 
-Make sure you installed nrwl [nx monorepo tools](https://nx.dev/getting-started/intro)
-Example: 'pnpm add -g nx'
+1. Create env file `apps/bublik/.env.local` (see `apps/bublik/.env.local.example` for reference)
+2. Build image `docker build -f apps/bublik/Dockerfile.dev . -t ${YOUR_IMAGE_NAME}`
+3. Run image `docker run -it --rm -p 4200:4200 -v $(pwd):/app -v /app/node_modules --env-file apps/bublik/.env.local ${YOU_IMAGE_NAME}`
+   > If your backend is served from localhost you need to run container on host network
+   > Add flag --network host to run image command
 
-To start development, please follow this steps:
-
-1. Clone repo 
-2. Run `pnpm install` to install dependencies
-3. Run `pnpm start` to start development server
-
-## Commands
-
-- `pnpm start` - starts Bublik UI in development mode
-- `pnpm test` - runs tests in parallel for all projects
-- `pnpm bublik:serve:prod` - starts Bublik UI in production mode
-- `pnpm bublik:storybook` - starts storybook for Bublik UI
-- `pnpm bublik:build-storybook` - builds storybook for Bublik UI
-- `pnpm bublik:ci:build` - builds all Bublik UI application in production mode
-
-## Misc
-
-- If you want to connect to particular backend remote or local you can proxy all you requests with `apps/bublik/vite.config.ts`
+> If you add new dependencies to package.json you need to rebuild image
 
 ## Common errors and solutions
 
@@ -92,9 +38,3 @@ To start development, please follow this steps:
   - try adding lib/app path to `libs/shared/storybook/.storybook/main.js`
 - Storybook tailwind classes not working
   - try removing `node_module` and installing with `pnpm install`
-
-## Release
-
-We are using release-it to automate releases. To release new version of Bublik UI you need to run `pnpm release` and follow the instructions.
-Or run `pnpm release -- --dry-run` to see what will be done.
-You can also release from GitHub actions menu specifying what type of release you want to do.

apps/bublik/.env.local.example

@@ -1,6 +1,16 @@
-# Username and password used to proxy requests to JSON logs
-BUBLIK_UI_DEV_LOGS_AUTH="<USERNAME>:<PASSWORD>"
+# This configuration is necessary for proper proxying of requests to django backend
+
+#####################################################
+# Example for connecting to ts-factory
+# BUBLIK_UI_DEV_LOGS_TARGET=https://ts-factory.io
+# BUBLIK_UI_DEV_BACKEND_TARGET=https://ts-factory.io
+# URL_PREFIX=/bublik/v2
+
+#####################################################
+# This examples shows how to setup env for frontend served from `http://localhost/prefix/v2`
 # Target of JSON logs (protocol, host, port)
-BUBLIK_UI_DEV_LOGS_TARGET="https://example.com"
+BUBLIK_UI_DEV_LOGS_TARGET=http://localhost
 # Where backend is served (protocol, host, port)
-BUBLIK_UI_DEV_BACKEND_TARGET="http://localhost:8000"
+BUBLIK_UI_DEV_BACKEND_TARGET=http://localhost
+# Adds prefix from where backend is served e.g (http://localhost/prefix/api/v2)
+URL_PREFIX=/prefix/v2

apps/bublik/.gitignore

@@ -1,2 +1,3 @@
 # Local
 .env.local
+.env

apps/bublik/Dockerfile.dev

@@ -1,19 +1,22 @@
-FROM node:17.9.0
+FROM node:20-slim AS base
 
-ENV PNPM_HOME="/root/.local/share/pnpm"
-ENV PATH="${PATH}:${PNPM_HOME}"
+ARG PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
 
-RUN npm install --global pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
 
-RUN pnpm add -g nx
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=${PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD}
+ENV BASE_URL="/v2"
 
+RUN corepack enable
+
+COPY . /app
 WORKDIR /app
 
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install
+FROM base as runner
 
-COPY . .
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install
 
 EXPOSE 4200
 
-CMD ["pnpm", "run", "nx", "serve", "--host=0.0.0.0"]
+CMD ["pnpm", "run", "nx", "serve", "--host=0.0.0.0", "--base=${BASE_URL}"]

apps/bublik/project.json

@@ -26,10 +26,7 @@
 			"configurations": {}
 		},
 		"lint": {
-			"executor": "@nx/eslint:lint",
-			"options": {
-				"lintFilePatterns": ["apps/bublik/**/*.{ts,tsx,js,jsx}"]
-			}
+			"executor": "@nx/eslint:lint"
 		},
 		"test": {
 			"executor": "@nx/vite:test",

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

@@ -1,9 +1,10 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
+import { Outlet } from 'react-router-dom';
+
 import { IframeToOldBublik } from '@/shared/tailwind-ui';
 import { config } from '@/bublik/config';
 import { useDocumentTitle } from '@/shared/hooks';
-import { PrivateRouteLayoutOutlet } from '@/bublik/features/auth';
 
 export const FlowerFeature = () => {
 	useDocumentTitle('Flower - Bublik');
@@ -20,5 +21,5 @@ export const FlowerFeature = () => {
 export const DevelopersLayout = () => {
 	useDocumentTitle('Dev - Bublik');
 
-	return <PrivateRouteLayoutOutlet />;
+	return <Outlet />;
 };

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

@@ -10,8 +10,8 @@ export const ImportPage = () => {
 	useDocumentTitle('Import - Bublik');
 
 	return (
-		<div className="p-2">
-			<div className="flex flex-col h-full gap-1">
+		<div className="p-2 overflow-hidden h-full">
+			<div className="flex flex-col gap-1 h-full">
 				<ImportEventsTableContainer>
 					<ImportRunFormContainer />
 				</ImportEventsTableContainer>