Merge pull request #185 from Thiht/issue-154-filters

Issue 154 filters

.gitignore

@@ -1,4 +1,5 @@
 .cache/
+.DS_Store
 .vscode/
 build/
 client/dist/

Caddyfile

@@ -1,4 +1,4 @@
 http://localhost:8082 {
-    uri strip_prefix /smocker
-    reverse_proxy localhost:8081
+  uri strip_prefix /smocker
+  reverse_proxy localhost:8081
 }

client/components/History.scss

@@ -23,6 +23,14 @@
     }
   }
 
+  // These rules are used for the inline filters (sort by, filter, etc.)
+  .ant-btn-link {
+    padding: 6px;
+    .ant-select-selector {
+      padding: 0;
+    }
+  }
+
   .entry {
     border-radius: 3px;
     background-color: white;

client/components/History.tsx

@@ -11,6 +11,7 @@ import {
   PageHeader,
   Pagination,
   Row,
+  Select,
   Spin,
   Tag,
   Typography,
@@ -193,6 +194,7 @@ const HistoryComponent = ({
     "history.order.by.entry.field",
     "response"
   );
+  const [filter, setFilter] = useLocalStorage("history.filter", "all");
   const [page, setPage] = React.useState(1);
   const [pageSize, setPageSize] = React.useState(minPageSize);
   const [polling, togglePolling] = usePoll(10000, fetch, sessionID);
@@ -216,10 +218,20 @@ const HistoryComponent = ({
       historyEntry,
       `${entryField}.date`,
       order as "asc" | "desc"
-    ).slice(
-      Math.max((page - 1) * pageSize, 0),
-      Math.min(page * pageSize, historyEntry.length)
-    );
+    )
+      .slice(
+        Math.max((page - 1) * pageSize, 0),
+        Math.min(page * pageSize, historyEntry.length)
+      )
+      .filter((entry) => {
+        if (filter === "http-errors") {
+          return entry.response.status >= 400 && entry.response.status <= 599;
+        }
+        if (filter === "smocker-errors") {
+          return entry.response.status >= 600 && entry.response.status <= 699;
+        }
+        return true;
+      });
     const handleDisplayNewMock = (entry: Entry) => () => {
       const request = cleanupRequest(entry);
       const response =
@@ -274,6 +286,7 @@ const HistoryComponent = ({
   const onSort = () =>
     setEntryField(entryField === "request" ? "response" : "request");
   const onSortDate = () => setOrder(order === "asc" ? "desc" : "asc");
+  const onFilter = (value: string) => setFilter(value);
   return (
     <div className="history" ref={ref}>
       <PageHeader
@@ -319,7 +332,24 @@ const HistoryComponent = ({
           <Button onClick={onSortDate} type="link">
             {order === "asc" ? "oldest" : "newest"}
           </Button>
-          are displayed first.
+          are displayed first. Show
+          <Select
+            defaultValue={filter}
+            bordered={false}
+            showArrow={false}
+            className="ant-btn-link"
+            dropdownStyle={{
+              minWidth: 180, // required to allow all the text to fit in the dropdown
+            }}
+            onChange={onFilter}
+          >
+            <Select.Option value="all">everything</Select.Option>
+            <Select.Option value="http-errors">HTTP errors only</Select.Option>
+            <Select.Option value="smocker-errors">
+              Smocker errors only
+            </Select.Option>
+          </Select>
+          .
         </p>
         <Spin delay={300} spinning={loading && historyEntry.length === 0}>
           {body}

yarn.lock

@@ -3223,9 +3223,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001111:
-  version "1.0.30001122"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001122.tgz#2c8ff631330d986a07a7ba7125cce77a1373b475"
-  integrity sha512-pxjw28CThdrqfz06nJkpAc5SXM404TXB/h5f4UJX+rrXJKE/1bu/KAILc2AY+O6cQIFtRjV9qOR2vaEp9LDGUA==
+  version "1.0.30001214"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz"
+  integrity sha512-O2/SCpuaU3eASWVaesQirZv1MSjUNOvmugaD8zNSJqw6Vv5SGwoOpA9LJs3pNPfM745nxqPvfZY3MQKY4AKHYg==
 
 capture-exit@^2.0.0:
   version "2.0.0"