BIGTOP-4483: Add CLI and Vite plugin for auto-generating image map

bigtop-manager-ui/.env.development

@@ -18,5 +18,5 @@ NODE_ENV=development
 VITE_APP_BASE='/'
 VITE_APP_BASE_URL='http://localhost:8080'
 VITE_APP_BASE_API='/api'
-VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
-VITE_BIGTOP_MANAGER_DOC_URL='https://github.com/apache/bigtop-manager/tree/main/docs'
+
+

bigtop-manager-ui/.env.production

@@ -18,5 +18,3 @@ NODE_ENV=production
 VITE_APP_BASE='/ui/'
 VITE_APP_BASE_URL=''
 VITE_APP_BASE_API='/api'
-VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
-VITE_BIGTOP_MANAGER_DOC_URL='https://github.com/apache/bigtop-manager/tree/main/docs'

bigtop-manager-ui/README.md

@@ -57,6 +57,8 @@ Bigtop Manager UI is the front-end UI of the Manager platform, which stores code
 │   ├── utils/                 # Utility functions
 │   ├── App.vue                # Root component
 │   └── main.ts                # Project entry point
+├── plugins/                   # Vite plugins
+├── cli/                       # CLI scripts 
 ├── tests/                     # Unit and integration tests
 ├── index.html                 # HTML template
 ├── package.json               # Project metadata and dependencies

bigtop-manager-ui/README.zh.md

@@ -57,6 +57,8 @@ Bigtop Manager UI 是 Manager 平台的前端 UI，存放有关平台与用户
 │   ├── utils/                 # 工具函数
 │   ├── App.vue                # 根组件
 │   └── main.ts                # 项目入口文件
+├── plugins/                   # Vite 插件
+├── cli/                       # 手动执行的命令行脚本 
 ├── tests/                     # 单元测试或集成测试用例
 ├── index.html                 # HTML 模板文件
 ├── package.json               # 包管理与脚本配置文件

bigtop-manager-ui/cli/generate-img-map.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { generateMetaMap } from '../plugins/unplugin-image-manifest/generate'
+
+generateMetaMap().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

bigtop-manager-ui/package.json

@@ -3,13 +3,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --open --mode development",
-    "build": "vite build && vue-tsc --noEmit",
+    "dev": "pnpm img-map && vite --open --mode development",
+    "build": "pnpm img-map && vite build && vue-tsc --noEmit",
     "preview": "vite preview",
     "lint": "eslint src --ext .ts,.tsx,.vue",
     "prettier": "prettier --write \"src/**/*.{vue,ts,tsx}\"",
     "test": "vitest",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "img-map": "tsx cli/generate-img-map.ts"
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
@@ -36,6 +37,7 @@
   "devDependencies": {
     "@testing-library/vue": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
+    "@types/micromatch": "^4.0.9",
     "@types/node": "^20.5.3",
     "@types/node-forge": "^1.3.11",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
@@ -48,11 +50,14 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
+    "fast-glob": "^3.3.3",
     "happy-dom": "^18.0.1",
+    "micromatch": "^4.0.8",
     "postcss": "^8.4.41",
     "prettier": "^3.0.2",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
+    "tsx": "^4.20.3",
     "typescript": "^5.8.3",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-icons": "^22.1.0",

bigtop-manager-ui/plugins/unplugin-image-manifest/generate.ts

@@ -0,0 +1,62 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import process from 'node:process'
+import fg from 'fast-glob'
+import prettier from 'prettier'
+
+async function formatCode(code: string) {
+  const options = await prettier.resolveConfig(process.cwd())
+  return prettier.format(code, { ...options, parser: 'typescript' })
+}
+
+export async function generateMetaMap() {
+  const entries = await fg('src/assets/images/**/*.png')
+
+  const lines = entries.map((filePath) => {
+    const relativePath = path.relative('src', filePath).replace(/\\/g, '')
+    const fileName = path.basename(filePath, '.png')
+    return `  '${fileName}': new URL('../${relativePath}', import.meta.url).href,`
+  })
+
+  const rawContent = `/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */\n
+const imgMap = {\n${lines.join('\n')}\n}\n\nexport default imgMap\n`
+
+  const formatted = formatCode(rawContent)
+  await fs.writeFile('src/utils/img-map.ts', await formatted, 'utf-8')
+}

bigtop-manager-ui/plugins/unplugin-image-manifest/index.ts

@@ -0,0 +1,71 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { Plugin } from 'vite'
+import path from 'node:path'
+import micromatch from 'micromatch'
+import { generateMetaMap } from './generate'
+
+interface PluginPayload {
+  matchPath: string // watch target path
+}
+
+export default function imageManifestPlugin(pluginPayload: PluginPayload): Plugin {
+  return {
+    name: 'image-manifest',
+
+    configureServer(server) {
+      server.watcher.on('add', (filePath) => onAdd(filePath, pluginPayload))
+      server.watcher.on('change', (filePath) => onChange(filePath, pluginPayload))
+      server.watcher.on('unlink', (filePath) => onUnlink(filePath, pluginPayload))
+    }
+  }
+}
+
+export function isTargetMarkdown(filePath: string, matchPath: string): boolean {
+  const relative = path.relative(process.cwd(), filePath)
+  return micromatch.isMatch(relative, matchPath)
+}
+
+// --------------- watcher actions -----------------
+
+function onAdd(filePath: string, payload: PluginPayload) {
+  if (isTargetMarkdown(filePath, payload.matchPath)) {
+    updateNoteMeta()
+  }
+}
+
+function onUnlink(filePath: string, payload: PluginPayload) {
+  if (isTargetMarkdown(filePath, payload.matchPath)) {
+    updateNoteMeta()
+  }
+}
+
+async function onChange(filePath: string, payload: PluginPayload) {
+  if (isTargetMarkdown(filePath, payload.matchPath)) {
+    updateNoteMeta()
+  }
+}
+
+function updateNoteMeta() {
+  generateMetaMap().catch((err: any) => {
+    console.error(err)
+    process.exit(1)
+  })
+}