From 75739ad13f2c43629380f2323fad4ecb88c0363b Mon Sep 17 00:00:00 2001 From: JayCC1 <85379453+JayCC1@users.noreply.github.com> Date: Fri, 17 Jan 2025 10:44:06 +0800 Subject: [PATCH 01/41] =?UTF-8?q?fix:=20=E3=80=90trace=E3=80=91=E5=B7=A6?= =?UTF-8?q?=E4=BE=A7=E6=A3=80=E7=B4=A2=E5=8C=BA=E5=9F=9F=E6=9D=A1=E4=BB=B6?= =?UTF-8?q?=E9=80=89=E6=8B=A9select=E6=A1=86=E9=94=99=E4=BD=8D=20--bug=3D1?= =?UTF-8?q?37256599=20(#4837)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bkmonitor/webpack/src/trace/pages/main/inquire.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bkmonitor/webpack/src/trace/pages/main/inquire.tsx b/bkmonitor/webpack/src/trace/pages/main/inquire.tsx index 801e664d40..5c2879f5af 100644 --- a/bkmonitor/webpack/src/trace/pages/main/inquire.tsx +++ b/bkmonitor/webpack/src/trace/pages/main/inquire.tsx @@ -1581,7 +1581,7 @@ export default defineComponent({ {/* 这里插入 condition 组件 */} {conditionList.map((item, index) => ( Date: Fri, 17 Jan 2025 10:58:55 +0800 Subject: [PATCH 02/41] =?UTF-8?q?feat:=20Trace=20=E6=97=A5=E5=BF=97?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91=20(#4855?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Reviewed, transaction id: 29497 --- bklog/web/.gitignore | 2 + bklog/web/babel.config.js | 7 +- bklog/web/package-lock.json | 192 ++++---- bklog/web/package.json | 15 +- bklog/web/scripts/apm-package.json | 11 + bklog/web/scripts/create-monitor.js | 150 ++++-- bklog/web/scripts/prefix-css.js | 50 ++ bklog/web/scripts/trace-package.json | 11 + bklog/web/src/api/_httpRequest.js | 2 +- bklog/web/src/api/index.js | 2 +- .../monitor-echarts/trend-chart.vue | 2 +- bklog/web/src/components/nav/head-nav.vue | 13 +- bklog/web/src/hooks/use-segment-pop.ts | 17 +- bklog/web/src/hooks/use-trend-chart.ts | 2 +- bklog/web/src/index.d.ts | 4 +- bklog/web/src/router/index.js | 37 +- bklog/web/src/scss/mixins/scroller.scss | 6 +- bklog/web/src/store/index.js | 2 +- bklog/web/src/views/extract/create/index.vue | 6 +- .../condition-comp/select-index-set.tsx | 238 +++++----- .../field-filter-comp/agg-chart.tsx | 9 +- .../components/field-select-config.vue | 2 +- .../field-filter-popover.tsx | 2 +- .../field-filter-comp/field-item.tsx | 64 +-- .../retrieve-v2/field-filter-comp/index.tsx | 10 +- .../retrieve-v2/mixins/result-table-mixin.js | 6 +- .../src/views/retrieve-v2/monitor/index.ts | 6 +- .../src/views/retrieve-v2/monitor/monitor.vue | 439 +++++++++--------- .../src/views/retrieve-v2/monitor/trace.ts | 55 +++ .../src/views/retrieve-v2/monitor/utils.ts | 4 +- .../retrieve-v2/result-comp/context-log.vue | 8 +- .../result-comp/export-history.vue | 14 +- .../retrieve-v2/result-comp/export-log.vue | 2 +- .../result-comp/fields-setting.vue | 12 +- .../views/retrieve-v2/result-comp/kv-list.vue | 2 +- .../retrieve-v2/result-comp/real-time-log.vue | 2 +- .../views/retrieve-v2/search-bar/index.vue | 4 +- .../retrieve-v2/search-bar/ip-selector.vue | 10 +- .../retrieve-v2/search-result-panel/index.vue | 9 +- .../components/finger-operate.vue | 6 +- .../quick-open-cluster-step/filter-rule.tsx | 4 +- .../quick-open-cluster.tsx | 2 +- .../components/strategy/index.tsx | 8 +- .../log-clustering/data-fingerprint.vue | 8 +- .../log-clustering/index.vue | 4 +- .../original-log/empty-view.vue | 4 +- .../original-log/index.vue | 19 +- .../original-log/original-list.vue | 5 +- .../original-log/table-list.vue | 7 +- .../original-log/table-log.vue | 10 +- .../search-result-panel/panel-util.js | 2 +- .../retrieve-v2/setting-modal/log-cluster.vue | 2 +- bklog/web/src/views/retrieve/index.vue | 20 +- bklog/web/webpack.config.js | 18 +- 54 files changed, 934 insertions(+), 614 deletions(-) create mode 100644 bklog/web/scripts/apm-package.json create mode 100644 bklog/web/scripts/prefix-css.js create mode 100644 bklog/web/scripts/trace-package.json create mode 100644 bklog/web/src/views/retrieve-v2/monitor/trace.ts 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..1d6f2bbe59 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 @@ -130,8 +130,13 @@ 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 +282,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 +352,8 @@ height: calc(100% - 42px); .bklog-skeleton-loading { - position: absolute; + /* stylelint-disable-next-line declaration-no-important */ + 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', + }, }; }; From 76942728fd2bcff41b690a5abe676975c560bf02 Mon Sep 17 00:00:00 2001 From: chenguo Date: Fri, 17 Jan 2025 11:08:14 +0800 Subject: [PATCH 03/41] =?UTF-8?q?minor:=20workload=E5=B1=82=E7=BA=A7?= =?UTF-8?q?=E6=9F=A5=E7=9C=8Blimit/request=E4=BD=BF=E7=94=A8=E7=8E=87?= =?UTF-8?q?=E5=BC=82=E5=B8=B8=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bkmonitor/packages/monitor_web/k8s/core/meta.py | 4 ++-- bkmonitor/packages/monitor_web/k8s/resources.py | 17 ++++++++++++++--- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/bkmonitor/packages/monitor_web/k8s/core/meta.py b/bkmonitor/packages/monitor_web/k8s/core/meta.py index cbc9ab4eea..f9aface5b5 100644 --- a/bkmonitor/packages/monitor_web/k8s/core/meta.py +++ b/bkmonitor/packages/monitor_web/k8s/core/meta.py @@ -659,7 +659,7 @@ def meta_prom_with_kube_pod_memory_limits_ratio(self): def distinct(cls, queryset): query_set = ( queryset.values('type', "name") - .order_by() + .order_by("name") .annotate( distinct_name=Max("id"), workload=Concat(F("type"), Value(":"), F("name")), @@ -683,7 +683,7 @@ def resource_field_list(self): def distinct(cls, queryset): query_set = ( queryset.values('name') - .order_by() + .order_by('name') .annotate(distinct_name=Max("id")) .annotate(container=F("name")) .values("container") diff --git a/bkmonitor/packages/monitor_web/k8s/resources.py b/bkmonitor/packages/monitor_web/k8s/resources.py index c66862c213..8c5b170d85 100644 --- a/bkmonitor/packages/monitor_web/k8s/resources.py +++ b/bkmonitor/packages/monitor_web/k8s/resources.py @@ -422,10 +422,18 @@ def perform_request(self, validated_request_data): # workload 单独处理 promql_list = [] for wl in resource_list: - filter_obj = load_resource_filter(resource_type, [wl]) - resource_meta.filter.add(filter_obj) + # workload 资源,需要带上namespace 信息: blueking|Deployment:bk-monitor-web + try: + ns, wl = wl.split("|") + except ValueError: + # 不符合预期的数据, ns置空 + ns = "" + tmp_filter_chain = [] + tmp_filter_chain.append(load_resource_filter(resource_type, [wl])) + tmp_filter_chain.append(load_resource_filter("namespace", [ns])) + [resource_meta.filter.add(filter_obj) for filter_obj in tmp_filter_chain] promql_list.append(getattr(resource_meta, f"meta_prom_with_{column}")) - resource_meta.filter.remove(filter_obj) + [resource_meta.filter.remove(filter_obj) for filter_obj in tmp_filter_chain] workload_name = wl.split(":")[-1] # 初始化series_map series_map[workload_name] = {"datapoints": [], "unit": unit} @@ -467,6 +475,9 @@ def perform_request(self, validated_request_data): for line in series: resource_name = resource_meta.get_resource_name(line) + if resource_type == "workload": + # workload 补充namespace + resource_name = f"{line['dimensions']['namespace']}|{resource_name}" if line["datapoints"][-1][1] == max_data_point: datapoints = line["datapoints"][-1:] else: From a7e38ab939005b46545113855b8a1a27c730507a Mon Sep 17 00:00:00 2001 From: unique0lai <11598235+unique0lai@users.noreply.github.com> Date: Fri, 17 Jan 2025 11:41:25 +0800 Subject: [PATCH 04/41] =?UTF-8?q?tests:=20=E5=91=8A=E8=AD=A6=E7=AD=96?= =?UTF-8?q?=E7=95=A5=E4=BC=98=E5=85=88=E7=BA=A7=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tests/service/access/data/test_priority.py | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/bkmonitor/alarm_backends/tests/service/access/data/test_priority.py b/bkmonitor/alarm_backends/tests/service/access/data/test_priority.py index e3bc10cc42..7c005d54c8 100644 --- a/bkmonitor/alarm_backends/tests/service/access/data/test_priority.py +++ b/bkmonitor/alarm_backends/tests/service/access/data/test_priority.py @@ -15,8 +15,15 @@ from alarm_backends.service.access.priority import PriorityChecker -# 使用nametuple来模拟Strategy和Item,Strategy只需要priority字段,Item只需要strategy字段 -Strategy = namedtuple("Strategy", ["priority"]) + +class Strategy: + def __init__(self, priority): + self.priority = priority + + def get_interval(self): + return 60 + + Item = namedtuple("Item", ["id", "strategy"]) # 使用nametuple来模拟DataRecord和EventRecord,只需要record_id和items字段 From 5e74cff4b477a47358194c67385d5b63474e0c7b Mon Sep 17 00:00:00 2001 From: ctenetlau <74183504+EASYGOING45@users.noreply.github.com> Date: Fri, 17 Jan 2025 14:18:54 +0800 Subject: [PATCH 05/41] =?UTF-8?q?feat:=20Metadata:=20ES=E9=93=BE=E8=B7=AF?= =?UTF-8?q?=E7=BB=93=E6=9E=9C=E8=A1=A8=E8=AF=A6=E6=83=85=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E6=96=B0=E5=A2=9Edata=5Flabel,query=5Fspace=E5=91=BD=E4=BB=A4?= =?UTF-8?q?=E5=BA=8F=E5=88=97=E5=8C=96=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=20--story=3D121705061=20(#4853)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bkmonitor/metadata/management/commands/query_space.py | 2 +- bkmonitor/metadata/models/space/space_table_id_redis.py | 8 ++++++++ .../tests/space/test_ongoing_es_storage_management.py | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/bkmonitor/metadata/management/commands/query_space.py b/bkmonitor/metadata/management/commands/query_space.py index 6020828ca4..2bedb32d0a 100644 --- a/bkmonitor/metadata/management/commands/query_space.py +++ b/bkmonitor/metadata/management/commands/query_space.py @@ -84,7 +84,7 @@ def handle(self, *args, **options): data_sources["platform_data_id_list"] = space_type_data_ids.get(key[0]) or [] val["data_sources"] = data_sources - self.stdout.write(json.dumps(space_dict.values())) + self.stdout.write(json.dumps(list(space_dict.values()))) def _refine_space(self, options) -> List[Dict]: space_uids = options.get("space_uid") diff --git a/bkmonitor/metadata/models/space/space_table_id_redis.py b/bkmonitor/metadata/models/space/space_table_id_redis.py index 851875b98a..029cbfd446 100644 --- a/bkmonitor/metadata/models/space/space_table_id_redis.py +++ b/bkmonitor/metadata/models/space/space_table_id_redis.py @@ -298,13 +298,19 @@ def _compose_es_table_id_detail(self, table_id_list: Optional[List[str]] = None) tid_options = models.ResultTableOption.objects.filter(table_id__in=table_id_list).values( "table_id", "name", "value", "value_type" ) + data_label_map = models.ResultTable.objects.filter(table_id__in=table_id_list).values( + "table_id", "data_label" + ) else: table_ids = models.ESStorage.objects.values("table_id", "storage_cluster_id", "source_type", "index_set") tids = [obj["table_id"] for obj in table_ids] tid_options = models.ResultTableOption.objects.filter(table_id__in=tids).values( "table_id", "name", "value", "value_type" ) + data_label_map = models.ResultTable.objects.filter(table_id__in=tids).values("table_id", "data_label") + # data_label字典 {table_id:data_label} + data_label_map_dict = {item["table_id"]: item["data_label"] for item in data_label_map} tid_options_map = {} for option in tid_options: try: @@ -328,6 +334,7 @@ def _compose_es_table_id_detail(self, table_id_list: Optional[List[str]] = None) tid = record["table_id"] storage_id = record.get("storage_cluster_id", 0) table_id_db = index_set + try: storage_record = models.StorageClusterRecord.compose_table_id_storage_cluster_records(tid) except Exception as e: # pylint: disable=broad-except @@ -344,6 +351,7 @@ def _compose_es_table_id_detail(self, table_id_list: Optional[List[str]] = None) "options": tid_options_map.get(tid) or {}, 'storage_type': models.ESStorage.STORAGE_TYPE, 'storage_cluster_records': storage_record, + 'data_label': data_label_map_dict.get(tid, ""), } ) return data diff --git a/bkmonitor/metadata/tests/space/test_ongoing_es_storage_management.py b/bkmonitor/metadata/tests/space/test_ongoing_es_storage_management.py index 2fd1930259..cf31d16602 100644 --- a/bkmonitor/metadata/tests/space/test_ongoing_es_storage_management.py +++ b/bkmonitor/metadata/tests/space/test_ongoing_es_storage_management.py @@ -36,6 +36,12 @@ def create_or_delete_records(mocker): is_default_cluster=True, version="5.x", ) + models.ResultTable.objects.create( + table_id='1001_bklog.stdout', + table_name_zh="stdout", + data_label='bklog_index_set_1001', + is_custom_table=False, + ) models.ClusterInfo.objects.create( cluster_id=12, cluster_name="test_es_2", @@ -101,6 +107,7 @@ def test_compose_es_table_id_detail_v2(create_or_delete_records): {"storage_id": 12, "enable_time": enable_timestamp_12}, {"storage_id": 11, "enable_time": enable_timestamp}, ], + 'data_label': 'bklog_index_set_1001', } expected = {'1001_bklog.stdout': json.dumps(expected_json)} assert data == expected @@ -114,6 +121,7 @@ def test_compose_es_table_id_detail_v2(create_or_delete_records): "options": {}, "storage_type": "elasticsearch", "storage_cluster_records": [], + 'data_label': '', } expected = {'test_system_event': json.dumps(expected_json)} assert event_detail == expected From bf7b1cb376ff301ca7ae783be81c23991217b808 Mon Sep 17 00:00:00 2001 From: liang ling Date: Fri, 17 Jan 2025 14:44:41 +0800 Subject: [PATCH 06/41] =?UTF-8?q?feat:=20=E5=AE=B9=E5=99=A8=E7=9B=91?= =?UTF-8?q?=E6=8E=A7=E8=A1=A8=E6=A0=BCworkload=E6=9F=A5=E8=AF=A2=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=20--Story=3D121709588=20(#4857)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Reviewed, transaction id: 29523 --- .../monitor-k8s/components/k8s-table-new/k8s-table-new.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-table-new/k8s-table-new.tsx b/bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-table-new/k8s-table-new.tsx index e46f7caa5d..14aa0a9d29 100644 --- a/bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-table-new/k8s-table-new.tsx +++ b/bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-table-new/k8s-table-new.tsx @@ -533,6 +533,9 @@ export default class K8sTableNew extends tsc if (key === K8sTableColumnKeysEnum.CONTAINER) { return `${data[K8sTableColumnKeysEnum.POD]}:${data[K8sTableColumnKeysEnum.CONTAINER]}`; } + if (key === K8sTableColumnKeysEnum.WORKLOAD) { + return `${data[K8sTableColumnKeysEnum.NAMESPACE]}|${data[key]}`; + } return data[key]; } From 0e7d55e085aa84c9b35600afbb671e9a25cbc3d0 Mon Sep 17 00:00:00 2001 From: q15971095971 <764419406@qq.com> Date: Fri, 17 Jan 2025 15:21:32 +0800 Subject: [PATCH 07/41] =?UTF-8?q?feat:=20=E4=B8=9A=E5=8A=A1=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E5=A2=9E=E5=8A=A0=E9=BB=98=E8=AE=A4=E4=B8=9A?= =?UTF-8?q?=E5=8A=A1=E4=BA=A4=E4=BA=92=E9=9C=80=E6=B1=82=20(#4848)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webpack/src/monitor-common/shim.d.ts | 1 + .../webpack/src/monitor-common/utils/index.ts | 13 +- .../components/biz-select/list.scss | 101 ++++++++++++++ .../monitor-pc/components/biz-select/list.tsx | 131 +++++++++++++++++- bkmonitor/webpack/src/monitor-pc/index.ts | 1 + .../webpack/src/monitor-pc/lang/button.ts | 2 + .../webpack/src/monitor-pc/lang/message.ts | 7 + .../src/monitor-pc/mixins/userStoreConfig.ts | 4 +- bkmonitor/webpack/src/monitor-pc/shims.d.ts | 1 + .../webpack/src/monitor-pc/store/getters.js | 2 + .../src/monitor-pc/store/modules/app.js | 2 + 11 files changed, 257 insertions(+), 8 deletions(-) diff --git a/bkmonitor/webpack/src/monitor-common/shim.d.ts b/bkmonitor/webpack/src/monitor-common/shim.d.ts index daef0174d7..d3111662e8 100644 --- a/bkmonitor/webpack/src/monitor-common/shim.d.ts +++ b/bkmonitor/webpack/src/monitor-common/shim.d.ts @@ -27,6 +27,7 @@ import type { ISpaceItem } from './typings'; declare global { interface Window { + default_biz_id: number | number; space_list: ISpaceItem[]; cc_biz_id: number; bk_biz_id: number; diff --git a/bkmonitor/webpack/src/monitor-common/utils/index.ts b/bkmonitor/webpack/src/monitor-common/utils/index.ts index f06b23c63d..aa219a0061 100644 --- a/bkmonitor/webpack/src/monitor-common/utils/index.ts +++ b/bkmonitor/webpack/src/monitor-common/utils/index.ts @@ -51,7 +51,10 @@ export const setGlobalBizId = () => { const isEmailSubscriptions = location.hash.indexOf('email-subscriptions') > -1; const isSpicialEvent = !!getUrlParam('specEvent'); const isNoBusiness = location.hash.indexOf('no-business') > -1; + const localBizId = localStorage.getItem(LOCAL_BIZ_STORE_KEY); + const defaultBizId = Number(window.default_biz_id) || ''; + const bizList = window.space_list || []; const authList = bizList.filter(item => !item.is_demo); const hasAuth = id => authList.some(item => +id === +item.bk_biz_id); @@ -81,9 +84,10 @@ export const setGlobalBizId = () => { return false; }; if (bizId !== window.bk_biz_id && !isInSpaceList(bizId) && hasAuth(window.bk_biz_id)) { - if (hasAuth(localBizId)) { - window.bk_biz_id = +localBizId; - window.cc_biz_id = +localBizId; + const newBizId = defaultBizId || localBizId; + if (hasAuth(newBizId)) { + window.bk_biz_id = +newBizId; + window.cc_biz_id = +newBizId; } const url = new URL(window.location.href); const { searchParams } = url; @@ -101,7 +105,8 @@ export const setGlobalBizId = () => { if (isNoBusiness && !bizList.length) { return true; } - const newBizId = spaceItem?.bk_biz_id || window.cc_biz_id; + // 设置过默认id时,优先取defaultBizId + const newBizId = defaultBizId || spaceItem?.bk_biz_id || window.cc_biz_id; // search with space_uid if (spaceUid) { window.space_uid = spaceUid; diff --git a/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss b/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss index f13398ea99..3d0487e0c8 100644 --- a/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss +++ b/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss @@ -59,6 +59,7 @@ } .list-item { + position: relative; display: flex; align-items: center; height: 32px; @@ -70,6 +71,10 @@ &:hover { background-color: #e1ecff; + + .set-default-button { + display: block; + } } &.checked { @@ -97,6 +102,7 @@ display: inline-flex; flex: 1; flex-wrap: nowrap; + align-items: center; margin-right: 8px; @include ellipsis(); @@ -115,6 +121,25 @@ color: #66768e; } } + + .item-default-icon { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 16px; + margin-left: 4px; + background-color: #4D4F56; + border-radius: 2px; + } + + .item-default-text { + font-size: 16px; + color: #fff; + vertical-align: middle; + transform: scale(0.625); + } } .list-item-right { @@ -132,4 +157,80 @@ } } } + + .set-default-button { + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + display: none; + + .btn-style-dark { + padding: 0 12px; + font-size: 12px; + color: #fff; + background-color: #3A84FF; + border: none; + border-radius: 0; + } + + .remove { + color: #fff; + background-color: #5E6678; + } + } +} + +// 设置默认弹窗 +.confirm-dialog__set-default { + .bk-dialog-body { + padding: 18px 32px 0; + } + + .bk-dialog-footer { + padding: 24px 32px; + background-color: #fff; + border: none; + + .btn-confirm + .btn-cancel { + margin-left: 9px; + } + + .btn-confirm, .btn-cancel { + min-width: 88px; + } + } + + .confirm-dialog__hd { + font-size: 20px; + line-height: 32px; + color: #313238; + text-align: center; + letter-spacing: 0; + } + + .confirm-dialog__bd { + margin-top: 16px; + font-size: 14px; + line-height: 22px; + color: #4D4F56; + letter-spacing: 0; + } + + .confirm-dialog__bd-name { + color: #313238; + } + + .confirm-dialog__ft { + padding: 12px 16px; + margin-top: 16px; + font-size: 14px; + line-height: 22px; + color: #4D4F56; + word-break: break-all; + word-wrap: break-word; + background: #F5F6FA; + border-radius: 2px; + } } \ No newline at end of file diff --git a/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.tsx b/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.tsx index 4a68add3dd..3d93556d68 100644 --- a/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.tsx +++ b/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.tsx @@ -23,10 +23,13 @@ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS * IN THE SOFTWARE. */ -import { Component, Emit, Prop } from 'vue-property-decorator'; +import { Component, Emit, Prop, Mixins } from 'vue-property-decorator'; import { Component as tsc } from 'vue-tsx-support'; +import store from '../../store/store'; + import { SPACE_TYPE_MAP } from '../../common/constant'; +import UserConfigMixin from '../../mixins/userStoreConfig'; import type { ThemeType } from './biz-select'; @@ -55,6 +58,7 @@ interface ITagsItem { name: string; type: ETagsType; } + export enum ETagsType { BCS = 'bcs' /** 容器项目 */, BKCC = 'bkcc' /** 业务 */, @@ -62,8 +66,10 @@ export enum ETagsType { BKSAAS = 'bksaas' /** 蓝鲸应用 */, MONITOR = 'monitor' /** 监控空间 */, } + +const DEFAULT_BIZ_ID = 'DEFAULT_BIZ_ID'; @Component -export default class List extends tsc { +export default class List extends Mixins(UserConfigMixin, tsc) { /** 选中的id */ @Prop({ type: Number }) checked: number; /** 列表数据 */ @@ -76,10 +82,66 @@ export default class List extends tsc { }) theme: ThemeType; + defaultSpace: IListItem = null; + setDefaultBizIdLoading = false; + isSetBizIdDefault = true; + + get defaultBizId() { + return store.getters.defaultBizId; + } + @Emit('selected') handleSelected(id: number | string) { return id; } + + created() { + !store.getters.defaultBizIdApiId && this.getUserConfigId(); + } + + // 获取当前用户的配置id + getUserConfigId() { + this.handleGetUserConfig(DEFAULT_BIZ_ID) + .then((res: number) => { + if (res) { + store.commit('app/SET_APP_STATE', { + defaultBizIdApiId: this.storeId, + }); + } + }) + .catch(e => { + console.log(e); + }); + } + + // 默认id处理 + async handleDefaultId() { + this.setDefaultBizIdLoading = true; + const defaultBizId = this.isSetBizIdDefault ? Number(this.defaultSpace.id) : 'undefined'; + this.handleSetUserConfig(DEFAULT_BIZ_ID, `${defaultBizId}`, store.getters.defaultBizIdApiId || 0) + .then(result => { + if (result) { + store.commit('app/SET_APP_STATE', { + defaultBizId, + }); + } + }) + .catch(e => { + console.log(e); + }) + .finally(() => { + this.setDefaultBizIdLoading = false; + this.defaultSpace = null; + }); + } + + // 打开弹窗 + handleDefaultBizIdDialog(e: MouseEvent, data: IListItem, isSetDefault: boolean) { + e.stopPropagation(); + this.defaultSpace = data; + this.isSetBizIdDefault = isSetDefault; + } + render() { return (
@@ -109,6 +171,11 @@ export default class List extends tsc { > ({child.space_type_id === ETagsType.BKCC ? `#${child.id}` : child.space_id || child.space_code}) + {this.defaultBizId && Number(this.defaultBizId) === child.id && ( + + {this.$tc('默认')} + + )} {!child.is_hidden_tag && ( @@ -123,6 +190,23 @@ export default class List extends tsc { ))} )} +
+ {this.defaultBizId && Number(this.defaultBizId) === child.id ? ( +
this.handleDefaultBizIdDialog(e, child, false)} + > + {this.$tc('取消默认')} +
+ ) : ( +
this.handleDefaultBizIdDialog(e, child, true)} + > + {this.$tc('设为默认')} +
+ )} +
))}
@@ -134,6 +218,49 @@ export default class List extends tsc { type='search-empty' /> )} + { + if (!val) { + this.defaultSpace = null; + } + }} + > +
+ {this.isSetBizIdDefault ? this.$tc('是否将该业务设为默认业务?') : this.$tc('是否取消默认业务?')} +
+
+ {this.$tc('业务名称')}:{this.defaultSpace?.name || ''} +
+
+ {this.isSetBizIdDefault + ? this.$tc('设为默认后,每次进入监控平台将会默认选中该业务') + : this.$tc('取消默认业务后,每次进入监控平台将会默认选中最近使用的业务而非当前默认业务')} +
+
+ + {this.$tc('确认')} + + { + this.defaultSpace = null; + }} + > + {this.$tc('取消')} + +
+
); } diff --git a/bkmonitor/webpack/src/monitor-pc/index.ts b/bkmonitor/webpack/src/monitor-pc/index.ts index 2eb277b2ce..3665651294 100644 --- a/bkmonitor/webpack/src/monitor-pc/index.ts +++ b/bkmonitor/webpack/src/monitor-pc/index.ts @@ -119,6 +119,7 @@ if (hasRouteHash) { bkPaasHost: window.bk_paas_host, jobUrl: window.bk_job_url, k8sV2EnableList: (!data.K8S_V2_BIZ_LIST?.length ? [] : data.K8S_V2_BIZ_LIST).slice(), + defaultBizId: window.default_biz_id || '', }); window.mainComponent = new Vue({ el: '#app', diff --git a/bkmonitor/webpack/src/monitor-pc/lang/button.ts b/bkmonitor/webpack/src/monitor-pc/lang/button.ts index e2fe2c079c..2db7516b79 100644 --- a/bkmonitor/webpack/src/monitor-pc/lang/button.ts +++ b/bkmonitor/webpack/src/monitor-pc/lang/button.ts @@ -109,6 +109,8 @@ export default { 新建组: 'New Group', 自动转换: 'Auto Conversion', 修改后重试: 'Retry after modification', + 设为默认: 'Set as default', + 取消默认: 'Remove default', // 规范:平台特性 术语 新建节点: 'New Probe', diff --git a/bkmonitor/webpack/src/monitor-pc/lang/message.ts b/bkmonitor/webpack/src/monitor-pc/lang/message.ts index 00ed924d18..a4c0fd786e 100644 --- a/bkmonitor/webpack/src/monitor-pc/lang/message.ts +++ b/bkmonitor/webpack/src/monitor-pc/lang/message.ts @@ -470,6 +470,13 @@ export default { '内容正在生成中...': 'Content is being generated...', '您可以键入“/”查看更多提问示例': 'You can type "/" to view more question examples', '监控策略如何使用?': 'How to use bkmonitor strategy?', + '是否将该业务设为默认业务?': 'Should this business be set as the default business?', + '是否取消默认业务?': 'Should the default business be cancelled?', + '设为默认后,每次进入监控平台将会默认选中该业务': + 'After setting it as default, the monitoring platform will default to this business every time you enter', + '取消默认业务后,每次进入监控平台将会默认选中最近使用的业务而非当前默认业务': + 'After canceling the default business, the monitoring platform will default to the most recently used business instead of the current default business every time you enter', + // 调用分析 '仅展示前 30 条数据': 'Only the first 30 data are displayed', 查看关联调用链: 'View related call chains', diff --git a/bkmonitor/webpack/src/monitor-pc/mixins/userStoreConfig.ts b/bkmonitor/webpack/src/monitor-pc/mixins/userStoreConfig.ts index 922b8026b6..31ab1703fc 100644 --- a/bkmonitor/webpack/src/monitor-pc/mixins/userStoreConfig.ts +++ b/bkmonitor/webpack/src/monitor-pc/mixins/userStoreConfig.ts @@ -65,9 +65,9 @@ export default class UserConfigMixin extends Vue { * @param {string} value * @return {*} */ - public async handleSetUserConfig(key: string, value: string): Promise { + public async handleSetUserConfig(key: string, value: string, configId?: string): Promise { if (!this.hasBusinessAuth) return false; - return await partialUpdateUserConfig(this.storeId, { value }, { reject403: true }) + return await partialUpdateUserConfig(this.storeId || configId, { value }, { reject403: true }) .then(() => true) .catch(() => false); } diff --git a/bkmonitor/webpack/src/monitor-pc/shims.d.ts b/bkmonitor/webpack/src/monitor-pc/shims.d.ts index f059a6a92c..30aacff237 100644 --- a/bkmonitor/webpack/src/monitor-pc/shims.d.ts +++ b/bkmonitor/webpack/src/monitor-pc/shims.d.ts @@ -79,6 +79,7 @@ declare global { csrf_cookie_name: string; cc_biz_id: number | string; bk_biz_id: number | string; + default_biz_id: number | string; space_uid: string; Vue?: any; i18n: VueI18n; diff --git a/bkmonitor/webpack/src/monitor-pc/store/getters.js b/bkmonitor/webpack/src/monitor-pc/store/getters.js index bfcffc68bf..618ac70709 100644 --- a/bkmonitor/webpack/src/monitor-pc/store/getters.js +++ b/bkmonitor/webpack/src/monitor-pc/store/getters.js @@ -65,6 +65,8 @@ const getters = { paddingRoute: state => state.app.paddingRoute, k8sV2EnableList: state => state.app.k8sV2EnableList, isEnableK8sV2: state => state.app.k8sV2EnableList.some(id => (id === 0 ? true : +id === +state.app.bizId)), + defaultBizId: state => state.app.defaultBizId, + defaultBizIdApiId: state => state.app.defaultBizIdApiId, }; export default getters; diff --git a/bkmonitor/webpack/src/monitor-pc/store/modules/app.js b/bkmonitor/webpack/src/monitor-pc/store/modules/app.js index cc383db957..10e0872c76 100644 --- a/bkmonitor/webpack/src/monitor-pc/store/modules/app.js +++ b/bkmonitor/webpack/src/monitor-pc/store/modules/app.js @@ -83,6 +83,8 @@ const state = { bizIdMap: new Map(), paddingRoute: null, k8sV2EnableList: [], + defaultBizId: '', + defaultBizIdApiId: '', }; const mutations = { From 170449096d126f252fe199991bd542036543580f Mon Sep 17 00:00:00 2001 From: liang ling Date: Fri, 17 Jan 2025 16:02:18 +0800 Subject: [PATCH 08/41] =?UTF-8?q?feat:=20=E6=96=B0=E7=89=88=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=20(#4861)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: EmilyMei <447693773@qq.com> Co-authored-by: goodGai <106252008+goodGai@users.noreply.github.com> --- .../webpack/src/apm/pages/home/apm-home.tsx | 25 +- .../pages/home/components/apm-home-list.tsx | 6 + .../src/fta-solutions/pages/event/event.tsx | 14 +- .../webpack/src/monitor-pc/common/constant.ts | 22 +- .../components/ai-whale/ai-whale.tsx | 129 +--- .../components/biz-select/list.scss | 46 +- .../monitor-pc/components/time-range/utils.ts | 26 + .../webpack/src/monitor-pc/i18n/commmon.ts | 2 + .../webpack/src/monitor-pc/lang/new-home.ts | 65 ++ .../src/monitor-pc/lang/placeholder.ts | 2 +- .../webpack/src/monitor-pc/pages/app.tsx | 22 +- .../dashboard-container.tsx | 9 +- .../monitor-pc/pages/header-setting-modal.tsx | 6 +- .../components/add-alarm-chart-dialog.scss | 77 ++ .../components/add-alarm-chart-dialog.tsx | 389 ++++++++++ .../new-home/components/ai-whale-input.scss | 97 +++ .../new-home/components/ai-whale-input.tsx | 167 ++++ .../components/header-setting-modal.scss | 271 +++++++ .../components/header-setting-modal.tsx | 247 ++++++ .../new-home/components/home-alarm-chart.scss | 188 +++++ .../new-home/components/home-alarm-chart.tsx | 418 ++++++++++ .../new-home/components/home-biz-list.scss | 312 ++++++++ .../new-home/components/home-biz-list.tsx | 516 +++++++++++++ .../home/new-home/components/home-select.scss | 343 +++++++++ .../home/new-home/components/home-select.tsx | 721 ++++++++++++++++++ .../new-home/components/quick-access.scss | 207 +++++ .../home/new-home/components/quick-access.tsx | 182 +++++ .../components/recent-alarm-events.scss | 155 ++++ .../components/recent-alarm-events.tsx | 533 +++++++++++++ .../new-home/components/recent-alarm-tab.scss | 106 +++ .../new-home/components/recent-alarm-tab.tsx | 243 ++++++ .../components/recent-favorites-list.scss | 171 +++++ .../components/recent-favorites-list.tsx | 281 +++++++ .../components/recent-favorites-tab.scss | 108 +++ .../components/recent-favorites-tab.tsx | 269 +++++++ .../pages/home/new-home/new-home.scss | 36 + .../pages/home/new-home/new-home.tsx | 55 ++ .../monitor-pc/pages/home/new-home/type.ts | 93 +++ .../monitor-pc/pages/home/new-home/utils.ts | 118 +++ .../monitor-k8s/components/common-table.tsx | 3 + .../src/monitor-pc/pages/nav-tools.scss | 6 +- .../src/monitor-pc/pages/nav-tools.tsx | 22 +- .../src/monitor-pc/router/home/index.ts | 3 +- .../static/images/png/new-page/aiWhale.png | Bin 0 -> 796 bytes .../static/images/png/new-page/dashboard.png | Bin 0 -> 1573 bytes .../static/images/png/new-page/home-bg.png | Bin 0 -> 232901 bytes .../images/png/new-page/home-search.png | Bin 0 -> 18159 bytes .../images/png/new-page/loadingChart.png | Bin 0 -> 382 bytes .../static/images/png/new-page/retrieval.png | Bin 0 -> 1516 bytes .../images/png/new-page/search-icon.png | Bin 0 -> 7311 bytes .../static/images/png/new-page/service.png | Bin 0 -> 2245 bytes .../src/monitor-pc/store/modules/ai-whale.ts | 216 ++++++ .../caller-bar-chart/caller-bar-chart.tsx | 4 +- .../trend-chart/trend-chart.tsx | 4 +- .../trace/pages/alarm-shield/alarm-shield.tsx | 7 +- 55 files changed, 6771 insertions(+), 171 deletions(-) create mode 100644 bkmonitor/webpack/src/monitor-pc/lang/new-home.ts create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/add-alarm-chart-dialog.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/add-alarm-chart-dialog.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/ai-whale-input.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/ai-whale-input.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/header-setting-modal.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/header-setting-modal.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-alarm-chart.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-alarm-chart.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-biz-list.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-biz-list.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-select.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-select.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/quick-access.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/quick-access.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-alarm-events.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-alarm-events.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-alarm-tab.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-alarm-tab.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-favorites-list.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-favorites-list.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-favorites-tab.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/recent-favorites-tab.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/new-home.scss create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/new-home.tsx create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/type.ts create mode 100644 bkmonitor/webpack/src/monitor-pc/pages/home/new-home/utils.ts create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/aiWhale.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/dashboard.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/home-bg.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/home-search.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/loadingChart.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/retrieval.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/search-icon.png create mode 100644 bkmonitor/webpack/src/monitor-pc/static/images/png/new-page/service.png create mode 100644 bkmonitor/webpack/src/monitor-pc/store/modules/ai-whale.ts diff --git a/bkmonitor/webpack/src/apm/pages/home/apm-home.tsx b/bkmonitor/webpack/src/apm/pages/home/apm-home.tsx index bfdebd3ed7..18f7c84923 100644 --- a/bkmonitor/webpack/src/apm/pages/home/apm-home.tsx +++ b/bkmonitor/webpack/src/apm/pages/home/apm-home.tsx @@ -53,6 +53,7 @@ import type { INavItem } from 'monitor-pc/pages/monitor-k8s/typings'; import './apm-home.scss'; import '@blueking/search-select-v3/vue2/vue2.css'; +import { addAccessRecord } from 'monitor-api/modules/overview'; @Component({}) export default class AppList extends Mixins(authorityMixinCreate(authorityMap)) { @@ -205,7 +206,7 @@ export default class AppList extends Mixins(authorityMixinCreate(authorityMap)) : String(appSearchParams.is_enabled_profiling), }, }; - this.$router.replace(routerParams).catch(() => {}); + this.$router.replace(routerParams).catch(() => { }); } /** * @description 时间范围 @@ -224,6 +225,27 @@ export default class AppList extends Mixins(authorityMixinCreate(authorityMap)) this.refreshKey++; } + /** + * apm 服务埋点 + * @param item 调整的服务相关参数 + */ + handleGotoService(item) { + try { + const queryString = item.url.split('?')[1]; + const params = new URLSearchParams(queryString); + // 获取 filter-app_name 的值 + const appName = params.get('filter-app_name'); + const app = this.appList.find(app => app.app_name === appName); + // 新版首页最近使用埋点 + addAccessRecord({ + function: 'apm_service', + config: { application_id: app.application_id, service_name: item.value }, + }); + } catch (error) { + console.log('error', error); + } + } + /** * @description 自动刷新 * @param val @@ -504,6 +526,7 @@ export default class AppList extends Mixins(authorityMixinCreate(authorityMap)) authority={this.appData?.permission[authorityMap.VIEW_AUTH]} authorityDetail={authorityMap.VIEW_AUTH} timeRange={this.timeRange} + onGoToServiceByLink={val => this.handleGotoService(val)} onRouteUrlChange={this.handleReplaceRouteUrl} /> diff --git a/bkmonitor/webpack/src/apm/pages/home/components/apm-home-list.tsx b/bkmonitor/webpack/src/apm/pages/home/components/apm-home-list.tsx index 4a124d4a35..90010b96c4 100644 --- a/bkmonitor/webpack/src/apm/pages/home/components/apm-home-list.tsx +++ b/bkmonitor/webpack/src/apm/pages/home/components/apm-home-list.tsx @@ -62,6 +62,7 @@ export default class ApmServiceList extends tsc< IProps, { onRouteUrlChange: (params: Record) => void; + onGoToServiceByLink?: () => void; } > { @Prop() appData: Partial; @@ -510,6 +511,10 @@ export default class ApmServiceList extends tsc< }); } + handleGotoService(item) { + this.$emit('goToServiceByLink', item); + } + /** * @description 清空搜索条件 * @param value @@ -690,6 +695,7 @@ export default class ApmServiceList extends tsc< pagination={this.pagination} scrollLoading={false} onCollect={val => this.handleCollect(val)} + onGoToServiceByLink={val => this.handleGotoService(val)} onLimitChange={this.handlePageLimitChange} onPageChange={this.handlePageChange} onSortChange={val => this.handleSortChange(val as any)} diff --git a/bkmonitor/webpack/src/fta-solutions/pages/event/event.tsx b/bkmonitor/webpack/src/fta-solutions/pages/event/event.tsx index 04a984f1b1..da7e02ee28 100644 --- a/bkmonitor/webpack/src/fta-solutions/pages/event/event.tsx +++ b/bkmonitor/webpack/src/fta-solutions/pages/event/event.tsx @@ -607,8 +607,10 @@ class Event extends Mixins(authorityMixinCreate(eventAuth)) { }); vm.handleBatchAlert(params.batchAction); } else { - // 正常进入告警页情况下不打开详情,只有通过告警通知进入的才展开详情 - const needShowDetail = !!vm.$route.query.collectId && location.search.includes('specEvent'); + // 正常进入告警页情况下不打开详情,只有通过告警通知进入的才展开详情(带collectId) + // 新版首页搜索跳转过来打开详情(带alertId) + const needShowDetail = + (!!vm.$route.query.collectId || !!vm.$route.query.alertId) && location.search.includes('specEvent'); if (needShowDetail) { vm.handleFirstShowDetail(); } @@ -736,6 +738,14 @@ class Event extends Mixins(authorityMixinCreate(eventAuth)) { /* 带collectId是事件范围设为近15天 */ defaultData.timeRange = ['now-30d', 'now']; } + + /** 新版首页带alertId跳转事件中心 */ + if (defaultData.alertId) { + defaultData.queryString = defaultData.queryString + ? `${defaultData.queryString} AND id : ${defaultData.alertId}` + : `id : ${defaultData.alertId}`; + } + /** 处理指标参数 */ if (defaultData.metricId?.length) { const metricStr = `metric : (${defaultData.metricId.map(item => `"${item}"`).join(' OR ')})`; diff --git a/bkmonitor/webpack/src/monitor-pc/common/constant.ts b/bkmonitor/webpack/src/monitor-pc/common/constant.ts index 5ba891dee1..84fffa3a8d 100644 --- a/bkmonitor/webpack/src/monitor-pc/common/constant.ts +++ b/bkmonitor/webpack/src/monitor-pc/common/constant.ts @@ -36,8 +36,8 @@ export const SPACE_TYPE_MAP = { backgroundColor: '#2B354D', }, light: { - color: '#63656E', - backgroundColor: '#CDE8FB', + color: '#3A84FF', + backgroundColor: '#EDF4FF', }, }, default: { @@ -48,7 +48,7 @@ export const SPACE_TYPE_MAP = { }, light: { color: '#63656E', - backgroundColor: '#DEDEDE', + backgroundColor: '#F0F1F5', }, }, bkci: { @@ -58,8 +58,8 @@ export const SPACE_TYPE_MAP = { backgroundColor: '#4C3232', }, light: { - color: '#63656E', - backgroundColor: '#F8D8D4', + color: '#E71818', + backgroundColor: '#FFEBEB', }, }, bcs: { @@ -69,8 +69,8 @@ export const SPACE_TYPE_MAP = { backgroundColor: '#453921', }, light: { - color: '#63656E', - backgroundColor: '#FFF2C9', + color: '#E38B02', + backgroundColor: '#FDEED8', }, }, paas: { @@ -80,8 +80,8 @@ export const SPACE_TYPE_MAP = { backgroundColor: '#223B2B', }, light: { - color: '#63656E', - backgroundColor: '#D8EDD9', + color: '#14A568', + backgroundColor: '#E4FAF0', }, }, bksaas: { @@ -91,8 +91,8 @@ export const SPACE_TYPE_MAP = { backgroundColor: '#223B2B', }, light: { - color: '#63656E', - backgroundColor: '#D8EDD9', + color: '#14A568', + backgroundColor: '#E4FAF0', }, }, }; diff --git a/bkmonitor/webpack/src/monitor-pc/components/ai-whale/ai-whale.tsx b/bkmonitor/webpack/src/monitor-pc/components/ai-whale/ai-whale.tsx index b4898e4aa3..b8bd2b570a 100644 --- a/bkmonitor/webpack/src/monitor-pc/components/ai-whale/ai-whale.tsx +++ b/bkmonitor/webpack/src/monitor-pc/components/ai-whale/ai-whale.tsx @@ -27,17 +27,12 @@ import { Component, Prop, Ref, Watch } from 'vue-property-decorator'; import { Component as tsc } from 'vue-tsx-support'; -import AiBlueking, { - RoleType, - type IMessage, - ChatHelper, - MessageStatus, - type ISendData, -} from '@blueking/ai-blueking/vue2'; +import AiBlueking, { RoleType, type ChatHelper } from '@blueking/ai-blueking/vue2'; import { fetchRobotInfo } from 'monitor-api/modules/commons'; -import { copyText, getCookie, random } from 'monitor-common/utils/utils'; +import { copyText, random } from 'monitor-common/utils/utils'; import { throttle } from 'throttle-debounce'; +import aiWhaleStore from '../../store/modules/ai-whale'; import { getEventPaths } from '../../utils'; import './ai-whale.scss'; @@ -149,9 +144,7 @@ export default class AiWhale extends tsc<{ lastRecordTime = 0; /* AI Blueking */ - messages: IMessage[] = []; prompts = questions.map((v, index) => ({ id: index + 1, content: window.i18n.tc(v) })); - loading = false; background = '#f5f7fa'; headBackground = 'linear-gradient(267deg, #2dd1f4 0%, #1482ff 95%)'; positionLimit = { @@ -166,24 +159,34 @@ export default class AiWhale extends tsc<{ bottom: 20, top: window.innerHeight - 600 - 20, }; - showAIBlueking = false; chatHelper: ChatHelper = null; chartId = random(10); mousemoveFn: (event: MouseEvent) => void; resizeFn = () => {}; + get showAIBlueking() { + return aiWhaleStore.showAIBlueking; + } + + get messages() { + return aiWhaleStore.messages; + } + + get loading() { + return aiWhaleStore.loading; + } get space() { const { bizId } = this.$store.getters; return this.$store.getters.bizList.find(item => item.id === bizId) || { name: '', type_name: '' }; } @Watch('enableAiAssistant', { immediate: true }) enableAiAssistantChange() { - this.enableAiAssistant && this.initStreamChatHelper(); + this.enableAiAssistant && aiWhaleStore.initStreamChatHelper(); } created() { this.mousemoveFn = throttle(50, this.handleMousemove); this.resizeFn = throttle(50, this.handleWindowResize); - this.messages = this.getDefaultMessage(); + aiWhaleStore.setDefaultMessage(); window.addEventListener('resize', this.resizeFn); } @@ -442,114 +445,26 @@ export default class AiWhale extends tsc<{ }#/strategy-config/add`; window.open(url); } - initStreamChatHelper() { - // 聊天开始 - const handleStart = () => { - this.loading = true; - this.messages.push({ - role: RoleType.Assistant, - content: this.$tc('内容正在生成中...'), - status: MessageStatus.Loading, - }); - }; - // 接收消息 - const handleReceiveMessage = (message: string) => { - const currentMessage = this.messages.at(-1); - if (currentMessage.content === this.$tc('内容正在生成中...')) { - // 如果是loading状态,直接覆盖 - currentMessage.content = message; - } else if (currentMessage.status === 'loading') { - // 如果是后续消息,就追加消息 - currentMessage.content += message; - } - }; - // 聊天结束 - const handleEnd = () => { - this.loading = false; - const currentMessage = this.messages.at(-1); - // loading 情况下终止 - if (currentMessage.content === this.$tc('内容正在生成中...')) { - currentMessage.content = '聊天内容已中断'; - currentMessage.status = MessageStatus.Error; - return; - } - currentMessage.status = MessageStatus.Success; - }; - // 错误处理 - const handleError = (message: string) => { - if (message.includes('user authentication failed')) { - // 未登录,跳转登录 - const loginUrl = new URL(process.env.BK_LOGIN_URL); - loginUrl.searchParams.append('c_url', location.origin); - window.location.href = loginUrl.href; - } else { - // 处理错误消息 - const currentMessage = this.messages.at(-1); - currentMessage.status = MessageStatus.Error; - currentMessage.content = message; - this.loading = false; - } - }; - this.chatHelper = new ChatHelper( - `${window.site_url}rest/v2/ai_assistant/chat/chat_v2/`, - handleStart, - handleReceiveMessage, - handleEnd, - handleError - ); - } handleAiBluekingClear() { - this.messages = this.getDefaultMessage(); - } - handleAiBluekingSend(message: ISendData) { - // 记录当前消息记录 - // const chatHistory = [...this.messages]; - // 添加一条消息 - this.messages.push({ - role: RoleType.User, - content: message.content, - cite: message.cite, - }); - // 根据参数构造输入内容 - const input = message.prompt - ? message.prompt // 如果有 prompt,直接使用 - : message.cite - ? `${message.content}: ${message.cite}` // 如果有 cite,拼接 content 和 cite - : message.content; - // ai 消息,id是唯一标识当前流,调用 chatHelper.stop 的时候需要传入 - this.chatHelper.stream( - { - query: input, - type: 'nature', - polish: true, - stream: true, - bk_biz_id: window.bk_biz_id, - }, - this.chartId, - { - 'X-CSRFToken': window.csrf_token || getCookie(window.csrf_cookie_name), - 'X-Requested-With': 'XMLHttpRequest', - 'Source-App': window.source_app, - } - ); + aiWhaleStore.setDefaultMessage(); } handleAiBluekingStop() { this.chatHelper.stop(this.chartId); } handleAiBluekingClose() { - this.showAIBlueking = false; + aiWhaleStore.setShowAIBlueking(false); } handleAiBluekingChoosePrompt(prompt) { console.log('choose prompt', prompt); } handleToggleAiBlueking() { - this.showAIBlueking = !this.showAIBlueking; + aiWhaleStore.setShowAIBlueking(!this.showAIBlueking); // this.startPosition.left = this.whalePosition.left +; } handleAiBluekingClick(v: string) { const data = JSON.parse(v); if (data?.type !== 'send') return; - this.handleAiBluekingSend(data); + aiWhaleStore.handleAiBluekingSend(data); } createAIContent() { const countSpan = count => { @@ -802,9 +717,9 @@ export default class AiWhale extends tsc<{ onChoose-prompt={this.handleAiBluekingChoosePrompt} onClear={this.handleAiBluekingClear} onClose={this.handleAiBluekingClose} - onSend={this.handleAiBluekingSend} + onSend={aiWhaleStore.handleAiBluekingSend} onShowDialog={(v: boolean) => { - this.showAIBlueking = v; + aiWhaleStore.setShowAIBlueking(v); }} onStop={this.handleAiBluekingStop} /> diff --git a/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss b/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss index 3d0487e0c8..e3116ee3f6 100644 --- a/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss +++ b/bkmonitor/webpack/src/monitor-pc/components/biz-select/list.scss @@ -1,11 +1,11 @@ @import '../../theme//index.scss'; .biz-list-wrap { - // $bg-dark: #39455f; + // $bg-dark: #39455f;$bg-dark $bg-dark: #192133; - // $color-dark:#c3d0e7; - $color-dark:#c3d0e7; - // $border-dark: #434e68; + // $color-dark:#c3d0e7;$color-dark + $color-dark: #c3d0e7; + // $border-dark: #434e68;$border-dark $border-dark: #2c354d; cursor: initial; @@ -28,7 +28,7 @@ &::before { display: initial; } - } + } .list-group-name { height: 32px; @@ -53,7 +53,7 @@ } .list-group-name { - color: #66768e;; + color: #66768e; } } } @@ -67,7 +67,7 @@ line-height: 32px; color: #63656e; cursor: pointer; - transition: background-color .1s ease-in-out; + transition: background-color 0.1s ease-in-out; &:hover { background-color: #e1ecff; @@ -86,16 +86,22 @@ color: $color-dark; &:hover { - // background-color: #323c53; + // background-color: #323c53;background-color background: #272f45; } &.checked { color: #fff; - // background-color: #272f45; + // background-color: #272f45;background-color background: #234071; } } + + &.light { + &:hover { + color: #3a84ff; + } + } } .list-item-left { @@ -109,11 +115,12 @@ .list-item-name { @include ellipsis(); - // white-space: nowrap; + // white-space: nowrap;white-space } .list-item-id { margin-left: 8px; + color: #c4c6cc; @include ellipsis(); @@ -130,7 +137,7 @@ width: 28px; height: 16px; margin-left: 4px; - background-color: #4D4F56; + background-color: #4d4f56; border-radius: 2px; } @@ -170,16 +177,16 @@ padding: 0 12px; font-size: 12px; color: #fff; - background-color: #3A84FF; + background-color: #3a84ff; border: none; border-radius: 0; } .remove { color: #fff; - background-color: #5E6678; + background-color: #5e6678; } - } + } } // 设置默认弹窗 @@ -197,7 +204,8 @@ margin-left: 9px; } - .btn-confirm, .btn-cancel { + .btn-confirm, + .btn-cancel { min-width: 88px; } } @@ -214,7 +222,7 @@ margin-top: 16px; font-size: 14px; line-height: 22px; - color: #4D4F56; + color: #4d4f56; letter-spacing: 0; } @@ -227,10 +235,10 @@ margin-top: 16px; font-size: 14px; line-height: 22px; - color: #4D4F56; + color: #4d4f56; word-break: break-all; word-wrap: break-word; - background: #F5F6FA; + background: #f5f6fa; border-radius: 2px; } -} \ No newline at end of file +} diff --git a/bkmonitor/webpack/src/monitor-pc/components/time-range/utils.ts b/bkmonitor/webpack/src/monitor-pc/components/time-range/utils.ts index 9c5e03bd6a..7099d64ba9 100644 --- a/bkmonitor/webpack/src/monitor-pc/components/time-range/utils.ts +++ b/bkmonitor/webpack/src/monitor-pc/components/time-range/utils.ts @@ -150,6 +150,32 @@ export const shortcuts = [ }, ]; +// 生成 formatterFunc 函数 +export const generateFormatterFunc = value => { + const [start, end] = handleTransformToTimestamp(value); + return timestamp => { + const duration = end - start; + const time = dayjs(timestamp); + + if (duration < 60) { + return time.format('mm:ss'); + } + if (duration < 60 * 60) { + return time.format('HH:mm:ss'); + } + if (duration <= 60 * 60 * 24) { + return time.format('HH:mm'); + } + if (duration < 60 * 60 * 24 * 7) { + return time.format('MM-DD HH:mm'); + } + if (duration < 60 * 60 * 24 * 30) { + return time.format('MM-DD'); + } + return time.format('MM-DD'); + }; +}; + /** 默认的时间范围:近一小时 */ export const DEFAULT_TIME_RANGE: TimeRangeType = ['now-1h', 'now']; diff --git a/bkmonitor/webpack/src/monitor-pc/i18n/commmon.ts b/bkmonitor/webpack/src/monitor-pc/i18n/commmon.ts index 7d516379ee..70be4e2614 100644 --- a/bkmonitor/webpack/src/monitor-pc/i18n/commmon.ts +++ b/bkmonitor/webpack/src/monitor-pc/i18n/commmon.ts @@ -30,6 +30,7 @@ import dropdown from '../lang/dropdown'; import formContent from '../lang/form-content'; import formLabel from '../lang/form-label'; import message from '../lang/message'; +import newHome from '../lang/new-home'; import placeholder from '../lang/placeholder'; import route from '../lang/route'; import strategy from '../lang/strategy'; @@ -58,6 +59,7 @@ const MonitorLangData = { tooltips, title, strategy, + newHome, }; // 比较两个翻译文件是否多出来的词条 diff --git a/bkmonitor/webpack/src/monitor-pc/lang/new-home.ts b/bkmonitor/webpack/src/monitor-pc/lang/new-home.ts new file mode 100644 index 0000000000..1031c0ddc8 --- /dev/null +++ b/bkmonitor/webpack/src/monitor-pc/lang/new-home.ts @@ -0,0 +1,65 @@ +/* + * 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. + */ +export default { + // Messages : Success | Warning | Error | Info + // 规范: 动词-主体-结果 如 新建应用成功 New application successful + // 规范: 仅首字母大写 + 容器服务: 'Container service', + 日志检索: 'Log retrieval', + 关联的告警: 'Related Alarms', + 关联的屏蔽策略: 'Associated blocking policy', + '有问题就问 AI 小鲸': 'If you have any questions, ask Xiaojing', + 最近使用: 'Recently Used', + 展示模块: 'Display module', + 快捷入口: 'Quick access', + 暂无快捷入口: 'No quick entry', + 快捷入口管理: 'Quick entry management', + 最近告警事件: 'Recent warning events', + '业务:{0}': 'Business: {0}', + '删除后,该tab下的视图也会一起删除': 'After deletion, the views under the tab will also be deleted.', + '确定删除该视图?': 'Are you sure you want to delete this view?', + '确定删除该业务视图?': 'Are you sure you want to delete this business view?', + 新增图表: 'New charts', + 修改图表: 'Modify chart', + 图表名称: 'Chart name', + 清空历史: 'Clear History', + 暂无相关记录: 'No relevant records', + 请选择策略: 'Please select a strategy', + '请输入图表名称,默认为策略名称': 'Please enter a chart name, the default is the strategy name', + '当前还未配置业务,快点击添加业务按钮新增图表': + 'There is no service configured yet. Click the Add Service button to add a new chart.', + 删除该业务: 'Delete this business', + 添加业务: 'Add a service', + '请输入 IP / Trace ID / 容器集群 / 告警ID / 策略名 进行搜索': + 'Please enter IP / Trace ID / container cluster / alarm ID / policy name to search', + 清空搜索: 'Clear search', + '当前正在加载 采集任务': 'Currently loading the collection task', + 相关功能: 'Related functions', + '当前输入条件无匹配结果,请清空后重新输入': + 'There is no matching result for the current input conditions, please clear and re-enter', + '当前业务还未配置视图,快点击下方按钮新增图表': + 'The current business has not configured a view. Click the button below to add a new chart.', +}; diff --git a/bkmonitor/webpack/src/monitor-pc/lang/placeholder.ts b/bkmonitor/webpack/src/monitor-pc/lang/placeholder.ts index 7bde13fe2b..c6c389bc82 100644 --- a/bkmonitor/webpack/src/monitor-pc/lang/placeholder.ts +++ b/bkmonitor/webpack/src/monitor-pc/lang/placeholder.ts @@ -88,7 +88,7 @@ export default { 'Enter the plugin name, which only starts with a letter, only supports letters, underscores and numbers, and the length cannot exceed 30 characters', '输入请求 URL': 'Enter Request URL', '输入指标名/ID': 'Enter Metric Name/ID', - '输入屏蔽内容、ID': 'Enter the content and ID to be blocked', + '输入屏蔽内容、ID、策略ID': 'Enter the intensity content, ID, strategy ID to be blocked', '输入关键字,模糊搜索': 'Enter keywords for fuzzy search', '输入空间ID、空间名': 'Space ID / Name', 输入规则组名: 'Enter rule group name', diff --git a/bkmonitor/webpack/src/monitor-pc/pages/app.tsx b/bkmonitor/webpack/src/monitor-pc/pages/app.tsx index 942f851d38..8b64403a40 100644 --- a/bkmonitor/webpack/src/monitor-pc/pages/app.tsx +++ b/bkmonitor/webpack/src/monitor-pc/pages/app.tsx @@ -62,6 +62,7 @@ import './app.scss'; // import NoticeComponent from '@blueking/notice-component-vue2'; import '@blueking/notice-component-vue2/dist/style.css'; import GlobalConfigMixin from '../mixins/globalConfig'; +import aiwhaleStore from '../store/modules/ai-whale'; const changeNoticeRouteList = [ 'strategy-config-add', 'strategy-config-edit', @@ -80,7 +81,6 @@ const userConfigModal = new UserConfigMixin(); const globalConfigModal = new GlobalConfigMixin(); const NEW_UER_GUDE_KEY = 'NEW_UER_GUDE_KEY'; const OVERSEAS_SITES_MENU = 'OVERSEAS_SITES_MENU'; -const AI_USER_LIST = 'AI_USER_LIST'; const STORE_USER_MENU_KEY = 'USER_STORE_MENU_KEY'; const ERROR_PAGE_ROUTE_NAME = 'error-exception'; export const WATCH_SPACE_STICKY_LIST = 'WATCH_SPACE_STICKY_LIST'; /** 监听空间置顶列表数据事件key */ @@ -114,7 +114,6 @@ export default class App extends tsc { headerNav = 'home'; headerNavChange = true; overseaGlobalList: IOverseasConfig[] = []; - enableAiAssistant = false; // 是否显示AI智能助手 menuStore = ''; hideNavCount = 0; spacestickyList: string[] = []; /** 置顶的空间列表 */ @@ -126,6 +125,10 @@ export default class App extends tsc { @ProvideReactive('toggleSet') toggleSet: boolean = localStorage.getItem('navigationToogle') === 'true'; @ProvideReactive('readonly') readonly: boolean = !!window.__BK_WEWEB_DATA__?.readonly || !!getUrlParam('readonly'); routeViewKey = random(10); + // 是否显示AI智能助手 + get enableAiAssistant() { + return aiwhaleStore.enableAiAssistant; + } get bizId() { return this.$store.getters.bizId; } @@ -270,7 +273,9 @@ export default class App extends tsc { // 一级导航宽度变化时触发自动计算收缩 handleNavHeaderResize() { if (!(this.$refs.NavTools as any)?.$el) return; - const minWidth = 772 + (this.$refs.NavTools as any).$el.clientWidth + 2; + /** 新版首页无需展示右侧的全站搜索框 */ + const BASE_MIM_WIDTH = this.$route.name && this.$route.name === 'home' ? 672 : 772; + const minWidth = BASE_MIM_WIDTH + (this.$refs.NavTools as any).$el.clientWidth + 2; if (this.navHeaderRef?.clientWidth >= minWidth + SPACE_WIDTH) { this.hideNavCount = 0; return; @@ -698,12 +703,7 @@ export default class App extends tsc { this.overseaGlobalList = await globalConfigModal.handleGetGlobalConfig(OVERSEAS_SITES_MENU); } async getAiUserConfig() { - if (!window.enable_ai_assistant) { - this.enableAiAssistant = false; - return; - } - const list: string[] = await globalConfigModal.handleGetGlobalConfig(AI_USER_LIST); - this.enableAiAssistant = list.includes(window.username); + aiwhaleStore.setEnableAiAssistantAction(); } render() { @@ -731,7 +731,7 @@ export default class App extends tsc { class='page-wrapper' name='noCache' /> - {this.$route.name === 'home' ? ( + {this.$route.name === 'home' || this.$route.name === 'newHome' ? (