Add scope support

admin/src/pages/proxy/logs/index.tsx

@@ -1,9 +1,15 @@
+import { Box } from "@material-ui/core";
+
 import LogsOverview from "../../../components/reqlog/LogsOverview";
 import Layout, { Page } from "../../../components/Layout";
+import Search from "../../../components/reqlog/Search";
 
 function ProxyLogs(): JSX.Element {
   return (
     <Layout page={Page.ProxyLogs} title="Proxy logs">
+      <Box mb={2}>
+        <Search />
+      </Box>
       <LogsOverview />
     </Layout>
   );

admin/src/pages/scope/index.tsx

@@ -0,0 +1,39 @@
+import { Box, Divider, Grid, Typography } from "@material-ui/core";
+import React from "react";
+
+import Layout, { Page } from "../../components/Layout";
+import AddRule from "../../components/scope/AddRule";
+import Rules from "../../components/scope/Rules";
+
+function Index(): JSX.Element {
+  return (
+    <Layout page={Page.Scope} title="Scope">
+      <Box p={4}>
+        <Box mb={3}>
+          <Typography variant="h4">Scope</Typography>
+        </Box>
+        <Typography paragraph>
+          Scope rules are used by various modules in Hetty and can influence
+          their behavior. For example: the Proxy logs module can match incoming
+          requests against scope rules and decide its behavior (e.g. log or
+          bypass) based on the outcome of the match. All scope configuration is
+          stored per project.
+        </Typography>
+        <Box my={4}>
+          <Divider />
+        </Box>
+        <Grid container>
+          <Grid item xs={12} sm={12} md={8} lg={6}>
+            <AddRule />
+            <Box my={4}>
+              <Divider />
+            </Box>
+            <Rules />
+          </Grid>
+        </Grid>
+      </Box>
+    </Layout>
+  );
+}
+
+export default Index;