diff --git a/ui/package.json b/ui/package.json index 152f9a8b..973128b8 100644 --- a/ui/package.json +++ b/ui/package.json @@ -49,6 +49,7 @@ "react-redux": "^9.1.0", "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", + "react-window": "^1.8.10", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "typescript": "^4.9.5", @@ -56,7 +57,7 @@ }, "scripts": { "release": "standard-version", - "start": "GENERATE_SOURCEMAP=false HTTPS=true craco start", + "start": "GENERATE_SOURCEMAP=false PORT=8080 HTTPS=true craco start", "build": "GENERATE_SOURCEMAP=false PUBLIC_URL=/public/ craco build", "lint:prettier": "prettier --write src\"/**/*.+(js|ts|tsx|jsx|json|md|json)\"", "lint:style": "stylelint src\"/**/*.+(css|scss|less|stylus|sass|postcss)\" --fix", diff --git a/ui/src/components/layout/index.tsx b/ui/src/components/layout/index.tsx index ad72930e..9eaaeb22 100644 --- a/ui/src/components/layout/index.tsx +++ b/ui/src/components/layout/index.tsx @@ -192,9 +192,7 @@ const LayoutPage = () => {

Karpor

-
- -
+ { function handleClick() { const inputValue = getContent() if (!inputValue) { - message.warning('请输入有效sql语句') + message.warning(t('PleaseEnterValidSQLStatement')) return } cacheHistory(inputValue) diff --git a/ui/src/components/tabs/index.tsx b/ui/src/components/tabs/index.tsx index 8a02651e..8871963e 100644 --- a/ui/src/components/tabs/index.tsx +++ b/ui/src/components/tabs/index.tsx @@ -1,8 +1,9 @@ import React, { memo } from 'react' import classNames from 'classnames' -import styles from './style.module.less' -import { getDataType } from '@/utils/tools' import { useTranslation } from 'react-i18next' +import { getDataType } from '@/utils/tools' + +import styles from './style.module.less' type Props = { current: string @@ -26,34 +27,32 @@ const KarporTabs = ({ const { t } = useTranslation() return (
- {list?.map((item, index) => { - return ( + {list?.map((item, index) => ( +
{ + !item?.disabled && onChange(item.value, index) + }} + style={{ + ...itemStyle, + ...(item?.disabled ? { color: '#f1f1f1' } : {}), + }} + >
{ - !item?.disabled && onChange(item.value, index) - }} - style={{ - ...itemStyle, - ...(item?.disabled ? { color: '#f1f1f1' } : {}), - }} + className={classNames(styles.normal, { + [styles.active]: current === item.value, + })} + style={ + item?.disabled ? { color: '#999', cursor: 'not-allowed' } : {} + } > -
- {getDataType(item?.label) === 'String' - ? t(item?.label as string) - : item?.label} -
+ {getDataType(item?.label) === 'String' + ? t(item?.label as string) + : item?.label}
- ) - })} +
+ ))}
) } diff --git a/ui/src/components/yaml/index.tsx b/ui/src/components/yaml/index.tsx index 053dd8f4..347cd515 100644 --- a/ui/src/components/yaml/index.tsx +++ b/ui/src/components/yaml/index.tsx @@ -1,13 +1,13 @@ import React, { useEffect, useRef } from 'react' import type { LegacyRef } from 'react' +import { Button, message } from 'antd' +import { useTranslation } from 'react-i18next' import hljs from 'highlight.js' import yaml from 'js-yaml' import 'highlight.js/styles/lightfair.css' -import { yaml2json } from '../../utils/tools' +import { yaml2json } from '@/utils/tools' import styles from './styles.module.less' -import { Button, message } from 'antd' -import { useTranslation } from 'react-i18next' // eslint-disable-next-line @typescript-eslint/no-var-requires hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml')) diff --git a/ui/src/locales/de.json b/ui/src/locales/de.json index 4fef3cce..2cee703e 100644 --- a/ui/src/locales/de.json +++ b/ui/src/locales/de.json @@ -109,5 +109,6 @@ "TotalResourceGroupRules": "Gesamte Ressourcegruppen-Regeln", "TotalResources": "Alle Ressourcen", "ClusterCount": "Anzahl der Kluster", - "UnableCreateResourceGroupInReadOnly": "Im Nur-Lesen-Modus können keine Ressourcengruppen-Regeln erstellt werden." + "UnableCreateResourceGroupInReadOnly": "Im Nur-Lesen-Modus können keine Ressourcengruppen-Regeln erstellt werden.", + "PleaseEnterValidSQLStatement": "Bitte geben Sie eine gültige SQL-Anweisung ein." } diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json index b3f1bc72..b9dae828 100644 --- a/ui/src/locales/en.json +++ b/ui/src/locales/en.json @@ -109,5 +109,6 @@ "TotalResourceGroupRules": "Total ResourceGroupRules", "TotalResources": "Total Resources", "ClusterCount": "Cluster Count", - "UnableCreateResourceGroupInReadOnly": "Unable to create resource group rules in read-only mode" + "UnableCreateResourceGroupInReadOnly": "Unable to create resource group rules in read-only mode", + "PleaseEnterValidSQLStatement": "Please enter a valid SQL statement" } diff --git a/ui/src/locales/pt.json b/ui/src/locales/pt.json index da1d8d66..7de33eed 100644 --- a/ui/src/locales/pt.json +++ b/ui/src/locales/pt.json @@ -109,5 +109,6 @@ "TotalResourceGroupRules": "Regras de Recursos Totais do Grupo", "TotalResources": "Recursos totais", "ClusterCount": "Número de Clusters", - "UnableCreateResourceGroupInReadOnly": "No modo de somente leitura, não é possível criar regras de grupo de recursos." + "UnableCreateResourceGroupInReadOnly": "No modo de somente leitura, não é possível criar regras de grupo de recursos.", + "PleaseEnterValidSQLStatement": "Por favor, insira uma declaração SQL válida." } diff --git a/ui/src/locales/zh.json b/ui/src/locales/zh.json index f69468c9..ba9e3b6f 100644 --- a/ui/src/locales/zh.json +++ b/ui/src/locales/zh.json @@ -109,5 +109,6 @@ "TotalResourceGroupRules": "资源组规则数量", "TotalResources": "资源总数", "ClusterCount": "集群数量", - "UnableCreateResourceGroupInReadOnly": "只读模式下不能创建资源组规则" + "UnableCreateResourceGroupInReadOnly": "只读模式下不能创建资源组规则", + "PleaseEnterValidSQLStatement": "请输入有效SQL语句" } diff --git a/ui/src/pages/cluster/add/index.tsx b/ui/src/pages/cluster/add/index.tsx index f06f0219..c3a634df 100644 --- a/ui/src/pages/cluster/add/index.tsx +++ b/ui/src/pages/cluster/add/index.tsx @@ -14,12 +14,12 @@ import styles from './styles.module.less' const { TextArea } = Input const RegisterCluster = () => { - const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice) + const { t } = useTranslation() const [form] = Form.useForm() const navigate = useNavigate() + const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice) const [yamlContent, setYamlContent] = useState('') const [loading, setLoading] = useState(false) - const { t } = useTranslation() async function onFinish(values: any) { if (isReadOnlyMode) { @@ -50,8 +50,8 @@ const RegisterCluster = () => { message.error( validateResponse?.message || t('KubeConfigDoesNotMeetTheRequirements'), ) - setLoading(false) } + setLoading(false) } function goBack() { @@ -96,7 +96,7 @@ const RegisterCluster = () => {
- {t('RegisterCluster')} +

{t('RegisterCluster')}

void - fileList: any -} - -export const UploadConfig = (props: UploadConfigProps) => { - const [radioValue, setRadioValue] = useState('file') - - const onRadioChange = (e: RadioChangeEvent) => { - setRadioValue(e.target.value) - props?.onChange({ - type: e.target.value, - value: '', - }) - } - - const handleTextAreaChange = event => { - props?.onChange({ - ...props?.fileList, - value: event.target.value, - }) - } - - return ( -
-
- - 文件配置 - 输入yaml - -
- {radioValue === 'file' ? ( - - - - ) : ( -