Merge pull request Project-HAMi#68 from Nimbus318/feat/i18n

feat: add i18n support

Author: Nimbus318

.dockerignore

@@ -0,0 +1,71 @@
+# Dependencies
+node_modules
+packages/*/node_modules
+.pnpm-store
+
+# Build outputs
+dist
+packages/*/dist
+coverage
+.nyc_output
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# CI/CD
+.github
+.gitlab-ci.yml
+
+# Documentation
+docs
+*.md
+!README.md
+
+# Development files
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Test files
+test
+*.spec.ts
+*.test.ts
+jest.config.*
+.eslintrc.*
+.prettierrc.*
+
+# Server (backend is built separately)
+server
+
+# Charts
+charts
+
+# Scripts (not needed in production)
+scripts
+
+# Temporary files
+tmp
+*.tmp
+*.temp
+
+# Environment files (should be provided at runtime)
+.env
+.env.*
+!.env.example
+

.eslintrc.js

@@ -1,25 +1,25 @@
 module.exports = {
   root: true,
   parserOptions: {
-    parser: 'babel-eslint',
+    // Use TypeScript-aware parser; replaces deprecated babel-eslint.
+    parser: '@typescript-eslint/parser',
     sourceType: 'module'
   },
   env: {
     browser: true,
     node: true,
     es6: true
   },
+  plugins: ['@typescript-eslint'],
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
 
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
     'vue/max-attributes-per-line': [2, {
       'singleline': 10,
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false
-      }
+      // eslint-plugin-vue >=8 expects multiline to be a number or an object with only `max`
+      'multiline': 1
     }],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
@@ -148,7 +148,9 @@ module.exports = {
     }],
     'no-useless-call': 2,
     'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
+    // Use TS-aware version to allow parameter properties
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 2,
     'no-useless-escape': 0,
     'no-whitespace-before-property': 2,
     'no-with': 2,
@@ -194,5 +196,11 @@ module.exports = {
       objectsInObjects: false
     }],
     'array-bracket-spacing': [2, 'never']
-  }
+  },
+  overrides: [
+    {
+      files: ['**/*.spec.ts', 'test/**/*.ts'],
+      env: { jest: true }
+    }
+  ]
 }

Dockerfile

@@ -2,18 +2,51 @@ FROM --platform=$BUILDPLATFORM node:21.6.2 AS builder
 
 WORKDIR /src
 
-# Cache dependencies
-COPY package.json yarn.lock ./
+# Enable corepack to use pnpm version from package.json packageManager field
+RUN corepack enable
+
+# Copy dependency files for better layer caching
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 COPY packages/web/package.json packages/web/
-RUN yarn install --frozen-lockfile
 
+# Install dependencies
+RUN pnpm install --frozen-lockfile
+
+# Copy source code
 COPY . .
 
-# Build
+# Build application
 RUN make build-bff build-web
 
+# Remove devDependencies to reduce image size (only keep production dependencies)
+RUN CI=true pnpm prune --prod
+
+# Clean pnpm store cache to reduce image size
+RUN pnpm store prune
+
 FROM node:21.6.2-slim
 
-COPY --from=builder /src/dist/ /apps/dist/
-COPY --from=builder /src/node_modules/ /apps/node_modules/
-COPY --from=builder /src/public/ /apps/public/
+# Set production environment
+ENV NODE_ENV=production
+
+# Create app directory and non-root user for security
+WORKDIR /apps
+RUN groupadd -r appuser && useradd -r -g appuser appuser
+
+# Copy built artifacts from builder stage
+COPY --from=builder --chown=appuser:appuser /src/dist/ ./dist/
+COPY --from=builder --chown=appuser:appuser /src/node_modules/ ./node_modules/
+COPY --from=builder --chown=appuser:appuser /src/public/ ./public/
+
+# Switch to non-root user
+USER appuser
+
+# Expose port
+EXPOSE 3000
+
+# Health check using the application's health_check endpoint
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/health_check', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})" || exit 1
+
+# Start application
+CMD ["node", "dist/main"]

Makefile

@@ -10,34 +10,34 @@ DISABLED_PROJECTS?=""
 
 .PHONY: install-modules
 install-modules:
-	yarn install
+	pnpm install
 
 .PHONY: build-all
 build-all: install-modules build-bff build-web
 
 .PHONY: build-bff
 build-bff:
-	yarn run build
+	pnpm run build
 
 .PHONY: build-web
 build-web:
