React UI: Mark not-yet-done pages as under construction (#6277)

This is a quick change because the release is about to be cut in a few
hours and it would be good to clarify to users what the empty pages in
the new UI are about.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/react-app/src/pages/Alerts.tsx

@@ -1,7 +1,15 @@
 import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import PathPrefixProps from '../PathPrefixProps';
+import { Alert } from 'reactstrap';
 
-const Alerts: FC<RouteComponentProps & PathPrefixProps> = props => <div>Alerts page</div>;
+const Alerts: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => (
+  <>
+    <h2>Alerts</h2>
+    <Alert color="warning">
+      This page is still under construction. Please try it in the <a href={`${pathPrefix}/alerts`}>Classic UI</a>.
+    </Alert>
+  </>
+);
 
 export default Alerts;

web/ui/react-app/src/pages/Rules.tsx

@@ -1,7 +1,15 @@
 import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import PathPrefixProps from '../PathPrefixProps';
+import { Alert } from 'reactstrap';
 
-const Rules: FC<RouteComponentProps & PathPrefixProps> = () => <div>Rules page</div>;
+const Rules: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => (
+  <>
+    <h2>Rules</h2>
+    <Alert color="warning">
+      This page is still under construction. Please try it in the <a href={`${pathPrefix}/rules`}>Classic UI</a>.
+    </Alert>
+  </>
+);
 
 export default Rules;

web/ui/react-app/src/pages/Services.tsx

@@ -1,7 +1,15 @@
 import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import PathPrefixProps from '../PathPrefixProps';
+import { Alert } from 'reactstrap';
 
-const Services: FC<RouteComponentProps & PathPrefixProps> = () => <div>Services page</div>;
+const Services: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => (
+  <>
+    <h2>Service Discovery</h2>
+    <Alert color="warning">
+      This page is still under construction. Please try it in the <a href={`${pathPrefix}/service-discovery`}>Classic UI</a>.
+    </Alert>
+  </>
+);
 
 export default Services;

web/ui/react-app/src/pages/Targets.tsx

@@ -1,7 +1,15 @@
 import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import PathPrefixProps from '../PathPrefixProps';
+import { Alert } from 'reactstrap';
 
-const Targets: FC<RouteComponentProps & PathPrefixProps> = () => <div>Targets page</div>;
+const Targets: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => (
+  <>
+    <h2>Targets</h2>
+    <Alert color="warning">
+      This page is still under construction. Please try it in the <a href={`${pathPrefix}/targets`}>Classic UI</a>.
+    </Alert>
+  </>
+);
 
 export default Targets;