From 189ff70aa0b76730793c3510b177edffcca52874 Mon Sep 17 00:00:00 2001 From: JPadovano1483 Date: Tue, 28 Apr 2026 14:00:06 -0400 Subject: [PATCH 1/2] moved console --- Containerfile | 8 ++++---- {console => components/console}/.gitignore | 0 {console => components/console}/README.md | 0 {console => components/console}/eslint.config.js | 0 {console => components/console}/index.html | 0 {console => components/console}/package.json | 0 {console => components/console}/public/favicon.ico | Bin {console => components/console}/src/App.jsx | 0 {console => components/console}/src/App.simple.jsx | 0 {console => components/console}/src/App.test.jsx | 0 .../console}/src/components/Header/Header.jsx | 0 .../src/components/Navigation/Navigation.jsx | 0 .../OwnerGroupSelect/OwnerGroupSelect.jsx | 0 {console => components/console}/src/index.css | 0 {console => components/console}/src/index.jsx | 0 .../src/pages/Backbones/BackboneContext.jsx | 0 .../console}/src/pages/Backbones/BackboneDetail.jsx | 0 .../src/pages/Backbones/BackboneListView.jsx | 0 .../src/pages/Backbones/BackboneNetworkView.jsx | 0 .../console}/src/pages/Backbones/Backbones.jsx | 0 .../console}/src/pages/Backbones/SiteDeployment.jsx | 0 .../console}/src/pages/Backbones/SiteDetail.jsx | 0 .../console}/src/pages/Dashboard/Dashboard.jsx | 0 .../console}/src/pages/TLS/TLS.jsx | 0 .../console}/src/pages/VANs/VANs.jsx | 0 .../console}/src/theme/theme.scss | 0 {console => components/console}/src/tools/watch.js | 0 {console => components/console}/vite.config.js | 0 .../management-controller/src/mc-apiserver.js | 4 ++-- pnpm-lock.yaml | 2 +- pnpm-workspace.yaml | 1 - 31 files changed, 7 insertions(+), 8 deletions(-) rename {console => components/console}/.gitignore (100%) rename {console => components/console}/README.md (100%) rename {console => components/console}/eslint.config.js (100%) rename {console => components/console}/index.html (100%) rename {console => components/console}/package.json (100%) rename {console => components/console}/public/favicon.ico (100%) rename {console => components/console}/src/App.jsx (100%) rename {console => components/console}/src/App.simple.jsx (100%) rename {console => components/console}/src/App.test.jsx (100%) rename {console => components/console}/src/components/Header/Header.jsx (100%) rename {console => components/console}/src/components/Navigation/Navigation.jsx (100%) rename {console => components/console}/src/components/OwnerGroupSelect/OwnerGroupSelect.jsx (100%) rename {console => components/console}/src/index.css (100%) rename {console => components/console}/src/index.jsx (100%) rename {console => components/console}/src/pages/Backbones/BackboneContext.jsx (100%) rename {console => components/console}/src/pages/Backbones/BackboneDetail.jsx (100%) rename {console => components/console}/src/pages/Backbones/BackboneListView.jsx (100%) rename {console => components/console}/src/pages/Backbones/BackboneNetworkView.jsx (100%) rename {console => components/console}/src/pages/Backbones/Backbones.jsx (100%) rename {console => components/console}/src/pages/Backbones/SiteDeployment.jsx (100%) rename {console => components/console}/src/pages/Backbones/SiteDetail.jsx (100%) rename {console => components/console}/src/pages/Dashboard/Dashboard.jsx (100%) rename {console => components/console}/src/pages/TLS/TLS.jsx (100%) rename {console => components/console}/src/pages/VANs/VANs.jsx (100%) rename {console => components/console}/src/theme/theme.scss (100%) rename {console => components/console}/src/tools/watch.js (100%) rename {console => components/console}/vite.config.js (100%) diff --git a/Containerfile b/Containerfile index c9b1e6bd..13597451 100644 --- a/Containerfile +++ b/Containerfile @@ -44,7 +44,7 @@ COPY package.json pnpm-lock.yaml ./ COPY modules/package.json ./modules/ COPY components/management-controller/package.json ./components/management-controller/ COPY components/site-controller/package.json ./components/site-controller/ -COPY console/package.json ./console/ +COPY components/console/package.json ./components/console/ # Install all dependencies with build cache # --frozen-lockfile ensures reproducible builds @@ -60,10 +60,10 @@ COPY modules/ ./modules/ FROM shared-builder AS management-controller-deploy COPY components/management-controller/ ./components/management-controller/ -COPY console/ ./console/ +COPY components/console/ ./components/console/ -# Vite bundle (workspace package `vms-console` in ./console); run before deploy so devDependencies stay linked -RUN mkdir -p /deployed && pnpm --filter vms-console build && cp -r ./console/dist /deployed/console +# Vite bundle (workspace package `vms-console` in ./components/console); run before deploy so devDependencies stay linked +RUN mkdir -p /deployed && pnpm --filter vms-console build && cp -r ./components/console/dist /deployed/console # Deploy creates a standalone directory with all dependencies RUN pnpm --filter "@skupperx/management-controller" deploy --legacy --prod /deployed/management-controller diff --git a/console/.gitignore b/components/console/.gitignore similarity index 100% rename from console/.gitignore rename to components/console/.gitignore diff --git a/console/README.md b/components/console/README.md similarity index 100% rename from console/README.md rename to components/console/README.md diff --git a/console/eslint.config.js b/components/console/eslint.config.js similarity index 100% rename from console/eslint.config.js rename to components/console/eslint.config.js diff --git a/console/index.html b/components/console/index.html similarity index 100% rename from console/index.html rename to components/console/index.html diff --git a/console/package.json b/components/console/package.json similarity index 100% rename from console/package.json rename to components/console/package.json diff --git a/console/public/favicon.ico b/components/console/public/favicon.ico similarity index 100% rename from console/public/favicon.ico rename to components/console/public/favicon.ico diff --git a/console/src/App.jsx b/components/console/src/App.jsx similarity index 100% rename from console/src/App.jsx rename to components/console/src/App.jsx diff --git a/console/src/App.simple.jsx b/components/console/src/App.simple.jsx similarity index 100% rename from console/src/App.simple.jsx rename to components/console/src/App.simple.jsx diff --git a/console/src/App.test.jsx b/components/console/src/App.test.jsx similarity index 100% rename from console/src/App.test.jsx rename to components/console/src/App.test.jsx diff --git a/console/src/components/Header/Header.jsx b/components/console/src/components/Header/Header.jsx similarity index 100% rename from console/src/components/Header/Header.jsx rename to components/console/src/components/Header/Header.jsx diff --git a/console/src/components/Navigation/Navigation.jsx b/components/console/src/components/Navigation/Navigation.jsx similarity index 100% rename from console/src/components/Navigation/Navigation.jsx rename to components/console/src/components/Navigation/Navigation.jsx diff --git a/console/src/components/OwnerGroupSelect/OwnerGroupSelect.jsx b/components/console/src/components/OwnerGroupSelect/OwnerGroupSelect.jsx similarity index 100% rename from console/src/components/OwnerGroupSelect/OwnerGroupSelect.jsx rename to components/console/src/components/OwnerGroupSelect/OwnerGroupSelect.jsx diff --git a/console/src/index.css b/components/console/src/index.css similarity index 100% rename from console/src/index.css rename to components/console/src/index.css diff --git a/console/src/index.jsx b/components/console/src/index.jsx similarity index 100% rename from console/src/index.jsx rename to components/console/src/index.jsx diff --git a/console/src/pages/Backbones/BackboneContext.jsx b/components/console/src/pages/Backbones/BackboneContext.jsx similarity index 100% rename from console/src/pages/Backbones/BackboneContext.jsx rename to components/console/src/pages/Backbones/BackboneContext.jsx diff --git a/console/src/pages/Backbones/BackboneDetail.jsx b/components/console/src/pages/Backbones/BackboneDetail.jsx similarity index 100% rename from console/src/pages/Backbones/BackboneDetail.jsx rename to components/console/src/pages/Backbones/BackboneDetail.jsx diff --git a/console/src/pages/Backbones/BackboneListView.jsx b/components/console/src/pages/Backbones/BackboneListView.jsx similarity index 100% rename from console/src/pages/Backbones/BackboneListView.jsx rename to components/console/src/pages/Backbones/BackboneListView.jsx diff --git a/console/src/pages/Backbones/BackboneNetworkView.jsx b/components/console/src/pages/Backbones/BackboneNetworkView.jsx similarity index 100% rename from console/src/pages/Backbones/BackboneNetworkView.jsx rename to components/console/src/pages/Backbones/BackboneNetworkView.jsx diff --git a/console/src/pages/Backbones/Backbones.jsx b/components/console/src/pages/Backbones/Backbones.jsx similarity index 100% rename from console/src/pages/Backbones/Backbones.jsx rename to components/console/src/pages/Backbones/Backbones.jsx diff --git a/console/src/pages/Backbones/SiteDeployment.jsx b/components/console/src/pages/Backbones/SiteDeployment.jsx similarity index 100% rename from console/src/pages/Backbones/SiteDeployment.jsx rename to components/console/src/pages/Backbones/SiteDeployment.jsx diff --git a/console/src/pages/Backbones/SiteDetail.jsx b/components/console/src/pages/Backbones/SiteDetail.jsx similarity index 100% rename from console/src/pages/Backbones/SiteDetail.jsx rename to components/console/src/pages/Backbones/SiteDetail.jsx diff --git a/console/src/pages/Dashboard/Dashboard.jsx b/components/console/src/pages/Dashboard/Dashboard.jsx similarity index 100% rename from console/src/pages/Dashboard/Dashboard.jsx rename to components/console/src/pages/Dashboard/Dashboard.jsx diff --git a/console/src/pages/TLS/TLS.jsx b/components/console/src/pages/TLS/TLS.jsx similarity index 100% rename from console/src/pages/TLS/TLS.jsx rename to components/console/src/pages/TLS/TLS.jsx diff --git a/console/src/pages/VANs/VANs.jsx b/components/console/src/pages/VANs/VANs.jsx similarity index 100% rename from console/src/pages/VANs/VANs.jsx rename to components/console/src/pages/VANs/VANs.jsx diff --git a/console/src/theme/theme.scss b/components/console/src/theme/theme.scss similarity index 100% rename from console/src/theme/theme.scss rename to components/console/src/theme/theme.scss diff --git a/console/src/tools/watch.js b/components/console/src/tools/watch.js similarity index 100% rename from console/src/tools/watch.js rename to components/console/src/tools/watch.js diff --git a/console/vite.config.js b/components/console/vite.config.js similarity index 100% rename from console/vite.config.js rename to components/console/vite.config.js diff --git a/components/management-controller/src/mc-apiserver.js b/components/management-controller/src/mc-apiserver.js index 04aeef79..a8722c7f 100644 --- a/components/management-controller/src/mc-apiserver.js +++ b/components/management-controller/src/mc-apiserver.js @@ -45,12 +45,12 @@ import { StartWatchServer } from './watch-server.js'; import ViteExpress from 'vite-express'; const __dirname = import.meta.dirname; -/** Deployed image: sources live in `/app/src`, console bundle in `/app/console/dist`. Monorepo: repo `console/` (three levels up from `components/management-controller/src`). */ +/** Deployed image: sources live in `/app/src`, console bundle in `/app/console/dist`. Monorepo dev: `components/console` (two levels up from `components/management-controller/src`). */ const VITE_CONSOLE_ROOT = fs.existsSync( path.join(path.resolve(__dirname, '../console'), 'dist', 'index.html'), ) ? path.resolve(__dirname, '../console') - : path.resolve(__dirname, '../../../console'); + : path.resolve(__dirname, '../../console'); const API_PREFIX = '/api/v1alpha1/'; const API_PORT = 8085; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc5a4264..56c7f37a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -121,7 +121,7 @@ importers: specifier: '>=2.8.3' version: 2.8.3 - console: + components/console: dependencies: '@carbon/icons-react': specifier: ^11.76.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index ae01eb5f..3220dbbe 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,7 +1,6 @@ packages: - components/* - modules - - console overrides: webpack-dev-server@<=5.2.0: '>=5.2.1' From 9a26c34b6aabfdc2f4111fcf2029cd989af11608 Mon Sep 17 00:00:00 2001 From: JPadovano1483 Date: Tue, 28 Apr 2026 14:01:09 -0400 Subject: [PATCH 2/2] update console README --- components/console/README.md | 102 +++++++++++++++++++---------------- 1 file changed, 56 insertions(+), 46 deletions(-) diff --git a/components/console/README.md b/components/console/README.md index 86fccaab..3a786605 100644 --- a/components/console/README.md +++ b/components/console/README.md @@ -2,6 +2,8 @@ A React web application built with IBM Carbon Design System, featuring a hierarchical navigation structure for managing network and composition resources. +This package lives in the **skupper-X** monorepo at **`components/console`**. In the pnpm workspace it is named **`vms-console`** (`package.json`). + ## Features - **Carbon Design System**: Professional UI components with IBM's design language @@ -13,76 +15,82 @@ A React web application built with IBM Carbon Design System, featuring a hierarc ## Project Structure ``` -console/ -├── public/ # Static assets +components/console/ +├── public/ # Static assets ├── src/ │ ├── components/ -│ │ ├── Header/ # Application header with Carbon UI Shell -│ │ └── Navigation/ # Side navigation with hierarchical menu +│ │ ├── Header/ # Application header with Carbon UI Shell +│ │ ├── Navigation/ # Side navigation with hierarchical menu +│ │ └── OwnerGroupSelect/ # Owner group selector │ ├── pages/ -│ │ ├── Dashboard/ # Main dashboard page -│ │ ├── Network/ # Network management pages -│ │ │ ├── Backbones/ # Backbone configurations -│ │ │ ├── VANs/ # Virtual Area Networks -│ │ │ └── TLS/ # TLS certificates -│ │ └── Compose/ # Composition pages -│ │ ├── Library/ # Template library -│ │ └── Applications/ # Application management -│ ├── theme/ # Custom Carbon theme configuration -│ ├── App.js # Main application component -│ └── index.jsx # Application entry point +│ │ ├── Dashboard/ # Main dashboard page +│ │ ├── Backbones/ # Backbone configurations +│ │ ├── VANs/ # Virtual Application Networks +│ │ └── TLS/ # TLS certificates +│ ├── tools/ +│ │ └── watch.js # Watch code for live UI updates +│ ├── theme/ # Custom Carbon theme configuration +│ ├── App.jsx # Main application component and routes +│ ├── App.simple.jsx +│ ├── App.test.jsx +│ ├── index.jsx # Application entry point +│ └── index.css +├── eslint.config.js +├── index.html # Vite HTML entry +├── vite.config.js ├── package.json └── README.md ``` -## Navigation Structure +Production builds emit static assets to **`dist/`** (Vite `outDir`). + +## Navigation structure -- **Dashboard** - Main overview page -- **Network** - Network management - - Backbones - Network backbone configurations - - VANs - Virtual Area Networks - - TLS - Transport Layer Security -- **Compose** - Application composition - - Library - Template library - - Applications - Application management +- **Dashboard** — Main overview page +- **Backbones** — Backbone configurations, sites, deployment +- **VANs** — Virtual application networks +- **TLS** — TLS certificate-related pages ## Getting Started ### Prerequisites -- Node.js (v14 or higher) -- npm or yarn +- **Node.js** (current LTS recommended) +- **pnpm** — this monorepo uses pnpm workspaces; use pnpm, not npm or yarn, for installs at the repo root ### Installation -1. Clone the repository or navigate to the project directory: - ```bash - cd console - ``` +From the **repository root**: + +```bash +pnpm install +pnpm --filter vms-console build +``` -2. Install dependencies (already done): - ```bash - npm install - ``` +`pnpm install` pulls in all workspace packages. `pnpm --filter vms-console build` runs Vite and writes the static bundle to **`components/console/dist`**. -### Running the Application +### Running the console (management controller) + +Run the **management controller** from **`components/management-controller`**. Its HTTP server loads [ViteExpress](https://github.com/szymmis/vite-express) so the same process serves the UI and the API: -Start the development server: ```bash -npm start +cd components/management-controller +node index.js ``` -The application will open in your browser at [http://localhost:3000](http://localhost:3000). +**`NODE_ENV`** selects how the UI is served: + +- **`production`** — serve the **prebuilt static files** from `components/console/dist`. Run `pnpm --filter vms-console build` whenever you change the console so `dist` is up to date. +- **Anything else** (e.g. **`development`** or unset) — run the **Vite dev server** inside the controller process: **HMR** and live reload over WebSockets, while API routes still go through the same Express app. -### Building for Production +**NOTE:** Running `pnpm dev` in `components/console` starts an isolated Vite dev server without the management API, so the UI **cannot talk to the backend** and will appear broken. + +### Lint -Create an optimized production build: ```bash -npm run build +pnpm --filter vms-console lint ``` -The build files will be in the `build/` directory. - ## Dependencies - **react** & **react-dom**: Core React libraries @@ -90,6 +98,7 @@ The build files will be in the `build/` directory. - **@carbon/react**: Carbon Design System React components - **@carbon/icons-react**: Carbon icon library - **sass**: CSS preprocessor for Carbon styles +- **vite**: Dev server and production bundling ## Customization @@ -111,8 +120,8 @@ To change the theme, modify the `$theme` parameter in `src/theme/theme.scss`: ### Adding New Pages 1. Create a new component in `src/pages/` -2. Import and add a route in `src/App.js` -3. Add navigation link in `src/components/Navigation/Navigation.js` +2. Import and add a route in `src/App.jsx` +3. Add navigation link in `src/components/Navigation/Navigation.jsx` ## Development Status @@ -159,4 +168,5 @@ When adding new features: - [Carbon Design System](https://carbondesignsystem.com/) - [Carbon React Components](https://react.carbondesignsystem.com/) -- [React Router Documentation](https://reactrouter.com/) \ No newline at end of file +- [React Router Documentation](https://reactrouter.com/) +- [Vite](https://vite.dev/)