feat: Support for using regular expressions on the log page #707 (#959)

src/locales/en.json

@@ -187,5 +187,7 @@
 
   "Portable Updater Error": "The portable version does not support in-app updates. Please manually download and replace it",
   "Tun Mode Info": "The Tun mode requires granting core-related permissions. Please enable service mode before using it",
-  "System and Mixed Can Only be Used in Service Mode": "System and Mixed Can Only be Used in Service Mode"
+  "System and Mixed Can Only be Used in Service Mode": "System and Mixed Can Only be Used in Service Mode",
+
+  "Use Regular Expression": "Use Regular Expression"
 }

src/locales/ru.json

@@ -187,5 +187,7 @@
 
   "Portable Updater Error": "Портативная версия не поддерживает обновление внутри приложения, пожалуйста, скачайте и замените вручную",
   "Tun Mode Info": "Режим туннеля требует предоставления разрешений, связанных с ядром. Пожалуйста, включите сервисный режим перед его использованием",
-  "System and Mixed Can Only be Used in Service Mode": "Система и смешанные могут использоваться только в сервисном режиме"
+  "System and Mixed Can Only be Used in Service Mode": "Система и смешанные могут использоваться только в сервисном режиме",
+
+  "Use Regular Expression": "Использование регулярных выражений"
 }

src/locales/zh.json

@@ -187,5 +187,7 @@
 
   "Portable Updater Error": "便携版不支持应用内更新，请手动下载替换",
   "Tun Mode Info": "Tun模式需要授予内核相关权限，使用前请先开启服务模式",
-  "System and Mixed Can Only be Used in Service Mode": "System和Mixed只能在服务模式下使用"
+  "System and Mixed Can Only be Used in Service Mode": "System和Mixed只能在服务模式下使用",
+
+  "Use Regular Expression": "使用正则表达式"
 }

src/pages/logs.tsx

@@ -47,8 +47,27 @@ const LogPage = () => {
   const isDark = theme.palette.mode === "dark";
   const [logState, setLogState] = useState("all");
   const [filterText, setFilterText] = useState("");
-
+  const [useRegexSearch, setUseRegexSearch] = useState(true);
+  const [hasInputError, setInputError] = useState(false);
+  const [inputHelperText, setInputHelperText] = useState("");
   const filterLogs = useMemo(() => {
+    setInputHelperText("");
+    setInputError(false);
+    if (useRegexSearch) {
+      try {
+        const regex = new RegExp(filterText);
+        return logData.filter((data) => {
+          return (
+            regex.test(data.payload) &&
+            (logState === "all" ? true : data.type.includes(logState))
+          );
+        });
+      } catch (err: any) {
+        setInputHelperText(err.message.substring(0, 60));
+        setInputError(true);
+        return logData;
+      }
+    }
     return logData.filter((data) => {
       return (
         data.payload.includes(filterText) &&
@@ -91,7 +110,7 @@ const LogPage = () => {
           pt: 1,
           mb: 0.5,
           mx: "10px",
-          height: "36px",
+          height: "48px",
           display: "flex",
           alignItems: "center",
         }}
@@ -107,8 +126,31 @@ const LogPage = () => {
         </StyledSelect>
 
         <BaseStyledTextField
+          error={hasInputError}
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
+          helperText={inputHelperText}
+          placeholder={t("Filter conditions")}
+          InputProps={{
+            sx: { pr: 1 },
+            endAdornment: (
+              <IconButton
+                sx={{ p: 0.5 }}
+                title={t("Use Regular Expression")}
+                style={{
+                  backgroundColor: useRegexSearch
+                    ? "rgba(20, 20, 20, 0.2)"
+                    : "rgba(30, 0, 0, 0.0)",
+                  fontSize: "150%",
+                  fontWeight: "800",
+                  borderRadius: "10%",
+                }}
+                onClick={() => setUseRegexSearch(!useRegexSearch)}
+              >
+                .*
+              </IconButton>
+            ),
+          }}
         />
       </Box>