diff --git a/bklog/web/.gitignore b/bklog/web/.gitignore index 6ba33a79f9..35174d43cf 100644 --- a/bklog/web/.gitignore +++ b/bklog/web/.gitignore @@ -86,3 +86,5 @@ yarn.lock .babelcache src/views/playground/* /monitor-retrieve/* +/monitor-apm-retrieve/* +/monitor-trace-retrieve/* diff --git a/bklog/web/babel.config.js b/bklog/web/babel.config.js index e7937899c1..98f7633839 100644 --- a/bklog/web/babel.config.js +++ b/bklog/web/babel.config.js @@ -23,8 +23,7 @@ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS * IN THE SOFTWARE. */ - -const isMonitorProduction = process.env.NODE_ENV === 'production' && process.env.APP === 'apm'; +const isMonitorCompiler = ['apm', 'trace'].includes(process.env.MONITOR_APP); module.exports = function (api) { api?.cache.never(); const presets = [ @@ -33,7 +32,7 @@ module.exports = function (api) { { targets: { browsers: - process.env.APP === 'apm' + isMonitorCompiler ? ['> 0.3%', 'Chrome > 90', 'last 2 versions', 'Firefox ESR', 'not dead'] : ['> 1%', 'last 2 versions', 'not ie <= 8'], node: 'current', @@ -47,7 +46,7 @@ module.exports = function (api) { ]; const plugins = [ '@babel/plugin-transform-runtime', - isMonitorProduction + process.env.NODE_ENV === 'production' && isMonitorCompiler ? undefined : [ 'babel-plugin-import-bk-magic-vue', diff --git a/bklog/web/package-lock.json b/bklog/web/package-lock.json index edf3f72149..ff9a833e5c 100644 --- a/bklog/web/package-lock.json +++ b/bklog/web/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@babel/helper-module-imports": "7.24.7", "@babel/runtime": "7.26.0", - "@blueking/bkmonitor-cli": "5.0.0-beta.17", + "@blueking/bkmonitor-cli": "6.0.0-beta.5", "@blueking/bkui-library": "0.0.0-beta.5", "@blueking/date-picker": "2.0.0-beta.33", "@blueking/fork-resize-detector": "0.0.2", @@ -55,7 +55,6 @@ "monaco-editor": "0.33.0", "monaco-editor-webpack-plugin": "7.0.1", "monaco-yaml": "4.0.0-alpha.3", - "pixi.js": "^8.6.6", "postcss-loader": "8.1.1", "qs": "6.11.2", "resize-detector": "0.3.0", @@ -89,6 +88,7 @@ "@types/echarts": "4.9.22", "@typescript-eslint/eslint-plugin": "7.8.0", "@typescript-eslint/parser": "7.8.0", + "cross-env": "^7.0.3", "eslint": "9.2.0", "eslint-config-prettier": "9.1.0", "eslint-config-tencent": "1.0.4", @@ -1607,70 +1607,70 @@ } }, "node_modules/@blueking/bkmonitor-cli": { - "version": "5.0.0-beta.17", - "resolved": "https://registry.npmjs.org/@blueking/bkmonitor-cli/-/bkmonitor-cli-5.0.0-beta.17.tgz", - "integrity": "sha512-bj02J3G4M2GidQgsepvahN1UGSiIypuQ2RDLjCXc+gPT5JxWqMeO84UAJeVd/Kbg9LraG31QzSAGC26X2chT6g==", - "dependencies": { - "@babel/core": "^7.25.2", - "@babel/node": "^7.25.0", - "@babel/plugin-transform-runtime": "^7.24.7", - "@babel/preset-env": "^7.25.3", - "@babel/runtime": "^7.25.0", + "version": "6.0.0-beta.5", + "resolved": "https://registry.npmjs.org/@blueking/bkmonitor-cli/-/bkmonitor-cli-6.0.0-beta.5.tgz", + "integrity": "sha512-to9rgOPq1HIqtbL7hZPZqQCJEelP8mgZFnNK1zLBXzhSp0edHGNV2ioAwOjUWE14sFGh7nfwbeJbUS/Mz9PLLA==", + "dependencies": { + "@babel/core": "^7.26.0", + "@babel/node": "^7.26.0", + "@babel/plugin-transform-runtime": "^7.25.9", + "@babel/preset-env": "^7.26.0", + "@babel/runtime": "^7.26.0", "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0", - "@vue/babel-plugin-jsx": "^1.2.2", + "@vue/babel-plugin-jsx": "^1.2.5", "@vue/babel-plugin-transform-vue-jsx": "^1.4.0", "@vue/babel-preset-jsx": "^1.4.0", "autoprefixer": "^10.4.20", - "babel-loader": "^9.1.3", + "babel-loader": "^9.2.1", "babel-plugin-component": "^1.1.1", "babel-plugin-import": "^1.13.8", "babel-plugin-syntax-jsx": "6.18.0", "babel-plugin-transform-vue-jsx": "^3.7.0", - "browserslist": "^4.23.3", - "caniuse-lite": "^1.0.30001651", + "browserslist": "^4.24.2", + "caniuse-lite": "^1.0.30001678", "chalk": "^4.1.2", "clean-webpack-plugin": "^4.0.0", "commander": "^12.1.0", "copy-webpack-plugin": "^12.0.2", - "core-js": "^3.38.0", + "core-js": "^3.39.0", "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", "file-loader": "^6.2.0", - "html-webpack-plugin": "^5.6.0", + "html-webpack-plugin": "^5.6.3", "ifdef-loader": "^2.3.2", "less": "^4.2.0", "less-loader": "^12.2.0", - "mini-css-extract-plugin": "^2.9.0", + "mini-css-extract-plugin": "^2.9.2", "monaco-editor-webpack-plugin": "^7.1.0", - "ora": "^8.0.1", + "ora": "^8.1.1", "path-browserify": "^1.0.1", - "postcss": "^8.4.41", + "postcss": "^8.4.47", "postcss-loader": "^8.1.1", - "postcss-preset-env": "^10.0.1", + "postcss-preset-env": "^10.0.9", "sass": "^1.77.8", "sass-loader": "^14.2.1", "style-loader": "^4.0.0", "svg-sprite-loader": "^6.0.11", "svg-transform-loader": "^2.0.13", "svgo-loader": "^4.0.0", - "tailwindcss": "^3.4.10", + "tailwindcss": "^3.4.14", "terser-webpack-plugin": "^5.3.10", - "thread-loader": "^4.0.2", + "thread-loader": "^4.0.4", "ts-import-plugin": "^3.0.0", "ts-loader": "^9.5.1", "ts-node": "^10.9.2", - "tslib": "^2.6.3", - "typescript": "^5.5.4", + "tslib": "^2.8.1", + "typescript": "^5.6.3", "url-loader": "^4.1.1", "vue-loader": "^15.11.1", "vue-style-loader": "^4.1.3", - "webpack": "^5.93.0", + "webpack": "^5.96.1", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", - "webpack-dev-server": "^5.0.4", + "webpack-dev-server": "^5.1.0", "webpack-log": "^3.0.2", "webpack-merge": "^6.0.1", - "webpackbar": "^6.0.1" + "webpackbar": "^7.0.0" }, "bin": { "bkmonitor-cli": "dist/index.js" @@ -1679,6 +1679,16 @@ "node": ">= 18" } }, + "node_modules/@blueking/bkmonitor-cli/node_modules/core-js": { + "version": "3.39.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz", + "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/@blueking/bkmonitor-cli/node_modules/monaco-editor-webpack-plugin": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz", @@ -1703,6 +1713,32 @@ "node": ">=14.17" } }, + "node_modules/@blueking/bkmonitor-cli/node_modules/webpackbar": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-7.0.0.tgz", + "integrity": "sha512-aS9soqSO2iCHgqHoCrj4LbfGQUboDCYJPSFOAchEK+9psIjNrfSWW4Y0YEz67MKURNvMmfo0ycOg9d/+OOf9/Q==", + "dependencies": { + "ansis": "^3.2.0", + "consola": "^3.2.3", + "pretty-time": "^1.1.0", + "std-env": "^3.7.0" + }, + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@rspack/core": "*", + "webpack": "3 || 4 || 5" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, "node_modules/@blueking/bkui-library": { "version": "0.0.0-beta.5", "resolved": "https://registry.npmjs.org/@blueking/bkui-library/-/bkui-library-0.0.0-beta.5.tgz", @@ -4430,11 +4466,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@pixi/colord": { - "version": "2.9.6", - "resolved": "https://mirrors.tencent.com/npm/@pixi/colord/-/colord-2.9.6.tgz", - "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==" - }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -4572,16 +4603,6 @@ "@types/node": "*" } }, - "node_modules/@types/css-font-loading-module": { - "version": "0.0.12", - "resolved": "https://mirrors.tencent.com/npm/@types/css-font-loading-module/-/css-font-loading-module-0.0.12.tgz", - "integrity": "sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==" - }, - "node_modules/@types/earcut": { - "version": "2.1.4", - "resolved": "https://mirrors.tencent.com/npm/@types/earcut/-/earcut-2.1.4.tgz", - "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==" - }, "node_modules/@types/echarts": { "version": "4.9.22", "resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.9.22.tgz", @@ -5446,11 +5467,6 @@ "@xtuc/long": "4.2.2" } }, - "node_modules/@webgpu/types": { - "version": "0.1.52", - "resolved": "https://mirrors.tencent.com/npm/@webgpu/types/-/types-0.1.52.tgz", - "integrity": "sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==" - }, "node_modules/@webpack-cli/configtest": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", @@ -5492,14 +5508,6 @@ } } }, - "node_modules/@xmldom/xmldom": { - "version": "0.8.10", - "resolved": "https://mirrors.tencent.com/npm/@xmldom/xmldom/-/xmldom-0.8.10.tgz", - "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==", - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -5716,6 +5724,14 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/ansis": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/ansis/-/ansis-3.4.0.tgz", + "integrity": "sha512-zVESKSQhWaPhGaWiKj1k+UqvpC7vPBBgG3hjQEeIx2YGzylWt8qA3ziAzRuUtm0OnaGsZKjIvfl8D/sJTt/I0w==", + "engines": { + "node": ">=16" + } + }, "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", @@ -7307,6 +7323,24 @@ "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==" }, + "node_modules/cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.1" + }, + "bin": { + "cross-env": "src/bin/cross-env.js", + "cross-env-shell": "src/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=10.14", + "npm": ">=6", + "yarn": ">=1" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -8277,11 +8311,6 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, - "node_modules/earcut": { - "version": "2.2.4", - "resolved": "https://mirrors.tencent.com/npm/earcut/-/earcut-2.2.4.tgz", - "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==" - }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -9195,7 +9224,8 @@ "node_modules/eventemitter3": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", - "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "dev": true }, "node_modules/events": { "version": "3.3.0", @@ -9478,6 +9508,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", + "dev": true, "dependencies": { "escape-string-regexp": "^1.0.5" }, @@ -9492,6 +9523,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, "engines": { "node": ">=0.8.0" } @@ -11564,11 +11596,6 @@ "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, - "node_modules/ismobilejs": { - "version": "1.1.1", - "resolved": "https://mirrors.tencent.com/npm/ismobilejs/-/ismobilejs-1.1.1.tgz", - "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" - }, "node_modules/isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", @@ -12368,6 +12395,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==", + "dev": true, "dependencies": { "repeat-string": "^1.0.0" }, @@ -13661,11 +13689,6 @@ "node": ">=0.10.0" } }, - "node_modules/parse-svg-path": { - "version": "0.1.2", - "resolved": "https://mirrors.tencent.com/npm/parse-svg-path/-/parse-svg-path-0.1.2.tgz", - "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==" - }, "node_modules/parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -13833,22 +13856,6 @@ "node": ">= 6" } }, - "node_modules/pixi.js": { - "version": "8.6.6", - "resolved": "https://mirrors.tencent.com/npm/pixi.js/-/pixi.js-8.6.6.tgz", - "integrity": "sha512-o5pw7G2yuIrnBx0G4npBlmFp+XGNcapI/Ufs62rRj/4XKxc1Zo74YJr/BtEXcXTraTKd+pQvYOLvnfxRjxBMvQ==", - "dependencies": { - "@pixi/colord": "^2.9.6", - "@types/css-font-loading-module": "^0.0.12", - "@types/earcut": "^2.1.4", - "@webgpu/types": "^0.1.40", - "@xmldom/xmldom": "^0.8.10", - "earcut": "^2.2.4", - "eventemitter3": "^5.0.1", - "ismobilejs": "^1.1.1", - "parse-svg-path": "^0.1.2" - } - }, "node_modules/pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", @@ -20749,6 +20756,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-6.0.1.tgz", "integrity": "sha512-TnErZpmuKdwWBdMoexjio3KKX6ZtoKHRVvLIU0A47R0VVBDtx3ZyOJDktgYixhoJokZTYTt1Z37OkO9pnGJa9Q==", + "dev": true, "dependencies": { "ansi-escapes": "^4.3.2", "chalk": "^4.1.2", @@ -20770,6 +20778,7 @@ "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", + "dev": true, "dependencies": { "type-fest": "^0.21.3" }, @@ -20783,12 +20792,14 @@ "node_modules/webpackbar/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true }, "node_modules/webpackbar/node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, "engines": { "node": ">=8" } @@ -20797,6 +20808,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -20810,6 +20822,7 @@ "version": "0.21.3", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, "engines": { "node": ">=10" }, @@ -20821,6 +20834,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", diff --git a/bklog/web/package.json b/bklog/web/package.json index 586f34711f..0554e532e7 100644 --- a/bklog/web/package.json +++ b/bklog/web/package.json @@ -6,11 +6,13 @@ "keywords": [], "license": "ISC", "scripts": { - "dev": "nodemon --exec \"bkmonitor-cli dev\"", - "dev:monitor": "nodemon --exec \"bkmonitor-cli dev --apm\"", - "build": "bkmonitor-cli build", - "build:monitor": "bkmonitor-cli build --apm", - "analyze:monitor": "bkmonitor-cli build --apm -a", + "dev": "nodemon --exec \"cross-env MONITOR_APP=log bkmonitor-cli dev --log\"", + "dev:apm": "nodemon --exec \"cross-env MONITOR_APP=apm bkmonitor-cli dev --log\"", + "dev:trace": "nodemon --exec \"cross-env MONITOR_APP=trace bkmonitor-cli dev --log\"", + "build": "cross-env MONITOR_APP=log bkmonitor-cli build --log", + "build:apm": "cross-env MONITOR_APP=apm bkmonitor-cli build --log", + "build:trace": "cross-env MONITOR_APP=trace bkmonitor-cli build --log && node ./scripts/prefix-css.js", + "analyze:apm": "bkmonitor-cli build --log -a", "clean": "rimraf ../static/dist/*", "analyze": "npm run clean && bkmonitor-cli build -a", "lint": "eslint \"**/*.{js,ts,tsx}\" --fix", @@ -20,7 +22,7 @@ "dependencies": { "@babel/helper-module-imports": "7.24.7", "@babel/runtime": "7.26.0", - "@blueking/bkmonitor-cli": "5.0.0-beta.17", + "@blueking/bkmonitor-cli": "6.0.0-beta.5", "@blueking/bkui-library": "0.0.0-beta.5", "@blueking/date-picker": "2.0.0-beta.33", "@blueking/fork-resize-detector": "0.0.2", @@ -97,6 +99,7 @@ "@types/echarts": "4.9.22", "@typescript-eslint/eslint-plugin": "7.8.0", "@typescript-eslint/parser": "7.8.0", + "cross-env": "^7.0.3", "eslint": "9.2.0", "eslint-config-prettier": "9.1.0", "eslint-config-tencent": "1.0.4", diff --git a/bklog/web/scripts/apm-package.json b/bklog/web/scripts/apm-package.json new file mode 100644 index 0000000000..28e26c5be4 --- /dev/null +++ b/bklog/web/scripts/apm-package.json @@ -0,0 +1,11 @@ +{ + "name": "@blueking/monitor-apm-log", + "version": "1.0.0", + "description": "", + "main": "main.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "MIT" +} diff --git a/bklog/web/scripts/create-monitor.js b/bklog/web/scripts/create-monitor.js index 725faa6212..e2e6c3418a 100644 --- a/bklog/web/scripts/create-monitor.js +++ b/bklog/web/scripts/create-monitor.js @@ -26,25 +26,51 @@ const webpack = require('webpack'); const WebpackBar = require('webpackbar'); const CopyWebpackPlugin = require('copy-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { resolve } = require('node:path'); -const outputUrl = resolve(__dirname, '../monitor-retrieve'); +const outputUrl = resolve(__dirname, `../monitor-${process.env.MONITOR_APP}-retrieve`); const createMonitorConfig = config => { const production = process.env.NODE_ENV === 'production'; - delete config.plugins[0]; + const isTrace = process.env.MONITOR_APP === 'trace'; config.plugins.push( new CopyWebpackPlugin({ patterns: [ { - from: resolve(__dirname, './link-package.json'), + from: resolve(__dirname, `./${process.env.MONITOR_APP}-package.json`), to: resolve(outputUrl, './package.json'), }, - ], + isTrace + ? { + from: resolve(__dirname, '../node_modules/bk-magic-vue/dist/fonts/iconcool.*'), + to: resolve(outputUrl, './fonts/[name][ext]'), + } + : undefined, + isTrace + ? { + from: resolve(__dirname, '../node_modules/bk-magic-vue/dist/images/*.(png|svg)'), + to: resolve(outputUrl, './images/[name][ext]'), + } + : undefined, + ].filter(Boolean), }), ); + config.plugins.push( + new webpack.DefinePlugin({ + NODE_ENV: JSON.stringify('production'), + APP: JSON.stringify(process.env.MONITOR_APP), + MONITOR_APP: JSON.stringify(process.env.MONITOR_APP), + }), + ); + const fileLoaders = config.module.rules[1].oneOf.find(item => item.test.test('.ttf')); + const imgLoaders = config.module.rules[1].oneOf.find(item => item.test.test('.png')); + const urlLoaderOptions = fileLoaders.use.find(item => item.loader === 'url-loader').options; + imgLoaders.options.publicPath = '../img'; + urlLoaderOptions.publicPath = '../fonts'; return { ...config, entry: { - main: './src/views/retrieve-v2/monitor/index.ts', + main: isTrace ? './src/views/retrieve-v2/monitor/trace.ts' : './src/views/retrieve-v2/monitor/index.ts', }, output: { filename: '[name].js', @@ -58,6 +84,7 @@ const createMonitorConfig = config => { chunkFormat: 'module', module: true, clean: true, + publicPath: '', }, resolve: { ...config.resolve, @@ -74,44 +101,83 @@ const createMonitorConfig = config => { mangleExports: false, }, externalsType: 'module', - externals: [ - /@blueking\/date-picker/, - /@blueking\/ip-selector/, - /@blueking\/user-selector/, - /@blueking\/bkui-library/, - /bk-magic-vue/, - /vue-i18n/, - 'vue', - 'axios', - 'vuex', - 'vue-property-decorator', - 'vuedraggable', - 'sortablejs', - 'clipboard', - 'vue-tsx-support', - 'qs', - /dayjs\//, - 'dayjs', - /lodash/, - /vue-json-pretty/, - ({ request, context }, cb) => { - if (request === 'echarts') { - return cb(undefined, request.replace(request, request)); + externals: isTrace + ? [ + /@blueking\/date-picker/, + // /@blueking\/ip-selector/, + // /@blueking\/user-selector/, + /@blueking\/bkui-library/, + // /bk-magic-vue/, + // /vue-i18n/, + // 'vue', + 'axios', + // 'vuex', + // 'vue-property-decorator', + 'vuedraggable', + 'sortablejs', + // 'clipboard', + // 'vue-tsx-support', + 'qs', + /dayjs\//, + 'dayjs', + /lodash/, + // /vue-json-pretty/, + ({ request }, cb) => { + // if (request === 'echarts') { + // return cb(undefined, request.replace(request, request)); + // } + if (request === 'resize-detector') { + return cb(undefined, '@blueking/fork-resize-detector'); + } + cb(); + }, + ] + : [ + /@blueking\/date-picker/, + /@blueking\/ip-selector/, + /@blueking\/user-selector/, + /@blueking\/bkui-library/, + /bk-magic-vue/, + /vue-i18n/, + 'vue', + 'axios', + 'vuex', + 'vue-property-decorator', + 'vuedraggable', + 'sortablejs', + 'clipboard', + 'vue-tsx-support', + 'qs', + /dayjs\//, + 'dayjs', + /lodash/, + /vue-json-pretty/, + ({ request }, cb) => { + if (request === 'echarts') { + return cb(undefined, request.replace(request, request)); + } + if (request === 'resize-detector') { + return cb(undefined, '@blueking/fork-resize-detector'); + } + cb(); + }, + ], + plugins: config.plugins + .filter(plugin => !(plugin instanceof HtmlWebpackPlugin)) + .map(plugin => { + if (plugin instanceof MiniCssExtractPlugin) { + return new MiniCssExtractPlugin({ + filename: 'css/main.css', + ignoreOrder: true, + }); } - if (request === 'resize-detector') { - return cb(undefined, '@blueking/fork-resize-detector'); - } - cb(); - }, - ], - plugins: config.plugins.filter(Boolean).map(plugin => { - return plugin instanceof webpack.ProgressPlugin - ? new WebpackBar({ - profile: true, - name: `监控日志 ${production ? 'Production模式' : 'Development模式'} 构建`, - }) - : plugin; - }), + return plugin instanceof webpack.ProgressPlugin + ? new WebpackBar({ + profile: true, + name: `监控日志检索组件 ${production ? 'Production模式' : 'Development模式'} 构建`, + }) + : plugin; + }), cache: production ? false : config.cache, }; }; diff --git a/bklog/web/scripts/prefix-css.js b/bklog/web/scripts/prefix-css.js new file mode 100644 index 0000000000..b57814724b --- /dev/null +++ b/bklog/web/scripts/prefix-css.js @@ -0,0 +1,50 @@ +/* + * Tencent is pleased to support the open source community by making + * 蓝鲸智云PaaS平台 (BlueKing PaaS) available. + * + * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved. + * + * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License. + * + * License for 蓝鲸智云PaaS平台 (BlueKing PaaS): + * + * --------------------------------------------------- + * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated + * documentation files (the "Software"), to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and + * to permit persons to whom the Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of + * the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO + * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF + * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + * IN THE SOFTWARE. + */ +const fs = require('node:fs'); +const postcss = require('postcss'); +const { resolve } = require('node:path'); + +const input = fs.readFileSync(resolve(__dirname, '../node_modules/bk-magic-vue/dist/bk-magic-vue.min.css'), 'utf-8'); // 需要添加前缀的输入文件 +postcss([ + postcss.plugin('postcss-add-monitor-class', () => { + return root => { + root.walkRules(rule => { + // 对于每个规则,更新它的选择器 + rule.selectors = rule.selectors.map(selector => { + if (/^\.(tippy-|bk-tooltip-|bk-option-|bk-select-search-input|bk-select-dropdown-)/.test(selector)) { + return selector; + } + return `.monitor-trace-log ${selector}`; + }); + }); + }; + }), +]) + .process(input, { from: undefined }) + .then(result => { + const cssText = result.css.replace(/url\((fonts|images)([^)]+)(\))/gim, 'url(../$1$2$3'); + fs.appendFileSync(resolve(__dirname, '../monitor-trace-retrieve/css/main.css'), cssText); // 最终生成的文件 + }); diff --git a/bklog/web/scripts/trace-package.json b/bklog/web/scripts/trace-package.json new file mode 100644 index 0000000000..74fec186bb --- /dev/null +++ b/bklog/web/scripts/trace-package.json @@ -0,0 +1,11 @@ +{ + "name": "@blueking/monitor-trace-log", + "version": "1.0.0-beta.3", + "description": "", + "main": "main.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "MIT" +} diff --git a/bklog/web/src/api/_httpRequest.js b/bklog/web/src/api/_httpRequest.js index f97086d503..651c1646ff 100644 --- a/bklog/web/src/api/_httpRequest.js +++ b/bklog/web/src/api/_httpRequest.js @@ -194,7 +194,7 @@ class HttpRequst { ext || {}, config, ); - if (window.__IS_MONITOR_APM__) { + if (window.__IS_MONITOR_COMPONENT__) { // 兼容监控逻辑 this.__initParams(param); } diff --git a/bklog/web/src/api/index.js b/bklog/web/src/api/index.js index 2f2b7587e8..c4bb226e89 100644 --- a/bklog/web/src/api/index.js +++ b/bklog/web/src/api/index.js @@ -70,7 +70,7 @@ axiosInstance.interceptors.request.use( if (window.IS_EXTERNAL && JSON.parse(window.IS_EXTERNAL) && store.state.spaceUid) { config.headers['X-Bk-Space-Uid'] = store.state.spaceUid; } - if (window.__IS_MONITOR_APM__) { + if (window.__IS_MONITOR_COMPONENT__) { // 监控上层并没有使用 OT 这里直接自己生成traceparent id const traceparent = `00-${random(32, 'abcdef0123456789')}-${random(16, 'abcdef0123456789')}-01`; config.headers.Traceparent = traceparent; diff --git a/bklog/web/src/components/monitor-echarts/trend-chart.vue b/bklog/web/src/components/monitor-echarts/trend-chart.vue index 1461c03529..f346ae5fe5 100644 --- a/bklog/web/src/components/monitor-echarts/trend-chart.vue +++ b/bklog/web/src/components/monitor-echarts/trend-chart.vue @@ -91,7 +91,7 @@ return; } - const indexId = window.__IS_MONITOR_APM__ ? route.query.indexId : route.params.indexId; + const indexId = window.__IS_MONITOR_COMPONENT__ ? route.query.indexId : route.params.indexId; if ((!isUnionSearch.value && !!indexId) || (isUnionSearch.value && unionIndexList.value?.length)) { // 从检索切到其他页面时 表格初始化的时候路由中indexID可能拿不到 拿不到 则不请求图表 const urlStr = isUnionSearch.value ? 'unionSearch/unionDateHistogram' : 'retrieve/getLogChartList'; diff --git a/bklog/web/src/components/nav/head-nav.vue b/bklog/web/src/components/nav/head-nav.vue index 41579a32de..80146751a5 100644 --- a/bklog/web/src/components/nav/head-nav.vue +++ b/bklog/web/src/components/nav/head-nav.vue @@ -338,12 +338,17 @@ const list = this.topMenu.filter(menu => { return menu.feature === 'on' && (this.isExternal ? this.externalMenu.includes(menu.id) : true); }); - // #if APP === 'apm' - if (process.env.NODE_ENV === 'development' && process.env.APP === 'apm' && list?.length) { - return [...list, { id: 'monitor-retrieve', name: '监控检索' }]; + // #if MONITOR_APP === 'apm' + if (process.env.NODE_ENV === 'development' && process.env.MONITOR_APP === 'apm' && list?.length) { + return [...list, { id: 'monitor-apm-log', name: 'APM Log检索' }]; } - // #endif + // #elif MONITOR_APP === 'trace' + if (process.env.NODE_ENV === 'development' && process.env.MONITOR_APP === 'trace' && list?.length) { + return [...list, { id: 'monitor-trace-log', name: 'Trace Log检索' }]; + } + // #else return list; + // #endif }, isShowGlobalSetIcon() { return !this.welcomeData && !this.isExternal; diff --git a/bklog/web/src/hooks/use-segment-pop.ts b/bklog/web/src/hooks/use-segment-pop.ts index ad9106b896..ad99bc0b26 100644 --- a/bklog/web/src/hooks/use-segment-pop.ts +++ b/bklog/web/src/hooks/use-segment-pop.ts @@ -121,7 +121,22 @@ class UseSegmentProp { iconName: 'bklog-icon bklog-jump', }, }, - ]; + ] + .filter(item => { + if (window?.__IS_MONITOR_TRACE__) { + return item.text !== this.$t('新建检索'); + } + return true; + }) + .map(item => { + if (window?.__IS_MONITOR_TRACE__) { + return { + ...item, + link: undefined, + }; + } + return item; + }); return h('div', { class: 'segment-event-icons event-tippy-content', ref: refName }, [ eventBoxList.map(item => diff --git a/bklog/web/src/hooks/use-trend-chart.ts b/bklog/web/src/hooks/use-trend-chart.ts index 07604c62b1..6e07bc3fc8 100644 --- a/bklog/web/src/hooks/use-trend-chart.ts +++ b/bklog/web/src/hooks/use-trend-chart.ts @@ -264,7 +264,7 @@ export default ({ target, handleChartDataZoom }: TrandChartOption) => { type: 'restore', }); - if (window.__IS_MONITOR_APM__) { + if (window.__IS_MONITOR_COMPONENT__) { handleChartDataZoom([timeFrom, timeTo]); } else { // 更新Store中的时间范围 diff --git a/bklog/web/src/index.d.ts b/bklog/web/src/index.d.ts index 0f18503646..fbfd828a09 100644 --- a/bklog/web/src/index.d.ts +++ b/bklog/web/src/index.d.ts @@ -32,7 +32,9 @@ declare global { MONITOR_URL: string; BK_SHARED_RES_URL: string; VERSION: string; - __IS_MONITOR_APM__?: boolean; + __IS_MONITOR_COMPONENT__?: boolean; // 是否是监控组件 + __IS_MONITOR_TRACE__?: boolean; // 是否是监控Trace组件 + __IS_MONITOR_APM__?: boolean; // 是否是监控APM组件 } } diff --git a/bklog/web/src/router/index.js b/bklog/web/src/router/index.js index ac197b3115..95235f0ffa 100644 --- a/bklog/web/src/router/index.js +++ b/bklog/web/src/router/index.js @@ -278,14 +278,20 @@ const MaskingList = () => '@/views/manage/log-clean/clean-masking/list' ); -// #if APP === 'apm' -const MonitorRetrieve = () => +// #if MONITOR_APP === 'apm' +const MonitorApmLog = () => import( - /* webpackChunkName: 'monitor-retrieve' */ + /* webpackChunkName: 'monitor-apm-log' */ + '@/views/retrieve-v2/monitor/monitor.vue' + ); +// #endif +// #if MONITOR_APP === 'trace' +const MonitorTraceLog = () => + import( + /* webpackChunkName: 'monitor-trace-log' */ '@/views/retrieve-v2/monitor/monitor.vue' ); // #endif - const routes = [ { path: '', @@ -1044,14 +1050,25 @@ const routes = [ name: 'playground', component: playground, }, - // #if APP === 'apm' + // #if MONITOR_APP === 'apm' + { + path: '/monitor-apm-log/:indexId?', + name: 'monitor-apm-log', + component: MonitorApmLog, + meta: { + title: 'APM检索-日志', + navId: 'monitor-apm-log', + }, + }, + // #endif + // #if MONITOR_APP === 'trace' { - path: '/monitor-retrieve/:indexId?', - name: 'monitor-retrieve', - component: MonitorRetrieve, + path: '/monitor-trace-log/:indexId?', + name: 'monitor-trace-log', + component: MonitorTraceLog, meta: { - title: '监控检索', - navId: 'monitor-retrieve', + title: 'Trace检索-日志', + navId: 'monitor-trace-log', }, }, // #endif diff --git a/bklog/web/src/scss/mixins/scroller.scss b/bklog/web/src/scss/mixins/scroller.scss index a8d9b822cd..9252eb3d28 100644 --- a/bklog/web/src/scss/mixins/scroller.scss +++ b/bklog/web/src/scss/mixins/scroller.scss @@ -1,8 +1,10 @@ -@mixin scroller($backgroundColor: #ddd, $width: 8px) { +@use 'sass:color'; + +@mixin scroller($backgroundColor: #ddd, $width: 4px) { &::-webkit-scrollbar { width: $width; height: 8px; - background-color: lighten($backgroundColor, 80%); + background-color: color.adjust($backgroundColor, $lightness: 80%); } &::-webkit-scrollbar-thumb { diff --git a/bklog/web/src/store/index.js b/bklog/web/src/store/index.js index 293dd63ccc..30317529d7 100644 --- a/bklog/web/src/store/index.js +++ b/bklog/web/src/store/index.js @@ -938,7 +938,7 @@ const store = new Vuex.Store({ ids.push(...result?.unionList); commit('updateUnionIndexList', ids); } else { - const indexId = window.__IS_MONITOR_APM__ ? route.query.indexId : route.params.indexId; + const indexId = window.__IS_MONITOR_COMPONENT__ ? route.query.indexId : route.params.indexId; if (indexId) { ids.push(indexId); } diff --git a/bklog/web/src/views/extract/create/index.vue b/bklog/web/src/views/extract/create/index.vue index 8f90e8a65f..f200ce398f 100644 --- a/bklog/web/src/views/extract/create/index.vue +++ b/bklog/web/src/views/extract/create/index.vue @@ -165,8 +165,12 @@ diff --git a/bklog/web/src/views/retrieve-v2/monitor/trace.ts b/bklog/web/src/views/retrieve-v2/monitor/trace.ts new file mode 100644 index 0000000000..564a5718f1 --- /dev/null +++ b/bklog/web/src/views/retrieve-v2/monitor/trace.ts @@ -0,0 +1,55 @@ +/* +* Tencent is pleased to support the open source community by making +* 蓝鲸智云PaaS平台 (BlueKing PaaS) available. +* +* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved. +* +* 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License. +* +* License for 蓝鲸智云PaaS平台 (BlueKing PaaS): +* +* --------------------------------------------------- +* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated +* documentation files (the "Software"), to deal in the Software without restriction, including without limitation +* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and +* to permit persons to whom the Software is furnished to do so, subject to the following conditions: +* +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of +* the Software. +* +* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO +* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF +* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS +* IN THE SOFTWARE. +*/ +window.__IS_MONITOR_COMPONENT__ = true; +window.__IS_MONITOR_TRACE__ = true; +window.__IS_MONITOR_APM__ = process.env.MONITOR_APP === 'apm'; +import Vue from 'vue'; + +import LogButton from '@/components/log-button'; +import JsonFormatWrapper from '@/global/json-format-wrapper.vue'; +import useStore from '@/hooks/use-store'; +import i18n from '@/language/i18n'; + +import MonitorRetrieve from './monitor.vue'; + +import '../../../static/style.css'; +const logStore = useStore(); +const initMonitorState = (payload) => { + logStore.commit('initMonitorState', payload); +}; +const initGlobalComponents = () => { + Vue.component('JsonFormatWrapper', JsonFormatWrapper); + Vue.component('LogButton', LogButton); +} +const Vue2 = Vue; +export { + MonitorRetrieve, + logStore, + i18n, + initMonitorState, + initGlobalComponents, + Vue2, +} diff --git a/bklog/web/src/views/retrieve-v2/monitor/utils.ts b/bklog/web/src/views/retrieve-v2/monitor/utils.ts index 47d60f9f7c..9061ee22b3 100644 --- a/bklog/web/src/views/retrieve-v2/monitor/utils.ts +++ b/bklog/web/src/views/retrieve-v2/monitor/utils.ts @@ -34,8 +34,8 @@ export function monitorLink(routeParams: IRouterParams) { ...window.mainComponent.$router.query, ...window.mainComponent.$router.params, ...routeParams, - name: 'apm-others', - path: '/apm/service' + name: window.__IS_MONITOR_TRACE__ ? 'trace-retrieval' : 'apm-others', + path: window.__IS_MONITOR_TRACE__ ? '/trace/home' : '/apm/service' }; const url = window.mainComponent.$router.resolve(params).href; return url; diff --git a/bklog/web/src/views/retrieve-v2/result-comp/context-log.vue b/bklog/web/src/views/retrieve-v2/result-comp/context-log.vue index f4fdd735d1..c4126253b3 100644 --- a/bklog/web/src/views/retrieve-v2/result-comp/context-log.vue +++ b/bklog/web/src/views/retrieve-v2/result-comp/context-log.vue @@ -272,7 +272,7 @@ this.isConfigLoading = true; const res = await this.$http.request('retrieve/getLogTableHead', { params: { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, }, query: { scope: 'search_context', @@ -315,7 +315,7 @@ this.logLoading = true; const res = await this.$http.request('retrieve/getContentLog', { params: { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, }, data, }); @@ -387,7 +387,7 @@ try { const configRes = await this.$http.request('retrieve/getFieldsConfigByContextLog', { params: { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, config_id: this.currentConfigID, }, }); @@ -395,7 +395,7 @@ sort_list: configRes.data.sort_list, name: configRes.data.name, config_id: this.currentConfigID, - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, }); await this.$http.request('retrieve/updateFieldsConfig', { data, diff --git a/bklog/web/src/views/retrieve-v2/result-comp/export-history.vue b/bklog/web/src/views/retrieve-v2/result-comp/export-history.vue index 1173036e68..5f2ec66948 100644 --- a/bklog/web/src/views/retrieve-v2/result-comp/export-history.vue +++ b/bklog/web/src/views/retrieve-v2/result-comp/export-history.vue @@ -416,7 +416,7 @@ this.$http .request('retrieve/exportAsync', { params: { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, }, data, }) @@ -486,10 +486,12 @@ break; } } - const params = Object.keys(queryParamsStr).reduce((output, key) => { - output.push(`${key}=${encodeURIComponent(queryParamsStr[key])}`); - return output; - }, []).join('&') ; + const params = Object.keys(queryParamsStr) + .reduce((output, key) => { + output.push(`${key}=${encodeURIComponent(queryParamsStr[key])}`); + return output; + }, []) + .join('&'); const jumpUrl = `${window.SITE_URL}#/retrieve/${indexSetID}?spaceUid=${spaceUid}&bizId=${dict.bk_biz_id}&${params}`; window.open(jumpUrl, '_blank'); }, @@ -535,7 +537,7 @@ const { limit, current } = this.pagination; const queryUrl = this.isUnionSearch ? 'unionSearch/unionExportHistory' : 'retrieve/getExportHistoryList'; const params = { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, bk_biz_id: this.bkBizId, page: current, pagesize: limit, diff --git a/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue b/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue index 71342035a4..8e6e222f6d 100644 --- a/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue +++ b/bklog/web/src/views/retrieve-v2/result-comp/export-log.vue @@ -310,7 +310,7 @@ return []; }, routerIndexSet() { - return window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId; + return window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId; }, }, beforeUnmount() { diff --git a/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue b/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue index 28a3713086..2036d6648f 100644 --- a/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue +++ b/bklog/web/src/views/retrieve-v2/result-comp/fields-setting.vue @@ -407,7 +407,7 @@ await this.$http .request('retrieve/postFieldsConfig', { data: { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, index_set_ids: this.unionIndexList, index_set_type: this.isUnionSearch ? 'union' : 'single', display_fields: this.shadowVisible, @@ -584,7 +584,7 @@ sort_list: updateItem.sort_list, display_fields: updateItem.display_fields, config_id: undefined, - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, index_set_ids: this.unionIndexList, index_set_type: this.isUnionSearch ? 'union' : 'single', }; @@ -614,7 +614,7 @@ await this.$http.request('retrieve/deleteFieldsConfig', { data: { config_id: configID, - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, index_set_ids: this.unionIndexList, index_set_type: this.isUnionSearch ? 'union' : 'single', }, @@ -664,7 +664,11 @@ data: { ...(this.isUnionSearch ? { index_set_ids: this.unionIndexList } - : { index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId }), + : { + index_set_id: window.__IS_MONITOR_COMPONENT__ + ? this.$route.query.indexId + : this.$route.params.indexId, + }), scope: 'default', index_set_type: this.isUnionSearch ? 'union' : 'single', }, diff --git a/bklog/web/src/views/retrieve-v2/result-comp/kv-list.vue b/bklog/web/src/views/retrieve-v2/result-comp/kv-list.vue index e6ae17b96e..2f3667581e 100644 --- a/bklog/web/src/views/retrieve-v2/result-comp/kv-list.vue +++ b/bklog/web/src/views/retrieve-v2/result-comp/kv-list.vue @@ -279,7 +279,7 @@ } if (path) { - const url = `${window.__IS_MONITOR_APM__ ? location.origin : window.MONITOR_URL}${path}`; + const url = `${window.__IS_MONITOR_COMPONENT__ ? location.origin : window.MONITOR_URL}${path}`; window.open(url, '_blank'); } }, diff --git a/bklog/web/src/views/retrieve-v2/result-comp/real-time-log.vue b/bklog/web/src/views/retrieve-v2/result-comp/real-time-log.vue index e8d0f1cbbc..a80467bfeb 100644 --- a/bklog/web/src/views/retrieve-v2/result-comp/real-time-log.vue +++ b/bklog/web/src/views/retrieve-v2/result-comp/real-time-log.vue @@ -235,7 +235,7 @@ this.loading = true; this.$http .request('retrieve/getRealTimeLog', { - params: { index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId }, + params: { index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId }, data: Object.assign({ order: '-', size: 50, zero: this.zero }, this.params), }) .then(res => { diff --git a/bklog/web/src/views/retrieve-v2/search-bar/index.vue b/bklog/web/src/views/retrieve-v2/search-bar/index.vue index e0845443ab..26c5059028 100644 --- a/bklog/web/src/views/retrieve-v2/search-bar/index.vue +++ b/bklog/web/src/views/retrieve-v2/search-bar/index.vue @@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router/composables'; import { RetrieveUrlResolver } from '@/store/url-resolver'; - // #if APP !== 'apm' + // #if MONITOR_APP !== 'apm' && MONITOR_APP !== 'trace' import BookmarkPop from './bookmark-pop'; // #else // #code const BookmarkPop = () => null; @@ -193,7 +193,7 @@ }; const handleRefresh = isRefresh => { - // #if APP !== 'apm' + // #if MONITOR_APP !== 'apm' && MONITOR_APP !== 'trace' emit('refresh', isRefresh); // #endif }; diff --git a/bklog/web/src/views/retrieve-v2/search-bar/ip-selector.vue b/bklog/web/src/views/retrieve-v2/search-bar/ip-selector.vue index 8b79941a98..6fb5055722 100644 --- a/bklog/web/src/views/retrieve-v2/search-bar/ip-selector.vue +++ b/bklog/web/src/views/retrieve-v2/search-bar/ip-selector.vue @@ -1,8 +1,14 @@ + diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/original-log/table-log.vue b/bklog/web/src/views/retrieve-v2/search-result-panel/original-log/table-log.vue index 12da9da64c..f6f6e82826 100644 --- a/bklog/web/src/views/retrieve-v2/search-result-panel/original-log/table-log.vue +++ b/bklog/web/src/views/retrieve-v2/search-result-panel/original-log/table-log.vue @@ -128,10 +128,14 @@ import tableRowDeepViewMixin from '@/mixins/table-row-deep-view-mixin'; import RetrieveLoader from '@/skeleton/retrieve-loader'; import { mapState } from 'vuex'; - import { bigNumberToString } from '../../../../common/util'; + // #if MONITOR_APP !== 'trace' import ContextLog from '../../result-comp/context-log'; import RealTimeLog from '../../result-comp/real-time-log'; + // #else + // #code const ContextLog = () => null; + // #code const RealTimeLog = () => null; + // #endif import OriginalList from './original-list'; import TableList from './table-list'; @@ -277,7 +281,7 @@ this.$http .request('retrieve/getWebConsoleUrl', { params: { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, }, query: queryData, }) @@ -347,7 +351,7 @@ height: calc(100% - 42px); .bklog-skeleton-loading { - position: absolute; + position: absolute !important; top: 0; z-index: 10; } diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/panel-util.js b/bklog/web/src/views/retrieve-v2/search-result-panel/panel-util.js index 28182f7675..7a87f8ba39 100644 --- a/bklog/web/src/views/retrieve-v2/search-result-panel/panel-util.js +++ b/bklog/web/src/views/retrieve-v2/search-result-panel/panel-util.js @@ -76,7 +76,7 @@ export function getConditionRouterParams(searchList, searchMode, isNewLink) { params, query: filterQuery, }; - if (window.__IS_MONITOR_APM__) { + if (window.__IS_MONITOR_COMPONENT__) { return monitorLink(routeData); } return window.mainComponent.$router.resolve(routeData).href; diff --git a/bklog/web/src/views/retrieve-v2/setting-modal/log-cluster.vue b/bklog/web/src/views/retrieve-v2/setting-modal/log-cluster.vue index 99f50bae7e..8518be3b2d 100644 --- a/bklog/web/src/views/retrieve-v2/setting-modal/log-cluster.vue +++ b/bklog/web/src/views/retrieve-v2/setting-modal/log-cluster.vue @@ -283,7 +283,7 @@ this.globalLoading = true; try { const params = { - index_set_id: window.__IS_MONITOR_APM__ ? this.$route.query.indexId : this.$route.params.indexId, + index_set_id: window.__IS_MONITOR_COMPONENT__ ? this.$route.query.indexId : this.$route.params.indexId, }; const data = { collector_config_id: this.configID }; const baseUrl = '/logClustering'; diff --git a/bklog/web/src/views/retrieve/index.vue b/bklog/web/src/views/retrieve/index.vue index b48351d94e..d0c7b1944f 100644 --- a/bklog/web/src/views/retrieve/index.vue +++ b/bklog/web/src/views/retrieve/index.vue @@ -30,6 +30,7 @@
@@ -296,7 +296,11 @@ getStorageIndexItem, } from '@/common/util'; import AuthContainerPage from '@/components/common/auth-container-page'; + // #if MONITOR_APP !== 'apm' && MONITOR_APP !== 'trace' import LogIpSelector from '@/components/log-ip-selector/log-ip-selector'; + // #else + // #code const LogIpSelector = () => null; + // #endif import indexSetSearchMixin from '@/mixins/indexSet-search-mixin'; import tableRowDeepViewMixin from '@/mixins/table-row-deep-view-mixin'; import axios from 'axios'; @@ -310,12 +314,12 @@ import AddCollectDialog from './collect/add-collect-dialog'; import CollectIndex from './collect/collect-index'; import SelectIndexSet from './condition-comp/select-index-set.tsx'; + import FieldFilter from './field-filter-comp'; import NoIndexSet from './result-comp/no-index-set'; import ResultHeader from './result-comp/result-header'; import ResultMain from './result-comp/result-main'; import SearchComp from './search-comp'; import SettingModal from './setting-modal/index.vue'; - import FieldFilter from './field-filter-comp'; const CancelToken = axios.CancelToken; const currentTime = Math.floor(new Date().getTime() / 1000); @@ -1738,7 +1742,7 @@ // 更新联合查询的begin const unionConfigs = this.unionIndexList.map(item => ({ begin: this.isTablePagination - ? (this.catchUnionBeginList.find(cItem => String(cItem?.index_set_id) === item)?.begin ?? 0) + ? this.catchUnionBeginList.find(cItem => String(cItem?.index_set_id) === item)?.begin ?? 0 : 0, index_set_id: item, })); diff --git a/bklog/web/webpack.config.js b/bklog/web/webpack.config.js index 4151c99045..092622f276 100644 --- a/bklog/web/webpack.config.js +++ b/bklog/web/webpack.config.js @@ -92,8 +92,8 @@ if (fs.existsSync(path.resolve(__dirname, './local.settings.js'))) { const localConfig = require('./local.settings'); devConfig = Object.assign({}, devConfig, localConfig); } -module.exports = (baseConfig, { app, mobile, production, fta, email = false }) => { - const isMonitorRetrieveBuild = app === 'apm' && production; // 判断是否监控检索构建 +module.exports = (baseConfig, { app, mobile, production, fta, log, email = false }) => { + const isMonitorRetrieveBuild = ['apm', 'trace'].includes(process.env.MONITOR_APP) && production; // 判断是否监控检索构建 const config = baseConfig; const distUrl = path.resolve('../static/dist'); if (!production) { @@ -117,7 +117,8 @@ module.exports = (baseConfig, { app, mobile, production, fta, email = false }) = devHost: JSON.stringify(`${devConfig.host}`), loginHost: JSON.stringify(devConfig.loginHost), loginUrl: JSON.stringify(`${devConfig.loginHost}/login/`), - APP: JSON.stringify(`${app}`), + APP: JSON.stringify(`${process.env.MONITOR_APP}`), + MONITOR_APP: JSON.stringify(`${process.env.MONITOR_APP}`), }, }, }), @@ -191,6 +192,15 @@ module.exports = (baseConfig, { app, mobile, production, fta, email = false }) = }) : plugin; }), - cache: typeof devConfig.cache === 'boolean' ? devConfig.cache : config.cache, + cache: production + ? false + : { + buildDependencies: { + config: [__filename], + }, + cacheDirectory: path.resolve(__dirname, '.cache'), + name: `${process.env.MONITOR_APP || config.app}-cache`, + type: 'filesystem', + }, }; };