From 0b7b544d4e4adf426eaca0e02930527a7e0ee10d Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Thu, 13 Feb 2025 21:14:11 +0800 Subject: [PATCH] feat: deploy provider category --- .../certificate/CertificateDetailDrawer.tsx | 2 +- .../provider/DeployProviderPicker.tsx | 105 ++++++++++++------ .../workflow/WorkflowRunDetailDrawer.tsx | 2 +- .../components/workflow/node/_SharedNode.tsx | 2 +- ui/src/domain/provider.ts | 92 ++++++++------- ui/src/i18n/locales/en/nls.provider.json | 10 +- ui/src/i18n/locales/zh/nls.provider.json | 10 +- 7 files changed, 145 insertions(+), 78 deletions(-) diff --git a/ui/src/components/certificate/CertificateDetailDrawer.tsx b/ui/src/components/certificate/CertificateDetailDrawer.tsx index 9db04ab6..2cedeb2b 100644 --- a/ui/src/components/certificate/CertificateDetailDrawer.tsx +++ b/ui/src/components/certificate/CertificateDetailDrawer.tsx @@ -35,7 +35,7 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica loading={loading} placement="right" title={`Certificate #${data?.id}`} - width={640} + width={720} onClose={() => setOpen(false)} > diff --git a/ui/src/components/provider/DeployProviderPicker.tsx b/ui/src/components/provider/DeployProviderPicker.tsx index c90debb5..83c0a011 100644 --- a/ui/src/components/provider/DeployProviderPicker.tsx +++ b/ui/src/components/provider/DeployProviderPicker.tsx @@ -1,9 +1,9 @@ -import { memo, useEffect, useRef, useState } from "react"; +import { memo, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; -import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Typography } from "antd"; +import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tabs, Tooltip, Typography } from "antd"; import Show from "@/components/Show"; -import { deployProvidersMap } from "@/domain/provider"; +import { DEPLOY_CATEGORIES, type DeployProvider, deployProvidersMap } from "@/domain/provider"; export type DeployProviderPickerProps = { className?: string; @@ -24,15 +24,26 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele } }, []); - const providers = Array.from(deployProvidersMap.values()); - const filteredProviders = providers.filter((provider) => { - if (keyword) { - const value = keyword.toLowerCase(); - return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value); - } + const [category, setCategory] = useState(DEPLOY_CATEGORIES.ALL); - return true; - }); + const providers = useMemo(() => { + return Array.from(deployProvidersMap.values()) + .filter((provider) => { + if (keyword) { + const value = keyword.toLowerCase(); + return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value); + } + + return true; + }) + .filter((provider) => { + if (category && category !== DEPLOY_CATEGORIES.ALL) { + return provider.category === category; + } + + return true; + }); + }, [keyword, category]); const handleProviderTypeSelect = (value: string) => { onSelect?.(value); @@ -43,29 +54,55 @@ const DeployProviderPicker = ({ className, style, autoFocus, placeholder, onSele setKeyword(e.target.value.trim())} />
- 0} fallback={}> - - {filteredProviders.map((provider, index) => { - return ( - - { - handleProviderTypeSelect(provider.type); - }} - > - - - {t(provider.name)} - - - - ); - })} - - + + ({ + key: key, + label: t(`provider.category.${key}`), + }))} + size="small" + tabBarStyle={{ marginLeft: "-1rem" }} + tabPosition="left" + onChange={(key) => setCategory(key)} + /> + +
+ 0} fallback={}> + + {providers.map((provider, index) => { + return ( + + { + handleProviderTypeSelect(provider.type); + }} + > + + + + {t(provider.name)} + + + + + ); + })} + + +
+
); diff --git a/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx b/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx index 44ee8be8..79eb103c 100644 --- a/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx +++ b/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx @@ -36,7 +36,7 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR loading={loading} placement="right" title={`WorkflowRun #${data?.id}`} - width={640} + width={720} onClose={() => setOpen(false)} > diff --git a/ui/src/components/workflow/node/_SharedNode.tsx b/ui/src/components/workflow/node/_SharedNode.tsx index a7b88e4c..fec24a6a 100644 --- a/ui/src/components/workflow/node/_SharedNode.tsx +++ b/ui/src/components/workflow/node/_SharedNode.tsx @@ -307,7 +307,7 @@ const SharedNodeConfigDrawer = ({ loading={loading} open={open} title={
{node.name}
} - width={640} + width={720} onClose={handleClose} > {children} diff --git a/ui/src/domain/provider.ts b/ui/src/domain/provider.ts index 6f6f01a8..7a6df3f2 100644 --- a/ui/src/domain/provider.ts +++ b/ui/src/domain/provider.ts @@ -219,11 +219,24 @@ export const DEPLOY_PROVIDERS = Object.freeze({ export type DeployProviderType = (typeof DEPLOY_PROVIDERS)[keyof typeof DEPLOY_PROVIDERS]; +export const DEPLOY_CATEGORIES = Object.freeze({ + ALL: "all", + CDN: "cdn", + STORAGE: "storage", + LOADBALANCE: "loadbalance", + FIREWALL: "firewall", + LIVE: "live", + OTHER: "other", +} as const); + +export type DeployCategoryType = (typeof DEPLOY_CATEGORIES)[keyof typeof DEPLOY_CATEGORIES]; + export type DeployProvider = { type: DeployProviderType; name: string; icon: string; provider: AccessProviderType; + category: DeployCategoryType; }; export const deployProvidersMap: Map = new Map( @@ -232,51 +245,52 @@ export const deployProvidersMap: Map [ + [DEPLOY_PROVIDERS.LOCAL, "provider.local", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.SSH, "provider.ssh", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.WEBHOOK, "provider.webhook", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.KUBERNETES_SECRET, "provider.kubernetes.secret", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.ALIYUN_OSS, "provider.aliyun.oss", DEPLOY_CATEGORIES.STORAGE], + [DEPLOY_PROVIDERS.ALIYUN_CDN, "provider.aliyun.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.ALIYUN_DCDN, "provider.aliyun.dcdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.ALIYUN_ESA, "provider.aliyun.esa", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.ALIYUN_CLB, "provider.aliyun.clb", DEPLOY_CATEGORIES.LOADBALANCE], + [DEPLOY_PROVIDERS.ALIYUN_ALB, "provider.aliyun.alb", DEPLOY_CATEGORIES.LOADBALANCE], + [DEPLOY_PROVIDERS.ALIYUN_NLB, "provider.aliyun.nlb", DEPLOY_CATEGORIES.LOADBALANCE], + [DEPLOY_PROVIDERS.ALIYUN_WAF, "provider.aliyun.waf", DEPLOY_CATEGORIES.FIREWALL], + [DEPLOY_PROVIDERS.ALIYUN_LIVE, "provider.aliyun.live", DEPLOY_CATEGORIES.LIVE], + [DEPLOY_PROVIDERS.ALIYUN_CAS_DEPLOY, "provider.aliyun.cas_deploy", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.TENCENTCLOUD_COS, "provider.tencentcloud.cos", DEPLOY_CATEGORIES.STORAGE], + [DEPLOY_PROVIDERS.TENCENTCLOUD_CDN, "provider.tencentcloud.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.TENCENTCLOUD_ECDN, "provider.tencentcloud.ecdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.TENCENTCLOUD_EO, "provider.tencentcloud.eo", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.TENCENTCLOUD_CLB, "provider.tencentcloud.clb", DEPLOY_CATEGORIES.LOADBALANCE], + [DEPLOY_PROVIDERS.TENCENTCLOUD_CSS, "provider.tencentcloud.css", DEPLOY_CATEGORIES.LIVE], + [DEPLOY_PROVIDERS.TENCENTCLOUD_SSL_DEPLOY, "provider.tencentcloud.ssl_deploy", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.HUAWEICLOUD_CDN, "provider.huaweicloud.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.HUAWEICLOUD_ELB, "provider.huaweicloud.elb", DEPLOY_CATEGORIES.LOADBALANCE], + [DEPLOY_PROVIDERS.BAIDUCLOUD_CDN, "provider.baiducloud.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.VOLCENGINE_TOS, "provider.volcengine.tos", DEPLOY_CATEGORIES.STORAGE], + [DEPLOY_PROVIDERS.VOLCENGINE_CDN, "provider.volcengine.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.VOLCENGINE_DCDN, "provider.volcengine.dcdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.VOLCENGINE_CLB, "provider.volcengine.clb", DEPLOY_CATEGORIES.LOADBALANCE], + [DEPLOY_PROVIDERS.VOLCENGINE_LIVE, "provider.volcengine.live", DEPLOY_CATEGORIES.LIVE], + [DEPLOY_PROVIDERS.QINIU_CDN, "provider.qiniu.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.QINIU_PILI, "provider.qiniu.pili", DEPLOY_CATEGORIES.LIVE], + [DEPLOY_PROVIDERS.DOGECLOUD_CDN, "provider.dogecloud.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.BYTEPLUS_CDN, "provider.byteplus.cdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.UCLOUD_US3, "provider.ucloud.us3", DEPLOY_CATEGORIES.STORAGE], + [DEPLOY_PROVIDERS.UCLOUD_UCDN, "provider.ucloud.ucdn", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.AWS_CLOUDFRONT, "provider.aws.cloudfront", DEPLOY_CATEGORIES.CDN], + [DEPLOY_PROVIDERS.BAOTAPANEL_SITE, "provider.baotapanel.site", DEPLOY_CATEGORIES.OTHER], + [DEPLOY_PROVIDERS.EDGIO_APPLICATIONS, "provider.edgio.applications", DEPLOY_CATEGORIES.OTHER], + ].map(([type, name, category]) => [ type, { type: type as DeployProviderType, name: name, icon: accessProvidersMap.get(type.split("-")[0])!.icon, provider: type.split("-")[0] as AccessProviderType, + category: category as DeployCategoryType, }, ]) ); diff --git a/ui/src/i18n/locales/en/nls.provider.json b/ui/src/i18n/locales/en/nls.provider.json index 21c8cd81..e3c84072 100644 --- a/ui/src/i18n/locales/en/nls.provider.json +++ b/ui/src/i18n/locales/en/nls.provider.json @@ -67,5 +67,13 @@ "provider.volcengine.live": "Volcengine - Live", "provider.volcengine.tos": "Volcengine - TOS (Tinder Object Storage)", "provider.webhook": "Webhook", - "provider.westcn": "West.cn" + "provider.westcn": "West.cn", + + "provider.category.all": "All", + "provider.category.cdn": "CDN", + "provider.category.storage": "Storage", + "provider.category.loadbalance": "Load Balance", + "provider.category.firewall": "Firewall", + "provider.category.live": "Live", + "provider.category.other": "Other" } diff --git a/ui/src/i18n/locales/zh/nls.provider.json b/ui/src/i18n/locales/zh/nls.provider.json index 8b2d7f3e..ea0bb251 100644 --- a/ui/src/i18n/locales/zh/nls.provider.json +++ b/ui/src/i18n/locales/zh/nls.provider.json @@ -67,5 +67,13 @@ "provider.volcengine.live": "火山引擎 - 视频直播 Live", "provider.volcengine.tos": "火山引擎 - 对象存储 TOS", "provider.webhook": "Webhook", - "provider.westcn": "西部数码" + "provider.westcn": "西部数码", + + "provider.category.all": "全部", + "provider.category.cdn": "CDN", + "provider.category.storage": "存储", + "provider.category.loadbalance": "负载均衡", + "provider.category.firewall": "防火墙", + "provider.category.live": "直播", + "provider.category.other": "其他" }