lazy load flags history, refactor static build

.github/workflows/release.yaml

@@ -16,6 +16,9 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v4
 
+    - name: Install lets
+      uses: lets-cli/[email protected]
+
     - name: Set up Node
       uses: actions/[email protected]
       with:
@@ -27,8 +30,9 @@ jobs:
       working-directory: ./ui
       run: npm install
 
-    - name: Build and copy UI bundle
-      run: ./scripts/build-copy-ui-dist.sh
+    - name: Build UI and copy bundle
+      working-directory: ./ui
+      run: npm run build --outDir ../featureflags/web/static
 
     - name: Set up Python with PDM ${{ matrix.python-version }}
       uses: pdm-project/setup-pdm@v3

.github/workflows/test.yaml

@@ -34,7 +34,8 @@ jobs:
         run: npm install
 
       - name: Build UI
-        run: lets build-copy-ui-bundle
+        working-directory: ./ui
+        run: npm run build
 
       - name: Run server tests
         run: lets test

Dockerfile

@@ -75,6 +75,8 @@ ADD "https://github.com/grpc-ecosystem/grpc-health-probe/releases/download/${GRP
 RUN chmod +x /usr/local/bin/grpc_health_probe
 
 COPY ./featureflags /app/featureflags
+# clear static folder in case it exists on host machine
+RUN rm -rf /app/featureflags/web/static
 
 COPY --from=base /app/__pypackages__/3.11/lib /app
 COPY --from=base /app/__pypackages__/3.11/bin/* /bin/

README.md

@@ -8,27 +8,26 @@ Server consists of actual web application and API handlers (HTTP, gRPC):
 
 - Web application:
 
-    - `fastapi_` + `hiku_` + `aiopg_` on backend
-    - `react.js`_ + `Apollo`_ on frontend
+  - `fastapi_` + `hiku_` + `aiopg_` on backend
+  - `react.js`_+ `Apollo`_ on frontend
 
 - gRPC API handler:
 
-    - `grpclib_` + `hiku_`
+  - `grpclib_` + `hiku_`
 
 - HTTP API handler:
 
-    - `fastapi_` + `hiku_`
+  - `fastapi_` + `hiku_`
 
 ADR
 ---
 
 Check important architecture decisions in ``adr/`` directory.
 
-
 Installation
 ------------
 
-On PyPi: https://pypi.org/project/evo-featureflags-server
+On PyPi: <https://pypi.org/project/evo-featureflags-server>
 
 To install with Sentry integration:
 `pip3 install evo-featureflags-server[sentry]`
@@ -45,7 +44,7 @@ Run all this commands:
 - ``lets apply-migrations-dev``
 - ``lets apply-seeds-dev``  # if you have data in ``seeds/`` directory
 - ``lets web`` # in separate terminal
-- ``lets ui`` # in separate terminal
+- ``lets ui`` # in separate terminal, this will start vite dev server
 
 To start API handlers (not required for web application):
 
@@ -54,7 +53,7 @@ To start API handlers (not required for web application):
 
 To build UI and copy it to ``web/static`` directory:
 
-- ``lets build-copy-ui-bundle``
+- ``lets ui-build-dev``
 
 To release package:
 
@@ -71,7 +70,7 @@ TODO:
 - add docs, automate docs build
 - add more tests
 
-.. _fastapi: https://github.com/tiangolo/fastapi
-.. _hiku: https://github.com/vmagamedov/hiku
-.. _aiopg: https://github.com/aio-libs/aiopg
-.. _grpclib: https://github.com/vmagamedov/grpclib
+.. _fastapi: <https://github.com/tiangolo/fastapi>
+.._hiku: <https://github.com/vmagamedov/hiku>
+.. _aiopg: <https://github.com/aio-libs/aiopg>
+.._grpclib: <https://github.com/vmagamedov/grpclib>

lets.yaml

@@ -30,6 +30,7 @@ commands:
         -f Dockerfile \
         -t ${LETSOPT_REPO}:${LETSOPT_TAG} \
         --target prd \
+        --progress=plain \
         .
 
   build-dev:
@@ -136,15 +137,16 @@ commands:
       docker-compose run --rm docs \
         sphinx-build -a -b html docs public
 
-  build-copy-ui-bundle:
-    description: Build and copy UI bundle to server
-    cmd: ./scripts/build-copy-ui-dist.sh
-
   ui:
-    description: Build and run UI local
+    description: Build and run UI with dev server
     work_dir: ./ui
     cmd: npm run dev
 
+  ui-build-dev:
+    description: Build UI in development mode, copy static, watch changes
+    work_dir: ./ui
+    cmd: npm run build-dev-watch
+
   ruff:
     description: Run ruff and fix errors
     depends: [build-dev]

ui/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --base /static",
+    "build-dev-watch": "vite build --mode development --watch --base /static --outDir ../featureflags/web/static",
     "preview": "vite preview"
   },
   "dependencies": {

ui/src/Dashboard/Flag.jsx

@@ -20,6 +20,7 @@ import {
   Timeline,
 } from 'antd';
 import { useEffect, useState } from 'react';
+import { useLazyQuery } from "@apollo/client";
 import {
   CopyOutlined,
   HistoryOutlined,
@@ -36,7 +37,6 @@ import { Conditions } from './Conditions';
 import { TYPES, KIND_TO_TYPE, KIND, TYPE_TO_KIND } from './constants';
 import { useActions } from './actions';
 import { copyToClipboard, formatTimestamp, replaceValueInArray } from './utils';
-import { useQuery } from "@apollo/client";
 import { FLAG_LAST_ACTION_TIMESTAMP_QUERY } from "./queries";
 
 
@@ -122,14 +122,20 @@ const TimestampRow = ({ label, timestamp }) => (
 );
 
 const HistoryModal = ({ flagId, open, onClose, createdTimestamp, reportedTimestamp }) => {
-  const { data, loading } = useQuery(FLAG_LAST_ACTION_TIMESTAMP_QUERY, {
+  const [getHistory, { data, loading }] = useLazyQuery(FLAG_LAST_ACTION_TIMESTAMP_QUERY, {
     fetchPolicy: "network-only",
     variables: { id: flagId },
     onError: () => {
       message.error("Error fetching last action");
     },
   });
 
+  useEffect(() => {
+    if (open) {
+      getHistory();
+    }
+  }, [open]);
+
   if (loading || !data) {
     return <p>Loading...</p>;
   };