[Feature] 添加日志等级设置 (#215)

* feat: Add LogLevel option.

* style: update debug log color.

* fix: code lint, constant extract, i18

* chore: Add prettierignore

* refactor: Remove LogType.

* fix(type err.): type err

* Update src/signals/request.ts

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

* refactor: var name change.

* Update package.json

Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
Signed-off-by: sdttttt <Kaltsit@111.com>

---------

Signed-off-by: sdttttt <Kaltsit@111.com>
Co-authored-by: kunish <17328586+kunish@users.noreply.github.com>
This commit is contained in:
sdttttt 2023-09-14 16:49:39 +08:00 committed by GitHub
parent ea9f7c29e8
commit 0026008178
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 83 additions and 10 deletions

2
.prettierignore Normal file
View File

@ -0,0 +1,2 @@
CHANGELOG.md
pnpm-lock.yaml

View File

@ -4,5 +4,6 @@
"prettier-plugin-tailwindcss" "prettier-plugin-tailwindcss"
], ],
"semi": false, "semi": false,
"singleQuote": true "singleQuote": true,
"endOfLine": "crlf"
} }

View File

@ -7,6 +7,7 @@
"scripts": { "scripts": {
"build": "vite build", "build": "vite build",
"dev": "vite", "dev": "vite",
"format": "prettier -w .",
"prepare": "husky install", "prepare": "husky install",
"serve": "vite preview" "serve": "vite preview"
}, },

View File

@ -153,3 +153,11 @@ export enum MODE_OPTIONS {
Rule = 'rule', Rule = 'rule',
Direct = 'direct', Direct = 'direct',
} }
export enum LOG_LEVEL {
Info = 'info',
Error = 'error',
Warning = 'warning',
Debug = 'debug',
Silent = 'silent',
}

View File

