diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json
index 777750d2b..f3a896439 100644
--- a/web/ui/react-app/package.json
+++ b/web/ui/react-app/package.json
@@ -6,9 +6,11 @@
"@fortawesome/fontawesome-svg-core": "^1.2.14",
"@fortawesome/free-solid-svg-icons": "^5.7.1",
"@fortawesome/react-fontawesome": "^0.1.4",
+ "@reach/router": "^1.2.1",
"@types/jest": "^24.0.4",
"@types/jquery": "^3.3.29",
"@types/node": "^12.11.1",
+ "@types/reach__router": "^1.2.6",
"@types/react": "^16.8.2",
"@types/react-dom": "^16.8.0",
"@types/react-resize-detector": "^4.0.2",
diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css
index e5f1d08b2..5f8066f10 100644
--- a/web/ui/react-app/src/App.css
+++ b/web/ui/react-app/src/App.css
@@ -1,11 +1,3 @@
-body {
- padding-top: 10px; /* TODO remove */
-}
-
-button.classic-ui-btn {
- padding: 10px 0;
-}
-
.panel {
margin-bottom: 20px;
}
diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
index 471ced047..a88204a78 100755
--- a/web/ui/react-app/src/App.tsx
+++ b/web/ui/react-app/src/App.tsx
@@ -1,18 +1,38 @@
import React, { Component } from 'react';
-
-import {
- Container,
-} from 'reactstrap';
+import Navigation from "./Navbar";
+import { Container } from 'reactstrap';
import './App.css';
-import PanelList from './PanelList';
+import { Router } from '@reach/router';
+import {
+ Alerts,
+ Config,
+ Flags,
+ Rules,
+ Services,
+ Status,
+ Targets,
+ PanelList,
+} from './pages';
class App extends Component {
render() {
return (
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
);
}
}
diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx
new file mode 100644
index 000000000..f54091817
--- /dev/null
+++ b/web/ui/react-app/src/Navbar.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Link } from "@reach/router";
+import {
+ Collapse,
+ Navbar,
+ NavbarToggler,
+ Nav,
+ NavItem,
+ NavLink,
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+const Navigation = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const toggle = () => setIsOpen(!isOpen);
+ return (
+
+
+ Prometheus
+
+
+
+
+ );
+}
+
+export default Navigation;
diff --git a/web/ui/react-app/src/pages/Alerts.tsx b/web/ui/react-app/src/pages/Alerts.tsx
new file mode 100644
index 000000000..ccb00a644
--- /dev/null
+++ b/web/ui/react-app/src/pages/Alerts.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Alerts: FC = props => Alerts page
+
+export default Alerts;
diff --git a/web/ui/react-app/src/pages/Config.tsx b/web/ui/react-app/src/pages/Config.tsx
new file mode 100644
index 000000000..f55ac2382
--- /dev/null
+++ b/web/ui/react-app/src/pages/Config.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Config: FC = () => Config page
+
+export default Config;
diff --git a/web/ui/react-app/src/pages/Flags.tsx b/web/ui/react-app/src/pages/Flags.tsx
new file mode 100644
index 000000000..c26167426
--- /dev/null
+++ b/web/ui/react-app/src/pages/Flags.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Flags : FC = () => Flags page
+
+export default Flags;
diff --git a/web/ui/react-app/src/PanelList.tsx b/web/ui/react-app/src/pages/PanelList.tsx
similarity index 93%
rename from web/ui/react-app/src/PanelList.tsx
rename to web/ui/react-app/src/pages/PanelList.tsx
index a596257f4..6a47d0e9d 100644
--- a/web/ui/react-app/src/PanelList.tsx
+++ b/web/ui/react-app/src/pages/PanelList.tsx
@@ -2,9 +2,9 @@ import React, { Component, ChangeEvent } from 'react';
import { Alert, Button, Col, Row } from 'reactstrap';
-import Panel, { PanelOptions, PanelDefaultOptions } from './Panel';
-import { decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString } from './utils/urlParams';
-import Checkbox from './Checkbox';
+import Panel, { PanelOptions, PanelDefaultOptions } from '../Panel';
+import { decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString } from '../utils/urlParams';
+import Checkbox from '../Checkbox';
export type MetricGroup = { title: string; items: string[] };
@@ -161,15 +161,6 @@ class PanelList extends Component {
defaultChecked={this.isHistoryEnabled()}>
Enable query history
-
-
-
diff --git a/web/ui/react-app/src/pages/Rules.tsx b/web/ui/react-app/src/pages/Rules.tsx
new file mode 100644
index 000000000..e6bb89ca9
--- /dev/null
+++ b/web/ui/react-app/src/pages/Rules.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Rules: FC = () => Rules page
+
+export default Rules;
diff --git a/web/ui/react-app/src/pages/Services.tsx b/web/ui/react-app/src/pages/Services.tsx
new file mode 100644
index 000000000..4f09561a1
--- /dev/null
+++ b/web/ui/react-app/src/pages/Services.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Services: FC = () => Services page
+
+export default Services;
diff --git a/web/ui/react-app/src/pages/Status.tsx b/web/ui/react-app/src/pages/Status.tsx
new file mode 100644
index 000000000..ed5c14b1f
--- /dev/null
+++ b/web/ui/react-app/src/pages/Status.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Status: FC = () => Status page
+
+export default Status;
diff --git a/web/ui/react-app/src/pages/Targets.tsx b/web/ui/react-app/src/pages/Targets.tsx
new file mode 100644
index 000000000..4df181313
--- /dev/null
+++ b/web/ui/react-app/src/pages/Targets.tsx
@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+
+const Targets: FC = () => Targets page
+
+export default Targets;
diff --git a/web/ui/react-app/src/pages/index.ts b/web/ui/react-app/src/pages/index.ts
new file mode 100644
index 000000000..4bdf2cbfb
--- /dev/null
+++ b/web/ui/react-app/src/pages/index.ts
@@ -0,0 +1,19 @@
+import Alerts from './Alerts';
+import Config from './Config';
+import Flags from './Flags';
+import Rules from './Rules';
+import Services from './Services';
+import Status from './Status';
+import Targets from './Targets';
+import PanelList from './PanelList';
+
+export {
+ Alerts,
+ Config,
+ Flags,
+ Rules,
+ Services,
+ Status,
+ Targets,
+ PanelList,
+}
diff --git a/web/ui/react-app/yarn.lock b/web/ui/react-app/yarn.lock
index 31b15ff9b..d020ac9e8 100644
--- a/web/ui/react-app/yarn.lock
+++ b/web/ui/react-app/yarn.lock
@@ -1139,6 +1139,17 @@
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
+"@reach/router@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
+ integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==
+ dependencies:
+ create-react-context "^0.2.1"
+ invariant "^2.2.3"
+ prop-types "^15.6.1"
+ react-lifecycles-compat "^3.0.4"
+ warning "^3.0.0"
+
"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -1299,6 +1310,11 @@
dependencies:
"@types/jquery" "*"
+"@types/history@*":
+ version "4.7.3"
+ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
+ integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
+
"@types/htmlparser2@*":
version "3.10.1"
resolved "https://registry.yarnpkg.com/@types/htmlparser2/-/htmlparser2-3.10.1.tgz#1e65ba81401d53f425c1e2ba5a3d05c90ab742c7"
@@ -1374,6 +1390,14 @@
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
+"@types/reach__router@^1.2.6":
+ version "1.2.6"
+ resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.2.6.tgz#b14cf1adbd1a365d204bbf6605cd9dd7b8816c87"
+ integrity sha512-Oh5DAVr/L2svBvubw6QEFpXGu295Y406BPs4i9t1n2pp7M+q3pmCmhzb9oZV5wncR41KCD3NHl1Yhi7uKnTPsA==
+ dependencies:
+ "@types/history" "*"
+ "@types/react" "*"
+
"@types/react-dom@^16.8.0":
version "16.9.2"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.2.tgz#90f9e6c161850be1feb31d2f448121be2a4f3b47"
@@ -1880,7 +1904,7 @@ arrify@^1.0.1:
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-asap@~2.0.6:
+asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -2933,6 +2957,11 @@ core-js@3.2.1:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
integrity sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==
+core-js@^1.0.0:
+ version "1.2.7"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+ integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
core-js@^2.4.0:
version "2.6.10"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
@@ -2984,6 +3013,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
+create-react-context@^0.2.1:
+ version "0.2.3"
+ resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+ integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
+ dependencies:
+ fbjs "^0.8.0"
+ gud "^1.0.0"
+
create-react-context@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
@@ -3671,6 +3708,13 @@ encodeurl@~1.0.2:
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+encoding@^0.1.11:
+ version "0.1.12"
+ resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+ integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+ dependencies:
+ iconv-lite "~0.4.13"
+
end-of-stream@^1.0.0, end-of-stream@^1.1.0:
version "1.4.4"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4206,6 +4250,19 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
+fbjs@^0.8.0:
+ version "0.8.17"
+ resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+ integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+ dependencies:
+ core-js "^1.0.0"
+ isomorphic-fetch "^2.1.1"
+ loose-envify "^1.0.0"
+ object-assign "^4.1.0"
+ promise "^7.1.1"
+ setimmediate "^1.0.5"
+ ua-parser-js "^0.7.18"
+
figgy-pudding@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -4935,7 +4992,7 @@ i@^0.3.6:
resolved "https://registry.yarnpkg.com/i/-/i-0.3.6.tgz#d96c92732076f072711b6b10fd7d4f65ad8ee23d"
integrity sha1-2WyScyB28HJxG2sQ/X1PZa2O4j0=
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5120,7 +5177,7 @@ internal-ip@^4.2.0:
default-gateway "^4.2.0"
ipaddr.js "^1.9.0"
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -5394,7 +5451,7 @@ is-root@2.1.0:
resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -5450,6 +5507,14 @@ isobject@^3.0.0, isobject@^3.0.1:
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+isomorphic-fetch@^2.1.1:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+ integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+ dependencies:
+ node-fetch "^1.0.1"
+ whatwg-fetch ">=0.10.0"
+
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -6765,6 +6830,14 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
+node-fetch@^1.0.1:
+ version "1.7.3"
+ resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+ integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+ dependencies:
+ encoding "^0.1.11"
+ is-stream "^1.0.1"
+
node-forge@0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -8208,6 +8281,13 @@ promise@8.0.3:
dependencies:
asap "~2.0.6"
+promise@^7.1.1:
+ version "7.3.1"
+ resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+ integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+ dependencies:
+ asap "~2.0.3"
+
prompts@^2.0.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
@@ -9152,7 +9232,7 @@ set-value@^2.0.0, set-value@^2.0.1:
is-plain-object "^2.0.3"
split-string "^3.0.1"
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -10001,6 +10081,11 @@ typescript@^3.3.3:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.4.tgz#b18752bb3792bc1a0281335f7f6ebf1bbfc5b91d"
integrity sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==
+ua-parser-js@^0.7.18:
+ version "0.7.20"
+ resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
+ integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
+
uglify-js@3.4.x:
version "3.4.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -10251,6 +10336,13 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
+warning@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+ integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+ dependencies:
+ loose-envify "^1.0.0"
+
warning@^4.0.2, warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -10402,7 +10494,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
dependencies:
iconv-lite "0.4.24"
-whatwg-fetch@3.0.0:
+whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==