Split status and DNSSEC data into separate columns

This makes searching much simpler

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>

src/components/log/QueryLog.js

@@ -207,7 +207,7 @@ const status = t => [
  * you must pass in the translation function before using the message array.
  */
 const dnssec = t => [
-  "", // Unspecified, which means DNSSEC is off, so nothing should be shown
+  "N/A", // Unspecified, which means DNSSEC is off, so nothing should be shown
   t("Secure"),
   t("Insecure"),
   t("Bogus"),
@@ -215,6 +215,15 @@ const dnssec = t => [
   t("Unknown")
 ];
 
+const dnssecColor = [
+  "", // Unspecified, which means DNSSEC is off, so the initial color should be shown
+  "green",
+  "orange",
+  "red",
+  "red",
+  "red"
+];
+
 /**
  * Convert a reply type code to a reply type. The unknown type is translated, so
  * you must pass in the translation function before using the message array.
@@ -306,19 +315,20 @@ const columns = t => [
   {
     Header: t("Status"),
     id: "status",
-    accessor: r => ({ code: r.status, dnssec: r.dnssec }),
+    accessor: r => r.status,
     width: 140,
+    Cell: row => status(t)[row.value]
+  },
+  {
+    Header: "DNSSEC",
+    id: "dnssec",
+    accessor: r => r.dnssec,
+    width: 90,
     Cell: row => (
-      <Fragment>
-        {status(t)[row.value.code]}
-        <br />
-        {dnssec(t)[row.value.dnssec]}
-      </Fragment>
-    ),
-    filterMethod: (filter, row) => {
-      const rowStatus = status(t)[row[filter.id].code].toLowerCase();
-      return rowStatus.includes(filter.value.toLowerCase());
-    }
+      <div style={{ color: dnssecColor[row.value] }}>
+        {dnssec(t)[row.value]}
+      </div>
+    )
   },
   {
     Header: t("Reply"),