From 4ac673af3f13ab13fe6a7047e2e5af8d85e32392 Mon Sep 17 00:00:00 2001 From: nickcdon Date: Thu, 20 Oct 2022 11:31:27 +0800 Subject: [PATCH] =?UTF-8?q?:fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E6=9E=90?= =?UTF-8?q?=E6=96=B9=E6=A1=88=E4=BB=A3=E7=A0=81=E5=BA=93=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit :art: 统一封装getRepoName --- web/packages/login/package.json | 2 +- web/packages/shared/package.json | 2 +- web/packages/shared/tca/util/index.ts | 38 +++++ .../src/components/repos/index.tsx | 8 +- .../src/modules/repos/create-repo.tsx | 4 +- .../src/modules/repos/edit-modal.tsx | 6 +- .../tca-analysis/src/modules/repos/list.tsx | 7 +- .../src/modules/repos/repo/index.tsx | 5 +- .../src/modules/schemes/baseinfo/index.tsx | 22 +-- .../src/modules/schemes/code-lint/index.tsx | 8 +- .../src/modules/schemes/index.tsx | 47 ++++--- .../tca-analysis/src/services/repos.ts | 2 +- web/packages/tca-analysis/src/utils/index.ts | 15 +- web/packages/tca-layout/src/constant/node.ts | 14 ++ .../team/components/workspace/index.tsx | 3 +- web/packages/tca-manage/package.json | 3 +- .../public/locales/en-US/translation.json | 17 ++- .../public/locales/zh-CN/translation.json | 17 ++- web/packages/tca-manage/src/constant/node.ts | 3 + web/packages/tca-manage/src/constant/tool.ts | 12 ++ .../{rule-table.tsx => rule-table/index.tsx} | 52 ++++--- .../rule-table/rule-detail-drawer.tsx | 132 ++++++++++++++++++ .../modules/components/rule-table/style.scss | 25 ++++ .../tca-manage/src/modules/process/index.tsx | 54 ++++--- .../tca-manage/src/modules/process/style.scss | 12 +- .../plat/common/modules/nodes/constants.ts | 13 ++ web/yarn.lock | 74 +++++++--- 27 files changed, 456 insertions(+), 141 deletions(-) create mode 100644 web/packages/shared/tca/util/index.ts rename web/packages/tca-manage/src/modules/components/{rule-table.tsx => rule-table/index.tsx} (81%) create mode 100644 web/packages/tca-manage/src/modules/components/rule-table/rule-detail-drawer.tsx create mode 100644 web/packages/tca-manage/src/modules/components/rule-table/style.scss diff --git a/web/packages/login/package.json b/web/packages/login/package.json index ae014ef05..f01105295 100644 --- a/web/packages/login/package.json +++ b/web/packages/login/package.json @@ -39,7 +39,7 @@ "react-i18next": "^11.17.3", "react-redux": "^7.2.5", "react-router-dom": "^5.3.0", - "tdesign-react": "0.36.4", + "tdesign-react": "0.42.3", "universal-cookie": "^4.0.4" }, "devDependencies": { diff --git a/web/packages/shared/package.json b/web/packages/shared/package.json index aa96635ad..b293304d5 100644 --- a/web/packages/shared/package.json +++ b/web/packages/shared/package.json @@ -45,7 +45,7 @@ "react-router-dom": "^5.3.0", "react-copy-to-clipboard": "^5.0.4", "react-i18next": "^11.17.3", - "tdesign-react": "0.36.4", + "tdesign-react": "0.42.3", "typescript": "^4.5.5" } } \ No newline at end of file diff --git a/web/packages/shared/tca/util/index.ts b/web/packages/shared/tca/util/index.ts new file mode 100644 index 000000000..666004929 --- /dev/null +++ b/web/packages/shared/tca/util/index.ts @@ -0,0 +1,38 @@ +/** + * 获取代码库地址 path + * @param scmUrl scm url + * @returns path + */ +export const getScmUrlPath = (scmUrl: string) => { + // 处理 ssh http 格式 scm url + const path = scmUrl.replace(/(^https?:\/\/[^/]*\/)|(^git@[^:]*:([0-9]*\/)?)/, ''); + return path; +}; + +interface GetRepoNameParams { + /** 是否仅使用代码库尾部作为name，否则将代码库path作为name */ + onlyLastName: boolean +} + +/** + * 获取代码库展示名称 + * @param repoInfo 代码库信息，可传入{name, url, scmUrl, scm_url}，默认存在name直接显示，否则会格式化处理 + * @param params 参数项 + * @returns repoName + */ +export const getRepoName = (repoInfo: any, params: GetRepoNameParams = { onlyLastName: false }) => { + const info = repoInfo || {}; + const { name, url, scmUrl } = info; + if (name) { + return name; + } + const repoUrl = url || scmUrl || info.scm_url; + if (repoUrl) { + if (params.onlyLastName) { + return repoUrl.substring(0, repoUrl.lastIndexOf('/') + 1); + } + return getScmUrlPath(repoUrl); + } + return ''; +}; + diff --git a/web/packages/tca-analysis/src/components/repos/index.tsx b/web/packages/tca-analysis/src/components/repos/index.tsx index ae2783f8c..b2967dcb9 100644 --- a/web/packages/tca-analysis/src/components/repos/index.tsx +++ b/web/packages/tca-analysis/src/components/repos/index.tsx @@ -20,8 +20,8 @@ import CaretDown from 'coding-oa-uikit/lib/icon/CaretDown'; import LinkIcon from 'coding-oa-uikit/lib/icon/Link'; import ConfigIcon from 'coding-oa-uikit/lib/icon/Cog'; +import { getRepoName } from '@tencent/micro-frontend-shared/tca/util'; import { getRepos } from '@src/services/common'; -import { getRepoName } from '@src/utils'; import { getReposRouter } from '@src/utils/getRoutePath'; import { useStateStore, useDispatchStore } from '@src/context/store'; import { SET_CUR_REPO } from '@src/context/constant'; @@ -101,7 +101,7 @@ const Repos = (props: IProps) => { return repoList.map(item => ( - {item.name || getRepoName(item.scm_url)} + {getRepoName(item)} )); }; @@ -132,12 +132,12 @@ const Repos = (props: IProps) => { }>
- {curRepo.scm_url} + {getRepoName(curRepo)}
{/* */} - + 跳转代码库: {curRepo.scm_url}}> diff --git a/web/packages/tca-analysis/src/modules/repos/create-repo.tsx b/web/packages/tca-analysis/src/modules/repos/create-repo.tsx index b6372d4a4..292168e91 100644 --- a/web/packages/tca-analysis/src/modules/repos/create-repo.tsx +++ b/web/packages/tca-analysis/src/modules/repos/create-repo.tsx @@ -7,6 +7,7 @@ import { Modal, Form, Input, Select, message } from 'coding-oa-uikit'; import AuthFormItem from '@tencent/micro-frontend-shared/tca/user-auth/auth-form-item'; import { AuthTypeEnum, SCM_MAP } from '@tencent/micro-frontend-shared/tca/user-auth/constant'; +import { getRepoName } from '@tencent/micro-frontend-shared/tca/util'; import { userAuthAPI } from '@plat/api'; // import Authority from '@src/components/authority'; // import { SCM_MAP } from '@src/components/authority/constants'; @@ -14,7 +15,6 @@ import { postRepo } from '@src/services/repos'; import { getRepos } from '@src/services/common'; import { getAnalysisBaseRouter, getUserAuthBlankRouter } from '@src/utils/getRoutePath'; import { RestfulListAPIParams } from '@src/types'; -import { getRepoName } from '@src/utils'; import { REPO_TYPE } from './constant'; const { Option } = Select; @@ -37,7 +37,7 @@ const CreateRepo = (props: CreateRepoProps) => { const url = form.getFieldValue('scm_url'); if (url) { form.setFieldsValue({ - name: getRepoName(url), + name: getRepoName({ url }), }); } }; diff --git a/web/packages/tca-analysis/src/modules/repos/edit-modal.tsx b/web/packages/tca-analysis/src/modules/repos/edit-modal.tsx index 82adca4de..41f81da52 100644 --- a/web/packages/tca-analysis/src/modules/repos/edit-modal.tsx +++ b/web/packages/tca-analysis/src/modules/repos/edit-modal.tsx @@ -3,8 +3,8 @@ */ import React, { useEffect, useState } from 'react'; import { Modal, Form, Input, Space, Button, message } from 'coding-oa-uikit'; +import { getRepoName } from '@tencent/micro-frontend-shared/tca/util'; import { useLoginUserIsAdmin } from '@plat/hooks'; -import { getRepoName } from '@src/utils'; import { putRepo, getRepoMembers, delRepo } from '@src/services/repos'; interface EditModalProps { @@ -46,7 +46,7 @@ const EditModal = (props: EditModalProps) => { const onDel = () => { Modal.confirm({ - title: `是否确认删除代码库【${repoInfo.name || getRepoName(repoInfo.scm_url)}】？`, + title: `是否确认删除代码库【${getRepoName(repoInfo)}】？`, onOk() { delRepo(orgSid, teamName, repoInfo.id).then(() => { message.success('已删除代码库'); @@ -79,7 +79,7 @@ const EditModal = (props: EditModalProps) => { layout="vertical" initialValues={repoInfo && { ...repoInfo, - name: repoInfo.name || getRepoName(repoInfo.scm_url), + name: getRepoName(repoInfo), }} > { {/* todo: 待接口完善 */} @@ -167,7 +168,7 @@ const RepoList = (props: RepoListProps) => {
setName(e.target.value)} />
{ loading: false, repoInfo, }); - setName(repoInfo.name || getRepoName(repoInfo.scm_url)); + setName(getRepoName(repoInfo)); }, [orgSid, teamName, repoId]); useEffect(() => { diff --git a/web/packages/tca-analysis/src/modules/schemes/baseinfo/index.tsx b/web/packages/tca-analysis/src/modules/schemes/baseinfo/index.tsx index 6b632ca75..75567e13d 100644 --- a/web/packages/tca-analysis/src/modules/schemes/baseinfo/index.tsx +++ b/web/packages/tca-analysis/src/modules/schemes/baseinfo/index.tsx @@ -22,7 +22,7 @@ import { } from 'coding-oa-uikit'; import EllipsisH from 'coding-oa-uikit/lib/icon/EllipsisH'; -import { updateSchemeBasic, getLintConfig, updateLintConfig } from '@src/services/schemes'; +import { updateSchemeBasic, updateLintConfig } from '@src/services/schemes'; import NodeTag from '@src/components/node-tag'; import style from './style.scss'; @@ -41,24 +41,18 @@ interface BaseConfigProps { tags: any[]; languages: any[]; data: any; + lintConf: any; // 环境变量初始值 callback?: (data: any) => void; } const BaseConfig = (props: BaseConfigProps) => { - const { orgSid, teamName, data, repoId, tags, languages, callback } = props; + const { orgSid, teamName, data, repoId, tags, languages, lintConf, callback } = props; const [form] = Form.useForm(); const [visible, setVisible] = useState(false); const [isDefault, setDefault] = useState(true); - const [lintConfig, setLintConfig] = useState({}); const schemeId = data.id; - useEffect(() => { - if (schemeId) { - getLintConfig(orgSid, teamName, repoId, data.id).then(res => setLintConfig(res)); - } - }, [schemeId]); - - useEffect(() => form.resetFields(), [schemeId, lintConfig.envs]); + useEffect(() => form.resetFields(), [schemeId, lintConf]); // todo: remove const openModal = ({ key }: { key: string }) => { @@ -76,12 +70,10 @@ const BaseConfig = (props: BaseConfigProps) => { callback?.(response); }); - if (formData.envs !== lintConfig.envs) { + if (formData.envs !== lintConf.envs) { updateLintConfig(orgSid, teamName, repoId, schemeId, { - ...lintConfig, + ...lintConf, envs: formData.envs, - }).then((res) => { - setLintConfig(res); }); } }; @@ -104,7 +96,7 @@ const BaseConfig = (props: BaseConfigProps) => {
diff --git a/web/packages/tca-analysis/src/modules/schemes/code-lint/index.tsx b/web/packages/tca-analysis/src/modules/schemes/code-lint/index.tsx index 7d4c728f8..48da3d37d 100644 --- a/web/packages/tca-analysis/src/modules/schemes/code-lint/index.tsx +++ b/web/packages/tca-analysis/src/modules/schemes/code-lint/index.tsx @@ -20,7 +20,6 @@ import AngleRight from 'coding-oa-uikit/lib/icon/AngleRight'; import Loading from '@src/components/loading'; import { - getLintConfig, updateLintConfig, getCheckPackages, getLabels, @@ -43,17 +42,17 @@ interface CodeLintProps { schemeId: string | number; languages: any; schemeInfo: any; + data: any; callback?: (data: any) => void; } const CodeLint = (props: CodeLintProps) => { - const { orgSid, teamName, repoId, schemeId, languages, schemeInfo } = props; + const { orgSid, teamName, repoId, schemeId, languages, schemeInfo, data, callback } = props; const history = useHistory(); const [visible, setVisible] = useState(false); const [selectedPkgs, setSelectedPkgs] = useState([]); const [customPackage, setCustomPackage] = useState({}); - const [data, setData] = useState({}); const [labels, setLabels] = useState([]); const [allPkgs, setAllPkgs] = useState([]); const [loading, setLoading] = useState(true); @@ -78,7 +77,6 @@ const CodeLint = (props: CodeLintProps) => { }, []); useEffect(() => { - (async () => schemeId && setData(await getLintConfig(orgSid, teamName, repoId, schemeId)))(); setSearchParams({}); }, [schemeId]); @@ -109,7 +107,7 @@ const CodeLint = (props: CodeLintProps) => { ...data, ...params, }).then((res) => { - setData(res); + callback(res); }); const getList = async () => { diff --git a/web/packages/tca-analysis/src/modules/schemes/index.tsx b/web/packages/tca-analysis/src/modules/schemes/index.tsx index 632eaffac..f440f4e56 100644 --- a/web/packages/tca-analysis/src/modules/schemes/index.tsx +++ b/web/packages/tca-analysis/src/modules/schemes/index.tsx @@ -16,7 +16,7 @@ import { Tabs, Button } from 'coding-oa-uikit'; import { useStateStore } from '@src/context/store'; import Repos from '@src/components/repos'; import { getSchemeRouter, getTmplBlankRouter } from '@src/utils/getRoutePath'; -import { getSchemes, getLanguages, getTags, getSchemeBasic } from '@src/services/schemes'; +import { getSchemes, getLanguages, getTags, getSchemeBasic, getLintConfig } from '@src/services/schemes'; import { getTmplList } from '@src/services/template'; import noDataSvg from '@src/images/no-data.svg'; import Loading from '@src/components/loading'; @@ -46,10 +46,12 @@ const Schemes = () => { const [tags, setTags] = useState([]); const [languages, setLanguages] = useState([]); const [templates, setTemplates] = useState([]); + const [lintConfig, setLintConfig] = useState({}); const [pullModalVsb, setPullModalVsb] = useState(false); const tab = params.tabs || 'basic'; const schemeId = toNumber(params.schemeId); + const repoId = toNumber(params.repoId) || curRepo.id; const { orgSid, teamName } = params; useEffect(() => { @@ -57,14 +59,18 @@ const Schemes = () => { }, []); useEffect(() => { - if (curRepo.id) { - history.replace(`${getSchemeRouter(orgSid, teamName, curRepo.id, schemeId)}`); + schemeId && getLintConf(); + }, [schemeId]); + + useEffect(() => { + if (repoId) { + history.replace(`${getSchemeRouter(orgSid, teamName, repoId, schemeId)}`); (async () => { getSchemeList(schemeId); })(); } - }, [curRepo.id]); + }, [repoId]); const getCommonData = async () => { setTags(get(await getTags(orgSid), 'results', [])); @@ -72,9 +78,13 @@ const Schemes = () => { setTemplates(get(await getTmplList(orgSid, { limit: 100 }), 'results', [])); }; + const getLintConf = async () => { + setLintConfig(await getLintConfig(orgSid, teamName, repoId, schemeId)); + }; + const getSchemeList = async (schemeId?: string | number) => { setSchemesLoading(true); - let res = await getSchemes(orgSid, teamName, curRepo.id, { limit: 1000 }); + let res = await getSchemes(orgSid, teamName, repoId, { limit: 1000 }); res = res.results || []; setSchemes(res); setSchemesLoading(false); @@ -87,9 +97,9 @@ const Schemes = () => { const getSchemeInfo = async (schemeId: string | number) => { if (schemeId) { - const res = await getSchemeBasic(orgSid, teamName, curRepo.id, schemeId); - history.replace(`${getSchemeRouter(orgSid, teamName, curRepo.id, schemeId)}/basic`); + const res = await getSchemeBasic(orgSid, teamName, repoId, schemeId); setSchemeInfo(res); + history.replace(`${getSchemeRouter(orgSid, teamName, repoId, schemeId)}/basic`); } }; @@ -116,7 +126,7 @@ const Schemes = () => { ) : (
{ @@ -162,7 +172,7 @@ const Schemes = () => { history.push(`${getSchemeRouter( orgSid, teamName, - curRepo.id, + repoId, schemeInfo.id, )}/${key}`); }} @@ -172,7 +182,8 @@ const Schemes = () => { orgSid={orgSid} teamName={teamName} data={schemeInfo} - repoId={curRepo.id} + lintConf={lintConfig} + repoId={repoId} tags={tags} languages={languages} callback={(data: any) => { @@ -193,19 +204,23 @@ const Schemes = () => { { + setLintConfig(data); + }} /> @@ -213,7 +228,7 @@ const Schemes = () => { @@ -224,7 +239,7 @@ const Schemes = () => { @@ -239,7 +254,7 @@ const Schemes = () => { tags={tags} languages={languages} schemeList={schemes} - repoId={curRepo.id} + repoId={repoId} templates={templates} onClose={() => { setVisible(false); @@ -251,7 +266,7 @@ const Schemes = () => { setPullModalVsb(false)} diff --git a/web/packages/tca-analysis/src/services/repos.ts b/web/packages/tca-analysis/src/services/repos.ts index 63299b96c..48db023c3 100644 --- a/web/packages/tca-analysis/src/services/repos.ts +++ b/web/packages/tca-analysis/src/services/repos.ts @@ -87,7 +87,7 @@ export const postRepoMembers = (orgSid: string, teamName: string, repoId: any, d * @param username * @returns */ -export const delRepoMembers = (orgSid: string, teamName: string, repoId: any, username: string) => del(`${getMainBaseURL(orgSid, teamName)}/repos/${repoId}/memberconf/1/${username}`); +export const delRepoMembers = (orgSid: string, teamName: string, repoId: any, username: string) => del(`${getMainBaseURL(orgSid, teamName)}/repos/${repoId}/memberconf/1/${username}/`); /** * 删除代码库 diff --git a/web/packages/tca-analysis/src/utils/index.ts b/web/packages/tca-analysis/src/utils/index.ts index 1b8d86764..dd22f39ca 100644 --- a/web/packages/tca-analysis/src/utils/index.ts +++ b/web/packages/tca-analysis/src/utils/index.ts @@ -7,7 +7,7 @@ import Moment from 'moment'; import qs from 'qs'; import { message } from 'coding-oa-uikit'; -import { get, uniqBy, throttle, isEmpty } from 'lodash'; +import { get, uniqBy, throttle } from 'lodash'; import { LOGIN_SERVER_API } from '@plat/api'; import { useStateStore } from '@src/context/store'; import { getMetaContent } from '@tencent/micro-frontend-shared/util'; @@ -93,16 +93,3 @@ export const reLogin = throttle((content?: string) => { }, 1000); export const isEnableManage = () => getMetaContent('ENABLE_MANAGE', process.env.ENABLE_MANAGE) === 'TRUE'; - -/** - * 根据代码库地址获取代码库名称 - * @param url - 代码库地址 - * @returns - */ -export const getRepoName = (url: string) => { - if (isEmpty(url)) { - return ''; - } - const urls = url.split('/'); - return urls?.[urls.length - 1]; -}; diff --git a/web/packages/tca-layout/src/constant/node.ts b/web/packages/tca-layout/src/constant/node.ts index 95ccc7da5..8489e7d2b 100644 --- a/web/packages/tca-layout/src/constant/node.ts +++ b/web/packages/tca-layout/src/constant/node.ts @@ -25,6 +25,8 @@ export const STATE_CHOICES = { [STATE_ENUM.FREE]: '空闲', }; +export const STATE_OPTIONS = generateOptions(STATE_CHOICES, true); + export const TAG_TYPE_ENUM = { PUBLIC: 1, PRIVATE: 2, @@ -74,6 +76,18 @@ export const getNodeSearchFields = (tagOptions: any[]): SearchFormField[] => [{ type: 'string', formType: 'input', placeholder: '负责人', +}, { + name: 'state', + label: '状态', + type: 'number', + formType: 'select', + options: STATE_OPTIONS, +}, { + name: 'enabled', + label: '可用性', + type: 'number', + formType: 'select', + options: STATUS_OPTIONS, }, { name: 'exec_tags', label: '所属标签', diff --git a/web/packages/tca-layout/src/modules/team/components/workspace/index.tsx b/web/packages/tca-layout/src/modules/team/components/workspace/index.tsx index 861a69c29..8c869c5be 100644 --- a/web/packages/tca-layout/src/modules/team/components/workspace/index.tsx +++ b/web/packages/tca-layout/src/modules/team/components/workspace/index.tsx @@ -6,6 +6,7 @@ import { Tabs, Table } from 'coding-oa-uikit'; import AlignLeft from 'coding-oa-uikit/lib/icon/AlignLeft'; import Clock from 'coding-oa-uikit/lib/icon/Clock'; import { formatDateTime } from '@tencent/micro-frontend-shared/util'; +import { getRepoName } from '@tencent/micro-frontend-shared/tca/util'; // 项目内 import { DEFAULT_PAGER } from '@src/constant'; @@ -89,7 +90,7 @@ const Workspace = () => { record.id, )} > - {name} + {getRepoName(record)}

{record.scm_url}

diff --git a/web/packages/tca-manage/package.json b/web/packages/tca-manage/package.json index c0740a8c3..0efd2138e 100644 --- a/web/packages/tca-manage/package.json +++ b/web/packages/tca-manage/package.json @@ -41,9 +41,10 @@ "react-copy-to-clipboard": "^5.0.4", "react-dom": "^17.0.2", "react-i18next": "^11.17.3", + "react-markdown": "7.0.1", "react-redux": "^7.2.5", "react-router-dom": "^5.3.0", - "tdesign-react": "0.36.4", + "tdesign-react": "0.42.3", "universal-cookie": "^4.0.4" }, "devDependencies": { diff --git a/web/packages/tca-manage/public/locales/en-US/translation.json b/web/packages/tca-manage/public/locales/en-US/translation.json index 299fa21f2..4567b65a6 100644 --- a/web/packages/tca-manage/public/locales/en-US/translation.json +++ b/web/packages/tca-manage/public/locales/en-US/translation.json @@ -95,6 +95,21 @@ "所属工具": "所属工具", "类别": "类别", "语言": "语言", + "失效": "失效", + "未知": "未知", + "规则详情": "规则详情", + "规则定制配置": "规则定制配置", + "严重级别": "严重级别", + "规则参数": "规则参数", + "规则初始详情": "规则初始详情", + "展示名称": "展示名称", + "（私有）": "（私有）", + "规则概述": "规则概述", + "责任人": "责任人", + "规则状态": "规则状态", + "适用语言": "适用语言", + "解决方法": "解决方法", + "详细描述": "详细描述", "归档分析记录列表": "归档分析记录列表", "取消任务成功": "取消任务成功", "取消任务": "取消任务", @@ -143,6 +158,7 @@ "最近修改时间": "最近修改时间", "最近访问时间": "最近访问时间", "名称": "名称", + "可用性": "可用性", "标签": "标签", "全部": "全部", "更新节点失败": "更新节点失败", @@ -155,7 +171,6 @@ "批量配置工具": "批量配置工具", "关注人": "关注人", "已添加标签": "已添加标签", - "展示名称": "展示名称", "展示名称为必填项": "展示名称为必填项", "标签类型": "标签类型", "标签类型为必选项": "标签类型为必选项", diff --git a/web/packages/tca-manage/public/locales/zh-CN/translation.json b/web/packages/tca-manage/public/locales/zh-CN/translation.json index 299fa21f2..4567b65a6 100644 --- a/web/packages/tca-manage/public/locales/zh-CN/translation.json +++ b/web/packages/tca-manage/public/locales/zh-CN/translation.json @@ -95,6 +95,21 @@ "所属工具": "所属工具", "类别": "类别", "语言": "语言", + "失效": "失效", + "未知": "未知", + "规则详情": "规则详情", + "规则定制配置": "规则定制配置", + "严重级别": "严重级别", + "规则参数": "规则参数", + "规则初始详情": "规则初始详情", + "展示名称": "展示名称", + "（私有）": "（私有）", + "规则概述": "规则概述", + "责任人": "责任人", + "规则状态": "规则状态", + "适用语言": "适用语言", + "解决方法": "解决方法", + "详细描述": "详细描述", "归档分析记录列表": "归档分析记录列表", "取消任务成功": "取消任务成功", "取消任务": "取消任务", @@ -143,6 +158,7 @@ "最近修改时间": "最近修改时间", "最近访问时间": "最近访问时间", "名称": "名称", + "可用性": "可用性", "标签": "标签", "全部": "全部", "更新节点失败": "更新节点失败", @@ -155,7 +171,6 @@ "批量配置工具": "批量配置工具", "关注人": "关注人", "已添加标签": "已添加标签", - "展示名称": "展示名称", "展示名称为必填项": "展示名称为必填项", "标签类型": "标签类型", "标签类型为必选项": "标签类型为必选项", diff --git a/web/packages/tca-manage/src/constant/node.ts b/web/packages/tca-manage/src/constant/node.ts index 0a23c3580..1ea9fe628 100644 --- a/web/packages/tca-manage/src/constant/node.ts +++ b/web/packages/tca-manage/src/constant/node.ts @@ -15,6 +15,9 @@ export const STATE_CHOICES = { [NodeStateEnum.FREE]: '空闲', }; +/** 节点工作状态 options */ +export const NODE_STATE_OPTIONS = generateOptions(STATE_CHOICES, true); + /** 节点可用状态 */ export enum NodeEnabledEnum { /** 不可用 */ diff --git a/web/packages/tca-manage/src/constant/tool.ts b/web/packages/tca-manage/src/constant/tool.ts index ebc678d17..da101e0db 100644 --- a/web/packages/tca-manage/src/constant/tool.ts +++ b/web/packages/tca-manage/src/constant/tool.ts @@ -104,3 +104,15 @@ export const TOOL_STATUS_CHOICES = { }; export const TOOL_STATUS_OPTIONS = generateOptions(TOOL_STATUS_CHOICES); + +export enum ToolScopeEnum { + PUBLIC = 0, + PRIVATE = 1, +} + +export const TOOL_SCOPE_CHOICES = { + [ToolScopeEnum.PUBLIC]: '公开', + [ToolScopeEnum.PRIVATE]: '私有', +}; + +export const TOOL_SCOPE_OPTIONS = generateOptions(TOOL_SCOPE_CHOICES); diff --git a/web/packages/tca-manage/src/modules/components/rule-table.tsx b/web/packages/tca-manage/src/modules/components/rule-table/index.tsx similarity index 81% rename from web/packages/tca-manage/src/modules/components/rule-table.tsx rename to web/packages/tca-manage/src/modules/components/rule-table/index.tsx index 98c02128e..1c1a019e9 100644 --- a/web/packages/tca-manage/src/modules/components/rule-table.tsx +++ b/web/packages/tca-manage/src/modules/components/rule-table/index.tsx @@ -1,16 +1,14 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import Table from '@tencent/micro-frontend-shared/tdesign-component/table'; import { Tag } from 'tdesign-react'; - -import { useURLParams } from '@tencent/micro-frontend-shared/hooks'; import { get, concat } from 'lodash'; +import Table from '@tencent/micro-frontend-shared/tdesign-component/table'; +import { useURLParams } from '@tencent/micro-frontend-shared/hooks'; // 项目内 import { getToolRouter } from '@plat/util'; import { RuleSeverityEnum, RuleSeverityInvertEnum, RULE_SEVERITY_CHOICES } from '@src/constant'; - -// const { Column } = Table; +import RuleDetailDrawer from './rule-detail-drawer'; interface RuleTableProps { /** 表格数据 */ @@ -45,6 +43,8 @@ const RuleTable = ({ editRule = null }: RuleTableProps) => { const { t } = useTranslation(); const { currentPage, pageSize } = useURLParams(); + const [ruleDetailVisible, setRuleDetailVisible] = useState(false); + const [ruleDetail, setRuleDetail] = useState({}); const onSelectChange = (selectedKeys: any) => { setSelectedRowKeys(selectedKeys); @@ -79,7 +79,10 @@ const RuleTable = ({ title: t('规则名称'), width: 300, cell: ({ row }: any) => (<> - {get(row, indexs.rule_display_name)} + { + setRuleDetail(row); + setRuleDetailVisible(true); + }}>{get(row, indexs.rule_display_name)} {get(row, indexs.rule_title) &&

{get(row, indexs.rule_title)}

} ), }, @@ -114,7 +117,7 @@ const RuleTable = ({ colKey: indexs.rule_support_language, title: t('语言'), width: 100, - cell: ({ row }: any) => (get(row, indexs.rule_support_language).join() || '通用'), + cell: ({ row }: any) => (get(row, indexs.rule_support_language)?.join() || '通用'), }, { colKey: 'status', @@ -150,19 +153,26 @@ const RuleTable = ({ }; return ( - + <> + setRuleDetailVisible(false)} + /> +
+ ); }; diff --git a/web/packages/tca-manage/src/modules/components/rule-table/rule-detail-drawer.tsx b/web/packages/tca-manage/src/modules/components/rule-table/rule-detail-drawer.tsx new file mode 100644 index 000000000..349311e10 --- /dev/null +++ b/web/packages/tca-manage/src/modules/components/rule-table/rule-detail-drawer.tsx @@ -0,0 +1,132 @@ +import React, { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { get, isEmpty } from 'lodash'; +import { Drawer, Tag, Divider } from 'tdesign-react'; +import ReactMarkdown from 'react-markdown'; + +import { getToolRouter } from '@plat/util'; +import { RuleSeverityEnum, RuleSeverityInvertEnum, RULE_SEVERITY_CHOICES } from '@src/constant'; +import { getRuleDetails } from '@src/services/packages'; +import s from './style.scss'; + +interface RuleDetailDrawerProps { + ruleDetail: any; + visible: boolean; + handleClose: () => void; +} + +const RuleDetailDrawer = ({ ruleDetail, visible, handleClose }: RuleDetailDrawerProps) => { + const { t } = useTranslation(); + const [ruleInfo, setRuleInfo] = useState({}); + const toolInfo = ruleDetail?.checktool; + + useEffect(() => { + if (visible && ruleDetail.id) { + if (isEmpty(ruleDetail?.checkrule)) { + setRuleInfo(ruleDetail); + } else { + getRuleDetails(ruleDetail.checkrule.id).then((res: any) => { + setRuleInfo(res); + }); + } + } + }, [visible]); + + const getRuleStatesTag = () => { + switch (get(ruleInfo, 'disable')) { + case false: + return {t('活跃')}; + case true: + return {t('失效')}; + default: + return {t('未知')}; + } + }; + + return ( + + {!isEmpty(ruleDetail?.checkrule) && <> + {t('规则定制配置')} +
+
+ {t('严重级别')} + + + {RULE_SEVERITY_CHOICES[get(ruleDetail, 'severity') as RuleSeverityEnum]} + + +
+
+ {t('规则参数')} + {get(ruleDetail, 'rule_params')} +
+
+ {t('规则初始详情')} + } +
+
+ {t('规则名称')} + {get(ruleInfo, 'real_name')} +
+
+ {t('展示名称')} + {get(ruleInfo, 'display_name')} +
+ +
+ {t('规则概述')} + {get(ruleInfo, 'rule_title')} +
+
+ {t('责任人')} + {get(ruleInfo, 'owner')} +
+
+ {t('规则状态')} + {getRuleStatesTag()} +
+
+ {t('适用语言')} + {get(ruleInfo, 'languages')?.join(', ') || '通用'} +
+
+ {t('严重级别')} + + + {RULE_SEVERITY_CHOICES[get(ruleInfo, 'severity') as RuleSeverityEnum]} + + +
+
+ {t('规则参数')} + {get(ruleInfo, 'rule_params')} +
+
+ {t('解决方法')} + {get(ruleInfo, 'solution')} +
+
+ {t('详细描述')} +
+ {get(ruleInfo, 'checkruledesc.desc', '')} +
+
+
+ + ); +}; + +export default RuleDetailDrawer; diff --git a/web/packages/tca-manage/src/modules/components/rule-table/style.scss b/web/packages/tca-manage/src/modules/components/rule-table/style.scss new file mode 100644 index 000000000..d7ea2c1fd --- /dev/null +++ b/web/packages/tca-manage/src/modules/components/rule-table/style.scss @@ -0,0 +1,25 @@ +.rule-info { + + padding: 10px; + + span { + word-wrap: break-word; + } + + .row { + display: flex; + margin-bottom: 20px; + + .col { + flex: 0 0 114px; + color: #8592a5; + } + + .desc { + width: 334px; + word-wrap: break-word; + white-space: pre-wrap; + } + } +} + \ No newline at end of file diff --git a/web/packages/tca-manage/src/modules/process/index.tsx b/web/packages/tca-manage/src/modules/process/index.tsx index a3e6c99a5..e752fa79d 100644 --- a/web/packages/tca-manage/src/modules/process/index.tsx +++ b/web/packages/tca-manage/src/modules/process/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { omit, get } from 'lodash'; -import { Table, Button, Checkbox, MessagePlugin, Tag, Card } from 'tdesign-react'; +import { Table, Button, Checkbox, MessagePlugin, Tag, Card, Space } from 'tdesign-react'; import { SaveIcon } from 'tdesign-icons-react'; import NodeStatus from '@tencent/micro-frontend-shared/tdesign-component/node-status'; import { formatDateTime, bytesToSize } from '@tencent/micro-frontend-shared/util'; @@ -174,42 +174,50 @@ const Process = () => {
-

{t('节点名称')}

- {name} + {t('节点名称')} + {name}
-

{t('负责人')}

- {manager} + {t('负责人')} + {manager}
-

{t('IP 地址')}

- {addr} + {t('IP 地址')} + {addr}
-

{t('节点状态')}

- + {t('节点状态')} +
-

{t('最近上报心跳')}

- {formatDateTime(nodeInfo.last_beat_time) || '- -'} + {t('最近上报心跳')} + {formatDateTime(nodeInfo.last_beat_time) || '- -'}
-

{t('所属标签')}

- {nodeInfo.exec_tags.map((tag: string) => ( - {tag} - ))} + {t('所属标签')} + + + {nodeInfo.exec_tags.map((tag: string) => ( + {tag} + ))} + +
-

{t('节点配置信息')}

- CPU: {nodestatus?.cpu_usage} % ({nodestatus?.cpu_num}) 核 - - 可用内存: {bytesToSize(nodestatus?.mem_free_space)} / {bytesToSize(nodestatus?.mem_space)} - - - 可用硬盘: {bytesToSize(nodestatus?.hdrive_free_space)} / {bytesToSize(nodestatus?.hdrive_space)} - + {t('节点配置信息')} + + + CPU: {nodestatus?.cpu_usage} % ({nodestatus?.cpu_num}) 核 + + 可用内存: {bytesToSize(nodestatus?.mem_free_space)} / {bytesToSize(nodestatus?.mem_space)} + + + 可用硬盘: {bytesToSize(nodestatus?.hdrive_free_space)} / {bytesToSize(nodestatus?.hdrive_space)} + + +
diff --git a/web/packages/tca-manage/src/modules/process/style.scss b/web/packages/tca-manage/src/modules/process/style.scss index b1dc80ff6..525503ffd 100644 --- a/web/packages/tca-manage/src/modules/process/style.scss +++ b/web/packages/tca-manage/src/modules/process/style.scss @@ -13,7 +13,7 @@ padding: 12px 0; display: flex; color: var(--td-text-color-primary); - h1 { + .title { width: 200px; font-weight: 400; font-size: 14px; @@ -22,7 +22,7 @@ line-height: 22px; margin: 0; } - span { + .info { margin-left: 24px; font-size: 14px; line-height: 1.5; @@ -30,13 +30,5 @@ white-space: nowrap; text-overflow: ellipsis; } - i { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--td-success-color-5); - margin-right: 5px; - } } } diff --git a/web/packages/tca-manage/src/plat/common/modules/nodes/constants.ts b/web/packages/tca-manage/src/plat/common/modules/nodes/constants.ts index ffc290195..0f53a05e4 100644 --- a/web/packages/tca-manage/src/plat/common/modules/nodes/constants.ts +++ b/web/packages/tca-manage/src/plat/common/modules/nodes/constants.ts @@ -1,5 +1,6 @@ import { t } from '@tencent/micro-frontend-shared/i18n'; import { SearchFormField } from '@tencent/micro-frontend-shared/tdesign-component/search'; +import { NODE_ENABLED_OPTIONS, NODE_STATE_OPTIONS } from '@src/constant/node'; export const getNodeSearchFields = (tagOptions: any[]): SearchFormField[] => [{ name: 'name', @@ -13,6 +14,18 @@ export const getNodeSearchFields = (tagOptions: any[]): SearchFormField[] => [{ type: 'string', formType: 'input', placeholder: t('负责人'), +}, { + name: 'state', + label: t('状态'), + type: 'string', + formType: 'select', + options: NODE_STATE_OPTIONS, +}, { + name: 'enabled', + label: t('可用性'), + type: 'string', + formType: 'select', + options: NODE_ENABLED_OPTIONS, }, { name: 'exec_tags', label: t('标签'), diff --git a/web/yarn.lock b/web/yarn.lock index f04826520..cffdc7439 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -3428,6 +3428,11 @@ dependencies: "@types/node" "*" +"@types/sortablejs@^1.10.7": + version "1.15.0" + resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.15.0.tgz#695e481752e2a0a311c5e73b51d5f666fc202f93" + integrity sha512-qrhtM7M41EhH4tZQTNw2/RJkxllBx3reiJpTbgWCM2Dx0U1sZ6LwKp9lfNln9uqE26ZMKUaPEYaD4rzvOWYtZw== + "@types/source-list-map@*": version "0.1.2" resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" @@ -3445,6 +3450,11 @@ resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310" integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ== +"@types/tinycolor2@^1.4.3": + version "1.4.3" + resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.3.tgz#ed4a0901f954b126e6a914b4839c77462d56e706" + integrity sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ== + "@types/uglify-js@*": version "3.16.0" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.16.0.tgz#2cf74a0e6ebb6cd54c0d48e509d5bd91160a9602" @@ -3457,6 +3467,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== +"@types/validator@^13.1.3": + version "13.7.8" + resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.7.8.tgz#1340c85e51d5deee03df95721c4ff5c28dae5ff8" + integrity sha512-HKayOBe2ThTcQykiycCQYf70Fvo0WaJEJdxxNjvX3D/mnC0IUAhMe6wsIb1wwthmjiqBAR3qGkEzHYx74MS2yw== + "@types/validator@^13.7.3": version "13.7.5" resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.7.5.tgz#96ad8c50d441c8c86a639efccc4d8d9d5d9cd5ea" @@ -5521,10 +5536,10 @@ dateformat@^3.0.0: resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== -dayjs@~1.10.8: - version "1.10.8" - resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.8.tgz#267df4bc6276fcb33c04a6735287e3f429abec41" - integrity sha512-wbNwDfBHHur9UOzNUjeKUOJ0fCb0a52Wx0xInmQ7Y8FstyajiV1NmK1e00cxsr9YrE9r7yAChE0VvpuY5Rnlow== +dayjs@~1.11.4: + version "1.11.5" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93" + integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA== debounce-fn@^4.0.0: version "4.0.0" @@ -10876,11 +10891,35 @@ react-is@^17.0.0, react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-markdown@7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-7.0.1.tgz#c7365fcd7d1813b3ae68f2200e8f92d47d865627" + integrity sha512-pthNPaoiwg0q7hukoE04F2ENwSzijIlWHJ4UMs/96LUe/G/P3FnbP4qHzx3FoNqae+2SqDG8vzniTLnJDeWneg== + dependencies: + "@types/hast" "^2.0.0" + "@types/unist" "^2.0.0" + comma-separated-tokens "^2.0.0" + prop-types "^15.0.0" + property-information "^6.0.0" + react-is "^17.0.0" + remark-parse "^10.0.0" + remark-rehype "^9.0.0" + space-separated-tokens "^2.0.0" + style-to-object "^0.3.0" + unified "^10.0.0" + unist-util-visit "^4.0.0" + vfile "^5.0.0" + react-markdown@^7.0.1: version "7.1.2" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-7.1.2.tgz#c9fa9d1c87e24529f028e1cdf731e81ccdd8e547" @@ -12336,34 +12375,37 @@ tar@^6.1.0, tar@^6.1.11, tar@^6.1.2: mkdirp "^1.0.3" yallist "^4.0.0" -tdesign-icons-react@~0.1.0: - version "0.1.5" - resolved "https://registry.yarnpkg.com/tdesign-icons-react/-/tdesign-icons-react-0.1.5.tgz#805a0b20e4f800efd4afab669f110463d31d82a8" - integrity sha512-ax0RDOsq1CJ0eab20EC5OsDkQiAr+03Q7pwfh+D6opvdLNOgyaNfPSbLxoUwg7q6sfuvnngbTas7lPTxfpZ4ig== +tdesign-icons-react@^0.1.6: + version "0.1.6" + resolved "https://registry.yarnpkg.com/tdesign-icons-react/-/tdesign-icons-react-0.1.6.tgz#0c0c1aded693975844c1ea443f750d3b7acbbb98" + integrity sha512-YaEPGk4buBh+TRGMciJQBbGhHlYeBBoJvfZxnN4CFohiU4uhg07jGKVbZODS3M23+GdTvbGYa6q2Es5+4ACn3Q== dependencies: "@babel/runtime" "^7.16.5" classnames "^2.2.6" -tdesign-react@0.36.4: - version "0.36.4" - resolved "https://registry.yarnpkg.com/tdesign-react/-/tdesign-react-0.36.4.tgz#370a377337cc9307546192c0b58e66e16fc0d17a" - integrity sha512-nDjykBaaUBJBPzffDQiUoe5ozuldXafkSCnDoKHFpnF6c+/duy290yB17rxqxnjrbrXB3b/81CwAbcVfwyYh9g== +tdesign-react@0.42.3: + version "0.42.3" + resolved "https://registry.yarnpkg.com/tdesign-react/-/tdesign-react-0.42.3.tgz#5e4114ac9b3c65084223c26afd0acf45b334cb83" + integrity sha512-tD4BOxZHP2sz0oEHtdJRxF7rr0Uy1a5qBzpK9zKmx6UOfEhljf6klF5YcjkD5H+NxZ7AeqzB+cHuydzMlfk3IQ== dependencies: "@babel/runtime" "~7.17.2" "@popperjs/core" "~2.11.2" + "@types/sortablejs" "^1.10.7" + "@types/tinycolor2" "^1.4.3" + "@types/validator" "^13.1.3" classnames "~2.3.1" - dayjs "~1.10.8" + dayjs "~1.11.4" hoist-non-react-statics "~3.3.2" lodash "~4.17.15" raf "~3.4.1" + react-is "^18.2.0" react-popper "~2.2.5" react-transition-group "~4.4.1" sortablejs "^1.15.0" - tdesign-icons-react "~0.1.0" + tdesign-icons-react "^0.1.6" tinycolor2 "^1.4.2" tslib "~2.3.1" use-resize-observer "^9.0.2" - uuid "~8.3.2" validator "~13.7.0" temp-dir@^1.0.0: @@ -12930,7 +12972,7 @@ uuid@^3.3.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== -uuid@^8.3.2, uuid@~8.3.2: +uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==