From f0009ae3aed5500484ae95cbc9f81c32fb96ccdb Mon Sep 17 00:00:00 2001 From: zhujingyang <72259332+zjy365@users.noreply.github.com> Date: Fri, 3 Feb 2023 11:18:28 +0800 Subject: [PATCH] fix(desktop): blinking delete dialog (#2486) --- desktop/frontend/public/iconfont/iconfont.js | 2 +- .../src/applications/infra/infra_share.ts | 4 +- .../applications/pgsql/add_page.module.scss | 5 +- .../src/applications/pgsql/add_page.tsx | 12 +- .../src/applications/pgsql/clusterInfo.tsx | 4 +- .../components/delete_dialog.module.scss | 5 +- .../pgsql/components/delete_dialog.tsx | 6 +- .../pgsql/components/drawer.module.scss | 2 +- .../pgsql/components/events_dialog.tsx | 9 +- .../applications/pgsql/front_page.module.scss | 5 +- .../src/applications/pgsql/front_page.tsx | 108 +++++++++--------- .../src/applications/pgsql/pgsql_common.scss | 6 +- .../src/applications/pgsql/pgsql_common.ts | 2 +- .../src/applications/pgsql/pgsql_status.tsx | 10 +- desktop/frontend/src/mock/infra.ts | 4 +- desktop/frontend/src/pages/_app.tsx | 10 +- 16 files changed, 103 insertions(+), 91 deletions(-) diff --git a/desktop/frontend/public/iconfont/iconfont.js b/desktop/frontend/public/iconfont/iconfont.js index 48dbbadce1c..73e24e2e5e9 100644 --- a/desktop/frontend/public/iconfont/iconfont.js +++ b/desktop/frontend/public/iconfont/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_3859970='',function(o){var a=(a=document.getElementsByTagName("script"))[a.length-1],t=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var c,e,i,l,n,s=function(a,t){t.parentNode.insertBefore(a,t)};if(t&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}c=function(){var a,t=document.createElement("div");t.innerHTML=o._iconfont_svg_string_3859970,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?s(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),c()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=c,l=o.document,n=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,d())})}function d(){n||(n=!0,i())}function m(){try{l.documentElement.doScroll("left")}catch(a){return void setTimeout(m,50)}d()}}(window); \ No newline at end of file +window._iconfont_svg_string_3859970 = '', function (o) { var a = (a = document.getElementsByTagName("script"))[a.length - 1], t = a.getAttribute("data-injectcss"), a = a.getAttribute("data-disable-injectsvg"); if (!a) { var c, e, i, l, n, s = function (a, t) { t.parentNode.insertBefore(a, t) }; if (t && !o.__iconfont__svg__cssinject__) { o.__iconfont__svg__cssinject__ = !0; try { document.write("") } catch (a) { console && console.log(a) } } c = function () { var a, t = document.createElement("div"); t.innerHTML = o._iconfont_svg_string_3859970, (t = t.getElementsByTagName("svg")[0]) && (t.setAttribute("aria-hidden", "true"), t.style.position = "absolute", t.style.width = 0, t.style.height = 0, t.style.overflow = "hidden", t = t, (a = document.body).firstChild ? s(t, a.firstChild) : a.appendChild(t)) }, document.addEventListener ? ~["complete", "loaded", "interactive"].indexOf(document.readyState) ? setTimeout(c, 0) : (e = function () { document.removeEventListener("DOMContentLoaded", e, !1), c() }, document.addEventListener("DOMContentLoaded", e, !1)) : document.attachEvent && (i = c, l = o.document, n = !1, d(), l.onreadystatechange = function () { "complete" == l.readyState && (l.onreadystatechange = null, h()) }) } function h () { n || (n = !0, i()) } function d () { try { l.documentElement.doScroll("left") } catch (a) { return void setTimeout(d, 50) } h() } }(window) \ No newline at end of file diff --git a/desktop/frontend/src/applications/infra/infra_share.ts b/desktop/frontend/src/applications/infra/infra_share.ts index 785a0719287..649dfcd9677 100644 --- a/desktop/frontend/src/applications/infra/infra_share.ts +++ b/desktop/frontend/src/applications/infra/infra_share.ts @@ -44,7 +44,7 @@ spec: - roles: [master] count: ${infraForm.masterCount} flavor: ${infraForm.masterType} - image: "ami-09123565dfe16d662" + image: "ami-048280a00d5085dd1" disks: - capacity: ${infraForm.masterDisk} volumeType: ${infraForm.masterDiskType} @@ -54,7 +54,7 @@ spec: - roles: [ node ] count: ${infraForm.nodeCount} flavor: ${infraForm.nodeType} - image: "ami-09123565dfe16d662" + image: "ami-048280a00d5085dd1" disks: - capacity: ${infraForm.nodeDisk} volumeType: ${infraForm.nodeDiskType} diff --git a/desktop/frontend/src/applications/pgsql/add_page.module.scss b/desktop/frontend/src/applications/pgsql/add_page.module.scss index af699f9d631..216c946460c 100644 --- a/desktop/frontend/src/applications/pgsql/add_page.module.scss +++ b/desktop/frontend/src/applications/pgsql/add_page.module.scss @@ -104,9 +104,8 @@ } .loading { - width: 280px !important; - height: 64px; - padding: 0 !important; + width: 260px !important; + padding: 8px 12px !important; border-radius: 16px !important; } diff --git a/desktop/frontend/src/applications/pgsql/add_page.tsx b/desktop/frontend/src/applications/pgsql/add_page.tsx index ab57066aa59..2548b48093e 100644 --- a/desktop/frontend/src/applications/pgsql/add_page.tsx +++ b/desktop/frontend/src/applications/pgsql/add_page.tsx @@ -41,8 +41,8 @@ function AddPage() { cpu: '300', memory: '300' }, - dataBases: [{ name: '', user: '' }], - users: [{ name: '', authority: '' }] + dataBases: [{ name: 'rootdb', user: 'root' }], + users: [{ name: 'root', authority: 'superuser' }] }, reValidateMode: 'onSubmit', mode: 'all' @@ -183,6 +183,7 @@ function AddPage() { control={control} name={`users.${index}.authority`} rules={{ required: true }} + defaultValue="superuser" options={[ { key: 'superuser', content: 'superuser' }, { key: 'createdb', content: 'createdb' }, @@ -238,6 +239,7 @@ function AddPage() { { return { key: i.name, content: i.name }; @@ -314,11 +316,7 @@ function AddPage() {
- - - - - +
diff --git a/desktop/frontend/src/applications/pgsql/clusterInfo.tsx b/desktop/frontend/src/applications/pgsql/clusterInfo.tsx index 86e0d0f859d..d27c28ebe85 100644 --- a/desktop/frontend/src/applications/pgsql/clusterInfo.tsx +++ b/desktop/frontend/src/applications/pgsql/clusterInfo.tsx @@ -129,7 +129,7 @@ export default function ClusterInfo(props: TClusterInfo) { }; return ( -
+ <>
@@ -215,6 +215,6 @@ export default function ClusterInfo(props: TClusterInfo) { } ]} /> -
+ ); } diff --git a/desktop/frontend/src/applications/pgsql/components/delete_dialog.module.scss b/desktop/frontend/src/applications/pgsql/components/delete_dialog.module.scss index 2d7bbe1c57e..e99c76dbd70 100644 --- a/desktop/frontend/src/applications/pgsql/components/delete_dialog.module.scss +++ b/desktop/frontend/src/applications/pgsql/components/delete_dialog.module.scss @@ -54,9 +54,8 @@ } .loading { - width: 280px !important; - height: 64px; - padding: 0 !important; + width: 260px !important; + padding: 8px 12px !important; border-radius: 16px !important; } diff --git a/desktop/frontend/src/applications/pgsql/components/delete_dialog.tsx b/desktop/frontend/src/applications/pgsql/components/delete_dialog.tsx index a5b53ebc2bb..981ed848ff2 100644 --- a/desktop/frontend/src/applications/pgsql/components/delete_dialog.tsx +++ b/desktop/frontend/src/applications/pgsql/components/delete_dialog.tsx @@ -99,11 +99,7 @@ export default function DeletePgsqlDialog(props: DialogComponentProps) {
- - - - - +
diff --git a/desktop/frontend/src/applications/pgsql/components/drawer.module.scss b/desktop/frontend/src/applications/pgsql/components/drawer.module.scss index 346611864e6..97244a7a0f3 100644 --- a/desktop/frontend/src/applications/pgsql/components/drawer.module.scss +++ b/desktop/frontend/src/applications/pgsql/components/drawer.module.scss @@ -31,7 +31,7 @@ background-color: #fff; background-image: url('/images/pgsql/pgsql_bg.png'); background-size: cover; - border-radius: 16px 0px 0px 16px; + border-radius: 8px 0px 0px 0px; } @keyframes drawer-open { diff --git a/desktop/frontend/src/applications/pgsql/components/events_dialog.tsx b/desktop/frontend/src/applications/pgsql/components/events_dialog.tsx index 0dbc23148e8..6fbc1b3facf 100644 --- a/desktop/frontend/src/applications/pgsql/components/events_dialog.tsx +++ b/desktop/frontend/src/applications/pgsql/components/events_dialog.tsx @@ -1,5 +1,6 @@ import { useQuery } from '@tanstack/react-query'; import clsx from 'clsx'; +import Iconfont from 'components/iconfont'; import request from 'services/request'; import useSessionStore from 'stores/session'; import Button from './button'; @@ -35,11 +36,9 @@ export default function PgsqlEventsDialog(props: PgsqlEventsDialog) {
{status}
- +
{items?.length === 0 &&
暂无数据
} diff --git a/desktop/frontend/src/applications/pgsql/front_page.module.scss b/desktop/frontend/src/applications/pgsql/front_page.module.scss index d8ea8659281..8d94f3fb5ed 100644 --- a/desktop/frontend/src/applications/pgsql/front_page.module.scss +++ b/desktop/frontend/src/applications/pgsql/front_page.module.scss @@ -10,7 +10,10 @@ } .empty { - height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; diff --git a/desktop/frontend/src/applications/pgsql/front_page.tsx b/desktop/frontend/src/applications/pgsql/front_page.tsx index 3d45add8966..bfc1dd8c081 100644 --- a/desktop/frontend/src/applications/pgsql/front_page.tsx +++ b/desktop/frontend/src/applications/pgsql/front_page.tsx @@ -27,7 +27,11 @@ function FrontPage() { const [pgsqlStatus, setPgsqlStatus] = useState(''); const { currentApp } = useAppStore(); - const { data: pgsqlLists } = useQuery( + const { + data: pgsqlLists, + isSuccess, + isError + } = useQuery( ['getAllPgsql'], async () => { const res = await request.post('/api/pgsql/getAll', { kubeconfig }); @@ -88,66 +92,68 @@ function FrontPage() {
- {pgsqlLists?.data.items?.length === 0 && ( + {(isError || pgsqlLists?.data?.items?.length === 0) && (
pgsql
当前集群列表为空
点击右上角新建集群按钮,创建一个PostgreSQL集群吧~
)} -
-
-
-
-
名字
-
状态
-
创建时间
-
CPU
-
Memory
-
Size
-
操作
-
-
- {pgsqlLists?.data.items?.map((item: TPgsqlDetail) => { - return ( -
getPgsql(item.metadata.name)} - > -
-
{item.metadata.name}
-
-
- -
-
- {formatTime(item?.metadata?.creationTimestamp, 'YYYY/MM/DD HH:mm:ss')} -
-
{item.spec.resources.requests.cpu}
-
{item.spec.resources.requests.memory}
-
{item.spec.volume.size}
-
- + {isSuccess && pgsqlLists?.data?.items?.length !== 0 && ( +
+
+
+
+
名字
+
状态
+
创建时间
+
CPU
+
Memory
+
Size
+
操作
+
+
+ {pgsqlLists?.data.items?.map((item: TPgsqlDetail) => { + return ( +
getPgsql(item.metadata.name)} + > +
+
{item.metadata.name}
+
+
+ +
+
+ {formatTime(item?.metadata?.creationTimestamp, 'YYYY/MM/DD HH:mm:ss')} +
+
{item.spec.resources.requests.cpu}
+
{item.spec.resources.requests.memory}
+
{item.spec.volume.size}
+
+ +
-
- ); - })} + ); + })} +
-
+ )} openEventDialog(e, pgsqlDetail)} >
-
{pgsqlDetail?.status?.PostgresClusterStatus}
- pgsql +
+ {pgsqlDetail?.status?.PostgresClusterStatus === EPgsqlStatus.Failed + ? 'Failed' + : pgsqlDetail?.status?.PostgresClusterStatus} +
+
); } diff --git a/desktop/frontend/src/mock/infra.ts b/desktop/frontend/src/mock/infra.ts index 1236a518fe2..87d40704a5d 100644 --- a/desktop/frontend/src/mock/infra.ts +++ b/desktop/frontend/src/mock/infra.ts @@ -18,7 +18,7 @@ spec: - roles: [ master ] count: {{ .masterCount }} flavor: {{ .masterType }} - image: "ami-09123565dfe16d662" + image: "ami-048280a00d5085dd1" disks: - capacity: {{.masterDisk}} volumeType: {{.masterDiskType}} @@ -26,7 +26,7 @@ spec: - roles: [ node ] count: {{ .nodeCount }} flavor: {{ .nodeType }} - image: "ami-09123565dfe16d662" + image: "ami-048280a00d5085dd1" disks: - capacity: {{.nodeDisk}} volumeType: {{.nodeDiskType}} diff --git a/desktop/frontend/src/pages/_app.tsx b/desktop/frontend/src/pages/_app.tsx index 84e722d62a8..74aa722c127 100755 --- a/desktop/frontend/src/pages/_app.tsx +++ b/desktop/frontend/src/pages/_app.tsx @@ -4,7 +4,8 @@ import { GriffelRenderer, RendererProvider, SSRProvider, - webLightTheme + webLightTheme, + Theme } from '@fluentui/react-components'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { AppProps } from 'next/app'; @@ -22,13 +23,18 @@ const queryClient = new QueryClient({ type EnhancedAppProps = AppProps & { renderer?: GriffelRenderer }; +const customLightTheme: Theme = { + ...webLightTheme, + colorPaletteRedBorder2: '#ee4161' +}; + function APP({ Component, pageProps, renderer }: EnhancedAppProps) { return ( // 👇 Accepts a renderer from or creates a default one.RendererProvider can provide global styles // Also triggers rehydration a client - +