From dff78eb50801775e76c4904c7ea9e55682351192 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Mon, 30 Aug 2021 14:05:49 +0200 Subject: [PATCH] Switch from Reach Router to React Router (#9273) We want to upgrade to React 17, but Reach Router does not work with React 17: https://github.com/reach/router/issues/429 Also, the Reach + React Router projects announced an intention to join forces and just continue as React Router: https://reacttraining.com/blog/reach-react-router-future/ Signed-off-by: Julius Volz --- web/ui/react-app/package-lock.json | 336 +++++++++++++----- web/ui/react-app/package.json | 4 +- web/ui/react-app/src/App.test.tsx | 4 +- web/ui/react-app/src/App.tsx | 54 ++- web/ui/react-app/src/Navbar.tsx | 22 +- web/ui/react-app/src/pages/alerts/Alerts.tsx | 3 +- .../pages/alerts/CollapsibleAlertPanel.tsx | 2 +- web/ui/react-app/src/pages/config/Config.tsx | 3 +- web/ui/react-app/src/pages/flags/Flags.tsx | 3 +- .../react-app/src/pages/graph/PanelList.tsx | 5 +- web/ui/react-app/src/pages/rules/Rules.tsx | 3 +- .../src/pages/rules/RulesContent.tsx | 5 +- .../pages/serviceDiscovery/LabelsTable.tsx | 3 +- .../src/pages/serviceDiscovery/Services.tsx | 3 +- web/ui/react-app/src/pages/status/Status.tsx | 3 +- .../react-app/src/pages/targets/Targets.tsx | 3 +- .../src/pages/tsdbStatus/TSDBStatus.tsx | 3 +- 17 files changed, 312 insertions(+), 147 deletions(-) diff --git a/web/ui/react-app/package-lock.json b/web/ui/react-app/package-lock.json index 7a40e707b..88cba3733 100644 --- a/web/ui/react-app/package-lock.json +++ b/web/ui/react-app/package-lock.json @@ -25,7 +25,6 @@ "@fortawesome/free-solid-svg-icons": "^5.7.1", "@fortawesome/react-fontawesome": "^0.1.4", "@nexucis/fuzzy": "^0.2.2", - "@reach/router": "^1.2.1", "bootstrap": "^4.6.0", "codemirror-promql": "^0.17.0", "css.escape": "^1.5.1", @@ -42,6 +41,7 @@ "react-copy-to-clipboard": "^5.0.1", "react-dom": "^16.7.0", "react-resize-detector": "^5.0.7", + "react-router-dom": "^5.2.1", "react-scripts": "3.4.4", "react-test-renderer": "^16.9.0", "reactstrap": "^8.9.0", @@ -61,11 +61,11 @@ "@types/jquery": "^3.5.1", "@types/moment-timezone": "^0.5.10", "@types/node": "^12.11.1", - "@types/reach__router": "^1.2.6", "@types/react": "^16.8.2", "@types/react-copy-to-clipboard": "^5.0.0", "@types/react-dom": "^16.8.0", "@types/react-resize-detector": "^5.0.0", + "@types/react-router-dom": "^5.1.8", "@types/reactstrap": "^8.7.2", "@types/sanitize-html": "^1.20.2", "@types/sinon": "^9.0.4", @@ -2066,20 +2066,6 @@ "node": ">= 6" } }, - "node_modules/@reach/router": { - "version": "1.3.4", - "license": "MIT", - "dependencies": { - "create-react-context": "0.3.0", - "invariant": "^2.2.3", - "prop-types": "^15.6.1", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": "15.x || 16.x || 16.4.0-alpha.0911da3", - "react-dom": "15.x || 16.x || 16.4.0-alpha.0911da3" - } - }, "node_modules/@sinonjs/commons": { "version": "1.8.3", "dev": true, @@ -2363,6 +2349,12 @@ "version": "16.4.6", "license": "MIT" }, + "node_modules/@types/history": { + "version": "4.7.9", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz", + "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==", + "dev": true + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.3", "license": "MIT" @@ -2585,24 +2577,6 @@ "version": "1.5.5", "license": "MIT" }, - "node_modules/@types/reach__router": { - "version": "1.3.9", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/reach__router/node_modules/@types/react": { - "version": "17.0.15", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, "node_modules/@types/react": { "version": "16.14.11", "dev": true, @@ -2657,6 +2631,27 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-router": { + "version": "5.1.16", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz", + "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==", + "dev": true, + "dependencies": { + "@types/history": "*", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.8.tgz", + "integrity": "sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==", + "dev": true, + "dependencies": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@types/react-test-renderer": { "version": "17.0.1", "dev": true, @@ -5873,18 +5868,6 @@ "sha.js": "^2.4.8" } }, - "node_modules/create-react-context": { - "version": "0.3.0", - "license": "MIT", - "dependencies": { - "gud": "^1.0.0", - "warning": "^4.0.3" - }, - "peerDependencies": { - "prop-types": "^15.0.0", - "react": "^0.14.0 || ^15.0.0 || ^16.0.0" - } - }, "node_modules/crelt": { "version": "1.0.5", "license": "MIT" @@ -8497,6 +8480,19 @@ "version": "1.1.0", "license": "MIT" }, + "node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "license": "MIT", @@ -8506,6 +8502,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/hosted-git-info": { "version": "2.8.9", "license": "ISC" @@ -12056,7 +12060,6 @@ }, "node_modules/path-to-regexp": { "version": "1.8.0", - "dev": true, "license": "MIT", "dependencies": { "isarray": "0.0.1" @@ -12064,7 +12067,6 @@ }, "node_modules/path-to-regexp/node_modules/isarray": { "version": "0.0.1", - "dev": true, "license": "MIT" }, "node_modules/path-type": { @@ -13880,6 +13882,56 @@ "react-dom": "^16.0.0" } }, + "node_modules/react-router-dom": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.1.tgz", + "integrity": "sha512-xhFFkBGVcIVPbWM2KEYzED+nuHQPmulVa7sqIs3ESxzYd1pYg8N8rxPnQ4T2o1zu/2QeDUWcaqST131SO1LR3w==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom/node_modules/react-router": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom/node_modules/react-router/node_modules/mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/react-scripts": { "version": "3.4.4", "license": "MIT", @@ -14817,6 +14869,11 @@ "node": ">=4" } }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "node_modules/resolve-url": { "version": "0.2.1", "license": "MIT" @@ -16263,7 +16320,6 @@ "node_modules/tempusdominus-core/node_modules/moment": { "version": "2.24.0", "license": "MIT", - "peer": true, "engines": { "node": "*" } @@ -16505,6 +16561,16 @@ "version": "0.3.0", "license": "MIT" }, + "node_modules/tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmp": { "version": "0.0.33", "license": "MIT", @@ -17012,6 +17078,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "node_modules/vary": { "version": "1.1.2", "license": "MIT", @@ -19113,15 +19184,6 @@ "@nodelib/fs.stat": { "version": "1.1.3" }, - "@reach/router": { - "version": "1.3.4", - "requires": { - "create-react-context": "0.3.0", - "invariant": "^2.2.3", - "prop-types": "^15.6.1", - "react-lifecycles-compat": "^3.0.4" - } - }, "@sinonjs/commons": { "version": "1.8.3", "dev": true, @@ -19329,6 +19391,12 @@ } } }, + "@types/history": { + "version": "4.7.9", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz", + "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==", + "dev": true + }, "@types/istanbul-lib-coverage": { "version": "2.0.3" }, @@ -19487,24 +19555,6 @@ "@types/q": { "version": "1.5.5" }, - "@types/reach__router": { - "version": "1.3.9", - "dev": true, - "requires": { - "@types/react": "*" - }, - "dependencies": { - "@types/react": { - "version": "17.0.15", - "dev": true, - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - } - } - }, "@types/react": { "version": "16.14.11", "dev": true, @@ -19557,6 +19607,27 @@ } } }, + "@types/react-router": { + "version": "5.1.16", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz", + "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.8.tgz", + "integrity": "sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/react-test-renderer": { "version": "17.0.1", "dev": true, @@ -21767,13 +21838,6 @@ "sha.js": "^2.4.8" } }, - "create-react-context": { - "version": "0.3.0", - "requires": { - "gud": "^1.0.0", - "warning": "^4.0.3" - } - }, "crelt": { "version": "1.0.5" }, @@ -23513,6 +23577,19 @@ "hex-color-regex": { "version": "1.1.0" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "requires": { @@ -23521,6 +23598,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.9" }, @@ -25825,14 +25910,12 @@ }, "path-to-regexp": { "version": "1.8.0", - "dev": true, "requires": { "isarray": "0.0.1" }, "dependencies": { "isarray": { - "version": "0.0.1", - "dev": true + "version": "0.0.1" } } }, @@ -27052,6 +27135,50 @@ "resize-observer-polyfill": "^1.5.1" } }, + "react-router-dom": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.1.tgz", + "integrity": "sha512-xhFFkBGVcIVPbWM2KEYzED+nuHQPmulVa7sqIs3ESxzYd1pYg8N8rxPnQ4T2o1zu/2QeDUWcaqST131SO1LR3w==", + "requires": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "react-router": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", + "requires": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + } + } + } + } + }, "react-scripts": { "version": "3.4.4", "requires": { @@ -27681,6 +27808,11 @@ "resolve-from": { "version": "3.0.0" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1" }, @@ -28649,15 +28781,24 @@ }, "tempusdominus-bootstrap-4": { "version": "5.39.0", - "requires": {} + "requires": { + "bootstrap": "^4.5.2", + "jquery": "^3.5.1", + "moment": "^2.29.0", + "moment-timezone": "^0.5.31", + "popper.js": "^1.16.1" + } }, "tempusdominus-core": { "version": "5.19.0", - "requires": {}, + "requires": { + "jquery": "^3.5.0", + "moment": "~2.24.0", + "moment-timezone": "^0.5.28" + }, "dependencies": { "moment": { - "version": "2.24.0", - "peer": true + "version": "2.24.0" } } }, @@ -28808,6 +28949,16 @@ "timsort": { "version": "0.3.0" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "requires": { @@ -29130,6 +29281,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2" }, diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json index 427dc96c3..5db123dfe 100644 --- a/web/ui/react-app/package.json +++ b/web/ui/react-app/package.json @@ -20,7 +20,6 @@ "@fortawesome/free-solid-svg-icons": "^5.7.1", "@fortawesome/react-fontawesome": "^0.1.4", "@nexucis/fuzzy": "^0.2.2", - "@reach/router": "^1.2.1", "bootstrap": "^4.6.0", "codemirror-promql": "^0.17.0", "css.escape": "^1.5.1", @@ -37,6 +36,7 @@ "react-copy-to-clipboard": "^5.0.1", "react-dom": "^16.7.0", "react-resize-detector": "^5.0.7", + "react-router-dom": "^5.2.1", "react-scripts": "3.4.4", "react-test-renderer": "^16.9.0", "reactstrap": "^8.9.0", @@ -76,11 +76,11 @@ "@types/jquery": "^3.5.1", "@types/moment-timezone": "^0.5.10", "@types/node": "^12.11.1", - "@types/reach__router": "^1.2.6", "@types/react": "^16.8.2", "@types/react-copy-to-clipboard": "^5.0.0", "@types/react-dom": "^16.8.0", "@types/react-resize-detector": "^5.0.0", + "@types/react-router-dom": "^5.1.8", "@types/reactstrap": "^8.7.2", "@types/sanitize-html": "^1.20.2", "@types/sinon": "^9.0.4", diff --git a/web/ui/react-app/src/App.test.tsx b/web/ui/react-app/src/App.test.tsx index 6ccdf9ffe..3a09040c4 100755 --- a/web/ui/react-app/src/App.test.tsx +++ b/web/ui/react-app/src/App.test.tsx @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import App from './App'; import Navigation from './Navbar'; import { Container } from 'reactstrap'; -import { Router } from '@reach/router'; +import { Route } from 'react-router-dom'; import { AlertsPage, ConfigPage, @@ -37,7 +37,7 @@ describe('App', () => { const c = app.find(component); expect(c).toHaveLength(1); }); - expect(app.find(Router)).toHaveLength(1); + expect(app.find(Route)).toHaveLength(9); expect(app.find(Container)).toHaveLength(1); }); }); diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx index 9370ca48a..f47dcb368 100755 --- a/web/ui/react-app/src/App.tsx +++ b/web/ui/react-app/src/App.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import Navigation from './Navbar'; import { Container } from 'reactstrap'; -import { Router, Redirect } from '@reach/router'; +import { BrowserRouter as Router, Redirect, Switch, Route } from 'react-router-dom'; import useMedia from 'use-media'; import { AlertsPage, @@ -69,25 +69,45 @@ const App: FC = ({ consolesLink }) => { > - - - - - {/* + + + + + + {/* NOTE: Any route added here needs to also be added to the list of React-handled router paths ("reactRouterPaths") in /web/web.go. */} - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx index 52b15aef9..277cef46a 100644 --- a/web/ui/react-app/src/Navbar.tsx +++ b/web/ui/react-app/src/Navbar.tsx @@ -1,5 +1,5 @@ import React, { FC, useState } from 'react'; -import { Link } from '@reach/router'; +import { Link } from 'react-router-dom'; import { Collapse, Navbar, @@ -26,7 +26,7 @@ const Navigation: FC = ({ consolesLink }) => { return ( - + Prometheus @@ -37,12 +37,12 @@ const Navigation: FC = ({ consolesLink }) => { )} - + Alerts - + Graph @@ -51,25 +51,25 @@ const Navigation: FC = ({ consolesLink }) => { Status - + Runtime & Build Information - + TSDB Status - + Command-Line Flags - + Configuration - + Rules - + Targets - + Service Discovery diff --git a/web/ui/react-app/src/pages/alerts/Alerts.tsx b/web/ui/react-app/src/pages/alerts/Alerts.tsx index a1624d7a8..d7fd7f296 100644 --- a/web/ui/react-app/src/pages/alerts/Alerts.tsx +++ b/web/ui/react-app/src/pages/alerts/Alerts.tsx @@ -1,5 +1,4 @@ import React, { FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { useFetch } from '../../hooks/useFetch'; import { withStatusIndicator } from '../../components/withStatusIndicator'; import AlertsContent, { RuleStatus, AlertsProps } from './AlertContents'; @@ -8,7 +7,7 @@ import { API_PATH } from '../../constants/constants'; const AlertsWithStatusIndicator = withStatusIndicator(AlertsContent); -const Alerts: FC = () => { +const Alerts: FC = () => { const pathPrefix = usePathPrefix(); const { response, error, isLoading } = useFetch(`${pathPrefix}/${API_PATH}/rules?type=alert`); diff --git a/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx b/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx index 8a5197aa7..ef45c205f 100644 --- a/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx +++ b/web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx @@ -1,5 +1,5 @@ import React, { FC, useState, Fragment } from 'react'; -import { Link } from '@reach/router'; +import { Link } from 'react-router-dom'; import { Alert, Collapse, Table, Badge } from 'reactstrap'; import { RuleStatus } from './AlertContents'; import { Rule } from '../../types/types'; diff --git a/web/ui/react-app/src/pages/config/Config.tsx b/web/ui/react-app/src/pages/config/Config.tsx index 82474e106..07b3138f9 100644 --- a/web/ui/react-app/src/pages/config/Config.tsx +++ b/web/ui/react-app/src/pages/config/Config.tsx @@ -1,5 +1,4 @@ import React, { useState, FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { Button } from 'reactstrap'; import CopyToClipboard from 'react-copy-to-clipboard'; @@ -44,7 +43,7 @@ export const ConfigContent: FC = ({ error, data }) => { ); }; -const Config: FC = () => { +const Config: FC = () => { const pathPrefix = usePathPrefix(); const { response, error } = useFetch(`${pathPrefix}/${API_PATH}/status/config`); return ; diff --git a/web/ui/react-app/src/pages/flags/Flags.tsx b/web/ui/react-app/src/pages/flags/Flags.tsx index 06e2434b8..d6d88aaf9 100644 --- a/web/ui/react-app/src/pages/flags/Flags.tsx +++ b/web/ui/react-app/src/pages/flags/Flags.tsx @@ -1,5 +1,4 @@ import React, { ChangeEvent, FC, useState } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { Input, InputGroup, Table } from 'reactstrap'; import { withStatusIndicator } from '../../components/withStatusIndicator'; import { useFetch } from '../../hooks/useFetch'; @@ -124,7 +123,7 @@ const FlagsWithStatusIndicator = withStatusIndicator(FlagsContent); FlagsContent.displayName = 'Flags'; -const Flags: FC = () => { +const Flags: FC = () => { const pathPrefix = usePathPrefix(); const { response, error, isLoading } = useFetch(`${pathPrefix}/${API_PATH}/status/flags`); return ; diff --git a/web/ui/react-app/src/pages/graph/PanelList.tsx b/web/ui/react-app/src/pages/graph/PanelList.tsx index 43ff6f1d6..8a97144f0 100644 --- a/web/ui/react-app/src/pages/graph/PanelList.tsx +++ b/web/ui/react-app/src/pages/graph/PanelList.tsx @@ -1,5 +1,4 @@ import React, { FC, useState, useEffect } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { Alert, Button } from 'reactstrap'; import Panel, { PanelOptions, PanelDefaultOptions } from './Panel'; @@ -17,7 +16,7 @@ export const updateURL = (nextPanels: PanelMeta[]) => { window.history.pushState({}, '', query); }; -interface PanelListContentProps extends RouteComponentProps { +interface PanelListContentProps { panels: PanelMeta[]; metrics: string[]; useLocalTime: boolean; @@ -122,7 +121,7 @@ export const PanelListContent: FC = ({ ); }; -const PanelList: FC = () => { +const PanelList: FC = () => { const [delta, setDelta] = useState(0); const [useExperimentalEditor, setUseExperimentalEditor] = useLocalStorage('use-new-editor', true); const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false); diff --git a/web/ui/react-app/src/pages/rules/Rules.tsx b/web/ui/react-app/src/pages/rules/Rules.tsx index 3a849fb92..56f36b420 100644 --- a/web/ui/react-app/src/pages/rules/Rules.tsx +++ b/web/ui/react-app/src/pages/rules/Rules.tsx @@ -1,5 +1,4 @@ import React, { FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { useFetch } from '../../hooks/useFetch'; import { withStatusIndicator } from '../../components/withStatusIndicator'; import { RulesMap, RulesContent } from './RulesContent'; @@ -8,7 +7,7 @@ import { API_PATH } from '../../constants/constants'; const RulesWithStatusIndicator = withStatusIndicator(RulesContent); -const Rules: FC = () => { +const Rules: FC = () => { const pathPrefix = usePathPrefix(); const { response, error, isLoading } = useFetch(`${pathPrefix}/${API_PATH}/rules`); diff --git a/web/ui/react-app/src/pages/rules/RulesContent.tsx b/web/ui/react-app/src/pages/rules/RulesContent.tsx index 3977431f4..1d08c3d91 100644 --- a/web/ui/react-app/src/pages/rules/RulesContent.tsx +++ b/web/ui/react-app/src/pages/rules/RulesContent.tsx @@ -1,8 +1,7 @@ import React, { FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { APIResponse } from '../../hooks/useFetch'; import { Alert, Table, Badge } from 'reactstrap'; -import { Link } from '@reach/router'; +import { Link } from 'react-router-dom'; import { formatRelative, createExpressionLink, humanizeDuration, formatDuration } from '../../utils'; import { Rule } from '../../types/types'; import { now } from 'moment'; @@ -35,7 +34,7 @@ const GraphExpressionLink: FC<{ expr: string; text: string; title: string }> = p ); }; -export const RulesContent: FC = ({ response }) => { +export const RulesContent: FC = ({ response }) => { const getBadgeColor = (state: string) => { switch (state) { case 'ok': diff --git a/web/ui/react-app/src/pages/serviceDiscovery/LabelsTable.tsx b/web/ui/react-app/src/pages/serviceDiscovery/LabelsTable.tsx index b621df100..01c657c3a 100644 --- a/web/ui/react-app/src/pages/serviceDiscovery/LabelsTable.tsx +++ b/web/ui/react-app/src/pages/serviceDiscovery/LabelsTable.tsx @@ -1,5 +1,4 @@ import React, { FC, useState } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { Badge, Table } from 'reactstrap'; import { TargetLabels } from './Services'; import { ToggleMoreLess } from '../../components/ToggleMoreLess'; @@ -21,7 +20,7 @@ const formatLabels = (labels: Record | string) => { }); }; -export const LabelsTable: FC = ({ value, name }) => { +export const LabelsTable: FC = ({ value, name }) => { const [showMore, setShowMore] = useState(false); return ( diff --git a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx index f2892dab6..a6d35852a 100644 --- a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx +++ b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx @@ -1,5 +1,4 @@ import React, { FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { useFetch } from '../../hooks/useFetch'; import { LabelsTable } from './LabelsTable'; import { Target, Labels, DroppedTarget } from '../targets/target'; @@ -106,7 +105,7 @@ ServiceDiscoveryContent.displayName = 'ServiceDiscoveryContent'; const ServicesWithStatusIndicator = withStatusIndicator(ServiceDiscoveryContent); -const ServiceDiscovery: FC = () => { +const ServiceDiscovery: FC = () => { const pathPrefix = usePathPrefix(); const { response, error, isLoading } = useFetch(`${pathPrefix}/${API_PATH}/targets`); return ( diff --git a/web/ui/react-app/src/pages/status/Status.tsx b/web/ui/react-app/src/pages/status/Status.tsx index 518662cff..17f7ed7d8 100644 --- a/web/ui/react-app/src/pages/status/Status.tsx +++ b/web/ui/react-app/src/pages/status/Status.tsx @@ -1,5 +1,4 @@ import React, { Fragment, FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { Table } from 'reactstrap'; import { withStatusIndicator } from '../../components/withStatusIndicator'; import { useFetch } from '../../hooks/useFetch'; @@ -83,7 +82,7 @@ const StatusWithStatusIndicator = withStatusIndicator(StatusContent); StatusContent.displayName = 'Status'; -const Status: FC = () => { +const Status: FC = () => { const pathPrefix = usePathPrefix(); const path = `${pathPrefix}/${API_PATH}`; diff --git a/web/ui/react-app/src/pages/targets/Targets.tsx b/web/ui/react-app/src/pages/targets/Targets.tsx index 0883d1c81..cc7647aca 100644 --- a/web/ui/react-app/src/pages/targets/Targets.tsx +++ b/web/ui/react-app/src/pages/targets/Targets.tsx @@ -1,8 +1,7 @@ import React, { FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import ScrapePoolList from './ScrapePoolList'; -const Targets: FC = () => { +const Targets: FC = () => { return ( <>

Targets

diff --git a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx index 37fc71cb2..bc4dfe99b 100644 --- a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx +++ b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx @@ -1,5 +1,4 @@ import React, { FC } from 'react'; -import { RouteComponentProps } from '@reach/router'; import { Table } from 'reactstrap'; import { useFetch } from '../../hooks/useFetch'; @@ -113,7 +112,7 @@ TSDBStatusContent.displayName = 'TSDBStatusContent'; const TSDBStatusContentWithStatusIndicator = withStatusIndicator(TSDBStatusContent); -const TSDBStatus: FC = () => { +const TSDBStatus: FC = () => { const pathPrefix = usePathPrefix(); const { response, error, isLoading } = useFetch(`${pathPrefix}/${API_PATH}/status/tsdb`);