Removed old SPA, replaced with Vite based Quasar

src/traffcap/core/store.py

@@ -1,6 +1,5 @@
+from typing import AsyncGenerator, Any
 from multiprocessing import Manager
-from asyncio import sleep
-
 
 # The default message broker
 manager = Manager()
@@ -20,7 +19,7 @@ def new_traffic_notification() -> None:
     global store
     store["last_message"] += 1
 
-async def wait_for_notification(seconds: float = 0.5) -> None:
+async def wait_for_notification(seconds: float = 0.5) -> AsyncGenerator[Any, Any]:
     """
     Wait for a change in the last_message. By default this uses
     the stdlib multiprocessing Manager. Which is good for ASGI/WSGI
@@ -29,6 +28,9 @@ async def wait_for_notification(seconds: float = 0.5) -> None:
     broker will be necessary. The preferred solution is RabbitMQ, but
     this should also support Redis.
     """
-    last_message = store.get("last_message", 0)
-    while last_message == store.get("last_message", 0):
-        await sleep(seconds)
+    try:
+        last_message = store.get("last_message", 0)
+        while last_message == store.get("last_message", 0):
+            yield
+    except EOFError:
+        pass

src/traffcap/routes/root.py

@@ -9,7 +9,7 @@
 """
 
 root_router = APIRouter(include_in_schema=False)
-dist = Path(str(Path(__file__).parent.parent), "spa", "dist", "spa")
+dist = Path(str(Path(__file__).parent.parent), "spa", "dist")
 if settings.frontend_path:
     dist = settings.frontend_path
 

src/traffcap/routes/traffic.py

@@ -4,6 +4,7 @@
 from traffcap.core import wait_for_notification
 from websockets.exceptions import ConnectionClosed
 from pydanja import DANJAResourceList
+from asyncio import sleep
 
 
 traffic_router = APIRouter(prefix="/traffic", tags=["Traffic"])
@@ -17,7 +18,6 @@ async def traffic_get() -> DANJAResourceList[InboundRequest]:
     inbound_requests = await InboundRequestRepository.get_all_inbound_requests()
 
     # Convert from SQLAlchemy model to pydantic BaseModel
-
     return DANJAResourceList.from_basemodel_list(inbound_requests)
 
 
@@ -35,7 +35,11 @@ async def traffic_firehose(websocket: WebSocket):
                 await websocket.send_text(response.model_dump_json())
 
             # Wait for an event from the message broker
-            await wait_for_notification()
+            async for _ in wait_for_notification(websocket):
+                # Check the connection
+                await sleep(0.5)
+                # TODO: Figure out how to check websocket connections without the ping
+                await websocket.send_text("ping")
 
     except ConnectionClosed:
         pass

src/traffcap/server.py

@@ -102,7 +102,7 @@ def main() -> None:
     logging.info("Checking and migrating...")
     Repository.migrate_up()
 
-    assets_dir = Path(str(Path(__file__).parent), "spa", "dist", "spa", "assets")
+    assets_dir = Path(str(Path(__file__).parent), "spa", "dist", "assets")
 
     # Static mount for SPA assets, with root files exposed elsewhere
     app.mount(

src/traffcap/spa/.eslintrc.cjs

@@ -1,90 +1,25 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
-  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
-  // This option interrupts the configuration hierarchy at this file
-  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
   root: true,
-
-  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
-  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
-  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
-  parserOptions: {
-    parser: require.resolve('@typescript-eslint/parser'),
-    extraFileExtensions: [ '.vue' ]
-  },
-
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-    'vue/setup-compiler-macros': true
-  },
-
-  // Rules order is important, please avoid shuffling them
-  extends: [
-    // Base ESLint recommended rules
-    // 'eslint:recommended',
-
-    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
-    // ESLint typescript rules
-    'plugin:@typescript-eslint/recommended',
-
-    // Uncomment any of the lines below to choose desired strictness,
-    // but leave only one uncommented!
-    // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
-    // https://github.com/prettier/eslint-config-prettier#installation
-    // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier'
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
   ],
-
-  plugins: [
-    // required to apply rules which need type information
-    '@typescript-eslint',
-
-    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
-    // required to lint *.vue files
-    'vue'
-
-    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-    // Prettier has not been included as plugin to avoid performance impact
-    // add it as an extension for your IDE
-
+  overrides: [
+    {
+      files: [
+        'e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:playwright/recommended'
+      ]
+    }
   ],
-
-  globals: {
-    ga: 'readonly', // Google Analytics
-    cordova: 'readonly',
-    __statics: 'readonly',
-    __QUASAR_SSR__: 'readonly',
-    __QUASAR_SSR_SERVER__: 'readonly',
-    __QUASAR_SSR_CLIENT__: 'readonly',
-    __QUASAR_SSR_PWA__: 'readonly',
-    process: 'readonly',
-    Capacitor: 'readonly',
-    chrome: 'readonly'
-  },
-
-  // add your custom rules here
-  rules: {
-
-    'prefer-promise-reject-errors': 'off',
-
-    quotes: ['warn', 'single', { avoidEscape: true }],
-
-    // this rule, if on, would require explicit return type on the `render` function
-    '@typescript-eslint/explicit-function-return-type': 'off',
-
-    // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
-    '@typescript-eslint/no-var-requires': 'off',
-
-    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
-    // does not work with type definitions
-    'no-unused-vars': 'off',
-
-    // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  parserOptions: {
+    ecmaVersion: 'latest'
   }
 }

src/traffcap/spa/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+test-results/
+playwright-report/

src/traffcap/spa/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

src/traffcap/spa/README.md

@@ -1,41 +1,64 @@
-# traffcap (spa)
+# spa
 
-A frontend for the Traffcap requestbin like application
+This template should help get you started developing with Vue 3 in Vite.
 
-## Install the dependencies
-```bash
-yarn
-# or
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
-```bash
-quasar dev
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
 ```
 
+### Type-Check, Compile and Minify for Production
 
-### Lint the files
-```bash
-yarn lint
-# or
-npm run lint
+```sh
+npm run build
 ```
 
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
-### Format the files
-```bash
-yarn format
-# or
-npm run format
+```sh
+npm run test:unit
 ```
 
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
+
+```sh
+# Install browsers for the first run
+npx playwright install
 
+# When testing on CI, must build the project first
+npm run build
 
-### Build the app for production
-```bash
-quasar build
+# Runs the end-to-end tests
+npm run test:e2e
+# Runs the tests only on Chromium
+npm run test:e2e -- --project=chromium
+# Runs the tests of a specific file
+npm run test:e2e -- tests/example.spec.ts
+# Runs the tests in debug mode
+npm run test:e2e -- --debug
 ```
 
-### Customize the configuration
-See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

src/traffcap/spa/e2e/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": ["./**/*"]
+}

src/traffcap/spa/e2e/vue.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+})

src/traffcap/spa/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />