Project board fixes

.github/workflows/deploy-to-bcr.yml

@@ -16,12 +16,13 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Deploy to Balena
-        uses: balena-io/deploy-to-balena-action@master
-        id: build
+      - name: balena CLI Action
+        uses: balena-community/[email protected]
         with:
-          balena_token: ${{ secrets.BALENA_TOKEN }}
-          fleet: maggie0002/balena-device-ui
+          balena_token: ${{secrets.BALENA_TOKEN}}
+          balena_cli_commands: >
+            maggie0002/balena-device-ui;
+          balena_cli_version: 13.7.1
 
       - name: Log release ID built
         run: echo "Built release ID ${{ steps.build.outputs.release_id }}"

.github/workflows/eslint.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "16"
+          node-version: "18"
       - run: yarn install --immutable
       - run: yarn lint
       - run: yarn formatcheck

.yarnrc.yml

@@ -5,5 +5,5 @@ plugins:
     spec: "@yarnpkg/plugin-workspace-tools"
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
-    
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+
+yarnPath: .yarn/releases/yarn-3.2.2.cjs

Dockerfile

@@ -1,12 +1,12 @@
 ## Build ExpressJS and UI
-FROM node:16.13.2-alpine3.15 AS build
-
-# Tell the UI that this is being deployed to a Balena device
-ENV ON_DEVICE=true
+FROM node:18.7.0-alpine3.16 AS build
 
 # Specify that this is being built for production
 ENV NODE_ENV=production
 
+# Public path for PWA
+ARG PUBLIC_PWA_PATH=/app
+
 WORKDIR /build-context
 
 # Copy required files for installs
@@ -27,27 +27,49 @@ COPY ui ui
 # Run lint to ensure build fails if there are coding issues
 RUN yarn lint
 
-# Build ExpressJS and UI
+# Build ExpressJS and UI.
+# ON_DEVICE=false informs the build that there my not be a backend available, and therefore 
+# not to perform certain function like communicating with the backend on boot 
 RUN yarn build
+RUN ON_DEVICE=false yarn build-pwa
 
 # Reduce the node_modules folder down to the essentials required for ExpressJS
 RUN yarn workspaces focus expressjs --production
 
 
 ## Compile container
-FROM node:16.13.2-alpine3.15
+FROM node:18.7.0-alpine3.16
+
+# Install USB mount requirements
+RUN apk add --no-cache \
+    findmnt \
+    grep \
+    udev \
+    util-linux
 
 ENV NODE_ENV=production
 
 WORKDIR /app
 
+# Enable USB support on device
+ENV UDEV=on
+COPY expressjs/src/usb/udev/usb.rules /etc/udev/rules.d/usb.rules
+COPY expressjs/src/usb/scripts /usr/src/scripts
+COPY expressjs/src/usb/entrypoint.sh .
+RUN chmod +x entrypoint.sh
+RUN chmod +x /usr/src/scripts/*
+
 # Copy app to container
 COPY --from=build /build-context/ui/dist/spa public
+COPY --from=build /build-context/ui/dist/pwa public/app
 COPY --from=build /build-context/expressjs/dist .
 COPY --from=build /build-context/node_modules node_modules
 
 # Copy startup scripts
 COPY scripts .
 
+# Setup UDEV for USB support
+ENTRYPOINT ["./entrypoint.sh"]
+
 # Run the start script
 CMD ["sh", "start.sh"]

README.md

@@ -1,6 +1,6 @@
-# Balena Device UI
+# Balena Starter Interface
 
-This project is still under heavy development and subject to significant changes. Apologies if the documentation is out of date in places, we are moving quickly and will try and keep up as best as possible. 
+This project is still under heavy development and subject to significant changes. Apologies if the documentation is out of date in places, we are moving quickly and will try and keep up as best as possible.
 
 ---
 
@@ -26,7 +26,7 @@ Some of the features include:
 - Pre-built endpoints for interacting with the Balena SDK or Supervisor
 - Connect the device to nearby Wi-Fi networks
 - Container manager (list, stop, start, restart)
-- Volume manager (create folders, upload, delete, etc...)
+- File manager (create folders, upload, delete, etc...)
 - Captive portal
 - System info and stats
 - I18n language translations

balena.yml

@@ -1,4 +1,4 @@
-name: Device UI
+name: balena Starter Interface
 description: >-
   A UI for interacting with the Balena OS and a starter project for creating your own.
 joinable: false

docker-compose.yml

@@ -1,22 +1,22 @@
-version: "2.1"
+version: "2"
 
 services:
-  balena-device-ui:
+  balena-starter-interface:
     build:
       context: .
       dockerfile: Dockerfile
     environment:
       NETWORK_MODE: bridge # Tell the app if running in `bridge` or `host` network mode
-      ON_DEVICE: true # Specify that this is being deployed to hardware with Balena OS
       SET_HOSTNAME: "balena" # Optional. Changes the device hostname. UI will become accesible on `balena.local`.
     restart: always
     ports:
       - "80:80"
     volumes:
       - "bdu_db:/app/db" # Stores UI database files
-      - "bdu_storage:/app/storage" # Storage for the Volume Manager. See docs for more info.
+      - "bdu_storage:/app/storage" # Storage for the File Manager. See docs for more info.
+    privileged: true # This can be removed if not using the USB mounting feature
 
-    # If using the Volume Manager to access volumes on other containers, ensure this container `depends_on` your
+    # If using the File Manager to access volumes on other containers, ensure this container `depends_on` your
     # other container using the below:
     # depends_on:
     #  - "your-other-container-name"
@@ -34,7 +34,7 @@ services:
       PWC_PORT: 9090
 
       ## Hotspot details ##
-      PWC_HOTSPOT_SSID: "Balena Device UI"
+      PWC_HOTSPOT_SSID: "Balena Starter Interface"
 
       ## Required system variables ##
       DBUS_SYSTEM_BUS_ADDRESS: "unix:path=/host/run/dbus/system_bus_socket"

expressjs/.eslintrc.js

@@ -17,6 +17,9 @@ module.exports = {
   ],
 
   rules: {
+    // ESLint
+    'import/order': 'off',
+
     // AirBnB
     'no-shadow': 'off',
     'no-use-before-define': 'off',

expressjs/package.json

@@ -5,17 +5,16 @@
   "repository": "https://github.com/maggie0002/balena-device-ui",
   "scripts": {
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "test": "echo \"No test specified\" && exit 0",
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md}\" --ignore-path .gitignore",
     "formatcheck": "prettier \"**/*.{js,ts,vue,scss,html,md}\" --ignore-path .gitignore --check",