-	yarn workspace hami-webui-web run build
+	pnpm --filter hami-webui-web run build
 
 .PHONY: start-dev
 start-dev: install-modules start-bff start-web
 
 
 .PHONY: start-bff
 start-bff:
-	yarn run start:dev &
+	pnpm run start:dev &
 
 .PHONY: start-web
 start-web:
-	yarn workspace hami-webui-web run start:dev
+	pnpm --filter hami-webui-web run start:dev
 
 .PHONY: start-prod
 start-prod:
-	yarn run start:prod
+	pnpm run start:prod
 
 .PHONY: build-image
 build-image:
@@ -48,4 +48,4 @@ push-image:
 	docker push ${DOCKER_IMAGE}:${VERSION}
 
 .PHONY: release
-release: build-image push-image
+release: build-image push-image

package.json

@@ -5,6 +5,7 @@
   "author": "",
   "private": true,
   "license": "UNLICENSED",
+  "packageManager": "pnpm@10.25.0",
   "workspaces": [
     "packages/*"
   ],
@@ -15,7 +16,7 @@
     "start:dev": "export NODE_ENV=development && nest start --watch",
     "start:debug": "export NODE_ENV=development && nest start --debug --watch",
     "start:prod": "node dist/main",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "lint": "NODE_OPTIONS=\"--require ./scripts/structured-clone-polyfill.js\" eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
@@ -51,9 +52,9 @@
     "@types/jest": "^29.5.2",
     "@types/node": "^20.3.1",
     "@types/supertest": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.42.0",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "jest": "^29.5.0",

packages/web/README.md

@@ -2,22 +2,22 @@
 
 ## Project setup
 ```
-yarn install
+pnpm install
 ```
 
 ### Compiles and hot-reloads for development
 ```
-yarn serve
+pnpm run start:dev
 ```
 
 ### Compiles and minifies for production
 ```
-yarn build
+pnpm run build
 ```
 
 ### Lints and fixes files
 ```
-yarn lint
+pnpm run lint
 ```
 
 ### Customize configuration

packages/web/package.json

@@ -43,6 +43,7 @@
     "vue": "^3.2.13",
     "vue-clipboard3": "2.0.0",
     "vue-count-to": "1.0.13",
+    "vue-i18n": "9",
     "vue-native-websocket-vue3": "^3.1.7",
     "vue-router": "^4.0.3",
     "vuedraggable": "^4.1.0",

packages/web/projects/vgpu/components/TabTop.vue

@@ -24,7 +24,7 @@
 
 <script setup>
 import BlockBox from '@/components/BlockBox.vue';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import EchartsPlus from '@/components/Echarts-plus.vue';
 import cardApi from '~/vgpu/api/card';
 import { cloneDeep } from 'lodash';
@@ -103,19 +103,33 @@ const getTopOptions = () => {
   };
 };
 
-onMounted(async () => {
-  tabActive.value = currentConfig.value[0].key;
-  currentConfig.value.forEach((v, i) => {
+const fetchData = (configList) => {
+  if (!configList?.length) return;
+  tabActive.value = configList[0].key;
+  configList.forEach((v, i) => {
     cardApi
       .getInstantVector({
         query: v.query,
       })
       .then((res) => {
-        currentConfig.value[i].data = res.data.map((item) => ({
+        configList[i].data = res.data.map((item) => ({
           name: item.metric[v.nameKey],
           value: item.value,
         }));
       });
   });
+};
+
+onMounted(() => {
+  fetchData(currentConfig.value);
 });
+
+watch(
+  () => props.config,
+  (val) => {
+    currentConfig.value = cloneDeep(val);
+    fetchData(currentConfig.value);
+  },
+  { deep: true },
+);
 </script>

packages/web/projects/vgpu/components/gauge.vue

@@ -5,15 +5,18 @@
       class="gauge-box-echarts"
     />
     <div class="gauge-info" v-if="!hideInfo">
-      <span>{{ title.includes('使用') ? '使用' : '分配' }}</span>
-      <span v-if="!title.includes('算力')">({{ unit }})</span> :
+      <span>{{ title.includes('使用') || title.includes('Usage') ? $t('dashboard.usage') : $t('dashboard.allocation') }}</span>
+      <span v-if="!title.includes('算力') && !title.includes('Compute')">({{ unit }})</span> :
       <b>{{ used.toFixed(1) }}/{{ total.toFixed() }}</b>
     </div>
   </div>
 </template>
 <script setup>
 import EchartsPlus from '@/components/Echarts-plus.vue';
 import getOptions from './config';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 
 const props = defineProps([