{
+ const { setModal } = useModal()
+ const { t } = useTranslation()
const profile = useProfile()
const [isAutoRefresh, setIsAutoRefresh] = useState(true)
const [group, setGroup] = useState<'recent' | 'active'>('recent')
- const { data: requests, error: requestsError } = useSWR(
- () => '/requests/' + group,
- fetcher,
- {
+ const { data: recentRequestsResponse, error: requestsError } =
+ useSWR(() => '/requests/' + group, fetcher, {
revalidateOnFocus: false,
revalidateOnReconnect: false,
dedupingInterval: 1000,
refreshInterval: isAutoRefresh
? profile?.platform === 'macos'
- ? 1000
+ ? 2000
: 4000
: 0,
- },
- )
+ })
const [requestList, setRequestList] = useState>([])
const [activeRequestList, setActiveRequestList] = useState<
Array
@@ -53,200 +57,217 @@ const Page: React.FC = () => {
() => (group === 'recent' ? requestList : activeRequestList),
[group, requestList, activeRequestList],
)
+ const query = useQuery()
+ const sourceIp = useMemo(() => query.get('source'), [query])
- useEffect(() => {
- if (!requests?.requests) return
+ useEffect(
+ () => {
+ if (!recentRequestsResponse?.requests) return
- const pendingList = requests.requests
- const now = new Date()
- let newList = [...currentList]
+ const pendingList = [...recentRequestsResponse.requests]
+ const now = new Date()
+ let newList = [...currentList]
- while (pendingList.length) {
- const request = pendingList.pop() as RequestItem
- const existingIndex = newList.findIndex((item) => item.id === request.id)
+ while (pendingList.length) {
+ const request = pendingList.pop() as RequestItem
+ const existingIndex = newList.findIndex(
+ (item) => item.id === request.id,
+ )
- if (existingIndex >= 0) {
- Object.assign(newList[existingIndex], {
- ...omit(request, ['id']),
- lastUpdated: now,
- })
- } else {
- if (newList.length && request.id > newList[0].id) {
- newList.unshift({
- ...request,
+ if (existingIndex >= 0) {
+ Object.assign(newList[existingIndex], {
+ ...omit(request, ['id']),
lastUpdated: now,
})
} else {
- newList.push({
- ...request,
- lastUpdated: now,
- })
+ if (newList.length && request.id > newList[0].id) {
+ newList.unshift({
+ ...request,
+ lastUpdated: now,
+ })
+ } else {
+ newList.push({
+ ...request,
+ lastUpdated: now,
+ })
+ }
}
}
- }
-
- if (group === 'recent') {
- newList = newList.slice(0, LIST_ITEMS_MAX)
- } else {
- newList = newList
- .filter((item) => item.lastUpdated === now)
- .sort((a, b) => b.id - a.id)
- }
-
- if (group === 'recent') {
- setRequestList(newList)
- setActiveRequestList([])
- } else {
- setRequestList([])
- setActiveRequestList(newList)
- }
- }, [requests, group])
+
+ if (group === 'recent') {
+ newList = newList
+ .filter((request) => {
+ if (sourceIp) {
+ return sourceIp === request.sourceAddress
+ }
+ return true
+ })
+ .slice(0, LIST_ITEMS_MAX)
+ } else {
+ newList = newList
+ .filter((request) => {
+ if (sourceIp) {
+ return (
+ request.lastUpdated === now &&
+ sourceIp === request.sourceAddress
+ )
+ }
+ return request.lastUpdated === now
+ })
+ .sort((a, b) => b.id - a.id)
+ }
+
+ if (group === 'recent') {
+ setRequestList(newList)
+ setActiveRequestList([])
+ } else {
+ setRequestList([])
+ setActiveRequestList(newList)
+ }
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [recentRequestsResponse, group, sourceIp],
+ )
const openRequestDetail = useCallback(
- (setModal: (modal: ModalProps) => void, req: RequestItem) => {
+ (req: RequestItem) => {
setModal({
children({ onClose }) {
- return
+ return onClose ? (
+
+ ) : (
+
+ )
},
onClose() {
// noop
},
})
},
- [],
+ [setModal],
)
- const getRowRenderer: (
- setModal: (modal: ModalProps) => void,
- ) => ListRowRenderer = useCallback(
- (setModal) => {
- // eslint-disable-next-line react/display-name
- return ({
- key, // Unique key within array of rows
- index, // Index of row within collection
- isScrolling, // The List is currently being scrolled
- isVisible, // This row is visible within the List (eg it is not an overscanned row)
- style, // Style object to be applied to row (to position it)
- }) => {
- const req = currentList[index]
-
- return (
- openRequestDetail(setModal, req)}
- tw="flex flex-col justify-center py-2 cursor-pointer hover:bg-gray-100"
- css={css`
- padding-left: calc(env(safe-area-inset-left) + 0.75rem);
- padding-right: calc(env(safe-area-inset-right) + 0.75rem);
- `}>
-
-
- )
- }
+ const rowRenderer: ListRowRenderer = useCallback(
+ ({
+ key, // Unique key within array of rows
+ index, // Index of row within collection
+ isScrolling, // The List is currently being scrolled
+ isVisible, // This row is visible within the List (eg it is not an overscanned row)
+ style, // Style object to be applied to row (to position it)
+ }) => {
+ const req = currentList[index]
+
+ return (
+ openRequestDetail(req)}
+ tw="flex flex-col justify-center py-2 cursor-pointer hover:bg-gray-100"
+ css={css`
+ padding-left: calc(env(safe-area-inset-left) + 0.75rem);
+ padding-right: calc(env(safe-area-inset-right) + 0.75rem);
+ `}>
+
+
+ )
},
[currentList, openRequestDetail],
)
return (
-
-
-
- {({ setModal }) => {
- return (
-
-
- setIsAutoRefresh(newState)
- }
- />
-
-
- {currentList.length ? (
-
- {({ width, height }) => {
- return (
- div {
- ${tw`divide-y divide-gray-200`}
- }
- `}
- />
- )
+
+
+ setIsAutoRefresh(newState)}
+ />
+
+
+ {recentRequestsResponse ? (
+ currentList.length ? (
+
+ {({ width, height }) => {
+ return (
+
- ) : (
-
- Loading...
-
- )}
-
-
div {
- ${tw`mx-2`}
+ ${tw`divide-y divide-gray-200`}
}
- & > div:first-of-type {
- margin-left: 0;
- }
- `,
- ]}>
- ) => {
- setGroup(event.target.value as 'recent' | 'active')
- }}
- options={[
- {
- children: 'Recent',
- value: 'recent',
- },
- {
- children: 'Active',
- value: 'active',
- },
- ]}
- value={group}
+ `}
/>
-
-
+ ) : (
+
+ {t('common.no_data')}
)
- }}
-
-
-
+ {t('common.is_loading')}...
+
+ )}
+ div {
+ ${tw`mx-2`}
+ }
+ & > div:first-of-type {
+ margin-left: 0;
+ }
+ `,
+ ]}>
+ ) => {
+ setGroup(() => {
+ const newState = event.target.value as 'recent' | 'active'
+ mutate('/requests/' + newState)
+ return newState
+ })
+ }}
+ options={[
+ {
+ children: t('requests.recent'),
+ value: 'recent',
+ },
+ {
+ children: t('requests.active'),
+ value: 'active',
+ },
+ ]}
+ value={group}
+ />
+
+
+
)
}
diff --git a/src/pages/Scripting/Evaluate/index.tsx b/src/pages/Scripting/Evaluate/index.tsx
index ea9d4c6..a4585ca 100644
--- a/src/pages/Scripting/Evaluate/index.tsx
+++ b/src/pages/Scripting/Evaluate/index.tsx
@@ -5,6 +5,7 @@ import loadable from '@loadable/component'
import React, { useState } from 'react'
import styled from '@emotion/styled/macro'
import { IControlledCodeMirror } from 'react-codemirror2'
+import { useTranslation } from 'react-i18next'
import tw from 'twin.macro'
import {
Input,
@@ -15,6 +16,8 @@ import {
} from '@sumup/circuit-ui'
import { toast } from 'react-toastify'
+import CodeMirrorLoading from '../../../components/CodeMirrorLoading'
+import FixedFullscreenContainer from '../../../components/FixedFullscreenContainer'
import PageTitle from '../../../components/PageTitle'
import { EvaluateResult } from '../../../types'
import fetcher from '../../../utils/fetcher'
@@ -35,16 +38,15 @@ const CodeMirror = loadable(
return mod
},
{
- fallback: (
-
- Loading...
-
- ),
+ fallback: ,
},
)
const Page: React.FC = () => {
- const [code, setCode] = useState('// Only supports Cron script\n')
+ const { t } = useTranslation()
+ const [code, setCode] = useState(() =>
+ t('scripting.editor_placeholder'),
+ )
const [isLoading, setIsLoading] = useState(false)
const [result, setResult] = useState()
const [timeout, setTimeoutValue] = useState(5)
@@ -53,7 +55,7 @@ const Page: React.FC = () => {
if (isLoading) return
if (!code) {
- toast.error('没有输入脚本内容')
+ toast.error(t('scripting.empty_code_error'))
return
}
@@ -85,101 +87,96 @@ const Page: React.FC = () => {
}
return (
-
-
-
+
+
-
-
- .CodeMirror {
- height: 100%;
- font-family: Menlo, Monaco, Consolas, 'Liberation Mono',
- 'Courier New', monospace;
- }
- `,
- ]}
- value={code}
- options={{
- mode: 'javascript',
- theme: 'material',
- lineNumbers: true,
- tabSize: 2,
- indentWithTabs: false,
- lineWrapping: true,
- }}
- onBeforeChange={(editor, data, value) => {
- setCode(value)
- }}
- />
-
-
+
+ .CodeMirror {
+ height: 100%;
+ font-family: Menlo, Monaco, Consolas, 'Liberation Mono',
+ 'Courier New', monospace;
+ }
`,
- ]}>
-
- 运行
-
+ ]}
+ value={code}
+ options={{
+ mode: 'javascript',
+ theme: 'material',
+ lineNumbers: true,
+ tabSize: 2,
+ indentWithTabs: false,
+ lineWrapping: true,
+ }}
+ onBeforeChange={(editor, data, value) => {
+ setCode(value)
+ }}
+ />
+
+
-
-
{
- setResult('')
- }}>
- {({ onClose }) => (
-
-
-
-
- )}
-
+
+
{
+ setResult('')
+ }}>
+ {({ onClose }) => (
+
+
+
+
+ )}
+
+
)
}
diff --git a/src/pages/Scripting/index.tsx b/src/pages/Scripting/index.tsx
index e14c1b8..9adbc69 100644
--- a/src/pages/Scripting/index.tsx
+++ b/src/pages/Scripting/index.tsx
@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core'
import css from '@emotion/css/macro'
import React, { MouseEvent, useMemo, useState } from 'react'
import styled from '@emotion/styled/macro'
+import { useTranslation } from 'react-i18next'
import { useHistory } from 'react-router-dom'
import { toast } from 'react-toastify'
import tw from 'twin.macro'
@@ -16,11 +17,13 @@ import {
ModalWrapper,
} from '@sumup/circuit-ui'
+import FixedFullscreenContainer from '../../components/FixedFullscreenContainer'
import PageTitle from '../../components/PageTitle'
import { EvaluateResult, Scriptings } from '../../types'
import fetcher from '../../utils/fetcher'
const Page: React.FC = () => {
+ const { t } = useTranslation()
const history = useHistory()
const { data: scripting, error: scriptingError } = useSWR
(
'/scripting',
@@ -68,67 +71,59 @@ const Page: React.FC = () => {
}
return (
-
-
-
+
+
-
-
- {scripting &&
- filteredList.map((script, index) => {
- return (
-
openUrl(script.path)}>
-
-
- {script.name}
-
-
{script.type}
-
-
- {script.type === 'cron' && (
-
{
- e.stopPropagation()
- evaluate(script.name, index)
- }}
- size="kilo"
- isLoading={isLoading === index}
- loadingLabel={'运行中'}
- tw="px-3 py-3 text-sm leading-tight">
- 运行
-
- )}
+
+
+ {scripting &&
+ filteredList.map((script, index) => {
+ return (
+
openUrl(script.path)}>
+
+
+ {script.name}
+
{script.type}
+
+
+ {script.type === 'cron' && (
+ {
+ e.stopPropagation()
+ evaluate(script.name, index)
+ }}
+ size="kilo"
+ isLoading={isLoading === index}
+ loadingLabel={t('scripting.running')}
+ tw="px-3 py-3 text-sm leading-tight">
+ {t('scripting.run_script_button_title')}
+
+ )}
- )
- })}
-
+
+ )
+ })}
+
-
-
-
-
-
+
+
{
}}>
{({ onClose }) => (
-
+
+
)
}
diff --git a/src/pages/Traffic/components/TrafficDataRow.tsx b/src/pages/Traffic/components/TrafficDataRow.tsx
index fb29068..ee75f22 100644
--- a/src/pages/Traffic/components/TrafficDataRow.tsx
+++ b/src/pages/Traffic/components/TrafficDataRow.tsx
@@ -41,8 +41,8 @@ const TrafficDataRow: React.FC = ({ name, data }) => {
key={name}
onClick={() => setIsDetailsOpen(!isDetailsOpen)}>
- {name}
-
+
{name}
+
总计 {bytes(data.in + data.out)}
{
+ const { t } = useTranslation()
const [isAutoRefresh, setIsAutoRefresh] = useState(false)
const { data: traffic, error: trafficError } = useSWR(
'/traffic',
@@ -54,9 +57,9 @@ const Page: React.FC = () => {
}
return (
-
+
setIsAutoRefresh(newState)}
@@ -67,13 +70,13 @@ const Page: React.FC = () => {
- 开启时间
+ {t('traffic.start_time')}
{dayjs.unix(traffic.startTime).format()}
- 启动时长
+ {t('traffic.uptime')}
{dayjs.unix(traffic.startTime).toNow(true)}
@@ -94,7 +97,7 @@ const Page: React.FC = () => {
)}
-