@ -61,6 +61,12 @@ export default {
updated: 'Updated', updated: 'Updated',
renderProxiesInSamePage: 'Render proxies and proxy provider in same page', renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
tableSize: 'Table size', tableSize: 'Table size',
logLevel: 'Log Level',
info: 'info',
silent: 'silent',
debug: 'debug',
warning: 'warning',
error: 'error',
xs: 'Extra small size', xs: 'Extra small size',
sm: 'Small size', sm: 'Small size',
md: 'Normal size', md: 'Normal size',

View File

@ -61,6 +61,12 @@ export default {
updated: '更新于', updated: '更新于',
renderProxiesInSamePage: '将代理和代理提供者显示在同一页', renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
tableSize: '表格大小', tableSize: '表格大小',
logLevel: '日志等级',
info: '信息',
silent: '静默',
debug: '调试',
warning: '警告',
error: '错误',
xs: '超小尺寸', xs: '超小尺寸',
sm: '小尺寸', sm: '小尺寸',
md: '正常尺寸', md: '正常尺寸',

View File

@ -25,6 +25,7 @@ import {
import { Button } from '~/components' import { Button } from '~/components'
import { import {
LANG, LANG,
LOG_LEVEL,
MODE_OPTIONS, MODE_OPTIONS,
PROXIES_ORDERING_TYPE, PROXIES_ORDERING_TYPE,
PROXIES_PREVIEW_TYPE, PROXIES_PREVIEW_TYPE,
@ -40,6 +41,7 @@ import {
favDayTheme, favDayTheme,
favNightTheme, favNightTheme,
latencyTestTimeoutDuration, latencyTestTimeoutDuration,
logLevel,
proxiesOrderingType, proxiesOrderingType,
proxiesPreviewType, proxiesPreviewType,
renderInTwoColumns, renderInTwoColumns,
@ -49,6 +51,7 @@ import {
setFavDayTheme, setFavDayTheme,
setFavNightTheme, setFavNightTheme,
setLatencyTestTimeoutDuration, setLatencyTestTimeoutDuration,
setLogLevel,
setProxiesOrderingType, setProxiesOrderingType,
setProxiesPreviewType, setProxiesPreviewType,
setRenderInTwoColumns, setRenderInTwoColumns,
@ -407,6 +410,33 @@ const ConfigForXd = () => {
</select> </select>
</div> </div>
<div>
<ConfigTitle>{t('logLevel')}</ConfigTitle>
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => {
setLogLevel(e.target.value as LOG_LEVEL)
}}
>
<For
each={[
LOG_LEVEL.Info,
LOG_LEVEL.Error,
LOG_LEVEL.Warning,
LOG_LEVEL.Debug,
LOG_LEVEL.Silent,
]}
>
{(level) => (
<option selected={logLevel() === level} value={level}>
{t(level)}
</option>
)}
</For>
</select>
</div>
<div> <div>
<Button <Button
onClick={() => { onClick={() => {

View File

@ -7,8 +7,9 @@ import {
} from '@tanstack/solid-table' } from '@tanstack/solid-table'
import { For, Index, createEffect, createSignal } from 'solid-js' import { For, Index, createEffect, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { LOGS_TABLE_MAX_ROWS } from '~/constants' import { LOGS_TABLE_MAX_ROWS, LOG_LEVEL } from '~/constants'
import { tableSize, tableSizeClassName, useWsRequest } from '~/signals' import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
import { logLevel } from '~/signals/config'
import { Log } from '~/types' import { Log } from '~/types'
type LogWithSeq = Log & { seq: number } type LogWithSeq = Log & { seq: number }
@ -19,7 +20,7 @@ export default () => {
const [search, setSearch] = createSignal('') const [search, setSearch] = createSignal('')
const [logs, setLogs] = createSignal<LogWithSeq[]>([]) const [logs, setLogs] = createSignal<LogWithSeq[]>([])
const logsData = useWsRequest<Log>('logs') const logsData = useWsRequest<Log>('logs', { level: logLevel() })
createEffect(() => { createEffect(() => {
const data = logsData() const data = logsData()
@ -41,20 +42,23 @@ export default () => {
{ {
header: t('type'), header: t('type'),
cell: ({ row }) => { cell: ({ row }) => {
const type = row.original.type const type = row.original.type as LOG_LEVEL
let className = '' let className = ''
switch (type) { switch (type) {
case 'error': case LOG_LEVEL.Error:
className = 'text-error' className = 'text-error'
break break
case 'warning': case LOG_LEVEL.Warning:
className = 'text-warning' className = 'text-warning'
break break
case 'info': case LOG_LEVEL.Info:
className = 'text-info' className = 'text-info'
break break
case LOG_LEVEL.Debug:
className = 'text-success'
break
} }
return <span class={className}>{`[${row.original.type}]`}</span> return <span class={className}>{`[${row.original.type}]`}</span>

View File

@ -3,6 +3,7 @@ import { createSignal } from 'solid-js'
import { import {
LATENCY_QUALITY_MAP_HTTP, LATENCY_QUALITY_MAP_HTTP,
LATENCY_QUALITY_MAP_HTTPS, LATENCY_QUALITY_MAP_HTTPS,
LOG_LEVEL,
PROXIES_ORDERING_TYPE, PROXIES_ORDERING_TYPE,
PROXIES_PREVIEW_TYPE, PROXIES_PREVIEW_TYPE,
TAILWINDCSS_SIZE, TAILWINDCSS_SIZE,
@ -51,6 +52,11 @@ export const [tableSize, setTableSize] = makePersisted(
{ name: 'tableSize', storage: localStorage }, { name: 'tableSize', storage: localStorage },
) )
export const [logLevel, setLogLevel] = makePersisted(
createSignal<LOG_LEVEL>(LOG_LEVEL.Info),
{ name: 'logLevel', storage: localStorage },
)
export const tableSizeClassName = (size: TAILWINDCSS_SIZE) => { export const tableSizeClassName = (size: TAILWINDCSS_SIZE) => {
let className = 'table-xs' let className = 'table-xs'

View File

@ -50,9 +50,15 @@ export const secret = () => endpoint()?.secret
export const wsEndpointURL = () => export const wsEndpointURL = () =>
new URL(endpoint()?.url ?? '').origin.replace('http', 'ws') new URL(endpoint()?.url ?? '').origin.replace('http', 'ws')
export const useWsRequest = <T>(path: string) => { export const useWsRequest = <T>(
path: string,
queries: Record<string, string> = {}
) => {
const queryParams = new URLSearchParams(queries)
queryParams.set('token', secret() ?? '')
const ws = createReconnectingWS( const ws = createReconnectingWS(
`${wsEndpointURL()}/${path}?token=${secret()}`, `${wsEndpointURL()}/${path}?${queryParams.toString()}`,
) )
const event = createEventSignal<{ const event = createEventSignal<{

View File

@ -1,3 +1,6 @@
import { LOG_LEVEL } from '~/constants'
declare module 'solid-js' { declare module 'solid-js' {
namespace JSX { namespace JSX {
interface Directives { interface Directives {
@ -106,7 +109,7 @@ export type Connection = ConnectionRawMessage & {
} }
export type Log = { export type Log = {
type: 'error' | 'warning' | 'info' | 'debug' | 'silent' type: LOG_LEVEL
payload: string payload: string
} }