+    "test": "echo \"No test specified\" && exit 0",
     "dev": "nodemon -r tsconfig-paths/register ./src/index.ts",
-    "oddev": "nodemon -r tsconfig-paths/register ./src/index.ts",
     "start": "node ./dist/index.js",
     "build": "yarn tsc -p tsconfig.json && tsc-alias -p tsconfig.json"
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "balena-sdk": "^16.21.0",
+    "balena-sdk": "^16.25.1",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^5.0.0-beta.1",
@@ -24,8 +23,8 @@
     "fs-extra": "^10.1.0",
     "klaw-sync": "^6.0.0",
     "lockfile": "^1.0.4",
-    "systeminformation": "^5.11.16",
-    "winston": "^3.7.2"
+    "systeminformation": "^5.12.5",
+    "winston": "^3.8.1"
   },
   "devDependencies": {
     "@types/compression": "^1.7.2",
@@ -36,18 +35,18 @@
     "@types/fs-extra": "^9.0.13",
     "@types/klaw-sync": "^6.0.1",
     "@types/lockfile": "^1.0.2",
-    "@types/node": "^17.0.40",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
-    "eslint": "^8.15.0",
+    "@types/node": "^18.7.5",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "nodemon": "^2.0.16",
-    "prettier": "^2.6.2",
-    "ts-node": "^10.7.0",
-    "tsc-alias": "^1.6.7",
-    "tsconfig-paths": "^4.0.0",
-    "typescript": "^4.6.4"
+    "nodemon": "^2.0.19",
+    "prettier": "^2.7.1",
+    "ts-node": "^10.9.1",
+    "tsc-alias": "^1.7.0",
+    "tsconfig-paths": "^4.1.0",
+    "typescript": "^4.7.4"
   }
 }

expressjs/src/boot/setHostname.ts

@@ -1,8 +1,8 @@
+import createAxiosInstance from '@/common/axios'
+import Logger from '@/common/logger'
 import { AxiosResponse } from 'axios'
 import fse from 'fs-extra'
 import process from 'process'
-import createAxiosInstance from '@/common/axios'
-import Logger from '@/common/logger'
 
 interface hostConfigHostname {
   network: { hostname: string }

expressjs/src/common/axios.ts

@@ -1,5 +1,5 @@
-import axios, { AxiosError } from 'axios'
 import Logger from '@/common/logger'
+import axios, { AxiosError } from 'axios'
 
 // Axios instance generator. It allows Axios instances to share interceptors and
 // allows instances to be created in the file using it. This means when someone deletes