From 308f8f8fedca8557d76df5c52bdfa7bc416eb1f4 Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Sat, 29 May 2021 16:46:48 +0530 Subject: [PATCH 1/9] refactor(reducers): remove multiple reducers --- frontend/src/store/actions/traceFilters.ts | 12 ------- frontend/src/store/reducers/index.ts | 6 ++-- frontend/src/store/reducers/serviceMap.ts | 13 ++++--- frontend/src/store/reducers/traceFilters.ts | 40 ++++++++------------- 4 files changed, 22 insertions(+), 49 deletions(-) diff --git a/frontend/src/store/actions/traceFilters.ts b/frontend/src/store/actions/traceFilters.ts index 53723d28fb..7922710bc6 100644 --- a/frontend/src/store/actions/traceFilters.ts +++ b/frontend/src/store/actions/traceFilters.ts @@ -32,16 +32,4 @@ export const updateTraceFilters = (traceFilters: TraceFilters) => { }; }; -export interface updateInputTagAction { - type: ActionTypes.updateInput; - payload: string; -} - -export const updateInputTag = (Input: string) => { - return { - type: ActionTypes.updateInput, - payload: Input, - }; -}; - //named export when you want to export multiple functions from the same file diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index 8c33fde3d5..af4cf0829d 100644 --- a/frontend/src/store/reducers/index.ts +++ b/frontend/src/store/reducers/index.ts @@ -25,13 +25,12 @@ import { externalMetricsReducer, externalAvgDurationMetricsReducer, } from "./metrics"; -import { traceFiltersReducer, inputsReducer } from "./traceFilters"; +import TraceFilterReducer from "./traceFilters"; import { traceItemReducer, tracesReducer } from "./traces"; import { usageDataReducer } from "./usage"; import { ServiceMapReducer } from "./serviceMap"; export interface StoreState { traceFilters: TraceFilters; - inputTag: string; traces: traceResponseNew; traceItem: spansWSameTraceIDResponse; servicesList: servicesListItem[]; @@ -48,8 +47,7 @@ export interface StoreState { } const reducers = combineReducers({ - traceFilters: traceFiltersReducer, - inputTag: inputsReducer, + traceFilters: TraceFilterReducer, traces: tracesReducer, traceItem: traceItemReducer, servicesList: serviceTableReducer, diff --git a/frontend/src/store/reducers/serviceMap.ts b/frontend/src/store/reducers/serviceMap.ts index aef22e17f1..f3a5db4fe4 100644 --- a/frontend/src/store/reducers/serviceMap.ts +++ b/frontend/src/store/reducers/serviceMap.ts @@ -1,12 +1,11 @@ import { ActionTypes, Action, serviceMapStore } from "../actions"; -export const ServiceMapReducer = ( - state: serviceMapStore = { - items: [], - services: [], - }, - action: Action, -) => { +const initialState: serviceMapStore = { + items: [], + services: [], +}; + +export const ServiceMapReducer = (state = initialState, action: Action) => { switch (action.type) { case ActionTypes.getServiceMapItems: return { diff --git a/frontend/src/store/reducers/traceFilters.ts b/frontend/src/store/reducers/traceFilters.ts index 05fe240edb..32aa198f1f 100644 --- a/frontend/src/store/reducers/traceFilters.ts +++ b/frontend/src/store/reducers/traceFilters.ts @@ -1,19 +1,17 @@ -import { - ActionTypes, - TraceFilters, - updateInputTagAction, - updateTraceFiltersAction, -} from "../actions"; +import { ActionTypes, TraceFilters } from "../actions"; -export const traceFiltersReducer = ( - state: TraceFilters = { - service: "", - tags: [], - operation: "", - latency: { min: "", max: "" }, - }, - action: updateTraceFiltersAction, -) => { +type ACTION = { + type: ActionTypes; + payload: TraceFilters; +}; +const initialState: TraceFilters = { + service: "", + tags: [], + operation: "", + latency: { min: "", max: "" }, +}; + +const TraceFilterReducer = (state = initialState, action: ACTION) => { switch (action.type) { case ActionTypes.updateTraceFilters: return action.payload; @@ -22,14 +20,4 @@ export const traceFiltersReducer = ( } }; -export const inputsReducer = ( - state: string = "", - action: updateInputTagAction, -) => { - switch (action.type) { - case ActionTypes.updateInput: - return action.payload; - default: - return state; - } -}; +export default TraceFilterReducer; From 007e2e7b78d57c1e3a3216bb564bac49fe697bc7 Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Sun, 30 May 2021 10:39:19 +0530 Subject: [PATCH 2/9] ci: gzip bundle --- frontend/package.json | 1 + frontend/webpack.config.prod.js | 4 ++++ frontend/yarn.lock | 30 +++++++++++++++--------------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index e93661acc7..e1f69e34db 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -134,6 +134,7 @@ "@babel/preset-typescript": "^7.12.17", "autoprefixer": "^9.0.0", "babel-plugin-styled-components": "^1.12.0", + "compression-webpack-plugin": "^8.0.0", "copy-webpack-plugin": "^7.0.0", "gulp": "^4.0.2", "gulp-csso": "^4.0.1", diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js index 82a3c08ecb..417c29a93f 100644 --- a/frontend/webpack.config.prod.js +++ b/frontend/webpack.config.prod.js @@ -2,6 +2,7 @@ const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); +const CompressionPlugin = require("compression-webpack-plugin"); module.exports = { mode: "production", @@ -44,6 +45,9 @@ module.exports = { ], }, plugins: [ + new CompressionPlugin({ + exclude: /.map$/ + }), new HtmlWebpackPlugin({ template: "src/index.html.ejs" }), new CopyPlugin({ patterns: [{ from: resolve(__dirname, "public/"), to: "." }], diff --git a/frontend/yarn.lock b/frontend/yarn.lock index c9b9f12c95..00f4d00d04 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1196,13 +1196,6 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.13.17": - version "7.14.0" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" - integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== - dependencies: - regenerator-runtime "^0.13.4" - "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.12.18" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.18.tgz#af137bd7e7d9705a412b3caaf991fe6aaa97831b" @@ -1210,6 +1203,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.13.17": + version "7.14.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" + integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -3264,14 +3264,6 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" -babel-plugin-import@^1.13.3: - version "1.13.3" - resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz#9dbbba7d1ac72bd412917a830d445e00941d26d7" - integrity sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - "@babel/runtime" "^7.0.0" - babel-plugin-istanbul@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765" @@ -4288,6 +4280,14 @@ compressible@~2.0.16: dependencies: mime-db ">= 1.43.0 < 2" +compression-webpack-plugin@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-8.0.0.tgz#cea047f9e047020cb267a297898d8d05e9aa29a7" + integrity sha512-/pBUx1gV8nL6YPKKa9QRs4xoemU28bfqAu8z5hLy2eTrWog4fU8lQYtlpbYwCWtIfAHLxsgSUHjk9RqK6UL+Yw== + dependencies: + schema-utils "^3.0.0" + serialize-javascript "^5.0.1" + compression@^1.7.4: version "1.7.4" resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f" From 5afc04f205dc7c20d3bd9d7ad33001afccc6b182 Mon Sep 17 00:00:00 2001 From: Ankit Anand Date: Sun, 30 May 2021 11:55:47 +0530 Subject: [PATCH 3/9] added gzip config to nginx conf file --- frontend/conf/default.conf | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/conf/default.conf b/frontend/conf/default.conf index 955432bec2..ec9fb99d70 100644 --- a/frontend/conf/default.conf +++ b/frontend/conf/default.conf @@ -1,6 +1,15 @@ server { listen 3000; server_name _; + + gzip on; + gzip_static on; + gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; + gzip_proxied any; + gzip_vary on; + gzip_comp_level 6; + gzip_buffers 16 8k; + gzip_http_version 1.1; location / { root /usr/share/nginx/html; From 5b9b34481615fc11b55f56e31687374ae77e80eb Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Sun, 30 May 2021 12:41:30 +0530 Subject: [PATCH 4/9] chore(FE): remove webpack bundle analyzer --- frontend/package.json | 1 - frontend/webpack.config.js | 2 -- frontend/yarn.lock | 60 ++------------------------------------ 3 files changed, 2 insertions(+), 61 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index e1f69e34db..07e69ad6df 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -147,7 +147,6 @@ "prettier": "2.2.1", "react-hot-loader": "^4.13.0", "react-is": "^17.0.1", - "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^4.5.0" } } diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 476ea39b37..7fa3d44086 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -2,7 +2,6 @@ const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); console.log(resolve(__dirname, "./src/")); -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { mode: "development", @@ -57,7 +56,6 @@ module.exports = { }, plugins: [ new HtmlWebpackPlugin({ template: "src/index.html.ejs" }), - new BundleAnalyzerPlugin() ], performance: { hints: false, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 00f4d00d04..18886a2ff6 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1574,11 +1574,6 @@ schema-utils "^2.6.5" source-map "^0.7.3" -"@polka/url@^1.0.0-next.15": - version "1.0.0-next.15" - resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23" - integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA== - "@rollup/plugin-node-resolve@^7.1.1": version "7.1.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca" @@ -2596,11 +2591,6 @@ acorn-walk@^7.1.1: resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== -acorn-walk@^8.0.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.1.0.tgz#d3c6a9faf00987a5e2b9bdb506c2aa76cd707f83" - integrity sha512-mjmzmv12YIG/G8JQdQuz2MUDShEJ6teYpT5bmWA4q7iwoGen8xtt3twF3OvzIUl+Q06aWIjvnwQUKvQ6TtMRjg== - acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0: version "7.4.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" @@ -5486,7 +5476,7 @@ dtype@^2.0.0: resolved "https://registry.yarnpkg.com/dtype/-/dtype-2.0.0.tgz#cd052323ce061444ecd2e8f5748f69a29be28434" integrity sha1-zQUjI84GFETs0uj1dI9popvihDQ= -duplexer@^0.1.1, duplexer@^0.1.2: +duplexer@^0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== @@ -6946,13 +6936,6 @@ gzip-size@5.1.1: duplexer "^0.1.1" pify "^4.0.1" -gzip-size@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462" - integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q== - dependencies: - duplexer "^0.1.2" - handle-thing@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" @@ -9035,7 +9018,7 @@ mime@1.6.0, mime@^1.3.4, mime@^1.4.1: resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== -mime@^2.3.1, mime@^2.4.4: +mime@^2.4.4: version "2.5.2" resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe" integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg== @@ -9601,11 +9584,6 @@ opencollective-postinstall@^2.0.2: resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259" integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q== -opener@^1.5.2: - version "1.5.2" - resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598" - integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A== - opn@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc" @@ -12236,15 +12214,6 @@ simple-get@^2.7.0: once "^1.3.1" simple-concat "^1.0.0" -sirv@^1.0.7: - version "1.0.12" - resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.12.tgz#d816c882b35489b3c63290e2f455ae3eccd5f652" - integrity sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg== - dependencies: - "@polka/url" "^1.0.0-next.15" - mime "^2.3.1" - totalist "^1.0.0" - sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -13096,11 +13065,6 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== -totalist@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df" - integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g== - tough-cookie@^2.3.3, tough-cookie@~2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" @@ -13657,21 +13621,6 @@ webidl-conversions@^6.1.0: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514" integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w== -webpack-bundle-analyzer@^4.4.2: - version "4.4.2" - resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz#39898cf6200178240910d629705f0f3493f7d666" - integrity sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ== - dependencies: - acorn "^8.0.4" - acorn-walk "^8.0.0" - chalk "^4.1.0" - commander "^6.2.0" - gzip-size "^6.0.0" - lodash "^4.17.20" - opener "^1.5.2" - sirv "^1.0.7" - ws "^7.3.1" - webpack-cli@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.5.0.tgz#b5213b84adf6e1f5de6391334c9fa53a48850466" @@ -14146,11 +14095,6 @@ ws@^7.2.3: resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.3.tgz#1f9643de34a543b8edb124bdcbc457ae55a6e5cd" integrity sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA== -ws@^7.3.1: - version "7.4.6" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c" - integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A== - xhr-request@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/xhr-request/-/xhr-request-1.1.0.tgz#f4a7c1868b9f198723444d82dcae317643f2e2ed" From af58d085a0914be1042b9378b2667f9c9874c5b8 Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Sun, 30 May 2021 19:07:37 +0530 Subject: [PATCH 5/9] feat(FE: Reducers): Combine Metrics reducers and refactor Metrics actions --- frontend/src/modules/BaseLayout.tsx | 3 +- .../src/modules/Metrics/ErrorRateChart.tsx | 4 +- .../Metrics/ExternalApi/ExternalApiGraph.tsx | 4 +- .../modules/Metrics/GenericVisualization.tsx | 2 +- .../src/modules/Metrics/LatencyLineChart.tsx | 26 +- .../src/modules/Metrics/RequestRateChart.tsx | 2 +- .../src/modules/Metrics/ServiceMetrics.tsx | 31 +- .../src/modules/Metrics/ServicesTable.tsx | 18 +- .../src/modules/Metrics/TopEndpointsTable.tsx | 2 +- frontend/src/modules/RouteProvider.tsx | 2 +- .../src/modules/Servicemap/ServiceMap.tsx | 2 +- .../Traces/TraceCustomVisualizations.tsx | 34 +-- frontend/src/modules/Usage/UsageExplorer.tsx | 8 +- .../src/store/actions/MetricsActions/index.ts | 3 + .../MetricsActions/metricsActionTypes.ts | 34 +++ .../actions/MetricsActions/metricsActions.ts | 190 ++++++++++++ .../MetricsActions/metricsInterfaces.ts | 98 +++++++ frontend/src/store/actions/index.ts | 2 +- frontend/src/store/actions/metrics.ts | 277 ------------------ frontend/src/store/actions/types.ts | 34 +-- frontend/src/store/actions/usage.ts | 1 - frontend/src/store/reducers/index.ts | 38 +-- frontend/src/store/reducers/metrics.ts | 177 ++++++----- 23 files changed, 466 insertions(+), 526 deletions(-) create mode 100644 frontend/src/store/actions/MetricsActions/index.ts create mode 100644 frontend/src/store/actions/MetricsActions/metricsActionTypes.ts create mode 100644 frontend/src/store/actions/MetricsActions/metricsActions.ts create mode 100644 frontend/src/store/actions/MetricsActions/metricsInterfaces.ts delete mode 100644 frontend/src/store/actions/metrics.ts diff --git a/frontend/src/modules/BaseLayout.tsx b/frontend/src/modules/BaseLayout.tsx index 6e3f52769e..2afa2fcac8 100644 --- a/frontend/src/modules/BaseLayout.tsx +++ b/frontend/src/modules/BaseLayout.tsx @@ -4,7 +4,6 @@ import { Layout } from "antd"; import SideNav from "./Nav/SideNav"; import TopNav from "./Nav/TopNav"; import { useLocation } from "react-router-dom"; -import ROUTES from "Src/constants/routes"; import { useRoute } from "./RouteProvider"; const { Content, Footer } = Layout; @@ -18,7 +17,7 @@ const BaseLayout: React.FC = ({ children }) => { const { dispatch } = useRoute(); useEffect(() => { - dispatch({ type: "UPDATE_IS_LOADED", payload: location.pathname }); + dispatch({ type: "ROUTE_IS_LOADED", payload: location.pathname }); }, [location]); return ( diff --git a/frontend/src/modules/Metrics/ErrorRateChart.tsx b/frontend/src/modules/Metrics/ErrorRateChart.tsx index 8740844128..fa119ea0d8 100644 --- a/frontend/src/modules/Metrics/ErrorRateChart.tsx +++ b/frontend/src/modules/Metrics/ErrorRateChart.tsx @@ -6,7 +6,7 @@ import { RouteComponentProps } from "react-router-dom"; import styled from "styled-components"; import ROUTES from "Src/constants/routes"; -import { metricItem } from "../../store/actions/metrics"; +import { metricItem } from "../../store/actions/MetricsActions"; const ChartPopUpUnique = styled.div<{ ycoordinate: number; @@ -55,7 +55,7 @@ class ErrorRateChart extends React.Component { xcoordinate: 0, ycoordinate: 0, showpopUp: false, - firstpoint_ts: 0 + firstpoint_ts: 0, // graphInfo:{} }; diff --git a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx index 1459de5e91..b7cc2999ee 100644 --- a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx +++ b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx @@ -1,11 +1,9 @@ import React from "react"; import { Line as ChartJSLine } from "react-chartjs-2"; -import { ChartOptions } from "chart.js"; import { withRouter } from "react-router"; import { RouteComponentProps } from "react-router-dom"; -import styled from "styled-components"; import { getOptions, borderColors } from "./graphConfig"; -import { externalMetricsItem } from "../../store/actions/metrics"; +import { externalMetricsItem } from "../../../store/actions/MetricsActions"; import { uniqBy, filter } from "lodash"; const theme = "dark"; diff --git a/frontend/src/modules/Metrics/GenericVisualization.tsx b/frontend/src/modules/Metrics/GenericVisualization.tsx index a68d08bcf2..c35e63679e 100644 --- a/frontend/src/modules/Metrics/GenericVisualization.tsx +++ b/frontend/src/modules/Metrics/GenericVisualization.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Bar, Line as ChartJSLine } from "react-chartjs-2"; import styled from "styled-components"; -import { customMetricsItem } from "../../store/actions/metrics"; +import { customMetricsItem } from "../../store/actions/MetricsActions"; const GenVisualizationWrapper = styled.div` height: 160px; diff --git a/frontend/src/modules/Metrics/LatencyLineChart.tsx b/frontend/src/modules/Metrics/LatencyLineChart.tsx index daf63b43ac..eb41a28056 100644 --- a/frontend/src/modules/Metrics/LatencyLineChart.tsx +++ b/frontend/src/modules/Metrics/LatencyLineChart.tsx @@ -4,9 +4,7 @@ import { ChartOptions } from "chart.js"; import { withRouter } from "react-router"; import { RouteComponentProps } from "react-router-dom"; import styled from "styled-components"; -import ROUTES from "Src/constants/routes"; - -import { metricItem } from "../../store/actions/metrics"; +import { metricItem } from "../../store/actions/MetricsActions"; const ChartPopUpUnique = styled.div<{ ycoordinate: number; @@ -39,11 +37,8 @@ interface LatencyLineChartProps extends RouteComponentProps { popupClickHandler: Function; } -interface LatencyLineChart { - chartRef: any; -} - class LatencyLineChart extends React.Component { + private chartRef: React.RefObject; constructor(props: LatencyLineChartProps) { super(props); this.chartRef = React.createRef(); @@ -54,7 +49,6 @@ class LatencyLineChart extends React.Component { ycoordinate: 0, showpopUp: false, firstpoint_ts: 0, - // graphInfo:{} }; onClickhandler = async (e: any, event: any) => { @@ -69,7 +63,6 @@ class LatencyLineChart extends React.Component { ycoordinate: e.offsetY, showpopUp: true, firstpoint_ts: this.props.data[firstPoint._index].timestamp, - // graphInfo:{...event} }); } else { // if clicked outside of the graph line, then firstpoint is undefined -> close popup. @@ -80,15 +73,6 @@ class LatencyLineChart extends React.Component { } }; - gotoTracesHandler = (xc: any) => { - this.props.history.push(ROUTES.TRACES); - }; - - gotoAlertsHandler = () => { - this.props.history.push(ROUTES.SERVICE_MAP); - // PNOTE - Keeping service map for now, will replace with alerts when alert page is made - }; - options_charts: ChartOptions = { onClick: this.onClickhandler, @@ -161,9 +145,6 @@ class LatencyLineChart extends React.Component { xAxes: [ { type: "time", - // time: { - // unit: 'second' - // }, distribution: "linear", //'linear': data are spread according to their time (distances can vary) // From https://www.chartjs.org/docs/latest/axes/cartesian/time.html @@ -193,7 +174,6 @@ class LatencyLineChart extends React.Component { > View Traces - {/* Set Alerts */} ); } else return null; @@ -239,7 +219,7 @@ class LatencyLineChart extends React.Component {
{this.GraphTracePopUp()}
-
Application latency in ms
+
Application latency in ms
{ return { - externalErrCodeMetrics: state.externalErrCodeMetrics, - serviceMetrics: state.serviceMetrics, - topEndpointsList: state.topEndpointsList, - externalMetrics: state.externalMetrics, + externalErrCodeMetrics: state.metricsData.externalErrCodeMetricsItem, + serviceMetrics: state.metricsData.metricItems, + topEndpointsList: state.metricsData.topEndpointListItem, + externalMetrics: state.metricsData.externalMetricsItem, globalTime: state.globalTime, - dbOverviewMetrics: state.dbOverviewMetrics, - externalAvgDurationMetrics: state.externalAvgDurationMetrics, + dbOverviewMetrics: state.metricsData.dbOverviewMetricsItem, + externalAvgDurationMetrics: state.metricsData.externalMetricsAvgDurationItem, }; }; diff --git a/frontend/src/modules/Metrics/ServicesTable.tsx b/frontend/src/modules/Metrics/ServicesTable.tsx index 5da9568f98..5e4561d6dd 100644 --- a/frontend/src/modules/Metrics/ServicesTable.tsx +++ b/frontend/src/modules/Metrics/ServicesTable.tsx @@ -1,17 +1,12 @@ import React, { useEffect, useState } from "react"; -import { useLocation } from "react-router-dom"; import { NavLink } from "react-router-dom"; import { Button, Space, Spin, Table } from "antd"; import styled from "styled-components"; import { connect } from "react-redux"; import { SKIP_ONBOARDING } from "Src/constants/onboarding"; import ROUTES from "Src/constants/routes"; - -import { - getServicesList, - GlobalTime, - servicesListItem, -} from "../../store/actions"; +import { getServicesList, GlobalTime } from "../../store/actions"; +import { servicesListItem } from "../../store/actions/MetricsActions"; import { StoreState } from "../../store/reducers"; import { CustomModal } from "../../components/Modal"; @@ -75,7 +70,7 @@ const columns = [ key: "errorRate", sorter: (a: any, b: any) => a.errorRate - b.errorRate, // sortDirections: ['descend', 'ascend'], - render: (value: number) => (value).toFixed(2), + render: (value: number) => value.toFixed(2), }, { title: "Requests Per Second", @@ -88,8 +83,6 @@ const columns = [ ]; const _ServicesTable = (props: ServicesTableProps) => { - const search = useLocation().search; - const time_interval = new URLSearchParams(search).get("time"); const [initialDataFetch, setDataFetched] = useState(false); const [errorObject, setErrorObject] = useState({ message: "", @@ -210,7 +203,10 @@ const _ServicesTable = (props: ServicesTableProps) => { const mapStateToProps = ( state: StoreState, ): { servicesList: servicesListItem[]; globalTime: GlobalTime } => { - return { servicesList: state.servicesList, globalTime: state.globalTime }; + return { + servicesList: state.metricsData.serviceList, + globalTime: state.globalTime, + }; }; export const ServicesTable = connect(mapStateToProps, { diff --git a/frontend/src/modules/Metrics/TopEndpointsTable.tsx b/frontend/src/modules/Metrics/TopEndpointsTable.tsx index 6ab2022574..d87b2df92b 100644 --- a/frontend/src/modules/Metrics/TopEndpointsTable.tsx +++ b/frontend/src/modules/Metrics/TopEndpointsTable.tsx @@ -3,7 +3,7 @@ import { Table, Button, Tooltip } from "antd"; import { connect } from "react-redux"; import styled from "styled-components"; import { useHistory, useParams } from "react-router-dom"; -import { topEndpointListItem } from "../../store/actions/metrics"; +import { topEndpointListItem } from "../../store/actions/MetricsActions"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; import { GlobalTime } from "Src/store/actions"; import { StoreState } from "Src/store/reducers"; diff --git a/frontend/src/modules/RouteProvider.tsx b/frontend/src/modules/RouteProvider.tsx index 0680e912c8..6b1ebbf786 100644 --- a/frontend/src/modules/RouteProvider.tsx +++ b/frontend/src/modules/RouteProvider.tsx @@ -9,7 +9,7 @@ type State = { }; enum ActionTypes { - UPDATE_IS_LOADED = "UPDATE_IS_LOADED", + UPDATE_IS_LOADED = "ROUTE_IS_LOADED", } type Action = { diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index fe31b8d8fb..27785f95c3 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import { connect } from "react-redux"; import { RouteComponentProps } from "react-router-dom"; import { diff --git a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx index baf3271c64..5d9c1de26c 100644 --- a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx +++ b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx @@ -2,16 +2,11 @@ import React, { useState, useEffect } from "react"; import GenericVisualizations from "../Metrics/GenericVisualization"; import { Select, Card, Space, Form } from "antd"; import { connect } from "react-redux"; - import { StoreState } from "../../store/reducers"; -import { - customMetricsItem, - getFilteredTraceMetrics, - GlobalTime, - TraceFilters, -} from "../../store/actions"; +import { GlobalTime, TraceFilters } from "../../store/actions"; import { useRoute } from "../RouteProvider"; - +import { getFilteredTraceMetrics } from "../../store/actions/MetricsActions"; +import { customMetricsItem } from "../../store/actions/MetricsActions"; const { Option } = Select; const entity = [ @@ -81,8 +76,9 @@ interface TraceCustomVisualizationsProps { const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { const [selectedEntity, setSelectedEntity] = useState("calls"); const [selectedAggOption, setSelectedAggOption] = useState("count"); - const [selectedStep, setSelectedStep] = useState("60"); const { state } = useRoute(); + const [form] = Form.useForm(); + const selectedStep = "60"; // Step should be multiples of 60, 60 -> 1 min @@ -124,16 +120,6 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { //Custom metrics API called if time, tracefilters, selected entity or agg option changes - const [form] = Form.useForm(); - - function handleChange(value: string) { - // console.log(value); - } - - function handleFinish(value: string) { - // console.log(value); - } - // PNOTE - Can also use 'coordinate' option in antd Select for implementing this - https://ant.design/components/select/ const handleFormValuesChange = (changedValues: any) => { const formFieldName = Object.keys(changedValues)[0]; @@ -162,11 +148,9 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { return ( - {/* */}
Custom Visualizations
{ - @@ -207,7 +191,7 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { - @@ -216,7 +200,7 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { {/* Need heading for each option */} - @@ -239,7 +223,7 @@ const mapStateToProps = ( traceFilters: TraceFilters; } => { return { - filteredTraceMetrics: state.filteredTraceMetrics, + filteredTraceMetrics: state.metricsData.customMetricsItem, globalTime: state.globalTime, traceFilters: state.traceFilters, }; diff --git a/frontend/src/modules/Usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx index d02cc8eebb..65234b9cf0 100644 --- a/frontend/src/modules/Usage/UsageExplorer.tsx +++ b/frontend/src/modules/Usage/UsageExplorer.tsx @@ -1,19 +1,19 @@ -import React, { useEffect, useMemo, useState } from "react"; +import React, { useEffect, useState } from "react"; import { Bar } from "react-chartjs-2"; -import { Card, Form, Select, Space } from "antd"; +import { Card, Select, Space } from "antd"; import { connect } from "react-redux"; import { getServicesList, getUsageData, GlobalTime, - servicesListItem, usageDataItem, } from "../../store/actions"; import { StoreState } from "../../store/reducers"; import moment from "moment"; import { isOnboardingSkipped } from "../../utils/app"; import { useRoute } from "../RouteProvider"; +import { servicesListItem } from "../../store/actions/MetricsActions"; const { Option } = Select; interface UsageExplorerProps { @@ -212,7 +212,7 @@ const mapStateToProps = ( totalCount: totalCount, usageData: state.usageDate, globalTime: state.globalTime, - servicesList: state.servicesList, + servicesList: state.metricsData.serviceList, }; }; diff --git a/frontend/src/store/actions/MetricsActions/index.ts b/frontend/src/store/actions/MetricsActions/index.ts new file mode 100644 index 0000000000..24b7e2a725 --- /dev/null +++ b/frontend/src/store/actions/MetricsActions/index.ts @@ -0,0 +1,3 @@ +export * from "./metricsInterfaces"; +export * from "./metricsActionTypes"; +export * from "./metricsActions"; diff --git a/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts b/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts new file mode 100644 index 0000000000..13df5bdee7 --- /dev/null +++ b/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts @@ -0,0 +1,34 @@ +import { + externalErrCodeMetricsActions, + externalMetricsAvgDurationAction, + getDbOverViewMetricsAction, + getExternalMetricsAction, + getFilteredTraceMetricsAction, + getServiceMetricsAction, + getServicesListAction, + getTopEndpointsAction, +} from "./metricsInterfaces"; + +export enum MetricsActionTypes { + updateInput = "UPDATE_INPUT", + fetchTraces = "FETCH_TRACES", + fetchTraceItem = "FETCH_TRACE_ITEM", + getServicesList = "GET_SERVICE_LIST", + getServiceMetrics = "GET_SERVICE_METRICS", + getAvgDurationMetrics = "GET_AVG_DURATION_METRICS", + getErrCodeMetrics = "GET_ERR_CODE_METRICS", + getDbOverviewMetrics = "GET_DB_OVERVIEW_METRICS", + getExternalMetrics = "GET_EXTERNAL_METRICS", + getTopEndpoints = "GET_TOP_ENDPOINTS", + getFilteredTraceMetrics = "GET_FILTERED_TRACE_METRICS", +} + +export type MetricsActions = + | getServicesListAction + | getServiceMetricsAction + | getTopEndpointsAction + | getFilteredTraceMetricsAction + | getExternalMetricsAction + | externalErrCodeMetricsActions + | getDbOverViewMetricsAction + | externalMetricsAvgDurationAction; diff --git a/frontend/src/store/actions/MetricsActions/metricsActions.ts b/frontend/src/store/actions/MetricsActions/metricsActions.ts new file mode 100644 index 0000000000..e0889df5e9 --- /dev/null +++ b/frontend/src/store/actions/MetricsActions/metricsActions.ts @@ -0,0 +1,190 @@ +import { Dispatch } from "redux"; +import api, { apiV1 } from "../../../api"; + +import { GlobalTime } from "../global"; +import { toUTCEpoch } from "../../../utils/timeUtils"; +import { MetricsActionTypes } from "./metricsActionTypes"; +import * as MetricsInterfaces from "./metricsInterfaces"; + +export const getServicesList = (globalTime: GlobalTime) => { + return async (dispatch: Dispatch) => { + let request_string = + "/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime; + + const response = await api.get( + apiV1 + request_string, + ); + + dispatch({ + type: MetricsActionTypes.getServicesList, + payload: response.data, + //PNOTE - response.data in the axios response has the actual API response + }); + }; +}; + +export const getDbOverViewMetrics = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/dbOverview?service=" + + serviceName + + "&start=" + + globalTime.minTime + + "&end=" + + globalTime.maxTime + + "&step=60"; + const response = await api.get( + apiV1 + request_string, + ); + dispatch({ + type: MetricsActionTypes.getDbOverviewMetrics, + payload: response.data, + }); + }; +}; + +export const getExternalMetrics = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/external?service=" + + serviceName + + "&start=" + + globalTime.minTime + + "&end=" + + globalTime.maxTime + + "&step=60"; + const response = await api.get( + apiV1 + request_string, + ); + dispatch({ + type: MetricsActionTypes.getExternalMetrics, + payload: response.data, + }); + }; +}; + +export const getExternalAvgDurationMetrics = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/externalAvgDuration?service=" + + serviceName + + "&start=" + + globalTime.minTime + + "&end=" + + globalTime.maxTime + + "&step=60"; + + const response = await api.get< + MetricsInterfaces.externalMetricsAvgDurationItem[] + >(apiV1 + request_string); + dispatch({ + type: MetricsActionTypes.getAvgDurationMetrics, + payload: response.data, + }); + }; +}; +export const getExternalErrCodeMetrics = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/externalErrors?service=" + + serviceName + + "&start=" + + globalTime.minTime + + "&end=" + + globalTime.maxTime + + "&step=60"; + const response = await api.get< + MetricsInterfaces.externalErrCodeMetricsItem[] + >(apiV1 + request_string); + + dispatch({ + type: MetricsActionTypes.getErrCodeMetrics, + payload: response.data, + }); + }; +}; + +export const getServicesMetrics = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/overview?service=" + + serviceName + + "&start=" + + globalTime.minTime + + "&end=" + + globalTime.maxTime + + "&step=60"; + const response = await api.get( + apiV1 + request_string, + ); + + dispatch({ + type: MetricsActionTypes.getServiceMetrics, + payload: response.data, + //PNOTE - response.data in the axios response has the actual API response + }); + }; +}; + +export const getTopEndpoints = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/top_endpoints?service=" + + serviceName + + "&start=" + + globalTime.minTime + + "&end=" + + globalTime.maxTime; + const response = await api.get( + apiV1 + request_string, + ); + + dispatch({ + type: MetricsActionTypes.getTopEndpoints, + payload: response.data, + //PNOTE - response.data in the axios response has the actual API response + }); + }; +}; + +export const getFilteredTraceMetrics = ( + filter_params: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/spans/aggregates?start=" + + toUTCEpoch(globalTime.minTime) + + "&end=" + + toUTCEpoch(globalTime.maxTime) + + "&" + + filter_params; + const response = await api.get( + apiV1 + request_string, + ); + + dispatch({ + type: MetricsActionTypes.getFilteredTraceMetrics, + payload: response.data, + //PNOTE - response.data in the axios response has the actual API response + }); + }; +}; diff --git a/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts b/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts new file mode 100644 index 0000000000..c63967e64b --- /dev/null +++ b/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts @@ -0,0 +1,98 @@ +import { MetricsActionTypes } from "./metricsActionTypes"; + +export interface servicesListItem { + serviceName: string; + p99: number; + avgDuration: number; + numCalls: number; + callRate: number; + numErrors: number; + errorRate: number; +} + +export interface metricItem { + timestamp: number; + p50: number; + p95: number; + p99: number; + numCalls: number; + callRate: number; + numErrors: number; + errorRate: number; +} + +export interface externalMetricsAvgDurationItem { + avgDuration: number; + timestamp: number; +} + +export interface externalErrCodeMetricsItem { + externalHttpUrl: string; + numCalls: number; + timestamp: number; + callRate: number; +} +export interface topEndpointListItem { + p50: number; + p90: number; + p99: number; + numCalls: number; + name: string; +} + +export interface externalMetricsItem { + avgDuration: number; + callRate: number; + externalHttpUrl: string; + numCalls: number; + timestamp: number; +} + +export interface dbOverviewMetricsItem { + avgDuration: number; + callRate: number; + dbSystem: string; + numCalls: number; + timestamp: number; +} + +export interface customMetricsItem { + timestamp: number; + value: number; +} + +export interface getServicesListAction { + type: MetricsActionTypes.getServicesList; + payload: servicesListItem[]; +} + +export interface externalErrCodeMetricsActions { + type: MetricsActionTypes.getErrCodeMetrics; + payload: externalErrCodeMetricsItem[]; +} +export interface externalMetricsAvgDurationAction { + type: MetricsActionTypes.getAvgDurationMetrics; + payload: externalMetricsAvgDurationItem[]; +} +export interface getServiceMetricsAction { + type: MetricsActionTypes.getServiceMetrics; + payload: metricItem[]; +} +export interface getExternalMetricsAction { + type: MetricsActionTypes.getExternalMetrics; + payload: externalMetricsItem[]; +} + +export interface getDbOverViewMetricsAction { + type: MetricsActionTypes.getDbOverviewMetrics; + payload: dbOverviewMetricsItem[]; +} +export interface getTopEndpointsAction { + type: MetricsActionTypes.getTopEndpoints; + payload: topEndpointListItem[]; +} + +export interface getFilteredTraceMetricsAction { + type: MetricsActionTypes.getFilteredTraceMetrics; + payload: customMetricsItem[]; +} diff --git a/frontend/src/store/actions/index.ts b/frontend/src/store/actions/index.ts index 28fb2a715f..37c75e41d7 100644 --- a/frontend/src/store/actions/index.ts +++ b/frontend/src/store/actions/index.ts @@ -2,6 +2,6 @@ export * from "./types"; export * from "./traceFilters"; export * from "./serviceMap"; export * from "./traces"; -export * from "./metrics"; +export * from "./MetricsActions"; export * from "./usage"; export * from "./global"; diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts deleted file mode 100644 index 2643f9028f..0000000000 --- a/frontend/src/store/actions/metrics.ts +++ /dev/null @@ -1,277 +0,0 @@ -import { Dispatch } from "redux"; -import api, { apiV1 } from "../../api"; - -import { GlobalTime } from "./global"; -import { ActionTypes } from "./types"; -import { Token } from "../../utils/token"; -import { toUTCEpoch } from "../../utils/timeUtils"; - -export interface servicesListItem { - serviceName: string; - p99: number; - avgDuration: number; - numCalls: number; - callRate: number; - numErrors: number; - errorRate: number; -} - -export interface metricItem { - timestamp: number; - p50: number; - p95: number; - p99: number; - numCalls: number; - callRate: number; - numErrors: number; - errorRate: number; -} - -export interface externalMetricsAvgDurationItem { - avgDuration: number; - timestamp: number; -} - -export interface externalErrCodeMetricsItem { - errorRate: number; - externalHttpUrl: string; - numErrors: number; - timestamp: number; -} -export interface topEndpointListItem { - p50: number; - p90: number; - p99: number; - numCalls: number; - name: string; -} - -export interface externalMetricsItem { - avgDuration: number; - callRate: number; - externalHttpUrl: string; - numCalls: number; - timestamp: number; -} - -export interface dbOverviewMetricsItem { - avgDuration: number; - callRate: number; - dbSystem: string; - numCalls: number; - timestamp: number; -} - -export interface customMetricsItem { - timestamp: number; - value: number; -} - -export interface getServicesListAction { - type: ActionTypes.getServicesList; - payload: servicesListItem[]; -} - -export interface externalErrCodeMetricsActions { - type: ActionTypes.getErrCodeMetrics; - payload: externalErrCodeMetricsItem[]; -} -export interface externalMetricsAvgDurationAction { - type: ActionTypes.getAvgDurationMetrics; - payload: externalMetricsAvgDurationItem[]; -} -export interface getServiceMetricsAction { - type: ActionTypes.getServiceMetrics; - payload: metricItem[]; -} -export interface getExternalMetricsAction { - type: ActionTypes.getExternalMetrics; - payload: externalMetricsItem[]; -} - -export interface getDbOverViewMetricsAction { - type: ActionTypes.getDbOverviewMetrics; - payload: dbOverviewMetricsItem[]; -} -export interface getTopEndpointsAction { - type: ActionTypes.getTopEndpoints; - payload: topEndpointListItem[]; -} - -export interface getFilteredTraceMetricsAction { - type: ActionTypes.getFilteredTraceMetrics; - payload: customMetricsItem[]; -} - -export const getServicesList = (globalTime: GlobalTime) => { - return async (dispatch: Dispatch) => { - let request_string = - "/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime; - - const response = await api.get(apiV1 + request_string); - - dispatch({ - type: ActionTypes.getServicesList, - payload: response.data, - //PNOTE - response.data in the axios response has the actual API response - }); - }; -}; - -export const getDbOverViewMetrics = ( - serviceName: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/service/dbOverview?service=" + - serviceName + - "&start=" + - globalTime.minTime + - "&end=" + - globalTime.maxTime + - "&step=60"; - const response = await api.get( - apiV1 + request_string, - ); - dispatch({ - type: ActionTypes.getDbOverviewMetrics, - payload: response.data, - }); - }; -}; - -export const getExternalMetrics = ( - serviceName: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/service/external?service=" + - serviceName + - "&start=" + - globalTime.minTime + - "&end=" + - globalTime.maxTime + - "&step=60"; - const response = await api.get(apiV1 + request_string); - dispatch({ - type: ActionTypes.getExternalMetrics, - payload: response.data, - }); - }; -}; - -export const getExternalAvgDurationMetrics = ( - serviceName: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/service/externalAvgDuration?service=" + - serviceName + - "&start=" + - globalTime.minTime + - "&end=" + - globalTime.maxTime + - "&step=60"; - - const response = await api.get( - apiV1 + request_string, - ); - dispatch({ - type: ActionTypes.getAvgDurationMetrics, - payload: response.data, - }); - }; -}; -export const getExternalErrCodeMetrics = ( - serviceName: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/service/externalErrors?service=" + - serviceName + - "&start=" + - globalTime.minTime + - "&end=" + - globalTime.maxTime + - "&step=60"; - const response = await api.get( - apiV1 + request_string, - ); - - dispatch({ - type: ActionTypes.getErrCodeMetrics, - payload: response.data, - }); - }; -}; - -export const getServicesMetrics = ( - serviceName: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/service/overview?service=" + - serviceName + - "&start=" + - globalTime.minTime + - "&end=" + - globalTime.maxTime + - "&step=60"; - const response = await api.get(apiV1 + request_string); - - dispatch({ - type: ActionTypes.getServiceMetrics, - payload: response.data, - //PNOTE - response.data in the axios response has the actual API response - }); - }; -}; - -export const getTopEndpoints = ( - serviceName: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/service/top_endpoints?service=" + - serviceName + - "&start=" + - globalTime.minTime + - "&end=" + - globalTime.maxTime; - const response = await api.get(apiV1 + request_string); - - dispatch({ - type: ActionTypes.getTopEndpoints, - payload: response.data, - //PNOTE - response.data in the axios response has the actual API response - }); - }; -}; - -export const getFilteredTraceMetrics = ( - filter_params: string, - globalTime: GlobalTime, -) => { - return async (dispatch: Dispatch) => { - let request_string = - "/spans/aggregates?start=" + - toUTCEpoch(globalTime.minTime) + - "&end=" + - toUTCEpoch(globalTime.maxTime) + - "&" + - filter_params; - const response = await api.get(apiV1 + request_string); - - dispatch({ - type: ActionTypes.getFilteredTraceMetrics, - payload: response.data, - //PNOTE - response.data in the axios response has the actual API response - }); - }; -}; diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts index bf05b41d70..e40c8c6707 100644 --- a/frontend/src/store/actions/types.ts +++ b/frontend/src/store/actions/types.ts @@ -1,36 +1,16 @@ import { FetchTracesAction, FetchTraceItemAction } from "./traces"; import { updateTraceFiltersAction, updateInputTagAction } from "./traceFilters"; -import { - getServicesListAction, - getServiceMetricsAction, - externalErrCodeMetricsActions, - externalMetricsAvgDurationAction, - getExternalMetricsAction, - getTopEndpointsAction, - getFilteredTraceMetricsAction, - getDbOverViewMetricsAction, -} from "./metrics"; + import { serviceMapItemAction, servicesAction } from "./serviceMap"; import { getUsageDataAction } from "./usage"; import { updateTimeIntervalAction } from "./global"; export enum ActionTypes { updateTraceFilters = "UPDATE_TRACES_FILTER", - updateInput = "UPDATE_INPUT", - fetchTraces = "FETCH_TRACES", - fetchTraceItem = "FETCH_TRACE_ITEM", - getServicesList = "GET_SERVICE_LIST", - getServiceMetrics = "GET_SERVICE_METRICS", - getAvgDurationMetrics = "GET_AVG_DURATION_METRICS", - getErrCodeMetrics = "GET_ERR_CODE_METRICS", - getDbOverviewMetrics = "GET_DB_OVERVIEW_METRICS", - getExternalMetrics = "GET_EXTERNAL_METRICS", - getTopEndpoints = "GET_TOP_ENDPOINTS", - getUsageData = "GET_USAGE_DATE", updateTimeInterval = "UPDATE_TIME_INTERVAL", - getFilteredTraceMetrics = "GET_FILTERED_TRACE_METRICS", getServiceMapItems = "GET_SERVICE_MAP_ITEMS", getServices = "GET_SERVICES", + getUsageData = "GET_USAGE_DATE", } export type Action = @@ -38,15 +18,7 @@ export type Action = | FetchTracesAction | updateTraceFiltersAction | updateInputTagAction - | getServicesListAction - | getServiceMetricsAction - | getTopEndpointsAction | getUsageDataAction | updateTimeIntervalAction - | getFilteredTraceMetricsAction - | getExternalMetricsAction - | externalErrCodeMetricsActions - | getDbOverViewMetricsAction | servicesAction - | serviceMapItemAction - | externalMetricsAvgDurationAction; + | serviceMapItemAction; diff --git a/frontend/src/store/actions/usage.ts b/frontend/src/store/actions/usage.ts index a46b684f4d..fb29114b3b 100644 --- a/frontend/src/store/actions/usage.ts +++ b/frontend/src/store/actions/usage.ts @@ -2,7 +2,6 @@ import { Dispatch } from "redux"; import api, { apiV1 } from "../../api"; import { ActionTypes } from "./types"; -import { GlobalTime } from "./global"; import { toUTCEpoch } from "../../utils/timeUtils"; export interface usageDataItem { diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index 8c33fde3d5..696a7f1750 100644 --- a/frontend/src/store/reducers/index.ts +++ b/frontend/src/store/reducers/index.ts @@ -2,48 +2,25 @@ import { combineReducers } from "redux"; import { traceResponseNew, spansWSameTraceIDResponse, - servicesListItem, - metricItem, - topEndpointListItem, - externalMetricsItem, - externalMetricsAvgDurationItem, usageDataItem, GlobalTime, - externalErrCodeMetricsItem, serviceMapStore, - customMetricsItem, TraceFilters, } from "../actions"; import { updateGlobalTimeReducer } from "./global"; -import { - filteredTraceMetricsReducer, - serviceMetricsReducer, - externalErrCodeMetricsReducer, - serviceTableReducer, - topEndpointsReducer, - dbOverviewMetricsReducer, - externalMetricsReducer, - externalAvgDurationMetricsReducer, -} from "./metrics"; +import { MetricsInitialState, metricsReducer } from "./metrics"; import { traceFiltersReducer, inputsReducer } from "./traceFilters"; import { traceItemReducer, tracesReducer } from "./traces"; import { usageDataReducer } from "./usage"; import { ServiceMapReducer } from "./serviceMap"; + export interface StoreState { + metricsData: MetricsInitialState; traceFilters: TraceFilters; - inputTag: string; traces: traceResponseNew; traceItem: spansWSameTraceIDResponse; - servicesList: servicesListItem[]; - serviceMetrics: metricItem[]; - topEndpointsList: topEndpointListItem[]; - externalMetrics: externalMetricsItem[]; - dbOverviewMetrics: externalMetricsItem[]; - externalAvgDurationMetrics: externalMetricsAvgDurationItem[]; - externalErrCodeMetrics: externalErrCodeMetricsItem[]; usageDate: usageDataItem[]; globalTime: GlobalTime; - filteredTraceMetrics: customMetricsItem[]; serviceMap: serviceMapStore; } @@ -52,16 +29,9 @@ const reducers = combineReducers({ inputTag: inputsReducer, traces: tracesReducer, traceItem: traceItemReducer, - servicesList: serviceTableReducer, - serviceMetrics: serviceMetricsReducer, - dbOverviewMetrics: dbOverviewMetricsReducer, - topEndpointsList: topEndpointsReducer, - externalAvgDurationMetrics: externalAvgDurationMetricsReducer, - externalMetrics: externalMetricsReducer, - externalErrCodeMetrics: externalErrCodeMetricsReducer, usageDate: usageDataReducer, globalTime: updateGlobalTimeReducer, - filteredTraceMetrics: filteredTraceMetricsReducer, + metricsData: metricsReducer, serviceMap: ServiceMapReducer, }); diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index f1afd73738..f469186525 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/frontend/src/store/reducers/metrics.ts @@ -1,6 +1,4 @@ import { - ActionTypes, - Action, servicesListItem, metricItem, topEndpointListItem, @@ -9,10 +7,21 @@ import { externalMetricsItem, dbOverviewMetricsItem, externalMetricsAvgDurationItem, -} from "../actions"; +} from "../actions/MetricsActions"; +import { MetricsActionTypes as ActionTypes } from "../actions/MetricsActions/metricsActionTypes"; -export const serviceTableReducer = ( - state: servicesListItem[] = [ +export type MetricsInitialState = { + serviceList?: servicesListItem[]; + metricItems?: metricItem[]; + topEndpointListItem?: topEndpointListItem[]; + externalMetricsAvgDurationItem?: externalMetricsAvgDurationItem[]; + externalErrCodeMetricsItem?: externalErrCodeMetricsItem[]; + externalMetricsItem?: externalMetricsItem[]; + dbOverviewMetricsItem?: dbOverviewMetricsItem[]; + customMetricsItem?: customMetricsItem[]; +}; +export const metricsInitialState: MetricsInitialState = { + serviceList: [ { serviceName: "", p99: 0, @@ -23,22 +32,11 @@ export const serviceTableReducer = ( errorRate: 0, }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getServicesList: - return action.payload; - default: - return state; - } -}; - -export const serviceMetricsReducer = ( - state: metricItem[] = [ + metricItems: [ { timestamp: 0, p50: 0, - p90: 0, + p95: 0, p99: 0, numCalls: 0, callRate: 0.0, @@ -46,49 +44,22 @@ export const serviceMetricsReducer = ( errorRate: 0, }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getServiceMetrics: - return action.payload; - default: - return state; - } -}; - -export const topEndpointsReducer = ( - state: topEndpointListItem[] = [ - { p50: 0, p90: 0, p99: 0, numCalls: 0, name: "" }, + topEndpointListItem: [ + { + p50: 0, + p90: 0, + p99: 0, + numCalls: 0, + name: "", + }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getTopEndpoints: - return action.payload; - default: - return state; - } -}; - -export const externalAvgDurationMetricsReducer = ( - state: externalMetricsAvgDurationItem[] = [ + externalMetricsAvgDurationItem: [ { avgDuration: 0, timestamp: 0, }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getAvgDurationMetrics: - return action.payload; - default: - return state; - } -}; - -export const externalErrCodeMetricsReducer = ( - state: externalErrCodeMetricsItem[] = [ + externalErrCodeMetricsItem: [ { callRate: 0, externalHttpUrl: "", @@ -96,18 +67,7 @@ export const externalErrCodeMetricsReducer = ( timestamp: 0, }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getErrCodeMetrics: - return action.payload; - default: - return state; - } -}; - -export const externalMetricsReducer = ( - state: externalMetricsItem[] = [ + externalMetricsItem: [ { avgDuration: 0, callRate: 0, @@ -116,18 +76,7 @@ export const externalMetricsReducer = ( timestamp: 0, }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getExternalMetrics: - return action.payload; - default: - return state; - } -}; - -export const dbOverviewMetricsReducer = ( - state: dbOverviewMetricsItem[] = [ + dbOverviewMetricsItem: [ { avgDuration: 0, callRate: 0, @@ -136,24 +85,68 @@ export const dbOverviewMetricsReducer = ( timestamp: 0, }, ], - action: Action, -) => { - switch (action.type) { - case ActionTypes.getDbOverviewMetrics: - return action.payload; - default: - return state; - } + customMetricsItem: [ + { + timestamp: 0, + value: 0, + }, + ], }; -export const filteredTraceMetricsReducer = ( - state: customMetricsItem[] = [{ timestamp: 0, value: 0 }], - action: Action, +type ActionType = { + type: string; + payload: any; +}; + +export const metricsReducer = ( + state: MetricsInitialState = metricsInitialState, + action: ActionType, ) => { switch (action.type) { case ActionTypes.getFilteredTraceMetrics: - return action.payload; + return { + ...state, + customMetricsItem: action.payload, + }; + case ActionTypes.getServiceMetrics: + return { + ...state, + metricItems: action.payload, + }; + case ActionTypes.getDbOverviewMetrics: + return { + ...state, + dbOverviewMetricsItem: action.payload, + }; + case ActionTypes.getExternalMetrics: + return { + ...state, + externalMetricsItem: action.payload, + }; + case ActionTypes.getTopEndpoints: + return { + ...state, + topEndpointListItem: action.payload, + }; + case ActionTypes.getErrCodeMetrics: + return { + ...state, + externalErrCodeMetricsItem: action.payload, + }; + case ActionTypes.getAvgDurationMetrics: + return { + ...state, + externalMetricsAvgDurationItem: action.payload, + }; + + case ActionTypes.getServicesList: + return { + ...state, + serviceList: action.payload, + }; default: - return state; + return { + ...state, + }; } }; From 872c8adbbb3b6e61d4347f9dde5f3c4cff291aa0 Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Mon, 31 May 2021 21:06:39 +0530 Subject: [PATCH 6/9] feat: update response param p90 to p95 --- frontend/src/modules/Metrics/TopEndpointsTable.tsx | 8 ++++---- frontend/src/modules/Traces/TraceCustomVisualizations.tsx | 2 +- frontend/src/store/actions/metrics.ts | 2 +- frontend/src/store/reducers/metrics.ts | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/modules/Metrics/TopEndpointsTable.tsx b/frontend/src/modules/Metrics/TopEndpointsTable.tsx index 6ab2022574..ae0336b1b0 100644 --- a/frontend/src/modules/Metrics/TopEndpointsTable.tsx +++ b/frontend/src/modules/Metrics/TopEndpointsTable.tsx @@ -85,10 +85,10 @@ const _TopEndpointsTable = (props: TopEndpointsTableProps) => { render: (value: number) => (value / 1000000).toFixed(2), }, { - title: "P90 (in ms)", - dataIndex: "p90", - key: "p90", - sorter: (a: any, b: any) => a.p90 - b.p90, + title: "P95 (in ms)", + dataIndex: "p95", + key: "p95", + sorter: (a: any, b: any) => a.p95 - b.p95, // sortDirections: ['descend', 'ascend'], render: (value: number) => (value / 1000000).toFixed(2), }, diff --git a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx index baf3271c64..728fa3e741 100644 --- a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx +++ b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx @@ -52,7 +52,7 @@ const aggregation_options = [ // options_available: [ {title:'Avg', dataindex:'avg'}, {title:'Max', dataindex:'max'},{title:'Min', dataindex:'min'}, {title:'p50', dataindex:'p50'},{title:'p90', dataindex:'p90'}, {title:'p95', dataindex:'p95'}] options_available: [ { title: "p50", dataindex: "p50" }, - { title: "p90", dataindex: "p90" }, + { title: "p95", dataindex: "p95" }, { title: "p99", dataindex: "p99" }, ], }, diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts index 2643f9028f..c4d8bc0676 100644 --- a/frontend/src/store/actions/metrics.ts +++ b/frontend/src/store/actions/metrics.ts @@ -40,7 +40,7 @@ export interface externalErrCodeMetricsItem { } export interface topEndpointListItem { p50: number; - p90: number; + p95: number; p99: number; numCalls: number; name: string; diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index f1afd73738..4e45077448 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/frontend/src/store/reducers/metrics.ts @@ -38,7 +38,7 @@ export const serviceMetricsReducer = ( { timestamp: 0, p50: 0, - p90: 0, + p95: 0, p99: 0, numCalls: 0, callRate: 0.0, @@ -58,7 +58,7 @@ export const serviceMetricsReducer = ( export const topEndpointsReducer = ( state: topEndpointListItem[] = [ - { p50: 0, p90: 0, p99: 0, numCalls: 0, name: "" }, + { p50: 0, p95: 0, p99: 0, numCalls: 0, name: "" }, ], action: Action, ) => { From 4cd0088029e7d6112e07a05130c40fdd43dbd4b5 Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Mon, 31 May 2021 21:26:27 +0530 Subject: [PATCH 7/9] fix: move traces actions to common action types --- frontend/src/store/actions/MetricsActions/metricsActionTypes.ts | 2 -- frontend/src/store/actions/types.ts | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts b/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts index 13df5bdee7..e623ed4590 100644 --- a/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts +++ b/frontend/src/store/actions/MetricsActions/metricsActionTypes.ts @@ -11,8 +11,6 @@ import { export enum MetricsActionTypes { updateInput = "UPDATE_INPUT", - fetchTraces = "FETCH_TRACES", - fetchTraceItem = "FETCH_TRACE_ITEM", getServicesList = "GET_SERVICE_LIST", getServiceMetrics = "GET_SERVICE_METRICS", getAvgDurationMetrics = "GET_AVG_DURATION_METRICS", diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts index e40c8c6707..d1f68ca1b0 100644 --- a/frontend/src/store/actions/types.ts +++ b/frontend/src/store/actions/types.ts @@ -11,6 +11,8 @@ export enum ActionTypes { getServiceMapItems = "GET_SERVICE_MAP_ITEMS", getServices = "GET_SERVICES", getUsageData = "GET_USAGE_DATE", + fetchTraces = "FETCH_TRACES", + fetchTraceItem = "FETCH_TRACE_ITEM", } export type Action = From 8d6fb7f8976fffb07a97dfa0d19b92f6a1fcc82d Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Mon, 31 May 2021 21:45:03 +0530 Subject: [PATCH 8/9] feat: update zoom pixels based on screen width --- frontend/src/modules/Servicemap/utils.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index fb7abfb57a..347b07851b 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -79,10 +79,11 @@ export const getZoomPx = (): number => { if (width < 1400) { return 190; } else if (width > 1400 && width < 1700) { - return 380; + return 400; } else if (width > 1700) { - return 470; + return 485; } + return 190; }; export const getTooltip = (node: { From 13bec63fcabeda20ed2a62e27e6579f07bc11308 Mon Sep 17 00:00:00 2001 From: Nidhi Tandon Date: Mon, 31 May 2021 21:59:36 +0530 Subject: [PATCH 9/9] feat: update p90 to p95 --- frontend/src/modules/Traces/TraceCustomVisualizations.tsx | 2 +- frontend/src/store/actions/MetricsActions/metricsInterfaces.ts | 2 +- frontend/src/store/actions/metrics.ts | 0 frontend/src/store/reducers/metrics.ts | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 frontend/src/store/actions/metrics.ts diff --git a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx index d525d4b5bb..c84b157f7f 100644 --- a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx +++ b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx @@ -44,7 +44,7 @@ const aggregation_options = [ { linked_entity: "duration", default_selected: { title: "p99", dataindex: "p99" }, - // options_available: [ {title:'Avg', dataindex:'avg'}, {title:'Max', dataindex:'max'},{title:'Min', dataindex:'min'}, {title:'p50', dataindex:'p50'},{title:'p90', dataindex:'p90'}, {title:'p95', dataindex:'p95'}] + // options_available: [ {title:'Avg', dataindex:'avg'}, {title:'Max', dataindex:'max'},{title:'Min', dataindex:'min'}, {title:'p50', dataindex:'p50'},{title:'p95', dataindex:'p95'}, {title:'p95', dataindex:'p95'}] options_available: [ { title: "p50", dataindex: "p50" }, { title: "p95", dataindex: "p95" }, diff --git a/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts b/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts index c63967e64b..3e701e485e 100644 --- a/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts +++ b/frontend/src/store/actions/MetricsActions/metricsInterfaces.ts @@ -34,7 +34,7 @@ export interface externalErrCodeMetricsItem { } export interface topEndpointListItem { p50: number; - p90: number; + p95: number; p99: number; numCalls: number; name: string; diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index f469186525..94b1ff1aec 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/frontend/src/store/reducers/metrics.ts @@ -47,7 +47,7 @@ export const metricsInitialState: MetricsInitialState = { topEndpointListItem: [ { p50: 0, - p90: 0, + p95: 0, p99: 0, numCalls: 0, name: "",